ZO: Added patchnotes for home page, added home page package

apps/zzz-frontend/.env

@@ -0,0 +1,2 @@
+NX_URL_GITHUB_API_ZZZ_RELEASES=https://api.github.com/repos///releases/tags/
+NX_URL_GITHUB_GO_CURRENT_VERSION=

apps/zzz-frontend/src/app/App.tsx

@@ -1,6 +1,7 @@
 import { ScrollTop } from '@genshin-optimizer/common/ui'
 import { DatabaseProvider } from '@genshin-optimizer/zzz/db-ui'
 import '@genshin-optimizer/zzz/i18n' // import to load translations
+import PageHome from '@genshin-optimizer/zzz/page-home'
 import { theme } from '@genshin-optimizer/zzz/theme'
 import {
   Box,
@@ -14,7 +15,6 @@ import { Suspense, lazy } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import '../styles.scss'
 import Header from './Header'
-import PageHome from './PageHome'
 const PageDiscs = lazy(() => import('@genshin-optimizer/zzz/page-discs'))
 const PageOptimize = lazy(() => import('@genshin-optimizer/zzz/page-optimize'))
 const PageCharacters = lazy(

apps/zzz-frontend/vite.config.mts

@@ -6,6 +6,7 @@ import { defineConfig, normalizePath } from 'vite'
 // https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
+import pkg from '../../package.json' assert { type: 'json' }
 
 export default defineConfig({
   base: '',
@@ -64,6 +65,7 @@ export default defineConfig({
 
   define: {
     'process.env': process.env,
+    __VERSION__: `"${pkg.version}"`,
   },
 
   // Uncomment this if you are using workers.

libs/zzz/localization/assets/locales/en/page_home.json

@@ -0,0 +1,11 @@
+{
+  "quickLinksCard": {
+    "title": "Quick Links",
+    "buttons": {
+      "patchNotes": {
+        "title": "Patch Notes",
+        "tooltip": "All of ZO's patch notes"
+      }
+    }
+  }
+}

libs/zzz/page-home/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage",
+        "importSource": "@emotion/react"
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

libs/zzz/page-home/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "parserOptions": {
+    "project": "libs/zzz/page-home/tsconfig.eslint.json"
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/zzz/page-home/README.md

@@ -0,0 +1,7 @@
+# zzz-page-home
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test zzz-page-home` to execute the unit tests via [Jest](https://jestjs.io).

libs/zzz/page-home/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "zzz-page-home",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/zzz/page-home/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}

libs/zzz/page-home/src/index.tsx

@@ -0,0 +1,81 @@
+import { CardThemed } from '@genshin-optimizer/common/ui'
+import DescriptionIcon from '@mui/icons-material/Description'
+import { CardContent, CardHeader, Divider, Typography } from '@mui/material'
+import { Box } from '@mui/system'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+declare const __VERSION__: string
+export default function PageHome() {
+  return (
+    <CardThemed sx={{ my: 1 }}>
+      <CardContent>
+        <Typography variant="h5">I know what this looks like...</Typography>
+        <Typography>
+          This is an <i>Alpha</i>(desperately unfinished) version of{' '}
+          <strong>Zenless Optimizer</strong>. You have to understand, this is
+          the result of asking,
+        </Typography>
+        <Typography variant="caption">
+          "What is the most Optimizer I can, if I was cutting corners like it's
+          crunch time at a circle factory?" — frzyc, probably
+        </Typography>
+        <Typography>
+          I know a lot of stuff isn't implemented, and the stuff that are, are
+          super ugly. This is only like{' '}
+          <Box component="span" sx={{ textDecoration: 'line-through' }}>
+            10
+          </Box>{' '}
+          20 hours of coding, cut me some slack.
+        </Typography>
+        <Typography sx={{ my: 1 }}>Have an optimal day,</Typography>
+        <Typography>
+          <strong>frzyc</strong>
+        </Typography>
+      </CardContent>
+      <Divider />
+      <PatchNotesCard />
+    </CardThemed>
+  )
+}
+
+function PatchNotesCard() {
+  const { t } = useTranslation('page_home')
+  const [{ isLoaded, text }, setState] = useState({ isLoaded: false, text: '' })
+  useEffect(() => {
+    const regex = /^(\d+)\.(\d+)\.(\d+)$/
+    const minorVersion = __VERSION__.replace(regex, `$1.$2.${0}`)
+    fetch(process.env['NX_URL_GITHUB_API_ZZZ_RELEASES'] + minorVersion)
+      .then((res) => res.arrayBuffer())
+      .then((buffer) => {
+        const decoder = new TextDecoder('utf-8')
+        const data = decoder.decode(buffer)
+        const release = JSON.parse(data)
+        setState({ isLoaded: true, text: release.body })
+      })
+      .catch((err) => console.log('Error: ' + err.message))
+  }, [])
+
+  return (
+    <CardThemed>
+      <CardHeader
+        title={
+          <Typography variant="h5">
+            {t('quickLinksCard.buttons.patchNotes.title')}
+          </Typography>
+        }
+        avatar={<DescriptionIcon fontSize="large" />}
+        sx={{ padding: '16px 16px 0 16px' }}
+      />
+      <CardContent>
+        {isLoaded ? (
+          <ReactMarkdown children={text} remarkPlugins={[remarkGfm]} />
+        ) : (
+          'Loading...'
+        )}
+      </CardContent>
+    </CardThemed>
+  )
+}

libs/zzz/page-home/tsconfig.eslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

libs/zzz/page-home/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsxImportSource": "@emotion/react",
+    "exactOptionalPropertyTypes": false
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

libs/zzz/page-home/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "object-overrides",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

tsconfig.base.json

@@ -200,7 +200,8 @@
       "@genshin-optimizer/zzz/theme": ["libs/zzz/theme/src/index.ts"],
       "@genshin-optimizer/zzz/ui": ["libs/zzz/ui/src/index.tsx"],
       "@genshin-optimizer/zzz/util": ["libs/zzz/util/src/index.ts"],
-      "@genshin-optimizer/zzz/zood": ["libs/zzz/zood/src/index.ts"]
+      "@genshin-optimizer/zzz/zood": ["libs/zzz/zood/src/index.ts"],
+      "@genshin-optimizer/zzz/page-home": ["libs/zzz/page-home/src/index.tsx"]
     }
   },
   "exclude": ["node_modules", "tmp"]