feat(website): add master css

Author: alanlu-tw

apps/website/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@alanlu-dev/base'],
+}

apps/website/app.vue

@@ -1,5 +1,22 @@
+<script lang="ts" setup>
+useHead({
+  htmlAttrs: {
+    id: 'mcss',
+  },
+  bodyAttrs: {
+    class: 'normal fg:base-fg bg:base-bg overflow-x:hidden',
+  },
+})
+
+const CSSRuntimeProvider = defineAsyncComponent(async () => (await import('@master/css.vue')).CSSRuntimeProvider)
+</script>
+
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
+  <CSSRuntimeProvider :config="import('./master.css.mjs')">
+    <NuxtLayout>
+      <NuxtLoadingIndicator />
+      <ModalsContainer />
+      <NuxtPage />
+    </NuxtLayout>
+  </CSSRuntimeProvider>
 </template>

apps/website/layouts/default.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="bg:#ffe min-h:100vh">
+    <header class="shadow:md">
+      <div class="center-content flex jc:space-between max-w:screen-lg mx:auto p:4x">
+        <div class="center-content flex gap:2x">
+          <img src="/favicon-32x32.png" alt="Logo" />
+          <span>alanlu-dev</span>
+        </div>
+        <nav>
+          <ul class="center-content flex gap:4x">
+            <li><NuxtLink to="/">Home</NuxtLink></li>
+            <li><NuxtLink to="/about">About</NuxtLink></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main class="max-w:screen-lg min-h:full mx:auto pt:4x">
+      <NuxtPage />
+    </main>
+  </div>
+</template>

apps/website/master.css.mjs

@@ -0,0 +1,6 @@
+import config from '@alanlu-dev/mastercss-config'
+
+/** @type {import('@master/css').Config} */
+export default {
+  extends: [config],
+}

apps/website/nuxt.config.ts

@@ -1,4 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+
+  // https://nuxt.com/docs/api/configuration/nuxt-config#modules
+  modules: [
+    /* --- ui --- */
+    '@master/css.nuxt',
+  ],
+
+  // https://nuxt.com/docs/api/configuration/nuxt-config#css
+  css: ['@master/normal.css'],
 })

apps/website/package.json

@@ -4,15 +4,30 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "build:clean": "npx rimraf --glob ./.output",
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --dotenv .env",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "cleanup": "nuxt cleanup",
+    "app:prepare": "nuxt prepare",
+    "lint:eslint": "eslint --fix .",
+    "lint:prettier": "prettier --ignore-path ../../.prettierignore --write .",
+    "lint": "pnpm lint:eslint && pnpm lint:prettier",
+    "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "nuxt": "^3.11.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@alanlu-dev/eslint-config-base": "^1.0.0",
+    "@alanlu-dev/mastercss-config": "^1.0.1",
+    "@alanlu-dev/mastercss-helpers": "^1.0.1",
+    "@alanlu-dev/types": "^1.0.0",
+    "@master/css.nuxt": "2.0.0-rc.26",
+    "@master/css.vue": "2.0.0-rc.26",
+    "nuxt": "^3.11.1",
+    "vue-tsc": "^2.0.7"
   }
 }

apps/website/pages/about.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="t:center w:full">
+    <h1>[About]</h1>
+  </div>
+</template>

apps/website/pages/index.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="t:center w:full">
+    <h1>[Home]</h1>
+  </div>
+</template>