✨ The solar network product page

app/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="container mx-auto h-full px-8 flex flex-col gap-16">
     <div class="text-center py-56 flex flex-col items-center justify-center">
-      <img src="/favicon.png" class="w-28 h-28 mb-4" />
+      <nuxt-img src="/favicon.png" class="w-28 h-28 mb-4" />
       <h1 class="text-5xl font-extrabold mb-3">We <span id="who-are-we" /></h1>
       <p class="text-xl mb-8">
         We are a group of friends that make software, hardware and any stuff

app/pages/products/solar-network.vue

@@ -0,0 +1,143 @@
+<template>
+  <main class="container mx-auto h-full px-8 flex flex-col gap-16">
+    <div class="text-center py-56 flex flex-col items-center justify-center">
+      <img src="/solar-network/icon.png" class="w-28 h-28 mb-4" />
+      <h1 class="text-5xl font-extrabold mb-3">Solar Network</h1>
+      <p class="text-xl mb-8">
+        The amazing social network for technology, programming, ACG fans.
+      </p>
+      <n-alert
+        type="warning"
+        title="Under Construction"
+        class="max-w-lg mx-auto mb-8"
+        closable
+      >
+        <n-marquee>
+          <div style="margin-right: 64px">
+            小羊懒得施工产品介绍，所以懂得都懂。不懂得我也不好多说，如果你真的知道可以去看我们的宣传片，如果你连宣传片都不知道在哪里的话我也不知道怎么办了。
+          </div>
+        </n-marquee>
+      </n-alert>
+      <n-space justify="center">
+        <n-button type="primary" size="large" round tag="a" href="#features">
+          Explore features
+        </n-button>
+        <n-button type="default" size="large" round tag="a" href="#download">
+          Download
+        </n-button>
+      </n-space>
+    </div>
+    <div id="features" class="pb-56">
+      <client-only>
+        <n-grid cols="1 m:2 l:2" responsive="screen" x-gap="32" y-gap="16">
+          <n-gi>
+            <div class="flex items-center justify-center">
+              <iframe
+                width="560"
+                height="315"
+                src="https://www.youtube-nocookie.com/embed/Pek0cLDAol4?si=f3J3Kqto5u-Nc_5f"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerpolicy="strict-origin-when-cross-origin"
+                allowfullscreen
+              ></iframe>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div
+              class="flex justify-center text-right h-full py-8 px-4 flex flex-col"
+            >
+              <h2 class="text-3xl font-bold mb-3">Features</h2>
+              <p class="text-lg mb-1">
+                As the alert described, this part is under construction. For now
+                you can check out the video on the left.
+              </p>
+              <p class="text-md">
+                如果你看得懂这行字就说明你有可能访问不了
+                YouTube，你可以去哔哩哔哩上搜一下 「Solar Network」
+                我懒得放链接了（
+              </p>
+            </div>
+          </n-gi>
+        </n-grid>
+      </client-only>
+    </div>
+    <div id="download" class="pb-56">
+      <client-only>
+        <n-grid cols="1 m:2 l:2" responsive="screen" x-gap="32" y-gap="16">
+          <n-gi>
+            <div
+              class="flex justify-center text-left h-full py-8 px-4 flex flex-col"
+            >
+              <h2 class="text-3xl font-bold mb-3">Download</h2>
+              <p class="text-lg mb-1">
+                Get the latest version of Solar Network for your device.
+              </p>
+              <p class="text-lg">
+                File-hosting & versioning by
+                <a
+                  class="underline"
+                  href="https://github.com/Solsynth/HyperNet.Surface"
+                  target="_blank"
+                  >GitHub</a
+                >
+              </p>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div class="flex items-center justify-center flex-col">
+              <n-card title="Latest Release">
+                <p>
+                  <code>{{ latestRelease.data.value?.tag_name }}</code>
+                </p>
+                <p class="font-bold text-lg">
+                  {{ latestRelease.data.value?.name }}
+                </p>
+                <n-button
+                  type="primary"
+                  tag="a"
+                  target="_blank"
+                  round
+                  class="mt-4"
+                  :href="latestRelease.data.value?.html_url"
+                >
+                  Go to GitHub and Download
+                  <template #icon>
+                    <n-icon>
+                      <launch-round />
+                    </n-icon>
+                  </template>
+                </n-button>
+              </n-card>
+            </div>
+          </n-gi>
+        </n-grid>
+      </client-only>
+    </div>
+  </main>
+</template>
+
+<script lang="ts" setup>
+import {
+  NSpace,
+  NButton,
+  NGrid,
+  NGi,
+  NCard,
+  NAlert,
+  NIcon,
+  NMarquee,
+} from "naive-ui";
+import { Octokit } from "@octokit/rest";
+import { LaunchRound } from "@vicons/material";
+
+const latestRelease = useAsyncData("sn-latest-release", async () => {
+  const octo = new Octokit({});
+  const resp = await octo.repos.getLatestRelease({
+    owner: "Solsynth",
+    repo: "Solian",
+  });
+  return resp.data;
+});
+</script>

bun.lock

@@ -11,6 +11,7 @@
         "@nuxt/image": "1.10.0",
         "@nuxt/scripts": "0.11.10",
         "@nuxtjs/tailwindcss": "6.14.0",
+        "@octokit/rest": "^22.0.0",
         "@unhead/vue": "^2.0.3",
         "@vueuse/core": "^13.6.0",
         "@vueuse/nuxt": "13.6.0",
@@ -291,6 +292,30 @@
 
     "@nuxtjs/tailwindcss": ["@nuxtjs/tailwindcss@6.14.0", "", { "dependencies": { "@nuxt/kit": "^3.16.0", "autoprefixer": "^10.4.20", "c12": "^3.0.2", "consola": "^3.4.0", "defu": "^6.1.4", "h3": "^1.15.1", "klona": "^2.0.6", "ohash": "^2.0.11", "pathe": "^2.0.3", "pkg-types": "^2.1.0", "postcss": "^8.5.3", "postcss-nesting": "^13.0.1", "tailwind-config-viewer": "^2.0.4", "tailwindcss": "~3.4.17", "ufo": "^1.5.4", "unctx": "^2.4.1" } }, "sha512-30RyDK++LrUVRgc2A85MktGWIZoRQgeQKjE4CjjD64OXNozyl+4ScHnnYgqVToMM6Ch2ZG2W4wV2J0EN6F0zkQ=="],
 
+    "@octokit/auth-token": ["@octokit/auth-token@6.0.0", "", {}, "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w=="],
+
+    "@octokit/core": ["@octokit/core@7.0.3", "", { "dependencies": { "@octokit/auth-token": "^6.0.0", "@octokit/graphql": "^9.0.1", "@octokit/request": "^10.0.2", "@octokit/request-error": "^7.0.0", "@octokit/types": "^14.0.0", "before-after-hook": "^4.0.0", "universal-user-agent": "^7.0.0" } }, "sha512-oNXsh2ywth5aowwIa7RKtawnkdH6LgU1ztfP9AIUCQCvzysB+WeU8o2kyyosDPwBZutPpjZDKPQGIzzrfTWweQ=="],
+
+    "@octokit/endpoint": ["@octokit/endpoint@11.0.0", "", { "dependencies": { "@octokit/types": "^14.0.0", "universal-user-agent": "^7.0.2" } }, "sha512-hoYicJZaqISMAI3JfaDr1qMNi48OctWuOih1m80bkYow/ayPw6Jj52tqWJ6GEoFTk1gBqfanSoI1iY99Z5+ekQ=="],
+
+    "@octokit/graphql": ["@octokit/graphql@9.0.1", "", { "dependencies": { "@octokit/request": "^10.0.2", "@octokit/types": "^14.0.0", "universal-user-agent": "^7.0.0" } }, "sha512-j1nQNU1ZxNFx2ZtKmL4sMrs4egy5h65OMDmSbVyuCzjOcwsHq6EaYjOTGXPQxgfiN8dJ4CriYHk6zF050WEULg=="],
+
+    "@octokit/openapi-types": ["@octokit/openapi-types@25.1.0", "", {}, "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA=="],
+
+    "@octokit/plugin-paginate-rest": ["@octokit/plugin-paginate-rest@13.1.1", "", { "dependencies": { "@octokit/types": "^14.1.0" }, "peerDependencies": { "@octokit/core": ">=6" } }, "sha512-q9iQGlZlxAVNRN2jDNskJW/Cafy7/XE52wjZ5TTvyhyOD904Cvx//DNyoO3J/MXJ0ve3rPoNWKEg5iZrisQSuw=="],
+
+    "@octokit/plugin-request-log": ["@octokit/plugin-request-log@6.0.0", "", { "peerDependencies": { "@octokit/core": ">=6" } }, "sha512-UkOzeEN3W91/eBq9sPZNQ7sUBvYCqYbrrD8gTbBuGtHEuycE4/awMXcYvx6sVYo7LypPhmQwwpUe4Yyu4QZN5Q=="],
+
+    "@octokit/plugin-rest-endpoint-methods": ["@octokit/plugin-rest-endpoint-methods@16.0.0", "", { "dependencies": { "@octokit/types": "^14.1.0" }, "peerDependencies": { "@octokit/core": ">=6" } }, "sha512-kJVUQk6/dx/gRNLWUnAWKFs1kVPn5O5CYZyssyEoNYaFedqZxsfYs7DwI3d67hGz4qOwaJ1dpm07hOAD1BXx6g=="],
+
+    "@octokit/request": ["@octokit/request@10.0.3", "", { "dependencies": { "@octokit/endpoint": "^11.0.0", "@octokit/request-error": "^7.0.0", "@octokit/types": "^14.0.0", "fast-content-type-parse": "^3.0.0", "universal-user-agent": "^7.0.2" } }, "sha512-V6jhKokg35vk098iBqp2FBKunk3kMTXlmq+PtbV9Gl3TfskWlebSofU9uunVKhUN7xl+0+i5vt0TGTG8/p/7HA=="],
+
+    "@octokit/request-error": ["@octokit/request-error@7.0.0", "", { "dependencies": { "@octokit/types": "^14.0.0" } }, "sha512-KRA7VTGdVyJlh0cP5Tf94hTiYVVqmt2f3I6mnimmaVz4UG3gQV/k4mDJlJv3X67iX6rmN7gSHCF8ssqeMnmhZg=="],
+
+    "@octokit/rest": ["@octokit/rest@22.0.0", "", { "dependencies": { "@octokit/core": "^7.0.2", "@octokit/plugin-paginate-rest": "^13.0.1", "@octokit/plugin-request-log": "^6.0.0", "@octokit/plugin-rest-endpoint-methods": "^16.0.0" } }, "sha512-z6tmTu9BTnw51jYGulxrlernpsQYXpui1RK21vmXn8yF5bp6iX16yfTtJYGK5Mh1qDkvDOmp2n8sRMcQmR8jiA=="],
+
+    "@octokit/types": ["@octokit/types@14.1.0", "", { "dependencies": { "@octokit/openapi-types": "^25.1.0" } }, "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g=="],
+
     "@oxc-minify/binding-android-arm64": ["@oxc-minify/binding-android-arm64@0.77.3", "", { "os": "android", "cpu": "arm64" }, "sha512-9bGiDHSkPr6eaP4+/2DQerG+V69Ut4mezL1JtBTk54Iyc6tNsoHa9s+3wJSUHesXEgiHd/IxwuSXRtD9yC3VhQ=="],
 
     "@oxc-minify/binding-darwin-arm64": ["@oxc-minify/binding-darwin-arm64@0.77.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-DcRuFK/W3VqIlS8Wvb9bwd5yX+QTlr2ds2f5HW52OPx4odFwyF3+dD6nj3kyxvxITtf6U3jjqyaZEkq+LSQ5RQ=="],
@@ -747,6 +772,8 @@
 
     "base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
 
+    "before-after-hook": ["before-after-hook@4.0.0", "", {}, "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ=="],
+
     "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
 
     "bindings": ["bindings@1.5.0", "", { "dependencies": { "file-uri-to-path": "1.0.0" } }, "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="],
@@ -1113,6 +1140,8 @@
 
     "extract-zip": ["extract-zip@2.0.1", "", { "dependencies": { "debug": "^4.1.1", "get-stream": "^5.1.0", "yauzl": "^2.10.0" }, "optionalDependencies": { "@types/yauzl": "^2.9.1" }, "bin": { "extract-zip": "cli.js" } }, "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg=="],
 
+    "fast-content-type-parse": ["fast-content-type-parse@3.0.0", "", {}, "sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg=="],
+
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
     "fast-fifo": ["fast-fifo@1.3.2", "", {}, "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ=="],
@@ -2233,6 +2262,8 @@
 
     "unist-util-visit-parents": ["unist-util-visit-parents@6.0.1", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw=="],
 
+    "universal-user-agent": ["universal-user-agent@7.0.3", "", {}, "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A=="],
+
     "universalify": ["universalify@2.0.1", "", {}, "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="],
 
     "unixify": ["unixify@1.0.0", "", { "dependencies": { "normalize-path": "^2.1.1" } }, "sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg=="],

package.json

@@ -17,6 +17,7 @@
     "@nuxt/image": "1.10.0",
     "@nuxt/scripts": "0.11.10",
     "@nuxtjs/tailwindcss": "6.14.0",
+    "@octokit/rest": "^22.0.0",
     "@unhead/vue": "^2.0.3",
     "@vueuse/core": "^13.6.0",
     "@vueuse/nuxt": "13.6.0",