🎉 Initial Commit

application/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

application/.prettierrc

@@ -0,0 +1,4 @@
+{
+    "printWidth": 120,
+    "tabWidth": 2
+}

application/app.vue

@@ -0,0 +1,12 @@
+<template>
+  <n-message-provider>
+    <nuxt-layout>
+      <nuxt-page />
+    </nuxt-layout>
+  </n-message-provider>
+</template>
+
+<script setup lang="ts">
+import { NMessageProvider } from "naive-ui";
+import "@/assets/css/index.css";
+</script>

application/assets/css/index.css

@@ -0,0 +1,15 @@
+@import "@ibm/plex/css/ibm-plex.css";
+
+.font-mono {
+  font-family: "IBM Plex Mono", monospace;
+}
+
+.font-sans {
+  font-family: "IBM Plex Sans", sans-serif;
+}
+
+body {
+  font-family: "IBM Plex Sans", sans-serif;
+  margin: 0;
+  padding: 0;
+}

application/components/brand/header.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Fuxi</div>
+</template>

application/components/helpful-links.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <nuxt-link to="/about">About</nuxt-link>
+  </div>
+</template>

application/components/problems/list.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <n-card segmented content-style="padding: 0">
+      <template #header>
+        <div>Problems</div>
+        <div class="text-xs font-normal">每天进步一点点！</div>
+      </template>
+      <n-list clickable hoverable>
+        <n-list-item v-for="item in (problems as any[])" class="px-[24px]">
+          <n-thing :title="item?.title">
+            <template #description>
+              <div class="text-xs flex gap-2">
+                <n-tag size="tiny" class="case-capital">{{ item?.type }}</n-tag>
+                <div>Published at {{ new Date(item?.created_at).toLocaleString() }}</div>
+              </div>
+            </template>
+          </n-thing>
+        </n-list-item>
+      </n-list>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NList, NListItem, NThing, NTag } from "naive-ui";
+
+const client = useSupabaseClient();
+
+const { data: problems } = await client.from("problems").select(`*`).limit(20);
+</script>

application/layouts/default.vue

@@ -0,0 +1,23 @@
+<template>
+  <n-layout>
+    <n-layout-header class="py-[18.5px] px-[36px]" bordered>
+      <nuxt-link class="brand-header" to="/">
+        <brand-header />
+      </nuxt-link>
+    </n-layout-header>
+    <n-layout-content class="h-[calc(100vh-70px)]" content-style="padding: 24px">
+      <slot />
+    </n-layout-content>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { NLayout, NLayoutHeader, NLayoutContent } from "naive-ui";
+</script>
+
+<style scoped>
+.brand-header {
+  all: unset;
+  cursor: pointer;
+}
+</style>

application/nuxt.config.ts

@@ -0,0 +1,24 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: ["@unocss/nuxt", '@pinia/nuxt', '@nuxtjs/supabase'],
+  build: {
+    transpile:
+      process.env.NODE_ENV === 'production'
+        ? [
+            'naive-ui',
+            'vueuc',
+            '@css-render/vue3-ssr',
+            '@juggle/resize-observer'
+          ]
+        : ['@juggle/resize-observer']
+  },
+  vite: {
+    optimizeDeps: {
+      include:
+        process.env.NODE_ENV === 'development'
+          ? ['naive-ui', 'vueuc', 'date-fns-tz/formatInTimeZone']
+          : []
+    }
+  }
+})

application/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@nuxtjs/supabase": "latest",
+    "@pinia/nuxt": "latest",
+    "@unocss/nuxt": "^0.58.0",
+    "@vicons/carbon": "^0.12.0",
+    "naive-ui": "^2.35.0",
+    "nuxt": "^3.8.2",
+    "unocss": "^0.58.0",
+    "vue": "^3.3.10",
+    "vue-router": "^4.2.5"
+  },
+  "dependencies": {
+    "@ibm/plex": "^6.3.0",
+    "@supabase/supabase-js": "^2.39.0"
+  }
+}

application/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="md:max-w-[720px] mx-auto">
+    <problems-list />
+  </div>
+</template>

application/pages/login.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="h-full w-full flex flex-col gap-5 justify-center items-center">
+    <brand-header />
+    <n-card segmented class="w-[380px]">
+      <template #header>
+        <div class="text-center">Sign in</div>
+        <div class="text-center text-xs font-normal">With your email</div>
+      </template>
+
+      <n-form @submit.prevent="submit">
+        <n-form-item label="Email">
+          <n-input v-model:value="payload.email" placeholder="Your email" />
+        </n-form-item>
+        <n-form-item label="Password">
+          <n-input v-model:value="payload.password" type="password" placeholder="Your password" />
+        </n-form-item>
+        <n-button :loading="loading" attr-type="submit" class="w-full" type="primary">Login</n-button>
+      </n-form>
+    </n-card>
+
+    <div class="flex w-[360px] justify-between">
+      <nuxt-link>Haven't an account?</nuxt-link>
+      <helpful-links />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NForm, NFormItem, NInput, NButton } from "naive-ui";
+import { useMessage } from "naive-ui";
+import { ref } from "vue";
+
+const client = useSupabaseClient();
+const message = useMessage();
+
+const loading = ref(false);
+const payload = ref({
+  email: "",
+  password: "",
+});
+
+async function submit() {
+  if (!payload.value.email || !payload.value.password) return;
+
+  try {
+    loading.value = true;
+    const { error } = await client.auth.signInWithPassword({
+      email: payload.value.email,
+      password: payload.value.password,
+    });
+    if (error) throw error;
+    message.success("Welcome back!");
+    navigateTo("/");
+  } catch (err: any) {
+    message.error(err.error_description || err.message);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>

application/plugins/naive-ui.ts

@@ -0,0 +1,31 @@
+import { setup } from '@css-render/vue3-ssr'
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  if (process.server) {
+    const { collect } = setup(nuxtApp.vueApp)
+    const originalRenderMeta = nuxtApp.ssrContext?.renderMeta
+    nuxtApp.ssrContext = nuxtApp.ssrContext || {}
+    nuxtApp.ssrContext.renderMeta = () => {
+      if (!originalRenderMeta) {
+        return {
+          headTags: collect()
+        }
+      }
+      const originalMeta = originalRenderMeta()
+      if ('then' in originalMeta) {
+        return originalMeta.then((resolvedOriginalMeta) => {
+          return {
+            ...resolvedOriginalMeta,
+            headTags: resolvedOriginalMeta['headTags'] + collect()
+          }
+        })
+      } else {
+        return {
+          ...originalMeta,
+          headTags: originalMeta['headTags'] + collect()
+        }
+      }
+    }
+  }
+})

application/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

application/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

application/uno.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig, presetUno } from "unocss";
+
+export default defineConfig({
+  presets: [presetUno({ preflight: false })],
+});