wip

.env.example

@@ -3,5 +3,4 @@ NUXT_PUBLIC_STUDIO_TOKENS=your_value
 NUXT_PUBLIC_MEETING_LINK=your_value
 NUXT_PRIVATE_RESEND_API_KEY=your_value
 NUXT_PRIVATE_GITHUB_TOKEN=your_value
-NUXT_PRIVATE_NOTES_PASSWORD=your_value
-SHELVE_TOKEN=your_value
+NUXT_PRIVATE_NOTES_PASSWORD=your_value

Dockerfile

@@ -7,9 +7,11 @@ RUN apk add --no-cache python3 make g++ \
 
 ARG TURBO_TEAM
 ARG TURBO_TOKEN
+ARG NUXT_PRIVATE_GITHUB_TOKEN
 
 ENV TURBO_TEAM=$TURBO_TEAM
 ENV TURBO_TOKEN=$TURBO_TOKEN
+ENV NUXT_PRIVATE_GITHUB_TOKEN=$NUXT_PRIVATE_GITHUB_TOKEN
 
 WORKDIR /app
 

README.md

@@ -21,16 +21,16 @@ You can see it live at [hrcd.fr](https://hrcd.fr/).
 
 ## Features
 
-- Fully integrated with [Nuxt Content](https://content.nuxt.com/) and using the content driven mode.
-- Working contact form with [Resend](https://resend.com/)
+- Fully integrated with [Nuxt Content v3](https://content.nuxt.com/)
 - Article & Project Content Type using [Nuxt Content](https://content.nuxt.com/)
-- Open Graph Image support with [Nuxt OG Image](https://nuxtseo.com/og-image/getting-started/installation)
+- Hidden notes section for private notes
+- Working contact form with [Resend](https://resend.com/)
+- Auto-Generated Open Graph Image with [Nuxt OG Image](https://nuxtseo.com/og-image/getting-started/installation)
 - [Nuxt Robots](https://sitemap.nuxt.com/) for auto-generate robots.txt
 - [ESLint](https://eslint.org/) using my personal configuration
 - Full typescript support
 - Optimized images with [Nuxt Image](https://image.nuxt.com/)
-- [Vue Composition Collection (Vueuse)](https://vueuse.org/)
-- Fully responsive on all modern browsers
+- Fully responsive on all browsers
 - Easy to customize
 - Auto generated sitemap
 

app/components/ThemeSelector.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
+
 const colorMode = useColorMode()
+const reduceMotion = useCookie<boolean>('reduceMotion', {
+  watch: true,
+})
 
 const switchTheme = () => {
   colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
   colorMode.preference = colorMode.value
 }
 
-function startViewTransition(theme: string) {
+const startViewTransition = (theme) => {
   if (theme === colorMode.value) return
+  if (reduceMotion.value) {
+    switchTheme()
+    return
+  }
   if (!document.startViewTransition) {
     switchTheme()
     return
@@ -16,7 +24,16 @@ function startViewTransition(theme: string) {
     switchTheme()
     return
   }
-  document.startViewTransition(switchTheme)
+
+  document.documentElement.classList.add('theme-transitioning')
+
+  const transition = document.startViewTransition(() => {
+    switchTheme()
+  })
+
+  transition.finished.then(() => {
+    document.documentElement.classList.remove('theme-transitioning')
+  })
 }
 </script>
 
@@ -52,24 +69,25 @@ function startViewTransition(theme: string) {
 </template>
 
 <style>
-/* Dark/Light reveal effect */
-::view-transition-group(root) {
+.theme-transitioning::view-transition-group(root) {
   animation-duration: 1.5s;
 }
-::view-transition-new(root),
-::view-transition-old(root) {
+
+.theme-transitioning::view-transition-new(root),
+.theme-transitioning::view-transition-old(root) {
   mix-blend-mode: normal;
 }
 
-::view-transition-new(root) {
+.theme-transitioning::view-transition-new(root) {
   animation-name: reveal-light;
 }
 
-::view-transition-old(root),
-.dark::view-transition-old(root) {
+.theme-transitioning::view-transition-old(root),
+.dark.theme-transitioning::view-transition-old(root) {
   animation: none;
 }
-.dark::view-transition-new(root) {
+
+.dark.theme-transitioning::view-transition-new(root) {
   animation-name: reveal-dark;
 }
 
@@ -90,5 +108,4 @@ function startViewTransition(theme: string) {
     clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
   }
 }
-
 </style>

nuxt.config.ts

@@ -3,6 +3,10 @@ export default defineNuxtConfig({
     compatibilityVersion: 4
   },
 
+  experimental: {
+    viewTransition: true,
+  },
+
   site: {
     url: 'https://hrcd.fr',
     defaultLocale: 'en',
@@ -14,7 +18,7 @@ export default defineNuxtConfig({
   },*/
 
   routeRules: {
-    '/': { isr: true, prerender: true },
+    '/': { isr: true },
   },
 
   modules: [
@@ -65,6 +69,7 @@ export default defineNuxtConfig({
     prerender: {
       crawlLinks: true,
       routes: ['/', '/works', '/about', '/writing'],
+      ignore: ['/notes', '/notes/**'],
     },
   },
 

package.json

@@ -19,6 +19,7 @@
     "@nuxt/image": "1.8.1",
     "@nuxt/scripts": "0.9.5",
     "@nuxtjs/seo": "^2.0.2",
+    "@shelve/cli": "^2.11.0",
     "@vueuse/nuxt": "12.0.0",
     "mockline": "0.14.0",
     "nuxt": "3.14.1592",