chore: 🤖 open metadata (#70)

## Why? Open metadata ## How? - Pass blog metadata ## Tickets? - [PRO-31](https://linear.app/fleekxyz/issue/PRO-31/add-open-graph-meta-as-it-should-always-generate-a-preview-title-and) ## Contribution checklist? - [ ] The commit messages are detailed - [ ] The `build` command runs locally - [ ] Assets or static content are linked and stored in the project - [ ] Document filename is named after the slug - [ ] You've reviewed spelling using a grammar checker - [ ] For documentation, guides or references, you've tested the commands and steps - [ ] You've done enough research before writing ## Security checklist? - [ ] Sensitive data has been identified and is being protected properly - [ ] Injection has been prevented (parameterized queries, no eval or system calls) - [ ] The Components are escaping output (to prevent XSS) ## References? Optionally, provide references such as links ## Preview? Optionally, provide the preview url here
fleek-platform · Jun 5, 2024 · 752af91 · 752af91
1 parent ccd8bb0
commit 752af91
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 21 deletions.
diff --git a/src/layouts/BaseHtml.astro b/src/layouts/BaseHtml.astro
@@ -8,9 +8,15 @@ import settings from '@base/settings.json';
 
 interface Props {
   title: string;
+  ogMeta: {
+    title: string;
+    description: string;
+    image: string;
+    slug: string;
+  };
 }
 
-const { title } = Astro.props;
+const { title, ogMeta } = Astro.props;
 ---
 
 <!doctype html>
@@ -50,32 +56,34 @@ const { title } = Astro.props;
       crossorigin
     />
     <meta name="generator" content={Astro.generator} />
-    <title>{settings.site.metadata.title}</title>
     <!-- HTML Meta Tags -->
     <title>{settings.site.metadata.title}</title>
     <meta name="description" content={settings.site.metadata.description} />
     <!-- Facebook Meta Tags -->
-    <meta property="og:url" content="TODO:NAV->URL" />
+    <meta property="og:url" content={`${getSiteUrl()}/${ogMeta?.slug || ''}`} />
     <meta property="og:type" content="website" />
-    <meta property="og:title" content={settings.site.metadata.title} />
+    <meta
+      property="og:title"
+      content={ogMeta?.title || settings.site.metadata.title}
+    />
     <meta
       property="og:description"
-      content={settings.site.metadata.description}
+      content={ogMeta?.description || settings.site.metadata.description}
     />
-    <meta property="og:image" content="TODO:NAV->Poster" />
+    <meta property="og:image" content={ogMeta?.image} />
     <!-- Twitter Meta Tags -->
-    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:card" content={ogMeta?.image} />
     <meta property="twitter:domain" content={getSiteUrl()} />
-    <meta property="twitter:url" content="TODO:NAV->URL" />
+    <meta property="twitter:url" content={`${getSiteUrl()}/${ogMeta?.slug}`} />
     <meta
       name="twitter:title"
-      content="Fleek | Build Lightning Fast Web3 Apps"
+      content={ogMeta?.title || settings.site.metadata.title}
     />
     <meta
       name="twitter:description"
-      content={settings.site.metadata.description}
+      content={ogMeta?.description || settings.site.metadata.description}
     />
-    <meta name="twitter:image" content="TODO:NAV->Poster" />
+    <meta name="twitter:image" content={ogMeta?.image} />
   </head>
   <body
     class="--font-plex-sans --font-plex-mono --font-sans bg-mesh min-h-full bg-black font-sans text-gray-dark-11 selection:bg-yellow-dark-9 selection:text-black"

diff --git a/src/layouts/BlogPage.astro b/src/layouts/BlogPage.astro
@@ -5,11 +5,21 @@ import BaseHtml from '@layouts/BaseHtml.astro';
 
 import type { MarkdownHeading } from 'astro';
 
-const { title } = Astro.props;
+const data = Astro.props;
+
+const { title, description, image, slug } = Astro.props;
 const currentPage = Astro.url.pathname;
 ---
 
-<BaseHtml title={title}>
+<BaseHtml
+  title={title}
+  ogMeta={{
+    title,
+    description,
+    image,
+    slug,
+  }}
+>
   <main class="container min-h-container">
     <slot />
   </main>

diff --git a/src/layouts/DocPage.astro b/src/layouts/DocPage.astro
@@ -50,7 +50,6 @@ const {
 })();
 
 const data = await getEntry(collection, id);
-
 if (!data || !data?.id || !data?.collection) {
   throw Error('Oops! Unexpected response data');
 }
@@ -68,9 +67,21 @@ const indexNameDocs = import.meta.env.PUBLIC_MEILISEARCH_INDEX_DOCS;
 
 // TODO: Fails after prod build
 const isHome = Astro.url.pathname === '/docs';
+
+const description = '';
+const slug = `docs/${data.slug}`;
+const image = '';
 ---
 
-<BaseHtml title={title}>
+<BaseHtml
+  title={title}
+  ogMeta={{
+    title,
+    description,
+    image,
+    slug,
+  }}
+>
   <main class="container min-h-container">
     <div class={`grid grid-cols-[1fr] gap-4 md:grid-cols-[1fr,4fr,1fr]`}>
       <aside data-name="doc-sidebar" class="w-300 relative pl-32">

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -4,15 +4,27 @@ import BaseHtml from '@layouts/BaseHtml.astro';
 import Announcement from '@components/Announcement';
 import Nav from '@components/NavBar';
 import Footer from '@components/Footer';
+import settings from '@base/settings.json';
 
 interface Props {
   title: string;
 }
 
 const { title } = Astro.props;
+const description = settings.site.metadata.description;
+const image = '';
+const slug = '';
 ---
 
-<BaseHtml title={title}>
+<BaseHtml
+  title={title}
+  ogMeta={{
+    title,
+    description,
+    image,
+    slug,
+  }}
+>
   <main>
     <slot />
   </main>

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -26,7 +26,12 @@ const githubEditUrlPathname = generateGitHubEditLink({
 });
 ---
 
-<BlogPageLayout title={entry.data.title}>
+<BlogPageLayout
+  title={entry.data.title}
+  description={entry.data?.desc}
+  image={entry.data?.image?.src}
+  slug={slug}
+>
   <article class="blog">
     <div class="mb-10 w-fit" onclick="history.back()">
       <ButtonGray className="flex items-center justify-center gap-12 px-5">

diff --git a/src/settings.json b/src/settings.json
@@ -1,13 +1,13 @@
 {
   "site": {
     "production": {
-      "url": "https://rapping-jelly-echoing.on-fleek.app"
+      "url": "https://fleek.xyz"
     },
     "staging": {
-      "url": "https://rapping-jelly-echoing.on-fleek.app"
+      "url": "https://fleek-xyz-staging.on-fleek.app"
     },
     "development": {
-      "url": "https://rapping-jelly-echoing.on-fleek.app"
+      "url": "https://fleek-xyz-staging.on-fleek.app"
     },
     "metadata": {
       "title": "Fleek | Build lightning-fast apps",
@@ -21,7 +21,8 @@
       "supportExternalUrl": "https://support.fleek.xyz",
       "arweaveUrl": "https://www.arweave.org",
       "ipfsUrl": "https://ipfs.tech/",
-      "statusURl": "https://status.fleek.xyz/"
+      "statusURl": "https://status.fleek.xyz/",
+      "fleekTwitterUrl": "https://twitter.com/fleek"
     },
     "annoucement": {
       "message": "We've updated our milestones and roadmap for Fleek.xyz's V1, with new features and timelines! Read more here.",