🔍 Sitemap!

♿ Dark mode to protect your eyes

.env

@@ -1,4 +1,4 @@
 NUXT_PUBLIC_SOLAR_REALM_ID=2
-NUXT_PUBLIC_BASE_URL=https://sn.solsynth.dev
+NUXT_PUBLIC_SITE_URL=https://solsynth.dev
 NUXT_PUBLIC_SOLAR_NETWORK_API=https://api.sn.solsynth.dev
 NUXT_PUBLIC_SOLIAN_URL=https://sn.solsynth.dev

app.vue

@@ -7,5 +7,16 @@
 </template>
 
 <script setup lang="ts">
+import { useTheme } from "vuetify"
 import "@unocss/reset/tailwind.css"
+
+const theme = useTheme()
+
+onMounted(() => {
+  theme.global.name.value = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
+    theme.global.name.value = event.matches ? "dark" : "light"
+  })
+})
 </script>

components/post/Item.vue

@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <article v-if="post.type == 'story'" class="text-base prose prose-truegray mx-auto">
+      <article v-if="post.type == 'story'" class="text-base prose mx-auto">
         <m-d-c :value="post.body?.content"></m-d-c>
       </article>
 

nuxt.config.ts

@@ -4,11 +4,21 @@ import vuetify, { transformAssetUrls } from "vite-plugin-vuetify"
 export default defineNuxtConfig({
   devtools: { enabled: true },
 
+  site: {
+    url: "https://solsynth.dev",
+    name: "Solsynth LLC",
+  },
+  sitemap: {
+    sources: [
+      "/api/sitemap/posts",
+    ],
+  },
+
   css: ["@/assets/index.css"],
 
   runtimeConfig: {
     public: {
-      baseUrl: "https://solsynth.dev",
+      siteUrl: "https://solsynth.dev",
       solarRealmId: 2,
       solarNetworkApi: "https://api.sn.solsynth.dev",
       solianUrl: "https://sn.solsynth.dev",
@@ -48,6 +58,7 @@ export default defineNuxtConfig({
     "@unocss/nuxt",
     "@nuxt/content",
     "@nuxt/image",
+    "@nuxtjs/sitemap",
     (_options, nuxt) => {
       nuxt.hooks.hook("vite:extendConfig", (config) => {
         // @ts-expect-error

package.json

@@ -13,6 +13,7 @@
     "@mdi/font": "^7.4.47",
     "@nuxt/content": "^2.13.2",
     "@nuxt/image": "^1.7.0",
+    "@nuxtjs/sitemap": "^6.0.0-beta.1",
     "nuxt": "^3.12.4",
     "vue": "latest"
   },

pages/index.vue

@@ -32,7 +32,8 @@ const { data: products } = await useAsyncData("products", () => queryContent("/p
 }
 
 .content-section {
-  margin-top: 3rem;
-  margin-bottom: 8rem;
+  height: calc(100vh - 80px);
+  display: flex;
+  place-items: center;
 }
 </style>

pages/posts/[id].vue

@@ -10,7 +10,7 @@
       </div>
     </div>
 
-    <article class="text-base prose prose-truegray xl:text-lg mx-auto">
+    <article class="text-base prose xl:text-lg mx-auto">
       <m-d-c :value="post.body?.content"></m-d-c>
     </article>
 

pages/products/[...slug].vue

@@ -25,7 +25,7 @@
       </v-card-text>
     </v-card>
 
-    <article class="text-base prose prose-truegray xl:text-lg mx-auto">
+    <article class="text-base prose xl:text-lg mx-auto">
       <content-doc>
         <template #empty>
           <v-empty-state

plugins/vuetify.ts

@@ -17,9 +17,21 @@ export default defineNuxtPlugin((app) => {
       ...labsComponents,
     },
     theme: {
-      defaultTheme: "original",
+      defaultTheme: "light",
       themes: {
-        original: {
+        light: {
+          colors: {
+            primary: "#4a5099",
+            secondary: "#2196f3",
+            accent: "#009688",
+            error: "#f44336",
+            warning: "#ff9800",
+            info: "#03a9f4",
+            success: "#4caf50",
+          },
+        },
+        dark: {
+          dark: true,
           colors: {
             primary: "#4a5099",
             secondary: "#2196f3",

server/api/sitemap/posts.ts

@@ -0,0 +1,11 @@
+export default defineSitemapEventHandler(async () => {
+  const config = useRuntimeConfig();
+
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/interactive/posts?take=500`)
+  const result = await res.json()
+
+  return result.data.map((item: any) => asSitemapUrl({
+    loc: `/posts/${item.id}`,
+    _sitemap: "posts",
+  }));
+})

utils/seo.ts

@@ -14,7 +14,7 @@ export function createSEOHead(title: string, description: string, url: string) {
     {
       hid: 'og:url',
       property: 'og:url',
-      content: useRuntimeConfig().public.baseUrl + '/' + url,
+      content: useRuntimeConfig().public.siteUrl + '/' + url,
     },
   ]
 }