zolplay-cn · thecuvii · May 4, 2024 · May 4, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,11 +5,12 @@
   "eslint.validate": ["javascript", "typescript", "typescriptreact"],
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "githubPullRequests.ignoredPullRequestBranches": ["dev"]
+  "githubPullRequests.ignoredPullRequestBranches": ["dev"],
+  "i18n-ally.localesPaths": ["messages"]
 }
diff --git a/app/Sidebar.tsx b/app/Sidebar.tsx
@@ -9,9 +9,11 @@ import { BrandXIcon } from '~/components/icons/BrandXIcon'
 import { ShopIcon } from '~/components/icons/ShopIcon'
 import { Logo, LogoHelmet } from '~/components/Logo'
 import { Clock } from '~/components/ui/Clock'
+import { useUWU } from '~/hooks/useUWU'
 import { motion } from 'framer-motion'
 import { Link, useTranslations } from 'next-intl'
 import { usePathname } from 'next-intl/client'
+import Image from 'next/image'
 import NextLink from 'next/link'
 import React from 'react'
 import { BsGithub, BsYoutube } from 'react-icons/bs'
@@ -22,6 +24,7 @@ import {
   TbMailbox,
   TbPlanet,
 } from 'react-icons/tb'
+import UwU from './[locale]/zolplay-logo-uwu.png'
 
 const links = [
   { href: '/', label: 'Home', icon: TbPlanet },
@@ -58,6 +61,7 @@ const social = [
 
 export function Sidebar({ className }: { className?: string }) {
   const t = useTranslations('Root.Metadata')
+  const isUWU = useUWU()
 
   return (
     <aside
@@ -69,17 +73,21 @@ export function Sidebar({ className }: { className?: string }) {
           aria-label={t('Title')}
           className="group relative mb-3 ml-3 inline-flex focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-500 focus-visible:ring-opacity-50 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-200 dark:focus-visible:ring-stone-700 dark:focus-visible:ring-offset-stone-800 md:mb-6"
         >
-          <motion.span
-            initial={{ opacity: 0, x: 8 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{
-              type: 'spring',
-              stiffness: 300,
-              damping: 30,
-            }}
-          >
-            <Logo className="w-7 md:w-10" />
-          </motion.span>
+          {isUWU ? (
+            <Image className="w-20" src={UwU} alt="zolplay logo uwu" />
+          ) : (
+            <motion.span
+              initial={{ opacity: 0, x: 8 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{
+                type: 'spring',
+                stiffness: 300,
+                damping: 30,
+              }}
+            >
+              <Logo className="w-7 md:w-10" />
+            </motion.span>
+          )}
         </Link>
 
         <NavMenu />

diff --git a/app/UWUHandler.tsx b/app/UWUHandler.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { redirect, useSearchParams } from 'next/navigation'
+import { useEffect } from 'react'
+
+export function UWUHandler() {
+  const query = useSearchParams()
+
+  useEffect(() => {
+    if (query?.has('uwu')) {
+      if (query.get('uwu') === '0') {
+        localStorage.removeItem('uwu')
+      } else {
+        localStorage.setItem('uwu', '1')
+      }
+      redirect('/')
+    }
+  }, [query])
+  return null
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -18,6 +18,7 @@ import {
   PostHogPageview,
   PHProvider as PostHogProvider,
 } from '../PostHogProvider'
+import { UWUHandler } from '../UWUHandler'
 
 const fontSansEn = Manrope({
   weight: ['400', '500', '700'],
@@ -108,7 +109,7 @@ export default async function RootLayout({
       <Suspense>
         <PostHogPageview />
       </Suspense>
-
+      <UWUHandler />
       <PostHogProvider>
         <body className="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-300">
           <ThemeProvider

diff --git a/app/[locale]/og/page.tsx b/app/[locale]/og/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>og</div>
+}
diff --git a/app/[locale]/og/uwu/page.tsx b/app/[locale]/og/uwu/page.tsx
@@ -0,0 +1,61 @@
+import { getMessages } from '~/i18n.server'
+import type { Metadata } from 'next'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: RootParams
+}): Promise<Metadata> {
+  const messages = await getMessages(params)
+
+  return {
+    title: {
+      default: messages.Root.Metadata.Title,
+      template: messages.Root.Metadata.TitleTemplate,
+    },
+    themeColor: [
+      { media: '(prefers-color-scheme: dark)', color: '#1c1917' },
+      { media: '(prefers-color-scheme: light)', color: '#fafaf9' },
+    ],
+    description: messages.Root.Metadata.Description,
+    keywords: messages.Root.Metadata.Keywords,
+    icons: {
+      icon: '/assets/favicon-32x32.png',
+      shortcut: '/assets/favicon.ico',
+      apple: '/assets/apple-touch-icon.png',
+    },
+    manifest: '/assets/site.webmanifest',
+    openGraph: {
+      title: {
+        default: messages.Root.Metadata.Title,
+        template: messages.Root.Metadata.TitleTemplate,
+      },
+      description: messages.Root.Metadata.Description,
+      siteName: messages.Root.Metadata.Title,
+      locale: params.locale,
+      type: 'website',
+      images: ['https://assets.moimoi.app/zolplay-logo-uwu.png'],
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
+    twitter: {
+      site: '@zolplay',
+      creator: '@thecalicastle',
+      card: 'summary_large_image',
+    },
+  }
+}
+
+export default function UWUPage() {
+  // redirect('/')
+  return <div>uwu</div>
+}
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
@@ -1,18 +1,25 @@
 'use client'
 
+import { useUWU } from '~/hooks/useUWU'
 import { useTranslations } from 'next-intl'
 import Image from 'next/image'
+import UwU from './zolplay-logo-uwu.png'
 import OfficeShot from './zolplay-office-couch-shot.jpg'
 import Poster from './zolplay-poster.png'
 
 export default function Home() {
   const t = useTranslations('Home')
+  const isUWU = useUWU()
 
   return (
     <>
       <h1>👋&nbsp;{t('Heading')}</h1>
       <p>{t.rich('Paragraph1')}</p>
-      <Image src={Poster} alt="Zolplay Poster" placeholder="blur" />
+      <Image
+        src={isUWU ? UwU : Poster}
+        alt="Zolplay Poster"
+        placeholder="blur"
+      />
       <Image src={OfficeShot} alt="Zolplay Office Shot" placeholder="blur" />
       <p className="-mt-4 text-center text-sm text-stone-400 dark:text-stone-500">
         {t('Caption')}

diff --git a/app/[locale]/zolplay-logo-uwu.png b/app/[locale]/zolplay-logo-uwu.png
diff --git a/hooks/useUWU.ts b/hooks/useUWU.ts
@@ -0,0 +1,5 @@
+import { useLocalStorage } from 'foxact/use-local-storage'
+
+export const useUWU = () => {
+  return useLocalStorage('uwu', false)[0]
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -11,6 +11,22 @@ const config = {
     /// Set this to false if you want production builds to abort if there's lint errors
     ignoreDuringBuilds: process.env.VERCEL_ENV === 'production',
   },
+  rewrites: async () => {
+    return {
+      afterFiles: [
+        {
+          source: '/og/', // not working
+          has: [
+            {
+              type: 'query',
+              key: 'uwu',
+            },
+          ],
+          destination: '/og/uwu',
+        },
+      ],
+    }
+  },
 }
 
 export default config
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@zolplay/utils": "^1.3.4",
     "class-variance-authority": "^0.4.0",
     "date-fns": "^2.30.0",
+    "foxact": "^0.2.33",
     "framer-motion": "^10.12.9",
     "googleapis": "^112.0.0",
     "intl-segmenter-polyfill": "^0.4.4",