feat: provide good head (#1204)

unionlabs · Jan 25, 2024 · b368e67 · b368e67
2 parents 7d51c42 + 9728d85
commit b368e67
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 37 deletions.
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -24,6 +24,7 @@
     "@observablehq/plot": "^0.6.13",
     "@urql/svelte": "4.0.4",
     "astro": "4.0.9",
+    "astro-seo": "^0.8.0",
     "graphql": "16.8.1",
     "htl": "^0.3.1",
     "rehype-autolink-headings": "^7.1.0",

diff --git a/site/public/logo.png b/site/public/logo.png
diff --git a/site/site.nix b/site/site.nix
@@ -6,7 +6,7 @@
     {
       packages = {
         site = pkgs.buildNpmPackage {
-          npmDepsHash = "sha256-Yoq8eCZEj6tViTyL5Uj+sr1EOWl9AXiF3/L7DTZrfyw=";
+          npmDepsHash = "sha256-4YxL4ubvVgwi+30Q7Cd9xJGFxFBlylLrE0eTgy7jSi4=";
           src = ./.;
           pname = "site";
           version = "0.0.1";

diff --git a/site/src/layouts/Layout.astro b/site/src/layouts/Layout.astro
@@ -0,0 +1,68 @@
+---
+import '#/styles/reset.css'
+import '#/styles/tailwind.css'
+import { SEO } from 'astro-seo'
+import '@fontsource/ibm-plex-mono'
+import '@fontsource/jetbrains-mono'
+import Header from '#/components/Header.svelte'
+---
+
+<html lang='en'>
+  <head>
+    <meta charset='utf-8' />
+    <SEO
+      title='Union'
+      description='The Sovereign Interoperability Layer'
+      openGraph={{
+        basic: {
+          title: 'Union',
+          type: 'website',
+          image: '/logo.png',
+          url: 'https://union.build'
+        },
+        optional: {
+          locale: 'en',
+          siteName: 'Union',
+          description: 'The Sovereign Interoperability Layer'
+        },
+        image: {
+          url: '/logo.png'
+        }
+      }}
+      twitter={{
+        title: 'Union',
+        image: '/logo.png',
+        imageAlt: 'Union Logo',
+        creator: '@union_build',
+        site: 'https://union.build',
+        card: 'summary_large_image',
+        description: 'The Sovereign Interoperability Layer'
+      }}
+      extend={{
+        link: [
+          { rel: 'icon', href: 'favicon.ico' },
+          { rel: 'canonical', href: 'https://union.build' }
+        ],
+        meta: [
+          { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
+          { name: 'twitter:domain', content: 'union.build' },
+          { name: 'twitter:url', content: 'https://union.build' },
+          { name: 'twitter:description', content: 'The Sovereign Interoperability Layer' }
+        ]
+      }}
+    />
+  </head>
+  <body
+    class='font-sans flex flex-col items-stretch flex-1 shadow-effect-bg pb-12 bg-black text-white not-content'
+  >
+    <Header />
+
+    <slot />
+
+    <footer
+      class='flex items-center pt-8 p-4 gap-4 justify-center text-lg font-normal bottom-0 mx-auto w-full'
+    >
+      <p>&copy; Union.fi Labs, Inc.</p>
+    </footer>
+  </body>
+</html>
diff --git a/site/src/layouts/Layout.svelte b/site/src/layouts/Layout.svelte
diff --git a/site/src/pages/blog/[...slug].astro b/site/src/pages/blog/[...slug].astro
@@ -1,5 +1,5 @@
 ---
-import Layout from '#/layouts/Layout.svelte'
+import Layout from '#/layouts/Layout.astro'
 import { getCollection } from 'astro:content'
 import Socials from '#/components/Socials.astro'
 

diff --git a/site/src/pages/blog/index.astro b/site/src/pages/blog/index.astro
@@ -1,6 +1,6 @@
 ---
 import { fade,slide, } from 'astro:transitions'
-import Layout from '#/layouts/Layout.svelte'
+import Layout from '#/layouts/Layout.astro'
 import { getCollection } from 'astro:content'
 const isProduction = import.meta.env.PROD
 

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import { fade } from 'astro:transitions'
-import Layout from '#/layouts/Layout.svelte'
+import Layout from '#/layouts/Layout.astro'
 import { getCollection } from 'astro:content'
 import Socials from '#/components/Socials.astro'
 import CodeSnippet from '#/components/CodeSnippet.svelte'