use global layout for product pages

- configure vite and ts path alias successfully - add tailwind
pupil-labs · Nov 8, 2023 · faa24f3 · faa24f3
1 parent 9a09e19
commit faa24f3
Show file tree

Hide file tree

Showing 16 changed files with 1,335 additions and 212 deletions.
diff --git a/neon/.vitepress/theme/NeonPage.vue → components/ProductPageLayout.vue b/neon/.vitepress/theme/NeonPage.vue → components/ProductPageLayout.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-  import ArrowIcon from "../../../components/ArrowIcon.vue";
-  import Footer from "../../../components/Footer.vue";
+  import ArrowIcon from "./ArrowIcon.vue";
+  import Footer from "./Footer.vue";
 
   import { useData } from "vitepress";
   const { frontmatter } = useData();
@@ -86,7 +86,10 @@
     <div>
       <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <div class="grid col-span-3">
-          <div v-if="fm?.cards" class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div
+            v-if="fm?.cards"
+            class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
+          >
             <div
               v-for="product in fm?.cards"
               :key="product.title"

diff --git a/invisible/.vitepress/config.mts b/invisible/.vitepress/config.mts
@@ -1,164 +1,206 @@
-import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vitepress'
-
-import { config as default_config } from './../../default_config.mts'
-import { theme_config as default_theme_config } from './../../default_config.mts'
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "vitepress";
 
+import { config as default_config } from "./../../default_config.mts";
+import { theme_config as default_theme_config } from "./../../default_config.mts";
 
 let theme_config_additions = {
   nav: [
-    { text: 'Getting Started', link: '/getting-started/first-recording/' },
-    { text: 'General', link: '/general/technical-overview/' },
-    { text: 'Data Collection', link: '/data-collection/' },
-    { text: 'Pupil Cloud', link: '/pupil-cloud/' },
-    { text: 'Real-Time API', link: '/real-time-api/tutorials/' },
+    { text: "Getting Started", link: "/getting-started/first-recording/" },
+    { text: "General", link: "/general/technical-overview/" },
+    { text: "Data Collection", link: "/data-collection/" },
+    { text: "Pupil Cloud", link: "/pupil-cloud/" },
+    { text: "Real-Time API", link: "/real-time-api/tutorials/" },
   ],
 
   sidebar: {
     "/getting-started/": [
       {
-        text: 'Getting Started',
+        text: "Getting Started",
         items: [
-          { text: 'Your first Recording', link: '/getting-started/first-recording/' },
-          { text: 'Understand the Ecosystem', link: '/getting-started/understand-the-ecosystem/' }
-        ]
-      }
+          {
+            text: "Your first Recording",
+            link: "/getting-started/first-recording/",
+          },
+          {
+            text: "Understand the Ecosystem",
+            link: "/getting-started/understand-the-ecosystem/",
+          },
+        ],
+      },
     ],
     "/general/": [
       {
-        text: 'Pupil Invisible',
+        text: "Pupil Invisible",
         items: [
-          { text: 'Technical Overview', link: '/general/technical-overview/' },
-          { text: 'Exchange Lenses', link: '/general/exchange-lenses/' },
-          { text: 'Cleaning & Disinfecting', link: '/general/clean-and-disinfect/' },
-          { text: 'Head-Strap', link: '/general/attach-the-head-strap/' },
-        ]
+          { text: "Technical Overview", link: "/general/technical-overview/" },
+          { text: "Exchange Lenses", link: "/general/exchange-lenses/" },
+          {
+            text: "Cleaning & Disinfecting",
+            link: "/general/clean-and-disinfect/",
+          },
+          { text: "Head-Strap", link: "/general/attach-the-head-strap/" },
+        ],
       },
       {
-        text: 'Companion Device',
+        text: "Companion Device",
         items: [
-          { text: 'Compatible Devices', link: '/general/compatible-devices/' },
-          { text: 'Using a USB Hub', link: '/general/using-a-usb-hub/' },
-
-        ]
+          { text: "Compatible Devices", link: "/general/compatible-devices/" },
+          { text: "Using a USB Hub", link: "/general/using-a-usb-hub/" },
+        ],
       },
       {
-        text: 'Recordings',
+        text: "Recordings",
         items: [
-          { text: 'Overview', link: '/general/recordings/' },
-          { text: 'Data Streams', link: '/general/data-streams/' },
-          { text: 'Data Format', link: '/general/data-format/' },
-
-        ]
+          { text: "Overview", link: "/general/recordings/" },
+          { text: "Data Streams", link: "/general/data-streams/" },
+          { text: "Data Format", link: "/general/data-format/" },
+        ],
       },
       {
-        text: 'Additional Data',
+        text: "Additional Data",
         items: [
-          { text: 'Events', link: '/general/events/' },
-          { text: 'Wearers', link: '/general/wearers/' },
-          { text: 'Templates', link: '/general/templates/' },
-
-        ]
-      }
+          { text: "Events", link: "/general/events/" },
+          { text: "Wearers", link: "/general/wearers/" },
+          { text: "Templates", link: "/general/templates/" },
+        ],
+      },
     ],
     "/data-collection/": [
       {
-        text: 'Tutorials',
+        text: "Tutorials",
         items: [
-          { text: 'Offset Correction', link: '/data-collection/offset-correction/' },
-        ]
+          {
+            text: "Offset Correction",
+            link: "/data-collection/offset-correction/",
+          },
+        ],
       },
       {
-        text: 'Software & Integrations',
+        text: "Software & Integrations",
         items: [
-          { text: 'Monitor App', link: '/data-collection/monitor-app/' },
-          { text: 'Lab Streaming Layer', link: '/data-collection/lab-streaming-layer/' },
+          { text: "Monitor App", link: "/data-collection/monitor-app/" },
+          {
+            text: "Lab Streaming Layer",
+            link: "/data-collection/lab-streaming-layer/",
+          },
           // { text: 'PsychoPy', link: '/data-collection/psychopy/' },
-        ]
+        ],
       },
       {
-        text: 'How-To Guides',
+        text: "How-To Guides",
         items: [
-          { text: 'Transfer Recordings via USB', link: '/data-collection/transfer-recordings-via-usb/' },
-          { text: 'Time Synchronization', link: '/data-collection/time-synchronization/' },
-        ]
+          {
+            text: "Transfer Recordings via USB",
+            link: "/data-collection/transfer-recordings-via-usb/",
+          },
+          {
+            text: "Time Synchronization",
+            link: "/data-collection/time-synchronization/",
+          },
+        ],
       },
-      { text: 'Troubleshooting', link: '/data-collection/troubleshooting/' },
+      { text: "Troubleshooting", link: "/data-collection/troubleshooting/" },
     ],
     "/pupil-cloud/": [
       {
-        text: 'Tutorials',
+        text: "Tutorials",
         items: [
-          { text: 'Analysis in Pupil Coud', link: '/pupil-cloud/tutorials/' },
-        ]
+          { text: "Analysis in Pupil Coud", link: "/pupil-cloud/tutorials/" },
+        ],
       },
       {
-        text: 'General',
+        text: "General",
         items: [
-          { text: 'Projects', link: '/pupil-cloud/projects/' },
-          { text: 'Workspaces', link: '/pupil-cloud/workspaces/' },
-        ]
+          { text: "Projects", link: "/pupil-cloud/projects/" },
+          { text: "Workspaces", link: "/pupil-cloud/workspaces/" },
+        ],
       },
       {
-        text: 'Enrichments',
+        text: "Enrichments",
         items: [
-          { text: 'Overview', link: '/pupil-cloud/enrichments/' },
-          { text: 'Reference Image Mapper', link: '/pupil-cloud/enrichments/reference-image-mapper/' },
-          { text: 'Marker Mapper', link: '/pupil-cloud/enrichments/marker-mapper/' },
-          { text: 'Face Mapper', link: '/pupil-cloud/enrichments/face-mapper/' },
-        ]
+          { text: "Overview", link: "/pupil-cloud/enrichments/" },
+          {
+            text: "Reference Image Mapper",
+            link: "/pupil-cloud/enrichments/reference-image-mapper/",
+          },
+          {
+            text: "Marker Mapper",
+            link: "/pupil-cloud/enrichments/marker-mapper/",
+          },
+          {
+            text: "Face Mapper",
+            link: "/pupil-cloud/enrichments/face-mapper/",
+          },
+        ],
       },
       {
-        text: 'Visualizations',
+        text: "Visualizations",
         items: [
-          { text: 'Heatmap', link: '/pupil-cloud/visualizations/heatmap/' },
-          { text: "Areas of Interest (AOIs)", link: "/pupil-cloud/visualizations/areas-of-interest/" },
-          { text: 'Video Renderer', link: '/pupil-cloud/visualizations/video-renderer/' },
-        ]
+          { text: "Heatmap", link: "/pupil-cloud/visualizations/heatmap/" },
+          {
+            text: "Areas of Interest (AOIs)",
+            link: "/pupil-cloud/visualizations/areas-of-interest/",
+          },
+          {
+            text: "Video Renderer",
+            link: "/pupil-cloud/visualizations/video-renderer/",
+          },
+        ],
       },
     ],
     "/real-time-api/": [
       {
-        text: 'Tutorials',
-        items: [
-          { text: 'Overview', link: '/real-time-api/tutorials/' },
-        ]
+        text: "Tutorials",
+        items: [{ text: "Overview", link: "/real-time-api/tutorials/" }],
       },
       {
-        text: 'How-To Guides',
+        text: "How-To Guides",
         items: [
-          { text: 'Track your Experiment Progress using Events', link: '/real-time-api/track-your-experiment-progress-using-events/' },
-          { text: 'Track your Experiment in Matlab', link: '/real-time-api/track-your-experiment-in-matlab/' },
-
-        ]
+          {
+            text: "Track your Experiment Progress using Events",
+            link: "/real-time-api/track-your-experiment-progress-using-events/",
+          },
+          {
+            text: "Track your Experiment in Matlab",
+            link: "/real-time-api/track-your-experiment-in-matlab/",
+          },
+        ],
       },
-      { text: 'Legacy API', link: '/real-time-api/legacy-api/' },
+      { text: "Legacy API", link: "/real-time-api/legacy-api/" },
     ],
   },
-}
+};
 
-let theme_config = { ...default_theme_config, ...theme_config_additions }
+let theme_config = { ...default_theme_config, ...theme_config_additions };
 
 let config_additions = {
-  base: '/invisible/',
+  base: "/invisible/",
   title: "Pupil Invisible",
-  description: "Documentation of the Pupil Invisible eye tracker and it's ecosystem.",
+  description:
+    "Documentation of the Pupil Invisible eye tracker and it's ecosystem.",
   vite: {
     resolve: {
       alias: [
         {
           find: /^.*\/VPNavBar\.vue$/,
           replacement: fileURLToPath(
-            new URL('./../../components/CustomNavBar.vue', import.meta.url)
-          )
-        }
-      ]
-    }
+            new URL("./../../components/CustomNavBar.vue", import.meta.url)
+          ),
+        },
+        {
+          find: "@components",
+          replacement: fileURLToPath(
+            new URL("./../../components", import.meta.url)
+          ),
+        },
+      ],
+    },
   },
-}
+};
 
 export default defineConfig({
   ...default_config,
   ...config_additions,
   themeConfig: theme_config,
-})
+});
diff --git a/invisible/.vitepress/theme/index.js b/invisible/.vitepress/theme/index.js
diff --git a/invisible/.vitepress/theme/index.ts b/invisible/.vitepress/theme/index.ts
@@ -0,0 +1,19 @@
+import "/../custom.css";
+
+import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import ProductPageLayout from "@components/ProductPageLayout.vue";
+import Youtube from "@components/Youtube.vue";
+import PhotoGrid from "@components/PhotoGrid.vue";
+
+import "./tailwind.css";
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    // register your custom global components
+    app.component("ProductPageLayout", ProductPageLayout);
+    app.component("Youtube", Youtube);
+    app.component("PhotoGrid", PhotoGrid);
+  },
+} satisfies Theme;
diff --git a/invisible/.vitepress/theme/tailwind.css b/invisible/.vitepress/theme/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;