Merge branch 'website-nuxt/main' into website-nuxt

Author: SkyBird233

.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

@@ -1,93 +1,75 @@
-AOSC Portal
-===
+# Nuxt 3 Minimal Starter
 
-[简体中文自述文件 >>](/README.zh-cn.md)
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
-The Portal website for AOSC since 2024 (designed in 2023, hence the name),
-built using Vue.js.
+## Setup
 
-At a glance
----
+Make sure to install the dependencies:
 
-The main design goal for this new website is to maximise information density
-on a single screen space, utilising both multi-column and conventional
-navigation systems. It also seeks to depart from a conventional "FOSS
-community" aesthetic by emphasizing vivid and product-oriented presentation
-for prospective and current users.
+```bash
+# npm
+npm install
 
-In terms of visual styling, this website intentionally seeks to re-create a
-2000s Web 1.0 aesthetic (whilst adopting modern technological frameworks and
-layout optimisations). Inspiration for the site layout comes from Microsoft's
-Windows home page from 2001 - 2004:
+# pnpm
+pnpm install
 
-- [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)
+# yarn
+yarn install
 
-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.
+# bun
+bun install
+```
 
-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.
+## Development Server
 
-Deployment and testing
----
+Start the development server on `http://localhost:3000`:
 
-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.
+```bash
+# npm
+npm run dev
 
-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:
+# pnpm
+pnpm run dev
 
-```
-oma install nodejs
+# yarn
+yarn dev
+
+# bun
+bun run dev
 ```
 
-Then, build and serve the website locally:
+## Production
 
-```
-npm i
-npm run dev
-```
+Build the application for production:
 
-Submitting news
----
+```bash
+# npm
+npm run build
 
-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://...`).
+# pnpm
+pnpm run build
 
-News articles should contain a header:
+# yarn
+yarn build
 
-```
----
-categories:
-  - journals
-title: "安记冰室・九月上"
-date: 2024-09-19T23:00:00+08:00
-important: false
-home: true
----
+# bun
+bun run build
 ```
 
-- `categories` (enum):
-    - `advisories`: User advisories (usually AOSC OS-related).
-    - `news`: Community news about events, sponsorships, etc.
-    - `journals`: Community journals (entitled *Coffee Break*).
-    - `minutes`: Contributor meeting records.
-- `title` (string): News title.
-- `date` (string): Publication date to be presented as-is.
-- `important` (boolean): Highlight as important.
-- `home` (boolean): Whether to list in the news highlight section at the Portal home.
+Locally preview production build:
 
-### Localising news articles
+```bash
+# npm
+npm run preview
 
-To localise a news article, use a language code suffix such as `.zh-cn`, i.e.:
+# pnpm
+pnpm run preview
 
+# yarn
+yarn preview
+
+# bun
+bun run preview
 ```
-2024-09-18-aosc-os-relnote.zh-cn.md
-```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

README.zh-cn.md

@@ -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>

app.vue

@@ -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;
 }