feat(web): added the empty pages

kurone-kito · Jun 28, 2024 · 351849e · 351849e
1 parent fef0ae7
commit 351849e
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 4 deletions.
diff --git a/.github/workflows/build-listing.yml b/.github/workflows/build-listing.yml
@@ -62,7 +62,9 @@ jobs:
           HUSKY: 0
         name: Install the dependencies
         run: corepack up
-      - name: Run the build to generate the website
+      - env:
+          BASE_PATH: /launchpad-icons/
+        name: Run the build to generate the website
         run: pnpm run build
       - name: Load cached data from previous runs
         uses: actions/cache@v4

diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "test": "pnpm run lint"
   },
   "dependencies": {
+    "@solidjs/router": "^0.13.6",
     "@solidjs/start": "^1.0.2",
     "solid-js": "^1.8.17"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .article-container {
+    @apply mx-auto p-6 lg:px-0 lg:py-6 lg:container;
+  }
+}
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,6 +1,32 @@
+import { Router } from '@solidjs/router';
+import { FileRoutes } from '@solidjs/start/router';
 import type { Component } from 'solid-js';
+import { Suspense } from 'solid-js';
 import './app.css';
 
-const App: Component = () => <>Hello,world!</>;
+const App: Component = () => (
+  <div>
+    <ul class="flex gap-2">
+      <li>
+        <a href=".">Index</a>
+      </li>
+      <li>
+        <a href="docs">Docs</a>
+      </li>
+      <li>
+        <a href="explore">Explore</a>
+      </li>
+      <li>
+        <a href="pricing">Pricing</a>
+      </li>
+    </ul>
+    <Router
+      base={import.meta.env.SERVER_BASE_URL}
+      root={(props) => <Suspense>{props.children}</Suspense>}
+    >
+      <FileRoutes />
+    </Router>
+  </div>
+);
 
 export default App;
diff --git a/src/entry-server.tsx b/src/entry-server.tsx
@@ -1,14 +1,42 @@
 // @refresh reload
 import { createHandler, StartServer } from '@solidjs/start/server';
 
+/** The description of the site. */
+const description =
+  'The Launchpad Icons provide 64 icons that look like VRChat icons';
+
+/** The title of the site. */
+const title = 'Launchpad Icons';
+
 /** The server handler. */
 export default createHandler(() => (
   <StartServer
     document={({ assets, children, scripts }) => (
-      <html>
+      <html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article# website: http://ogp.me/ns/website#">
         <head>
+          <title>🚀 {title}</title>
           <meta charset="utf-8" />
+          <meta name="author" content="Kuroné Kito" />
+          <meta name="color-scheme" content="light dark" />
+          <meta name="coverage" content="Worldwide" />
+          <meta name="description" content={description} />
+          <meta name="generator" content="SolidJS" />
+          <meta
+            name="keywords"
+            content="asset,icons,Launchpad,SVG,unitypackage,UPM,VCC,VPM,VRChat"
+          />
+          <meta name="rating" content="General" />
+          <meta name="referer" content="same-origin" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:creator" content="@kurone_kito" />
+          <meta name="twitter:description" content={description} />
+          <meta name="twitter:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="op:markup_version" content="v1.0" />
+          <meta property="og:site_name" content={title} />
+          <meta property="og:type" content="website" />
+          <link rel="author" href="https://kit.black/" />
           {assets}
         </head>
         <body>

diff --git a/src/routes/docs.tsx b/src/routes/docs.tsx
@@ -0,0 +1,14 @@
+import type { Component } from 'solid-js';
+
+/**
+ * The documents page.
+ * @returns The component.
+ */
+const Docs: Component = () => (
+  <main class="article-container">
+    <h1>Docs page</h1>
+    <p>TODO: Add the content here.</p>
+  </main>
+);
+
+export default Docs;
diff --git a/src/routes/explore.tsx b/src/routes/explore.tsx
@@ -0,0 +1,14 @@
+import type { Component } from 'solid-js';
+
+/**
+ * The explore page.
+ * @returns The component.
+ */
+const Explore: Component = () => (
+  <main class="article-container">
+    <h1>Explore page</h1>
+    <p>TODO: Add the content here.</p>
+  </main>
+);
+
+export default Explore;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -0,0 +1,10 @@
+import type { Component, JSX } from 'solid-js';
+
+const Index: Component = (): JSX.Element => (
+  <main class="article-container">
+    <h1>Top page</h1>
+    <p>TODO: Add the content here.</p>
+  </main>
+);
+
+export default Index;
diff --git a/src/routes/pricing.tsx b/src/routes/pricing.tsx
@@ -0,0 +1,14 @@
+import type { Component } from 'solid-js';
+
+/**
+ * The explore page.
+ * @returns The component.
+ */
+const Pricing: Component = () => (
+  <main class="article-container">
+    <h1>Pricing page</h1>
+    <p>TODO: Add the content here.</p>
+  </main>
+);
+
+export default Pricing;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,2 +1,21 @@
 /** @type {import('tailwindcss').Config} */
-export default { content: ['./src/**/*.{html,js,jsx,ts,tsx}'] };
+export default {
+  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          'Helvetica Neue',
+          'Arial',
+          'Hiragino Sans',
+          'BIZ UDPGothic',
+          'Yu Gothic',
+          'YuGothic',
+          'Meiryo',
+          'sans-serif',
+        ],
+      },
+    },
+  },
+};