.env.example

@@ -21,4 +21,7 @@ SANITY_REQUIRE_PREVIEW_SECRET=
 NEXT_PUBLIC_UPLOAD_API_KEY=
 CAREERS_WEBHOOK_URL=
 CONTACT_WEBHOOK_URL=
-NEXT_PUBLIC_OG_URL_PREFIX=
+NEXT_PUBLIC_OG_URL=
+
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=

.eslintrc.js

@@ -0,0 +1,10 @@
+// @ts-check
+const { defineConfig } = require('eslint-define-config')
+
+module.exports = defineConfig({
+  extends: '@zolplay',
+  rules: {
+    'react-hooks/exhaustive-deps': 'error',
+    'no-console': 'off',
+  },
+})

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3

.github/workflows/prettier.yml

@@ -20,11 +20,14 @@ jobs:
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3
+        with:
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.event.pull_request.head.ref }}
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3

.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 
 *.code-workspace
 tsconfig.tsbuildinfo
+.vercel
+.env*.local

.vscode/settings.json

@@ -1,4 +1,16 @@
 {
   "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
-}
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "eslint.enable": true,
+  "eslint.validate": ["javascript", "typescript", "typescriptreact"],
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "githubPullRequests.ignoredPullRequestBranches": ["dev"],
+  "i18n-ally.localesPaths": ["messages"]
+}

README.md

@@ -1,11 +1,14 @@
 # Zolplay Official Website
 
 ## Introduction
+
 This repo contains the code for the official website of Zolplay.
+
 - [English (zolplay.com)](https://zolplay.com)
-- [简体中文 (zolplay.cn)](https://zolplay.cn)
+- [简体中文 (zolplay.com/zh-CN)](https://zolplay.com/zh-CN)
 
 ## Tech Stack
+
 - [Next.js 13 (app router)](https://nextjs.org/)
 - [TypeScript](https://www.typescriptlang.org/)
 - [Tailwind CSS](https://tailwindcss.com/)
@@ -14,6 +17,7 @@ This repo contains the code for the official website of Zolplay.
 - [pnpm](https://pnpm.io/)
 
 ## Set up local environment
+
 ```bash
 pnpm i
 pnpm dev

app/Footer.tsx

@@ -1,14 +1,9 @@
 'use client'
 
 import { clsxm } from '@zolplay/utils'
-import Link from 'next/link'
-import { useLocale, useTranslations } from 'next-intl'
-import { TbArrowUpRight } from 'react-icons/tb'
-
-import { i18n } from '~/i18n'
+import { useTranslations } from 'next-intl'
 
 export function Footer() {
-  const locale = useLocale()
   const t = useTranslations('Copyright')
 
   return (
@@ -19,29 +14,11 @@ export function Footer() {
     >
       <div className="h-px w-1/2 rounded-xl bg-gradient-to-r from-stone-50 to-stone-200 dark:from-stone-900 dark:to-stone-700" />
 
-      <p className="mt-4 mb-1 text-sm dark:text-stone-400">
+      <p className="mb-1 mt-4 text-sm dark:text-stone-400">
         {t('Text', {
           year: new Date().getFullYear(),
         })}
       </p>
-      {locale === i18n.defaultLocale && <ICPLicense />}
     </footer>
   )
 }
-
-function ICPLicense() {
-  return (
-    <p className="text-sm text-stone-500">
-      <Link
-        href="https://beian.miit.gov.cn/#/Integrated/index"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-xs tracking-wide hover:underline"
-        title="Fuckin' ICP"
-      >
-        粤ICP备2021175747号-1
-        <TbArrowUpRight className="ml-0.5 inline-block h-3 w-3" />
-      </Link>
-    </p>
-  )
-}

app/IntlProvider.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import { AbstractIntlMessages } from 'next-intl'
+import { DefaultRichTextComponents } from '~/components/ui/RichText'
+import type { AbstractIntlMessages } from 'next-intl'
 import { NextIntlClientProvider } from 'next-intl/client'
 import React from 'react'
 
-import { DefaultRichTextComponents } from '~/components/ui/RichText'
-
 type Props = {
   messages: AbstractIntlMessages
   locale: string

app/LocaleSelector.tsx

@@ -1,24 +1,21 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
-import { useLocale } from 'next-intl'
+import { Select } from '~/components/ui/Select'
+import { useLocale, useTranslations } from 'next-intl'
 import { usePathname } from 'next-intl/client'
+import { useRouter } from 'next/navigation'
 import React from 'react'
 
-import { Select } from '~/components/ui/Select'
-
 const languages = [
   {
-    label: 'English',
     value: 'en',
     icon: () => <span>🇺🇸</span>,
-    url: 'https://zolplay.com',
+    url: '/',
   },
   {
-    label: '简体中文',
     value: 'zh-CN',
     icon: () => <span>🇨🇳</span>,
-    url: 'https://cn.zolplay.com',
+    url: '/zh-CN',
   },
 ]
 export function LocaleSelector() {
@@ -28,34 +25,33 @@ export function LocaleSelector() {
   const pathname = usePathname()
   const onChange = React.useCallback(
     (locale: string) => {
-      if (process.env.NODE_ENV === 'development') {
-        router.push(`/${locale}${pathname}`)
-      } else {
-        const domain =
-          languages.find((lang) => lang.value === locale)?.url || ''
-        router.push(`${domain}/${pathname}`)
-      }
+      router.push(`${locale}${pathname}`)
     },
     [router, pathname]
   )
 
   React.useEffect(() => setMounted(true), [])
 
+  const t = useTranslations('Languages')
+
   if (!mounted) {
     return null
   }
 
   return (
     <Select.Root value={locale} onValueChange={onChange}>
-      <Select.Trigger className="flex w-fit justify-start space-x-1 border-none font-bold text-stone-400 transition-colors hover:text-stone-600 dark:text-stone-500 dark:hover:text-stone-200 md:w-40">
-        <Select.Value placeholder="Select a language" />
+      <Select.Trigger
+        className="flex w-fit justify-start space-x-1 border-none font-bold text-stone-400 transition-colors hover:text-stone-600 dark:text-stone-500 dark:hover:text-stone-200 md:w-40"
+        aria-label={t('Placeholder')}
+      >
+        <Select.Value placeholder={t('Placeholder')} />
       </Select.Trigger>
       <Select.Content className="relative z-50" position="popper">
-        {languages.map(({ label, value, icon: Icon }) => (
+        {languages.map(({ value, icon: Icon }) => (
           <Select.Item key={value} value={value}>
             <span className="inline-flex select-none items-center space-x-2 font-bold">
               <Icon />
-              <span>{label}</span>
+              <span>{t(value as any)}</span>
             </span>
           </Select.Item>
         ))}

app/PostHogProvider.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+import { useEffect } from 'react'
+
+if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+  })
+}
+
+export function PostHogPageview() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  // Track pageviews
+  useEffect(() => {
+    if (pathname) {
+      let url = window.origin + pathname
+      if (searchParams && searchParams.toString()) {
+        url = url + `?${searchParams.toString()}`
+      }
+      posthog.capture('$pageview', {
+        $current_url: url,
+      })
+    }
+  }, [pathname, searchParams])
+  return <></>
+}
+
+export function PHProvider({ children }: { children: React.ReactNode }) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+}

app/Rulers.tsx

@@ -2,7 +2,7 @@ export function Rulers() {
   return (
     <>
       {/* Left line */}
-      <div className="fixed top-0 left-0 hidden h-screen w-px bg-gradient-to-b from-stone-200 dark:from-stone-700 md:block md:translate-x-[11rem] lg:left-1/2 lg:-translate-x-[287px]" />
+      <div className="fixed left-0 top-0 hidden h-screen w-px bg-gradient-to-b from-stone-200 dark:from-stone-700 md:block md:translate-x-[11rem] lg:left-1/2 lg:-translate-x-[287px]" />
       {/* Right line */}
       <div className="fixed bottom-0 right-1/2 hidden h-screen w-px translate-x-[462px] bg-gradient-to-t from-stone-200 opacity-70 dark:from-stone-700 lg:block" />
     </>