Adding work to work vts

biome.json

@@ -1,45 +1,45 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.2.6/schema.json",
-	"vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": false },
-	"files": {
-		"ignoreUnknown": false,
-		"includes": ["**", "!**/*.css"]
-	},
-	"formatter": {
-		"enabled": true,
-		"formatWithErrors": false,
-		"indentStyle": "space",
-		"indentWidth": 2,
-		"lineEnding": "lf",
-		"lineWidth": 80,
-		"attributePosition": "auto",
-		"bracketSameLine": false,
-		"bracketSpacing": true,
-		"expand": "auto",
-		"useEditorconfig": true
-	},
-	"linter": { "enabled": true, "rules": { "recommended": true } },
-	"javascript": {
-		"formatter": {
-			"jsxQuoteStyle": "double",
-			"quoteProperties": "asNeeded",
-			"trailingCommas": "es5",
-			"semicolons": "asNeeded",
-			"arrowParentheses": "always",
-			"bracketSameLine": false,
-			"quoteStyle": "double",
-			"attributePosition": "auto",
-			"bracketSpacing": true
-		}
-	},
-	"css": {
-		"parser": { "allowWrongLineComments": true },
-		"formatter": { "enabled": false },
-		"linter": { "enabled": false }
-	},
-	"html": { "formatter": { "selfCloseVoidElements": "always" } },
-	"assist": {
-		"enabled": true,
-		"actions": { "source": { "organizeImports": "on" } }
-	}
+  "$schema": "https://biomejs.dev/schemas/2.2.6/schema.json",
+  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": false },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["**", "!**/*.css", "!src/types/storyblok-components.ts"]
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80,
+    "attributePosition": "auto",
+    "bracketSameLine": false,
+    "bracketSpacing": true,
+    "expand": "auto",
+    "useEditorconfig": true
+  },
+  "linter": { "enabled": true, "rules": { "recommended": true } },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "es5",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "quoteStyle": "double",
+      "attributePosition": "auto",
+      "bracketSpacing": true
+    }
+  },
+  "css": {
+    "parser": { "allowWrongLineComments": true },
+    "formatter": { "enabled": false },
+    "linter": { "enabled": false }
+  },
+  "html": { "formatter": { "selfCloseVoidElements": "always" } },
+  "assist": {
+    "enabled": true,
+    "actions": { "source": { "organizeImports": "on" } }
+  }
 }

package.json

@@ -34,7 +34,7 @@
     "@aws-sdk/client-lambda": "^3.940.0",
     "@gotpop/scripts": "^0.1.7",
     "@gotpop/storyblok": "^0.1.96",
-    "@gotpop/system": "^0.1.275",
+    "@gotpop/system": "^0.1.277",
     "@storyblok/react": "5.4.20",
     "next": "^16.0.7",
     "react": "19.2.0",

public/scripts/view-transitions.js

@@ -0,0 +1,74 @@
+const workPosts = [
+  "blexr",
+  "audio-network",
+  "aetna",
+  "magnum-ice-cream",
+  "coats",
+  "virgin-radio",
+  "many-pets",
+  "hackett-menswear",
+  "discovery",
+  "camelot",
+]
+
+const getTransitionType = (fromUrl, toUrl) => {
+  try {
+    const fromPath = new URL(fromUrl).pathname
+    const toPath = new URL(toUrl).pathname
+
+    const fromMatch = fromPath.match(/^\/work\/(.+)$/)
+    const toMatch = toPath.match(/^\/work\/(.+)$/)
+
+    if (fromMatch && toMatch) {
+      const fromSlug = fromMatch[1]
+      const toSlug = toMatch[1]
+
+      const fromIndex = workPosts.indexOf(fromSlug)
+      const toIndex = workPosts.indexOf(toSlug)
+
+      if (fromIndex !== -1 && toIndex !== -1) {
+        const forwardDistance =
+          (toIndex - fromIndex + workPosts.length) % workPosts.length
+        const backwardDistance =
+          (fromIndex - toIndex + workPosts.length) % workPosts.length
+
+        if (forwardDistance < backwardDistance) {
+          return "post-to-post-forward"
+        }
+        if (backwardDistance < forwardDistance) {
+          return "post-to-post-backward"
+        }
+      }
+
+      return "post-to-post"
+    }
+
+    return null
+  } catch {
+    return null
+  }
+}
+
+const addTransitionType = (event, fromUrl, toUrl) => {
+  if (!event.viewTransition) return
+
+  const type = getTransitionType(fromUrl, toUrl)
+
+  if (type) {
+    event.viewTransition.types.add(type)
+  }
+}
+
+window.addEventListener("pageswap", (event) => {
+  if (!event.activation) return
+
+  addTransitionType(event, window.location.href, event.activation.entry.url)
+})
+
+window.addEventListener("pagereveal", (event) => {
+  const activation = window.navigation?.activation
+
+  if (!activation?.from) return
+
+  addTransitionType(event, activation.from.url, activation.entry.url)
+})

src/app/layout.tsx

@@ -49,6 +49,7 @@ export default function RootLayout({
           content="#1a4a5c"
           media="(prefers-color-scheme: dark)"
         />
+        <script src="/scripts/view-transitions.js" blocking="render" />
       </head>
       <body className={`${inter.variable} ${monaspace.variable} antialiased`}>
         {children}

yarn.lock

@@ -670,10 +670,10 @@
   dependencies:
     "@storyblok/react" "^5.0.0"
 
-"@gotpop/system@^0.1.275":
-  version "0.1.275"
-  resolved "https://npm.pkg.github.com/download/@gotpop/system/0.1.275/e65fa9723606d778cf31022470c0636f0e493d83#e65fa9723606d778cf31022470c0636f0e493d83"
-  integrity sha512-WHGPeJEJT3Xvo7RtPqc5ZZ7O8XZ0RHiR7OR6V2oOx7VQecU8kSn9fv30a6BS6269QE+3/0n/GgFSdalN2mtNlQ==
+"@gotpop/system@^0.1.277":
+  version "0.1.277"
+  resolved "https://npm.pkg.github.com/download/@gotpop/system/0.1.277/acc422ab050b6cd83becbcbbbf710d152d366b4b#acc422ab050b6cd83becbcbbbf710d152d366b4b"
+  integrity sha512-cTbbkTqS6IvgM9dAkSkwZebqomrbitvK6fLBSI2VFWlsBaeuBjWezFaABI6mICfrnRyFGEueR9O1V0dsPK59bw==
   dependencies:
     "@next/font" "^14.2.15"
     motion "^12.23.26"