38 changed files with 679 additions and 569 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,24 +1,26 @@
-# build output
-dist/
-# generated types
-.astro/
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist

-# dependencies
-node_modules/
+# Node dependencies
+node_modules

-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
+# Logs
+logs
+*.log

-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
+# Misc
 .DS_Store
+.fleet
+.idea

-# jetbrains setting folder
-.idea/
+# Local env files
+.env
+.env.*
+!.env.example
+
+*.lockb
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}
--- a/README.md
+++ b/README.md
@ -1,47 +1,75 @@
-# Astro Starter Kit: Minimal
+# Nuxt 3 Minimal Starter

-```sh
-npm create astro@latest -- --template minimal
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
 ```

-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+## Development Server

-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+Start the development server on `http://localhost:3000`:

-## 🚀 Project Structure
+```bash
+# npm
+npm run dev

-Inside of your Astro project, you'll see the following folders and files:
+# pnpm
+pnpm run dev

-```text
-/
-├── public/
-├── src/
-│   └── pages/
-│       └── index.astro
-└── package.json
+# yarn
+yarn dev
+
+# bun
+bun run dev
 ```

-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+## Production

-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+Build the application for production:

-Any static assets, like images, can be placed in the `public/` directory.
+```bash
+# npm
+npm run build

-## 🧞 Commands
+# pnpm
+pnpm run build

-All commands are run from the root of the project, from a terminal:
+# yarn
+yarn build

-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+# bun
+bun run build
+```

-## 👀 Want to learn more?
+Locally preview production build:

-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
--- a/app.vue
+++ b/app.vue
@ -0,0 +1,8 @@
+<template>
+  <v-app>
+    <nuxt-layout>
+      <nuxt-loading-indicator />
+      <nuxt-page />
+    </nuxt-layout>
+  </v-app>
+</template>
--- a/assets/products/feature.jpg
+++ b/assets/products/feature.jpg
--- a/assets/products/solar.svg
+++ b/assets/products/solar.svg
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,8 +0,0 @@
-import { defineConfig } from 'astro/config';
-
-import tailwind from "@astrojs/tailwind";
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [tailwind()]
-});
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/RouterLink.vue
+++ b/components/RouterLink.vue
@ -0,0 +1,7 @@
+<template>
+  <nuxt-link v-bind="props" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ to: string; target: string }>();
+</script>
--- a/content/posts/hydrogen.md
+++ b/content/posts/hydrogen.md
@ -0,0 +1,17 @@
+---
+slug: "hy"
+title: "「Project Hydrogen」项目氢"
+description: "关于我们最新项目，Hydrogen 的详细介绍。"
+thumbnail: "https://files.solsynth.dev/d/media01/image/202403170109556.jpg"
+date: "2024-03-16T15:50:16.202Z"
+---
+
+<video 
+    src="https://files.solsynth.dev/d/media01/video/devlogs/hy-intro.webm" 
+    autoplay
+    controls 
+    style="width: 100%; height: 360px; display: block"
+/>
+
+目前新版本实例现已上线，我们也相应的下架了旧版本的实例。
+新版本相对于旧版本的实例有一小部分功能缺失，但是也有一小部分功能扩展。详情还请查看我们的发版日志（没有）。
--- a/content/posts/starts-of-solian.md
+++ b/content/posts/starts-of-solian.md
@ -0,0 +1,31 @@
+---
+slug: "starts-of-solian"
+title: "「Solian」一颗冉冉升起的新希望"
+description: "关于我们 Solar Networks 的全新"
+thumbnail: "https://files.solsynth.dev/d/media01/image/20240325233100.jpg"
+date: "2024-03-16T15:50:16.202Z"
+---
+
+<video 
+    src="https://files.solsynth.dev/d/media01/video/devlogs/solian-intro.webm" 
+    autoplay
+    controls 
+    style="width: 100%; height: 360px; display: block"
+/>
+
+Solian，这个名字起的相当随意，主要是上架 App Store 的时候原定名称 Solar 被占用了。
+还是不想使用 SolarAgent 作为名称，让人感觉一头雾水。
+
+Solian 的诞生产生于 Solar Networks 目前悲惨的日活量，虽然我不是很看重这些，但是 0 与 1 之间的跳动还是多多少少触动了我的心弦。
+让人感觉我的统计单位是二进制。
+
+其实这个结果究其根本不是 Solar Networks，或者说 Project Hydrogen 的设计失策。
+主要是当今市场竞争太激烈，一个连服务器都不能 100% 稳定的小站又能说什么呢？
+
+终究还是个人能力问题。总之这篇介绍也没什么好说的，看看视频就知道是干嘛的了。
+
+看起来还是得启动 Plan B (CodingLand) 啊。
+
+那么，且定下回分解，目前我们将集中精力制作 Hydrogen.Messaging (Project Hydrogen 的即时通讯)。
+
+之后就是 CodingLand 了。
--- a/content/products/solarpass.md
+++ b/content/products/solarpass.md
@ -0,0 +1,20 @@
+---
+slug: "solarpass"
+icon: "https://git.solsynth.dev/repo-avatars/5fdf4c0ba6f015786482817a3738042a043e56117378293c2e8d8bade8efe25c"
+name: "Solarpass"
+code: "Hydrogen.Identity"
+description: "Unified Authentication Service and Seamless Access to Solar Network. The All in One Authentication Service for Solar Network."
+link: "https://id.solsynth.dev"
+source: "https://git.solsynth.dev/Hydrogen/Identity"
+date: "2024-03-16T15:50:16.202Z"
+---
+
+Hydrogen.Identity is a cutting-edge solution designed to streamline user authentication processes across all Hydrogen services. With Hydrogen.Identity, users gain seamless access to various Hydrogen platforms and applications using a single set of credentials.
+
+Gone are the days of managing multiple accounts and remembering numerous passwords. Hydrogen.Identity simplifies the user experience by providing a centralized authentication system, ensuring convenience and security hand in hand.
+
+Moreover, Hydrogen.Identity offers developers a hassle-free method to integrate with the Solar Network user ecosystem. Developers can now easily access Solar Network's vast user base and leverage its functionalities without the burden of intricate development processes.
+
+With Hydrogen.Identity's straightforward integration capabilities, developers can focus on building innovative solutions without being bogged down by complex authentication protocols. By providing a simplified pathway to tap into the Solar Network user network, Hydrogen.Identity empowers developers to create seamless and engaging experiences for their users.
+
+By bridging the gap between developers and the Solar Network ecosystem, Hydrogen.Identity accelerates the development cycle, fosters innovation, and ultimately enhances the value proposition of applications built on the Hydrogen platform. With Hydrogen.Identity, developers can unlock the full potential of Solar Network's user base with ease and efficiency.
--- a/content/products/solarplaza.md
+++ b/content/products/solarplaza.md
@ -0,0 +1,19 @@
+---
+slug: "solarplaza"
+icon: "https://git.solsynth.dev/repo-avatars/59efd759b0ecca9241ea9899c2bdb3faf997dbbe341fa494788f855aa34b395c"
+name: "Solarplaza"
+code: "Hydrogen.Interactive"
+description: "Elevating Social Media with Quality Content and Developer-Friendly APIs."
+link: "https://co.solsynth.dev"
+source: "https://git.solsynth.dev/Hydrogen/Interactive"
+date: "2024-03-16T15:50:16.202Z"
+---
+
+Hydrogen.Interactive emerges as a refreshing take on social media, akin to Twitter, yet with a distinct emphasis on user-generated content quality over low-quality, sensationalist trends. As a social media platform, Hydrogen.Interactive prioritizes meaningful interactions, fostering a community where users can engage in thoughtful discussions, share valuable insights, and showcase their expertise.
+
+Unlike conventional social media platforms that often succumb to the allure of clickbait and superficial content, Hydrogen.Interactive stands out by curating a space where substance reigns supreme. Users are encouraged to contribute to discussions, share informative content, and connect with like-minded individuals who value authenticity and intellectual discourse.
+
+Moreover, Hydrogen.Interactive goes beyond offering a user-centric experience; it also extends its functionality to developers through a comprehensive set of RESTful APIs. These APIs empower developers to seamlessly integrate Hydrogen.Interactive's features into their own applications, enabling them to build custom communities and leverage our platform to manage their content effectively. By providing developers with the tools they need, Hydrogen.Interactive accelerates site development and facilitates the creation of vibrant online communities.
+
+By prioritizing quality content, meaningful interactions, and developer-friendly APIs, Hydrogen.Interactive aims to elevate the social media landscape. Join Hydrogen.Interactive today and be part of a community that values substance over superficiality while offering developers the flexibility to innovate and create tailored experiences for their users.
+
--- a/content/products/solian.md
+++ b/content/products/solian.md
@ -0,0 +1,21 @@
+---
+slug: "solian"
+icon: "https://git.solsynth.dev/repo-avatars/a698929737246bedb3d56520161c9451999f258360ce6b9e8ba18d8187f345f3"
+name: "Solian"
+code: "Hydrogen.SolarAgent"
+description: "Your Compact Solar Networks Mobile Application."
+link: "https://git.solsynth.dev/Hydrogen/SolarAgent/releases"
+source: "https://git.solsynth.dev/Hydrogen/SolarAgent"
+date: "2024-03-25T15:08:10.378Z"
+---
+
+Solian is the sleek mobile client of Solar Networks, offering a compact package with a mere 24MB footprint while encompassing a range of essential social functionalities. With Solian, users can seamlessly engage in social posting, chatting, and notifications, all within a clean and practical interface.
+
+Key Features:
+
+1. Solarplaza: Share your thoughts, updates, and moments with your network effortlessly through Solian's intuitive posting feature.
+Chatting: Stay connected with friends, family, and colleagues through real-time messaging, fostering meaningful conversations anytime, anywhere.
+2. Solarpass Notify: Stay informed and never miss out on important updates or interactions with Solian's robust notification system.
+Solian combines convenience with functionality, offering users a refreshing and efficient social networking experience on their mobile devices. Whether you're keeping up with friends or staying updated on the latest news, Solian has you covered.
+
+Experience the simplicity and utility of Solian today, and elevate your social networking experience with Solar Networks' innovative mobile client.
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -0,0 +1,32 @@
+<template>
+  <v-app-bar flat scroll-behavior="elevated">
+    <v-container class="mx-auto d-flex align-center justify-center">
+      <v-avatar
+        class="me-4"
+        color="transparent"
+        size="32"
+        image="/favicon.png"
+      ></v-avatar>
+
+      <v-btn v-for="link in navbars" variant="text" :href="link.to">
+        {{ link.label }}
+      </v-btn>
+
+      <v-spacer></v-spacer>
+    </v-container>
+  </v-app-bar>
+
+  <v-main class="bg-grey-lighten-3 min-h-[calc(100vh - 64px)]">
+    <suspense>
+      <slot />
+    </suspense>
+  </v-main>
+</template>
+
+<script setup lang="ts">
+const navbars = [
+  { label: "Home", to: "/" },
+  { label: "Newsletters", to: "/newsletters" },
+  { label: "Products", to: "/products" },
+];
+</script>
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -0,0 +1,42 @@
+import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+
+  app: {
+    head: {
+      title: "Solsynth",
+      meta: [
+        {
+          name: "description",
+          content:
+            "Solsynth LLC official website. We build amazing, wonderful, open-source software.",
+        },
+      ],
+      link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }],
+    },
+  },
+  content: {},
+
+  build: {
+    transpile: ["vuetify"],
+  },
+  modules: [
+    "@unocss/nuxt",
+    "@nuxt/content",
+    (_options, nuxt) => {
+      nuxt.hooks.hook("vite:extendConfig", (config) => {
+        // @ts-expect-error
+        config.plugins.push(vuetify({ autoImport: true }));
+      });
+    },
+  ],
+  vite: {
+    vue: {
+      template: {
+        transformAssetUrls,
+      },
+    },
+  },
+});
--- a/package.json
+++ b/package.json
@ -1,25 +1,26 @@
 {
-  "name": "capital",
+  "name": "nuxt-app",
+  "private": true,
  "type": "module",
-  "version": "0.0.1",
  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro check && astro build",
-    "preview": "astro preview",
-    "astro": "astro"
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
  },
  "dependencies": {
-    "@astrojs/check": "^0.7.0",
-    "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.9.2",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5"
+    "@fontsource/roboto": "^5.0.12",
+    "@mdi/font": "^7.4.47",
+    "@nuxt/content": "^2.12.1",
+    "nuxt": "^3.10.3",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
  },
  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.13",
-    "daisyui": "^4.11.1",
-    "prettier": "^3.3.0",
-    "prettier-plugin-astro": "^0.14.0"
+    "@unocss/nuxt": "^0.58.6",
+    "@unocss/reset": "^0.58.6",
+    "vite-plugin-vuetify": "^2.0.3",
+    "vuetify": "^3.5.9"
  }
 }
--- a/pages/index.vue
+++ b/pages/index.vue
@ -0,0 +1,132 @@
+<template>
+  <v-container>
+    <v-row class="h-fullpage" align-content="center" id="landing">
+      <v-col :cols="12" :sm="6" class="max-md:text-center">
+        <img
+          src="/assets/products/solar.svg"
+          class="w-[180px] h-[192px] max-md:mx-auto"
+        />
+        <h1 class="text-6xl font-bold mt-8">
+          <span class="text-primary">Internet.</span> <br />
+          <span>Redefined.</span>
+        </h1>
+
+        <p class="text-lg mt-3">This is, the Solar Network.</p>
+
+        <div class="mt-12 w-full flex max-md:justify-center">
+          <v-btn
+            append-icon="mdi-magnify"
+            variant="tonal"
+            size="large"
+            href="#about"
+          >
+            Explore more
+          </v-btn>
+        </div>
+      </v-col>
+
+      <v-col
+        :cols="12"
+        :sm="6"
+        class="flex items-center max-md:justify-center md:justify-end"
+      >
+        <v-card class="w-full">
+          <img src="/assets/products/feature.jpg" class="object-cover" />
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row class="h-fullpage" align-content="center" id="about">
+      <v-col :cols="12" :sm="6" class="max-md:text-center">
+        <v-icon
+          icon="mdi-information-slab-symbol"
+          size="48"
+          color="grey-darken-3"
+          class="mb-3 mx-[-16px]"
+        />
+        <h1 class="text-2xl font-bold">About us</h1>
+        <p>
+          We are a group of developers who are love open-source. Founded in
+          2019. We've been building open-source software that people love ever
+          since. For us, "By open-source, for open-source" is not only a
+          principle, but also the motto of our faith.
+        </p>
+
+        <div class="mt-3 w-full flex max-md:justify-center">
+          <v-btn
+            class="mx-[-16px]"
+            append-icon="mdi-shape"
+            variant="text"
+            href="#products"
+          >
+            Discover products
+          </v-btn>
+        </div>
+      </v-col>
+
+      <v-col
+        :cols="12"
+        :sm="6"
+        class="flex flex-col gap-2 max-md:items-center md:items-end"
+      >
+        <v-card hover class="pa-5">
+          <template #text>
+            <img src="/favicon.png" width="128" height="128" />
+          </template>
+        </v-card>
+        <p class="uppercase caption">Crystal Lotus</p>
+        <p class="text-sm opacity-80 mt-[-8px] md:text-right">
+          A crystal flower born in GoatLand. <br />
+          Home flower of Solsynth. <br />
+          Mr. Sheep felt homesick every time he saw it.
+        </p>
+      </v-col>
+    </v-row>
+
+    <v-row
+      class="h-fullpage text-center"
+      align-content="center"
+      justify="center"
+      id="products"
+    >
+      <v-col :cols="12">
+        <h2 class="text-2xl font-bold">Products</h2>
+        <p>Let's see what we got.</p>
+
+        <div class="mt-4 flex justify-center gap-2">
+          <v-tooltip v-for="item in products" location="top">
+            <template #activator="{ props }">
+              <v-card v-bind="props" hover class="w-24 h-24" :href="'/products/' + item.slug">
+                <div class="h-full w-full flex justify-center items-center">
+                  <img :src="item.icon" width="64" height="64" class="block" />
+                </div>
+              </v-card>
+            </template>
+
+            <div>
+              <p class="font-bold">{{ item.title }}</p>
+              <p class="font-mono text-xs">{{ item.code }}</p>
+              <p class="mt-2">{{ item.description }}</p>
+            </div>
+          </v-tooltip>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const { data: products } = await useAsyncData("products", () =>
+  queryContent("products").limit(5).find()
+);
+</script>
+
+<style scoped>
+.h-fullpage {
+  height: calc(100vh - 64px);
+}
+
+.caption {
+  letter-spacing: 2px;
+}
+</style>
--- a/pages/newsletters/[slug].vue
+++ b/pages/newsletters/[slug].vue
@ -0,0 +1,52 @@
+<template>
+  <v-container>
+    <div class="max-w-[720px] mx-auto">
+      <v-card>
+        <v-img
+          v-if="post?.thumbnail"
+          cover
+          class="align-end"
+          height="180"
+          :src="post?.thumbnail"
+        />
+
+        <div class="pa-5">
+          <v-card-text class="pt-0 pb-1">
+            <h2 class="text-xl font-medium">{{ post?.title }}</h2>
+            <p class="opacity-80">{{ post?.description }}</p>
+          </v-card-text>
+
+          <v-divider class="mx-[-20px] mt-3 border-opacity-75" />
+
+          <v-card-text tag="article" class="prose max-w-none">
+            <content-renderer :value="post">
+              <template #empty>
+                <p>No content found.</p>
+              </template>
+            </content-renderer>
+          </v-card-text>
+
+          <v-divider class="mx-[-20px] mb-4 border-opacity-75" />
+
+          <div class="mt-3 flex justify-between items-center">
+            <p class="ps-3.5 text-sm">
+              {{ new Date(post?.date).toLocaleString() }}
+            </p>
+          </div>
+        </div>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+const { data: post } = await useAsyncData("post", () =>
+  queryContent("posts").where({ slug: route.params.slug }).findOne()
+);
+
+definePageMeta({
+  alias: ["/posts/:slug", "/n/:slug"]
+})
+</script>
--- a/pages/newsletters/index.vue
+++ b/pages/newsletters/index.vue
@ -0,0 +1,38 @@
+<template>
+  <v-container>
+    <div class="max-w-[720px] mx-auto flex flex-col gap-3">
+      <v-card v-for="item in posts">
+        <v-img
+          v-if="item.thumbnail"
+          cover
+          class="align-end"
+          height="180"
+          :src="item.thumbnail"
+        />
+        <div class="py-5 px-7">
+          <h2 class="text-xl font-medium">{{ item.title }}</h2>
+          <p class="mt-3 opacity-80">{{ item.description }}</p>
+          <div class="mt-3 flex justify-end">
+            <v-btn
+              variant="text"
+              prepend-icon="mdi-page-next"
+              :href="'/posts/' + item.slug"
+            >
+              Read more
+            </v-btn>
+          </div>
+        </div>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const { data: posts } = await useAsyncData("posts", () =>
+  queryContent("posts").find()
+);
+
+definePageMeta({
+  alias: ["/posts"]
+})
+</script>
--- a/pages/products/[slug].vue
+++ b/pages/products/[slug].vue
@ -0,0 +1,61 @@
+<template>
+  <v-container>
+    <div class="max-w-[720px] mx-auto">
+      <v-card class="pa-5">
+        <template #title>
+          <span class="me-2">{{ product?.name }}</span>
+          <span class="font-mono text-xs">{{ product?.code }}</span>
+        </template>
+        <template #subtitle>{{ product?.description }}</template>
+
+        <v-divider class="mx-[-20px] mt-3 border-opacity-75" />
+
+        <v-card-text tag="article" class="prose max-w-none">
+          <content-renderer :value="product">
+            <template #empty>
+              <p>No content found.</p>
+            </template>
+          </content-renderer>
+        </v-card-text>
+
+        <v-divider class="mx-[-20px] mb-4 border-opacity-75" />
+
+        <div class="mt-3 flex justify-between items-center">
+          <p class="ps-3.5 text-sm">
+            {{ new Date(product?.date).toLocaleString() }}
+          </p>
+
+          <div>
+            <v-btn
+              v-if="product?.source"
+              variant="text"
+              color="info"
+              prepend-icon="mdi-code-tags"
+              target="_blank"
+              :href="product?.source"
+            >
+              Source code
+            </v-btn>
+            <v-btn
+              variant="text"
+              color="teal"
+              prepend-icon="mdi-launch"
+              target="_blank"
+              :href="product?.link"
+            >
+              Launch
+            </v-btn>
+          </div>
+        </div>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+const { data: product } = await useAsyncData("product", () =>
+  queryContent("products").where({ slug: route.params.slug }).findOne()
+);
+</script>
--- a/pages/products/index.vue
+++ b/pages/products/index.vue
@ -0,0 +1,42 @@
+<template>
+  <v-container>
+    <div class="max-w-[720px] mx-auto flex flex-col gap-3">
+      <v-card v-for="item in products">
+        <v-row class="pa-5">
+          <v-col :xs="12" :md="3">
+            <img :src="item.icon" width="128" height="128" class="mx-auto" />
+          </v-col>
+          <v-col :xs="12" :md="9">
+            <h2 class="text-xl font-medium">{{ item.name }}</h2>
+            <p class="font-mono text-sm">{{ item.code }}</p>
+            <p class="mt-3 opacity-80">{{ item.description }}</p>
+            <div class="mt-3 flex justify-end">
+              <v-btn
+                variant="text"
+                color="teal"
+                prepend-icon="mdi-launch"
+                target="_blank"
+                :href="item.link"
+              >
+                Launch
+              </v-btn>
+              <v-btn
+                variant="text"
+                prepend-icon="mdi-page-next"
+                :href="'/products/' + item.slug"
+              >
+                Learn more
+              </v-btn>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const { data: products } = await useAsyncData("products", () =>
+  queryContent("products").find()
+);
+</script>
--- a/plugins/unocss.ts
+++ b/plugins/unocss.ts
@ -0,0 +1,4 @@
+import "@unocss/reset/tailwind.css"
+import "@fontsource/roboto/latin.css"
+
+export default defineNuxtPlugin(() => {})
--- a/plugins/vuetify.ts
+++ b/plugins/vuetify.ts
@ -0,0 +1,36 @@
+import "@mdi/font/css/materialdesignicons.min.css";
+
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import { md3 } from "vuetify/blueprints";
+import * as components from "vuetify/components";
+import * as labsComponents from "vuetify/labs/components";
+import * as directives from "vuetify/directives";
+
+export default defineNuxtPlugin((app) => {
+  const vuetify = createVuetify({
+    directives,
+    components: {
+      ...components,
+      ...labsComponents,
+    },
+    blueprint: md3,
+    theme: {
+      defaultTheme: "original",
+      themes: {
+        original: {
+          colors: {
+            primary: "#4a5099",
+            secondary: "#2196f3",
+            accent: "#009688",
+            error: "#f44336",
+            warning: "#ff9800",
+            info: "#03a9f4",
+            success: "#4caf50",
+          },
+        },
+      },
+    },
+  });
+  app.vueApp.use(vuetify);
+});
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
--- a/src/assets/solian.png
+++ b/src/assets/solian.png
--- a/src/components/navigation/Footer.astro
+++ b/src/components/navigation/Footer.astro
@ -1,11 +0,0 @@
-<footer class="footer footer-center p-5 border-t border-footer">
-  <aside>
-    <p>Copyright © {new Date().getFullYear()} Solsynth LLC</p>
-  </aside>
-</footer>
-
-<style>
-  .border-footer {
-    border-color: var(--fallback-bc, oklch(var(--bc) / 0.1));
-  }
-</style>
--- a/src/components/navigation/NavBar.astro
+++ b/src/components/navigation/NavBar.astro
@ -1,28 +0,0 @@
-<div
-  class="navbar bg-base-100 text-base-content bg-opacity-90 backdrop-blur transition-shadow duration-100 [transform:translate3d(0,0,0)] shadow-sm"
->
-  <div class="px-5 w-full flex justify-between">
-    <a href="/" class="btn btn-ghost text-xl">Solsynth</a>
-
-    <label id="theme-switch" class="swap swap-rotate me-5">
-      <input type="checkbox" class="theme-controller" value="light" />
-
-      <svg
-        class="swap-off fill-current w-6 h-6"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        ><path
-          d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-        ></path></svg
-      >
-      <svg
-        class="swap-on fill-current w-6 h-6"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        ><path
-          d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-        ></path></svg
-      >
-    </label>
-  </div>
-</div>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -1 +0,0 @@
-/// <reference types="astro/client" />
--- a/src/layouts/ArticleLayout.astro
+++ b/src/layouts/ArticleLayout.astro
@ -1,17 +0,0 @@
---
-import SiteLayout from "./SiteLayout.astro";
---
-
-<SiteLayout>
-  <div class="min-h-[calc(100vh-152px)]">
-    <div class="max-w-[720px] mx-auto card shadow-xl m-5">
-      <div class="card-body py-5">
-        <slot name="header" />
-      </div>
-      <hr />
-      <div class="card-body">
-        <slot />
-      </div>
-    </div>
-  </div>
-</SiteLayout>
--- a/src/layouts/SiteLayout.astro
+++ b/src/layouts/SiteLayout.astro
@ -1,20 +0,0 @@
---
-import NavBar from "../components/navigation/NavBar.astro";
-import Footer from "../components/navigation/Footer.astro";
---
-
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Solsynth</title>
-  </head>
-  <body>
-    <NavBar />
-    <main>
-      <slot />
-    </main>
-    <Footer />
-  </body>
-</html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,75 +0,0 @@
---
-import { Image } from "astro:assets";
-
-import SiteLayout from "../layouts/SiteLayout.astro";
-import SolarIcon from "../assets/solar.svg";
-import SolianIcon from "../assets/solian.png";
---
-
-<SiteLayout>
-  <div class="container px-12 mx-auto">
-    <div class="landing-slide">
-      <div class="landing-slide-first">
-        <div
-          class="aspect-square w-[128px] bg-neutral rounded-xl mb-6 ml-[-4px] flex justify-center items-center"
-        >
-          <Image
-            src={SolarIcon}
-            alt="Studio Avatar"
-            class="w-[90px] h-[96px] block"
-          />
-        </div>
-
-        <h2 class="text-2xl">Hi, there!</h2>
-        <h1 class="text-6xl font-bold">We're Solsynth</h1>
-
-        <section class="mt-8 text-lg">
-          <p>
-            We're the world youngest Software <strike>Company</strike> Studio who
-            make the software that everyone love.
-          </p>
-        </section>
-      </div>
-
-      <div class="landing-slide-second">
-        <div class="card w-full md:w-5/6 bg-base-100 shadow-xl">
-          <div class="card-body pb-0">
-            <h2 class="card-title">Products!</h2>
-            <p>Take a look of all our lovely products!</p>
-          </div>
-          <div class="divider"></div>
-          <div class="card-body pt-0 grid grid-cols-4">
-            <a href="/products/solar-network">
-              <Image
-                src={SolianIcon}
-                alt="Solar Network"
-                class="min-w-[64px] min-h-[64px] w-[64px] h-[64px] aspect-square block"
-              />
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</SiteLayout>
-
-<style>
-  .landing-slide {
-    gap: 1rem;
-    height: 40rem;
-    display: grid;
-    align-items: center;
-    grid-template-columns: 1fr;
-  }
-
-  @media (min-width: 720px) {
-    .landing-slide {
-      grid-template-columns: 1fr 1fr;
-    }
-
-    .landing-slide-second {
-      display: flex;
-      justify-content: end;
-    }
-  }
-</style>
--- a/src/pages/products/solar-network.astro
+++ b/src/pages/products/solar-network.astro
@ -1,281 +0,0 @@
---
-import { Image } from "astro:assets";
-
-import SiteLayout from "../../layouts/SiteLayout.astro";
-import SolianIcon from "../../assets/solian.png";
---
-
-<SiteLayout>
-  <div class="grid grid-cols-1 lg:grid-cols-4 gap-3 px-12 py-5">
-    <div class="feature-card horizontal-layout">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="icon"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
-        ></path>
-      </svg>
-
-      <section>
-        <h2 class="card-title">Open-source</h2>
-        <p>Entire project has been open-sourced under <b>AGPLv3</b> license.</p>
-      </section>
-    </div>
-    <div class="feature-card horizontal-layout">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="icon"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
-        ></path>
-      </svg>
-
-      <section>
-        <h2 class="card-title">Large Attachments</h2>
-        <p>Up to <b>1024MB</b> per attachment upload limit.</p>
-      </section>
-    </div>
-    <div class="lg:col-span-2 feature-card horizontal-layout">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="icon"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
-        ></path>
-      </svg>
-
-      <section>
-        <h2 class="card-title">Freedom of Speech</h2>
-        <p>
-          According to our principles, your freedom of speech cannot be taken
-          away by anyone.
-          <b>
-            We will never delete any post from any user, even if we are coerced
-            by others.
-          </b>
-        </p>
-      </section>
-    </div>
-    <div
-      class="lg:row-span-2 feature-card horizontal-layout lg:vertical-layout"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="icon"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-        ></path>
-      </svg>
-
-      <section>
-        <h2 class="card-title">100% Recyclable</h2>
-        <p>
-          All of our code are completely recyclable. All of them written by
-          child labor and without salary. We even already achieved the goal of
-          <b>Carbon Neutral</b>. Because we didn't produce any of them at all.
-        </p>
-      </section>
-    </div>
-    <div
-      class="lg:col-span-2 max-lg:order-last keypoint-card horizontal-layout items-center"
-    >
-      <Image
-        src={SolianIcon}
-        alt="Solar Network"
-        class="w-[64px] h-[64px] lg:ml-12"
-      />
-
-      <section class="lg:mr-12">
-        <h2 class="card-title text-3xl">Solar Network</h2>
-        <p>Link the entire Solar System together, forever.</p>
-      </section>
-    </div>
-    <div class="feature-card horizontal-layout">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="icon"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
-        ></path>
-      </svg>
-
-      <section>
-        <h2 class="card-title">Reaction</h2>
-        <p>
-          No more like and dislike, now you can express your emotion with our
-          brand new reaction system!
-        </p>
-      </section>
-    </div>
-    <div class="lg:col-span-2 feature-card horizontal-layout">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="icon"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
-        ></path>
-      </svg>
-
-      <section>
-        <h2 class="card-title">Blazing Fast</h2>
-        <p>
-          Our server proudly powered by Golang and App made with flutter. All of
-          these stuff make your scrolling, clicking and typing smooth like
-          butter. Without any lagging.
-          <i>By the way, we cannot eliminate the network delay.</i>
-        </p>
-      </section>
-    </div>
-    <div class="feature-card horizontal-layout">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="icon"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
-        ></path>
-      </svg>
-
-      <section>
-        <h2 class="card-title">Safe and uninspectable</h2>
-        <p>
-          All your data has been <b>encrypted</b> during the network transmission.
-          No more goverment and internet provider inspect.
-        </p>
-      </section>
-    </div>
-  </div>
-
-  <div class="px-12 pb-5 flex gap-3 justify-center items-center">
-    <a
-      class="btn btn-primary"
-      href="https://git.solsynth.dev/Hydrogen/Solian/releases"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="size-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
-        ></path>
-      </svg>
-
-      Download now
-    </a>
-    <a class="btn btn-secondary" href="https://lian.solsynth.dev">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="size-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
-        ></path>
-      </svg>
-
-      Open in browser
-    </a>
-    <a class="btn btn-accent" href="#">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="size-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
-        ></path>
-      </svg>
-
-      Learn more
-    </a>
-  </div>
-</SiteLayout>
-
-<style>
-  .feature-card {
-    @apply p-5 rounded-2xl bg-base-200;
-  }
-
-  .keypoint-card {
-    @apply p-5 bg-neutral text-neutral-content rounded-2xl shadow-lg;
-  }
-
-  .horizontal-layout {
-    @apply flex gap-4;
-  }
-
-  .vertical-layout {
-    @apply flex-col gap-4;
-  }
-  .vertical-layout section {
-    @apply px-2.5 mt-3;
-  }
-
-  .icon {
-    @apply w-[48px] h-[48px] m-[8px] flex-shrink-0;
-  }
-</style>
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@ -1,39 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: {
-    extend: {},
-  },
-  daisyui: {
-    themes: [
-      {
-        light: {
-          "primary": "#3F51B5",
-          "secondary": "#0091EA",
-          "accent": "#00BFA5",
-          "neutral": "#2c323b",
-          "base-100": "#f3f4f6",
-          "info": "#0091EA",
-          "success": "#00C853",
-          "warning": "#FF6D00",
-          "error": "#D50000",
-        },
-        dark: {
-          "primary": "#3F51B5",
-          "secondary": "#0091EA",
-          "accent": "#00BFA5",
-          "neutral": "#2c323b",
-          "base-100": "#1e2329",
-          "info": "#0091EA",
-          "success": "#00C853",
-          "warning": "#FF6D00",
-          "error": "#D50000",
-        }
-      }
-    ],
-  },
-  plugins: [
-    require('@tailwindcss/typography'),
-    require('daisyui'),
-  ],
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,3 +1,4 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
 }
--- a/uno.config.ts
+++ b/uno.config.ts
@ -0,0 +1,5 @@
+import { defineConfig, presetAttributify, presetTypography, presetUno } from "unocss";
+
+export default defineConfig({
+  presets: [presetAttributify(), presetTypography(), presetUno({ preflight: false })]
+})