vigetlabs · ten1seven · Oct 31, 2024 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024
diff --git a/src/images/icons/og.png → public/og.png b/src/images/icons/og.png → public/og.png
diff --git a/src/images/icons/[email protected] b/src/images/icons/[email protected]
diff --git a/src/images/icons/icon-76.png b/src/images/icons/icon-76.png
diff --git a/src/images/icons/[email protected] b/src/images/icons/[email protected]
diff --git a/src/images/icons/[email protected] b/src/images/icons/[email protected]
diff --git a/src/images/tumblr/pointless-stamp.png b/src/images/tumblr/pointless-stamp.png
diff --git a/src/layouts/Application.astro b/src/layouts/Application.astro
@@ -1,10 +1,12 @@
 ---
-const { title, themeColors } = Astro.props;
+const { title, themeColors, description, metaImage, slug } = Astro.props;
 
 // Get the current path
 const currentPath = Astro.url.pathname;
 const isHomePage = currentPath === "/";
-
+let rootUrl = '';
+let metaImageUrl = '';
+let contentUrl = '';
 // Default colors
 const defaultColors = {
   backgroundColor: '#fff',
@@ -41,6 +43,21 @@ import logoLargeWhite from '../images/svgs/pointless-logo-large--white.svg';
 import iconX from '../images/svgs/x.svg?raw';
 import '../styles/global.css';
 ---
+{(() => {
+  // meta imports don't work in Astro frontmatter, so we set the root URL and meta image URL here
+  // Set the root URL based on the environment
+  rootUrl = import.meta.env.NETLIFY
+    ? import.meta.env.CONTEXT === 'production'
+      ? 'https://pointlesscorp.com/'
+      : `${import.meta.env.DEPLOY_PRIME_URL}/`
+    : new URL(Astro.url.origin).toString();
+
+  // Set the meta image URL based on the environment
+  metaImageUrl = metaImage ? `${metaImage}` : `${rootUrl}og.png`;
+  contentUrl = slug === '/' ? `${rootUrl}` : `${rootUrl}${slug}`;
+
+  return null;
+})()}
 
 <!DOCTYPE html>
 <html lang="en" class="scroll-smooth">
@@ -49,7 +66,35 @@ import '../styles/global.css';
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/png" href="/favicon.png">
 
+  <link rel="preconnect" href="//a-us.storyblok.com/">
+  <link rel="dns-prefetch" href="//a-us.storyblok.com/">
+  <link rel="preload" as="font" href={`${rootUrl}fonts/FunctionPro-Bold-webfont.woff`} type="font/woff" crossorigin="anonymous">
+
+  <!-- HTML Meta Tags -->
   <title>{title}</title>
+  <meta name="description" content={description} />
+  <link rel="canonical" href={contentUrl} />
+
+  <!-- Google / Search Engine Tags -->
+  <meta itemprop="name" content={title} />
+  <meta itemprop="description" content={description} />
+  <meta itemprop="image" content={metaImageUrl} />
+
+  <!-- Facebook Meta Tags -->
+  <meta property="og:url" content={contentUrl} />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content={title} />
+  <meta property="og:description" content={description} />
+  <meta property="og:image" content={metaImageUrl} />
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={title} />
+  <meta name="twitter:description" content={description} />
+  <meta name="twitter:image" content={metaImageUrl} />
+  <meta name="twitter:url" content={contentUrl} />
+  <meta name="twitter:site" content="@pointlesscorp" />
+  <meta name="twitter:creator" content="@pointlesscorp" />
 
   <style define:vars={finalColors}>
     :root {
@@ -66,6 +111,14 @@ import '../styles/global.css';
   </style>
 </head>
 <body class="antialiased font-base">
+  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-N3P6MM"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s) as HTMLScriptElement,dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','GTM-N3P6MM');</script>
+
   <header class="absolute top-9 left-0 z-20 w-full px-3">
     <div class="mx-auto flex max-w-7xl items-center justify-center sm:justify-between">
       {currentPath === "/" ? (

diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
@@ -43,8 +43,10 @@ const themeColors = {
   textColor: story.content.textColor?.color,
   linkColor: story.content.linkColor?.color,
 };
+
+const description = story.content.description.content[0].content[0].text;
 ---
 
-<Application title={`${story.name} - Pointlesscorp`} themeColors={themeColors}>
+<Application title={`${story.name} - Pointlesscorp`} themeColors={themeColors} description={description} metaImage={story.content.logo.filename} slug={slug}>
   <StoryblokComponent blok={story.content} name={story.name} projects={projectData.stories} />
 </Application>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -25,8 +25,14 @@ const { data: projectData } = await storyblokApi.get('cdn/stories', {
 
 const projects = projectData.stories;
 const story = homeData.story;
+
+// Extract text from the aboutText content
+const aboutTextString = story.content.aboutText.content
+  .map(paragraph => paragraph.content
+  .map(item => item.text)
+  .join(''));
 ---
 
-<Application title="Pointless Corp - The Innovation Lab at Viget">
+<Application title="Pointless Corp - The Innovation Lab at Viget" description={aboutTextString} slug="/">
   <StoryblokComponent blok={story.content} projects={projects} />
 </Application>
diff --git a/src/storyblok/Project.astro b/src/storyblok/Project.astro
@@ -15,7 +15,7 @@ function renderContent(content: any) {
 }
 ---
 
-<article class="px-5 pt-20 project">
+<article class="px-5 pt-20 pb-10 project">
   <h1 class="sr-only">{name}</h1>
 
   <!-- Project Logo -->
@@ -186,7 +186,7 @@ function renderContent(content: any) {
   )}
 
   <!-- More Projects -->
-  <section class="mx-auto mt-14 mb-10 max-w-7xl">
+  <section class="mx-auto mt-14 max-w-7xl">
     <h2 class="mb-3 text-center text-4xl uppercase font-functionpro">More Pointless Projects</h2>
 
     <ul class="text-center text-lg uppercase font-functionpro xs:columns-2 md:columns-3">