Nuxt Refactor

.github/workflows/deploy.yaml

@@ -8,57 +8,39 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    permissions:
-      contents: write
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v5
       - name: Use Node.js 22
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: '22'
-      - name: Cache NPM dependencies
-        uses: actions/cache@v4
+
+      # https://github.com/actions/cache/blob/v4/examples.md#node---npm
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        shell: bash
+        run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
+      - uses: actions/cache@v4
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
         with:
-          path: node_modules
-          key: ${{ runner.OS }}-npm-cache
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.OS }}-npm-cache
-      - name: Setup SSH Private Key
-        env:
-          KEY: ${{ secrets.KEY }}
-          IP: ${{ secrets.IP }}
-        run: |
-          mkdir -p ~/.ssh/
-          echo "$KEY" > ~/.ssh/id_rsa
-          chmod 600 ~/.ssh/id_rsa
-          ssh-keyscan $IP >> ~/.ssh/known_hosts
-      - name: Install deps
-        run: |
-          sudo apt install expect tcl-expect -y
-      - name: Upload website
-        env:
-          IP: ${{ secrets.IP }}
-        run: |
-          rm -rf website*
-
-          # Build utilities
-          git submodule update --init
-          pushd utils/make-news-index
-          go build -o make-news-index
-          popd
+            ${{ runner.os }}-node-
 
-          # Build news index
-          pushd public
-          ../utils/make-news-index/make-news-index
-          popd
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run generate
 
-          # Build website
-          npm i
-          npm run build
-
-          zip -r website.zip website/
-          scp website.zip aosc@$IP:/home/aosc/web/
-      - name: Unzip website
-        run: |
-          cd deploy
-          ./unzipServer.sh
+      - name: Copy files via SSH
+        uses: appleboy/scp-action@v1
+        with:
+          host: ${{ secrets.IP }}
+          username: aosc
+          key: ${{ secrets.KEY }}
+          source: "dist/*"
+          target: /home/aosc/web/website
+          rm: true
+          strip_components: 1

.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,10 @@
+{
+  "i18n-ally.localesPaths": [
+    "i18n/locales"
+  ],
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
+  "i18n-ally.sourceLanguage": "zh-cn",
+  "i18n-ally.displayLanguage": "zh-cn",
+  "i18n-ally.keystyle": "nested"
+}

README.md

@@ -3,8 +3,7 @@ AOSC Portal
 
 [简体中文自述文件 >>](/README.zh-cn.md)
 
-The Portal website for AOSC since 2024 (designed in 2023, hence the name),
-built using Vue.js.
+The Portal website for AOSC since 2024, built using [Nuxt](https://nuxt.com/).
 
 At a glance
 ---
@@ -23,43 +22,45 @@ 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.
-
 This website is not yet optimised for mobile, legacy (Afterglow-targeted),
 and functionally-limited browsers. We are currently evaluating plans to
 implement a purpose-specific site to help with these scenarios.
 
 Deployment and testing
 ---
 
-This website is deployed to our Web server using a GitHub workflow. It should
-also be deployed in conjunction with [website-2023-utils](https://github.com/AOSC-Dev/website-2023-utils).
-Please follow also the instructions there.
+This website is deployed to our Web server using a GitHub workflow. The paste
+backend is deployed to paste.aosc.io using [paste-server-rs](https://github.com/AOSC-Dev/website-utils/tree/master/paste-server-rs).
 
-To test the website locally, you would need a Node.js + NPM toolchain and a
-deployment of the aforementioned [website-2023-utils](https://github.com/AOSC-Dev/website-2023-utils).
-To install Node.js + NPM on AOSC OS:
+To test the website locally, you would need a Node.js + NPM toolchain. To
+install Node.js + NPM on AOSC OS:
 
 ```
 oma install nodejs
 ```
 
-Then, build and serve the website locally:
+Install dependencies:
+```
+npm install
+```
+
+Then, build and preview the website locally:
 
 ```
-npm i
-npm run dev
+npm run generate
+npm run preview
 ```
 
+If you need to test the paste page, please set `PASTE_API=http://localhost:2334`
+in your environmental variables or the `.env` file. For the deployment of
+paste-server-rs, please refer to [website-utils](https://github.com/AOSC-Dev/website-utils).
+
 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 +87,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-cn/`, i.e.:
 
 ```
-2024-09-18-aosc-os-relnote.zh-cn.md
+/content/zh-cn/news/2024-09-18-aosc-os-relnote.md
 ```

README.zh-cn.md

@@ -1,9 +1,9 @@
 安同开源社区门户网站 (AOSC Portal)
 ===
 
-[英文自述文件 >>](/README.md)
+[English readme file >>](/README.md)
 
-本仓库存放自 2024 年末启用的社区门户网站（设计稿 2023 年完成，故此得名）。本网站使用 Vue.js 构建。
+本仓库存放自 2024 年末启用的社区门户网站，本网站使用 [Nuxt](https://nuxt.com/) 构建。
 
 简述
 ---
@@ -15,32 +15,37 @@
 - [参考甲：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)，提高网站的可索引性及性能。
-
 目前网站亦未对移动端、低性能（星霞 OS 目标）设备及功能受限的浏览器优化，我们计划在后续研判是否通过实现专用网站解决此问题。
 
 部署及测试
 ---
 
-本网站使用 GitHub workflow 自动部署到我们的网站服务器，搭配 [website-2023-utils](https://github.com/AOSC-Dev/website-2023-utils) 一同使用（请注意阅读该仓库中的部署指南）。
+本网站使用 GitHub workflow 自动部署到我们的网站服务器。其中剪贴板后端为部署在 paste.aosc.io 的 [paste-server-rs](https://github.com/AOSC-Dev/website-utils/tree/master/paste-server-rs)。
 
-本地测试时，您需要安装 Node.js + NPM 工具链，安同 OS 用户可使用如下命令安装；您也需要部署 [website-2023-utils](https://github.com/AOSC-Dev/website-2023-utils)：
+本地测试时，您需要安装 Node.js + NPM 工具链，安同 OS 用户可使用如下命令安装：
 
 ```
 oma install nodejs
 ```
 
-而后，使用如下命令启动网站构建及服务：
+安装依赖：
+```
+npm install
+```
+
+而后，使用如下命令构建网站并预览：
 
 ```
-npm i
-npm run dev
+npm run generate
+npm run preview
 ```
 
+如果您需要测试剪贴板页面，请创建并修改 `.env` 文件或直接设置环境变量 `PASTE_API=http://localhost:2334`。对于 paste-server-rs 的部署请参考 [website-utils](https://github.com/AOSC-Dev/website-utils)
+
 提交新闻
 ---
 
-本站新闻使用 Markdown 格式编写，存放于 `/public/news`；额外文件（如图片等）存放于 `/assets/...`。引用额外文件时，应使用站内引用（`/assets/...`）而非站外引用（`https://...`）。
+本站新闻使用 Markdown 格式编写，存放于 `/content/{language}/news`；额外文件（如图片等）存放于 `/public/...`。引用额外文件时，应使用站内引用（`/...`）而非站外引用（`https://...`）。
 
 新闻文件均带有文件头，如下例：
 
@@ -67,8 +72,8 @@ home: true
 
 ### 新闻本地化
 
-本地化新闻文章时，在文件名后加语言代号作为后缀即可（如 `.zh-cn`）：
+本地化新闻文章时，在对应语言文件夹下新建同名文件即可（如 `/content/zh-cn/`）：
 
 ```
-2024-09-18-aosc-os-relnote.zh-cn.md
+/content/zh-cn/news/2024-09-18-aosc-os-relnote.md
 ```

app.vue

@@ -0,0 +1,51 @@
+<script setup lang="js">
+const highBrightnessControllerStore = useHighBrightnessControllerStore();
+const router = useRouter();
+const { t } = useI18n();
+
+useHead({
+  title: t('seo.heading.siteTitle'),
+  titleTemplate: (title) => `${title} | ${t('seo.site.siteName')}`,
+  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.siteDescription'),
+  ogImage: '/aosc.svg',
+  ogSiteName: t('seo.site.siteName')
+});
+
+router.afterEach((to, _from) => {
+  highBrightnessControllerStore.obj[to.path] =
+    !highBrightnessControllerStore.obj[to.path];
+});
+
+const { $mitt } = useNuxtApp();
+const mainRef = useTemplateRef('mainBody');
+const heightRef = useTemplateRef('dMainBody');
+onMounted(() => {
+  new ResizeObserver(() => {
+    $mitt.emit('mainDomChange', mainRef.value.clientHeight);
+  }).observe(heightRef.value);
+});
+</script>
+
+<template>
+  <NuxtLayout>
+    <div ref="mainBody" class="flex-1">
+      <div ref="dMainBody">
+        <NuxtPage />
+      </div>
+    </div>
+  </NuxtLayout>
+</template>

app/router.options.ts

@@ -0,0 +1,10 @@
+import type { RouterConfig } from '@nuxt/schema';
+import { useScrollStore } from '~/stores/scroll';
+
+export default <RouterConfig>{
+  scrollBehavior(to, _from, savedPosition) {
+    if (savedPosition) return savedPosition;
+    else if (to.hash) useScrollStore().scrollOrSet(to.hash);
+    else return { top: 0 };
+  }
+};