Some SEO stuff

NebulaServices · Dec 4, 2024 · 41c1094 · 41c1094
1 parent 208b37c
commit 41c1094
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 27 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -29,6 +29,15 @@ export default defineConfig({
                     access: "public",
                     optional: true,
                     default: parsedDoc.marketplace.enabled
+                }),
+                SEO: envField.string({
+                    context: "client",
+                    access: "public",
+                    optional: true,
+                    default: JSON.stringify({
+                        enabled: parsedDoc.seo.enabled,
+                        domain: new URL(parsedDoc.seo.domain).host
+                    })
                 })
             }
         }

diff --git a/database_assets/com.nebula.gruvbox/gruvbox.jpeg b/database_assets/com.nebula.gruvbox/gruvbox.jpeg
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@types/sequelize": "^4.28.20",
     "astro": "^4.16.13",
     "astro-icon": "^1.1.2",
+    "astro-seo": "^0.8.4",
     "chalk": "^5.3.0",
     "concurrently": "^8.2.2",
     "fastify": "^5.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/logo.png b/public/logo.png
diff --git a/server/config.ts b/server/config.ts
@@ -15,6 +15,10 @@ interface TomlData {
             logging: boolean;
         };
     };
+    seo: {
+        enabled: boolean;
+        domain: string;
+    };
     db: {
         name: string;
         username: string;
@@ -31,6 +35,7 @@ interface Verify {
     name: string;
     typeOF: any;
     type: any;
+    verifyExtras?: () => boolean | Error;
 }
 
 let doc = readFileSync(fileURLToPath(new URL("../config.toml", import.meta.url))).toString();
@@ -41,6 +46,12 @@ function verify(t: Verify[]) {
         if (typeof t[i].typeOF !== t[i].type) {
             throw new Error(`Invalid structure: "${t[i].name}" should be a(n) ${t[i].type}`);
         }
+        if (t[i].verifyExtras) {
+            const extra = t[i].verifyExtras();
+            if (extra !== true) {
+                throw extra;
+            }
+        }
     }
 }
 
@@ -53,6 +64,17 @@ verify([
     { name: "server.server.port", typeOF: parsedDoc.server.server.port, type: "number" },
     { name: "server.server.wisp", typeOF: parsedDoc.server.server.wisp, type: "boolean" },
     { name: "server.server.logging", typeOF: parsedDoc.server.server.logging, type: "boolean" },
+    { name: "seo", typeOF: parsedDoc.seo, type: "object" },
+    { name: "seo.enabled", typeOF: parsedDoc.seo.enabled, type: "boolean" },
+    { name: "seo.domain", typeOF: parsedDoc.seo.domain, type: "string", verifyExtras: () => {
+        try {
+            new URL(parsedDoc.seo.domain);
+        }
+        catch (e) {
+            return Error(e);
+        }
+        return true;
+    }},
     { name: "db", typeOF: parsedDoc.db, type: "object" },
     { name: "db.name", typeOF: parsedDoc.db.name, type: "string" },
     { name: "db.username", typeOF: parsedDoc.db.username, type: "string" },

diff --git a/server/dbSetup.ts b/server/dbSetup.ts
@@ -33,7 +33,7 @@ async function setupDB(db: ModelStatic<CatalogModel>) {
         {
             package_name: "com.nebula.gruvbox",
             title: "Gruvbox",
-            image: "gruvbox.jpeg",
+            image: "gruvbox.jpg",
             author: "Nebula Services",
             version: "1.0.0",
             description: "The gruvbox theme",

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -3,6 +3,8 @@ import { ViewTransitions } from "astro:transitions";
 import Header from "@components/Header.astro";
 import MobileNavigation from "@components/MobileNavigation.astro";
 import SettingsLoader from "@components/settings/Loader.astro";
+import { SEO } from "astro-seo";
+import { SEO as SEOC } from "astro:env/client";
 interface Props {
   title: string;
   noHeader?: string;
@@ -11,42 +13,70 @@ interface Props {
 }
 
 const { title, noHeader, description, image } = Astro.props;
+const SEOConfig = JSON.parse(SEOC);
+const Host = Astro.url.host;
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
     <SettingsLoader transition:persist />
     <meta charset="UTF-8" />
-    <meta
-      name="description"
-      content={description ? description : "Astro description"}
-    />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:image" content={image ? image : ""} />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
+    <SEO
+        title={title},
+        titleTemplate=`${SEOConfig.enabled && Host === SEOConfig.domain ? 'Nebula | %s': '%s'}`,
+        titleDefault=`${SEOConfig.enabled && Host === SEOConfig.domain ? 'Nebula': ''}`,
+        description=`${SEOConfig.enabled && Host === SEOConfig.domain ? description ? description : 'A stunning and sleek web proxy with support for hundreds of popular sites.' : ''}`,
+        charset="UTF-8",
+        openGraph={{
+            basic: {
+                title: `${SEOConfig.enabled && Host === SEOConfig.domain ? 'Nebula' :''}`,
+                type: 'website',
+                url: `${SEOConfig.enabled && Host === SEOConfig.domain ? 'https://nebulaproxy.io' : ''}`,
+                image: `${SEOConfig.enabled && Host === SEOConfig.domain ? image ? image : '/logo.png': ''}`
+            },
+            optional: {
+                description: `${SEOConfig.enabled && Host === SEOConfig.domain ? description ? description : 'A stunning and sleek web proxy with support for hundreds of popular sites.' : ''}`
+            }
+        }},
+        twitter={{
+            card: "summary_large_image",
+            title: `${SEOConfig.enabled && Host === SEOConfig.domain ? 'Nebula' : ''}`,
+            description: `${SEOConfig.enabled && Host === SEOConfig.domain ? description ? description : 'A stunning and sleek web proxy with support for hundreds of popular sites.' : ''}`,
+            image: `${SEOConfig.enabled && Host === SEOConfig.domain ? image ? image : '/logo.png': ''}`,
+            imageAlt: `${image ? 'Catalog image' : `${SEOConfig.enabled && Host === SEOConfig.domain && "Nebula services's"} logo`}`
+        }},
+        extend={{
+            link: [
+                { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg', id: 'favicon' },
+                { 
+                    rel: 'preload', 
+                    href: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap",
+                    as: 'style',
+                    crossorigin: 'anonymous'
+                },
+                {
+                    rel: 'preload',
+                    href: "https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2",
+                    as: 'font',
+                    type: 'font/woff2',
+                    crossorigin: 'anonymous'
+                }
+            ],
+            meta: [
+                { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
+                { name: 'generator', content: `${Astro.generator}` }
+            ]
+        }}
+        />
+    {/* I left this out of the SEO component as we need it to persist properly : D */}
     <link
       rel="stylesheet"
       href="/nebula.css"
       id="stylesheet"
       transition:persist
     />
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-      as="style"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="preload"
-      href="https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-    <ViewTransitions />
+    <ViewTransitions fallback="animate" />
   </head>
   <body class="h-full bg-primary">
     {!noHeader && <Header />}

diff --git a/src/pages/[lang]/catalog/package/[...packageName].astro b/src/pages/[lang]/catalog/package/[...packageName].astro
@@ -10,7 +10,7 @@ const assetsJson = await response.json();
 <Layout
   title={`Package: ${assetsJson.title}`}
   description=`${assetsJson.title} is a package on Nebula. Start using this package on Nebula today!`
-  image={assetsJson.image}
+  image={`/packages/${packageName}/${assetsJson.image}`}
 >
   <div
     class="flex flex-wrap min-[1032px]:mt-16 mt-8 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center lg:pb-64 font-roboto max-md:p-4"

diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
@@ -12,7 +12,7 @@ const t = useTranslations(lang);
 import { VERSION } from "astro:env/client";
 ---
 
-<Layout title="Nebula">
+<Layout title="Home">
   <div
     class="flex flex-wrap mt-16 justify-center content-center w-full bg-primary fixed inset-0 h-[calc(100%-4rem)] z-0 flex-col items-center"
   >

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,7 +3,7 @@ import Loading from "@components/Loading.astro";
 import Layout from "@layouts/Layout.astro";
 ---
 
-<Layout title="Loading..." noHeader="true">
+<Layout title="" noHeader="true">
     <Loading />
 </Layout>
 <script>