feat: move HouLiXieBuRou/website-nuxt here

.gitignore

@@ -1,38 +1,24 @@
-# Binary assets
-public/assets/gallery/
-public/assets/news/
-public/assets/coffee-break/
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
 
-# Runtime files
-auto-imports.d.ts
-components.d.ts
+# Node dependencies
+node_modules
 
 # Logs
 logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-website
-website.zip
-deply/website.zip
-public/newsCategories
-*.local
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+# Misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-pasteServer/paste/*
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.prettierignore

@@ -4,6 +4,7 @@ pasteServer/*
 makeCategory/*
 deploy/*
 website/*
-utils/*
 auto-imports.d.ts
 components.d.ts
+content/*
+fileServe/*

.prettierrc

@@ -2,11 +2,11 @@
   "semi": true,
   "bracketSameLine": true,
   "arrowParens": "always",
-  "htmlWhitespaceSensitivity": "strict",
+  "htmlWhitespaceSensitivity": "ignore",
   "vueIndentScriptAndStyle": false,
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 80,
   "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindStylesheet": "./src/style.css"
+  "tailwindStylesheet": "./assets/css/main.css"
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "commentTranslate.hover.enabled": true
+}

README.md

@@ -23,10 +23,7 @@ Windows home page from 2001 - 2004:
 - [Reference 1, Windows XP home from late 2001](https://web.archive.org/web/20011211230629/http://microsoft.com/windowsxp/default.asp)
 - [Reference 2, Windows XP mid-cycle home from 2004](https://web.archive.org/web/20040204080626/http://www.microsoft.com/china/windows/default.mspx)
 
-Technically speaking, this website is built as a client-side rendered Web
-application. In the near future, we plan to refactor this website into one
-that is powered by server-side rendering or static site generator to help
-with performance and indexability.
+Technically speaking, this a statically generated site built with Nuxt.
 
 This website is not yet optimised for mobile, legacy (Afterglow-targeted),
 and functionally-limited browsers. We are currently evaluating plans to
@@ -47,19 +44,19 @@ To install Node.js + NPM on AOSC OS:
 oma install nodejs
 ```
 
-Then, build and serve the website locally:
+Then, build and preview the website locally:
 
 ```
-npm i
-npm run dev
+npm run generate
+npm run preview
 ```
 
 Submitting news
 ---
 
-All news articles are written in Markdown and stored in `/public/news`, with
-extra assets (images, etc.) stored in `/assets/...`. All assets should be
-referenced from the site (`/assets/...`, not `https://...`).
+All news articles are written in Markdown and stored in `/content/{language}/news`, with
+extra assets (images, etc.) stored in `/public/...`. All assets should be
+referenced from the site (`/...`, not `https://...`).
 
 News articles should contain a header:
 
@@ -86,8 +83,9 @@ home: true
 
 ### Localising news articles
 
-To localise a news article, use a language code suffix such as `.zh-cn`, i.e.:
+To localize a news article, just add a file with the same name to the
+corresponding language folder such as `/content/zh/`, i.e.:
 
 ```
-2024-09-18-aosc-os-relnote.zh-cn.md
+/content/zh/news/2024-09-18-aosc-os-relnote.md
 ```

README.zh-cn.md

@@ -15,7 +15,7 @@
 - [参考甲：Windows XP 主页（2001 年末）](https://web.archive.org/web/20011211230629/http://microsoft.com/windowsxp/default.asp)
 - [参考乙：Windows XP 中期主页（2004 年）](https://web.archive.org/web/20040204080626/http://www.microsoft.com/china/windows/default.mspx)
 
-技术架构方面，该网站为客户端渲染 (client-side render) 的单页 Web 应用程序，我们计划在未来一段时间就将网站转写为服务端渲染 (server-side render) 或静态生成网站 (static site generator)，提高网站的可索引性及性能。
+技术架构方面，该网站是使用 Nuxt 构建，采用静态网站生成技术。
 
 目前网站亦未对移动端、低性能（星霞 OS 目标）设备及功能受限的浏览器优化，我们计划在后续研判是否通过实现专用网站解决此问题。
 
@@ -30,17 +30,17 @@
 oma install nodejs
 ```
 
-而后，使用如下命令启动网站构建及服务：
+而后，使用如下命令启动网站构建及预览：
 
 ```
-npm i
-npm run dev
+npm run generate
+npm run preview
 ```
 
 提交新闻
 ---
 
-本站新闻使用 Markdown 格式编写，存放于 `/public/news`；额外文件（如图片等）存放于 `/assets/...`。引用额外文件时，应使用站内引用（`/assets/...`）而非站外引用（`https://...`）。
+本站新闻使用 Markdown 格式编写，存放于 `/content/{language}/news`；额外文件（如图片等）存放于 `/public/...`。引用额外文件时，应使用站内引用（`/...`）而非站外引用（`https://...`）。
 
 新闻文件均带有文件头，如下例：
 
@@ -67,8 +67,8 @@ home: true
 
 ### 新闻本地化
 
-本地化新闻文章时，在文件名后加语言代号作为后缀即可（如 `.zh-cn`）：
+本地化新闻文章时，在对应语言文件夹下添加同名文件即可（如 `/content/en/`）：
 
 ```
-2024-09-18-aosc-os-relnote.zh-cn.md
+/content/en/news/2024-09-18-aosc-os-relnote.md
 ```

app.vue

@@ -0,0 +1,53 @@
+<script setup lang="js">
+const highBrightnessControllerStore = useHighBrightnessControllerStore();
+const router = useRouter();
+const { t } = useI18n();
+
+useHead({
+  title: t('seo.head.title'),
+  titleTemplate: (title) => `${title} | ${t('seo.site.name')}`,
+  link: [{ rel: 'icon', type: 'image/svg+xml', href: '/aosc.svg' }],
+  script: [
+    {
+      // This script will execute before the browser renders the <body>,
+      // ensuring the correct season class is set from the very beginning.
+      textContent:
+        'document.documentElement.classList.add(["spring","summer","autumn","winter"][(new Date().getMonth()+10)%12/3|0])',
+      type: 'text/javascript',
+      tagPosition: 'head'
+    }
+  ]
+});
+
+useSeoMeta({
+  description: t('seo.seo.description'),
+  ogImage: '/aosc.svg',
+  ogSiteName: t('seo.site.name')
+});
+
+router.afterEach((to, _from) => {
+  highBrightnessControllerStore.obj[to.path] =
+    !highBrightnessControllerStore.obj[to.path];
+});
+
+const { $mitt } = useNuxtApp();
+const bodyRef = useTemplateRef('mainBody');
+onMounted(() => {
+  const mutationObserver =
+    window.MutationObserver ||
+    window.WebKitMutationObserver ||
+    window.MozMutationObserver;
+  const observer = new mutationObserver(() => {
+    $mitt.emit('routeSwitching');
+  });
+  observer.observe(bodyRef.value, {
+    childList: true
+  });
+});
+</script>
+
+<template>
+  <NuxtLayout>
+    <div ref="mainBody" class="flex-1 pl-[1px]"><NuxtPage /></div>
+  </NuxtLayout>
+</template>

src/style.css → assets/css/main.css

@@ -11,6 +11,7 @@
   --color-black: #000;
 
   --text-*: initial;
+
   --text-xl: 1.5rem;
   --text-2xl: 1.8rem;
   --text-3xl: 2rem;
@@ -34,6 +35,7 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentColor);
   }
+
   a:hover {
     text-decoration: underline;
   }
@@ -46,6 +48,11 @@ body {
   font-family: 'Noto Sans CJK SC', sans-serif;
   font-size: 12pt;
   min-width: 800px;
+
+  /* Global style for Element Plus created components (located outside #app) */
+  --el-color-primary: var(--primary);
+  --el-border-radius-base: 0;
+  --el-popover-border-radius: 0;
 }
 
 @media (min-width: 960px) {
@@ -61,7 +68,7 @@ body {
   /* flex: 0 0 100%; */
 }
 
-.shadow {
+.myShadow {
   box-shadow: 0px 0px 10px #999;
   background: #fafafa;
 }