Implement metadata tags for social media previews, add OS version to macOS, and replace OS images with new ones

src/lib/blocks/Blog.svelte

@@ -1,10 +1,11 @@
 <script>
-  import { onMount, onDestroy } from "svelte";
   import { base } from "$app/paths";
+  import { page } from "$app/stores";
   import { metadata } from "$lib/store";
   import { formattedPubDate, fetchAuthorMetadata } from "$lib/utils";
 
   import {
+    siteUrl,
     title as siteTitle,
     author as siteAuthor,
     blogTitle,
@@ -15,48 +16,51 @@
   import Loader from "$lib/components/Loader.svelte";
   import Pagination from "$lib/components/Pagination.svelte";
 
-  export let data = {};
-  export let pageNum = 0;
-  export let totalPages = 1;
+  export let data, pageNum, totalPages;
 
-  let posts = [];
-  let route = "blog"
+  $: ({ posts, pageNum, totalPages } = data.props);
+  $: route = "blog";
 
-  async function loadPosts() {
-    const postPromises = data.props.posts.map(async (post) => {
-      let authorMetadata = {};
+  let postsWithAuthor = [];
+
+  $: if (posts) {
+    postsWithAuthor = Promise.all(posts.map(async (post) => {
       if (typeof window !== "undefined") {
-        authorMetadata = await fetchAuthorMetadata(post.meta.author);
+        const authorMetadata = await fetchAuthorMetadata(post.meta.author);
+        return { ...post, authorMetadata };
       }
-      return { ...post, authorMetadata };
-    });
-
-    posts = await Promise.all(postPromises);
-    pageNum = data.props.pageNum;
-    totalPages = data.props.totalPages;
+      return post;
+    }));
   }
 
-  onMount(() => {
-    metadata.setMetadata({
-      title: `${siteTitle} | ${blogTitle}`,
-      description: blogDescription,
-      keywords: blogKeywords.join(", "),
-      author: siteAuthor,
-    });
-  });
+  $: url = $page.url.href;
+  $: fullImageUrl = `${siteUrl}/assets/media/blog_screenshot.png`;
 
-  $: if (pageNum) loadPosts();
+  $: metadata.setMetadata({
+    title: `${siteTitle} | ${blogTitle}`,
+    description: blogDescription,
+    keywords: blogKeywords.join(", "),
+    author: siteAuthor,
+    url,
+    image: fullImageUrl
+  });
 </script>
 
+<svelte:head>
+  <link rel="canonical" href={url} />
+</svelte:head>
+
 <div class="container">
   <h1 class="text-4xl xl:tracking-tight xl:text-6xl text-center tracking-tight font-extralight text-mine-shaft-600 dark:text-mine-shaft-200 my-16 md:my-32">
     {blogTitle}
   </h1>
 
   <section class="max-w-3xl mx-auto">
-    {#if posts.length !== 0}
+    {#await postsWithAuthor}
+      <Loader classes="fill-black dark:fill-white" />
+    {:then loadedPosts}
       <div class="grid grid-flow-row gap-24">
-        {#each posts as post}
+        {#each loadedPosts as post}
           <article>
             <h2 class="text-xl md:text-2xl xl:text-3xl font-light">
               <a class="post-link" href="{base}/{route}/{post.path}" title={post.meta.title}>
@@ -90,9 +94,8 @@
         {/each}
       </div>
       <Pagination {pageNum} {totalPages} {route} />
-    {:else}
-      <Loader classes="fill-black dark:fill-white" />
-    {/if}
+    {:catch error}
+      <p>Error loading posts: {error.message}</p>
+    {/await}
   </section>
-
 </div>

src/lib/blocks/Hero.svelte

@@ -49,7 +49,7 @@
       {heroContent.description}
     </p>
     {#if buttons.length > 0}
-      <div class="flex flex-col lg:flex-row gap-4 items-center">
+      <div class="grid grid-flow-row md:grid-flow-col gap-4 items-center">
         {#each buttons as button}
           <Button
             highlight={button.highlight}

src/lib/blocks/Post.svelte

@@ -1,8 +1,9 @@
 <script>
   import { onMount, onDestroy } from "svelte";
   import { base } from "$app/paths";
+  import { page } from "$app/stores";
   import { metadata } from "$lib/store";
-  import { title as siteTitle } from "$lib/config";
+  import { siteUrl, title as siteTitle } from "$lib/config";
   import { formattedPubDate, fetchAuthorMetadata } from "$lib/utils";
 
   // svelte-ignore unused-export-let
@@ -17,31 +18,33 @@
   export let tags;
   export let category;
   export let summary;
-  export let src = "";
-  export let name = "";
 
-  // Fetch the author's metadata dynamically
+  let authorMetadata = { src: "", name: "" };
+
   onMount(async () => {
-    const fetchedMetadata = await fetchAuthorMetadata(author);
+    if (typeof window !== 'undefined') {
+      authorMetadata = await fetchAuthorMetadata(author);
+      updateMetadata();
+    }
+  });
+
+  $: url = $page.url.href;
+
+  function updateMetadata() {
     metadata.setMetadata({
       title: `${siteTitle} | ${title}`,
       description: summary,
       keywords: `${tags}, ${category}`,
-      author: fetchedMetadata ? fetchedMetadata.name : "",
+      author: authorMetadata.name || author,
+      url,
+      image: `${siteUrl}/assets/media/blog_screenshot.png`
     });
-    src = fetchedMetadata.src;
-    name = fetchedMetadata.name;
-  });
-
-  // Resets the metadata when the component is destroyed
-  onDestroy(() => {
-    metadata.reset();
-  });
+  }
 </script>
 
 <svelte:head>
-  <!-- Load Prism for syntax highlighting -->
   <link rel="stylesheet" href="{base}/assets/vendor/prism/prism-nord.css">
+  <link rel="canonical" href={url} />
 </svelte:head>
 
 <article class="container">
@@ -52,9 +55,11 @@
       {title}
     </h1>
     <div class="max-w-[72ch] mx-auto flex flex-col items-center gap-4 mt-20">
-      <img class="w-24 h-24 rounded-full object-cover" {src} alt={author} />
+      {#if authorMetadata.src}
+        <img class="w-24 h-24 rounded-full object-cover" src={authorMetadata.src} alt={author} />
+      {/if}
       <div class="font-light text-center">
-        {name}
+        {authorMetadata.name || author}
         <div class="text-neutral-500 text-xs font-medium">
           {formattedPubDate(pub_date)}
         </div>
@@ -66,4 +71,4 @@
   >
     <slot />
   </div>
-</article>
+</article>

src/lib/components/Button.svelte

@@ -57,24 +57,24 @@
   class:hover:text-red-berry-950={!button}
   class:dark:hover:text-neutral-100={!button}
   class:highlight={button && highlight}
-  class:py-3={button}
+  class:py-4={button}
   class:px-5={button}
   class:rounded={button}
   class:regular={!highlight}
-  class="inline-flex items-center justify-center gap-2 text-sm"
+  class="flex items-center justify-between gap-3 text-sm lg:text-xs"
 >
   {#if iconLeft}
-    <span class:icon-left={iconPosition === "left"} class="flex">
+    <span class:icon-left={iconPosition === "left"}>
       <Icon src={currentIcon} size={iconSize} />
     </span>
   {/if}
 
   {#if text}
-    <span class="flex">{text}</span>
+    <span>{text}</span>
   {/if}
 
   {#if iconRight}
-    <span class:icon-right={iconPosition === "right"} class="flex">
+    <span class:icon-right={iconPosition === "right"}>
       <Icon src={currentIcon} size={iconSize} />
     </span>
   {/if}

src/lib/config/index.js

@@ -7,18 +7,18 @@ import { base } from "$app/paths";
 //////////////////////////////////////////////////////////////////
 
 // Base URL
-export const url = dev
+export const siteUrl = dev
   ? "http://localhost:5173/"
   : "https://www.spyder-ide.org/";
 
 // Website metadata
-export const title = "Spyder IDE";
+export const title = "Spyder";
 export const subtitle =
   "The Python IDE that scientists and data analysts deserve";
 export const comment =
   "Designed by the community, for the community";
 export const author = "Spyder Website Contributors";
-export const description = `${subtitle}. ${comment}`;
+export const description = subtitle;
 export const keywords = [
   "Python",
   "IDE",
@@ -89,25 +89,25 @@ export const githubButton = {
 
 // Download links
 export const releases = {
-  linux: {
-    x64: {
-      name: "Linux",
-      link: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder-Linux-x86_64.sh",
-    },
-  },
   windows: {
     x64: {
       name: "Windows 10+",
       link: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder-Windows-x86_64.exe",
     },
   },
+  linux: {
+    x64: {
+      name: "Linux",
+      link: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder-Linux-x86_64.sh",
+    },
+  },
   mac: {
     arm64: {
-      name: "macOS (M1)",
+      name: "macOS 14.0+ (M1)",
       link: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder-macOS-arm64.pkg",
     },
     x64: {
-      name: "macOS (Intel)",
+      name: "macOS 12.0+ (Intel)",
       link: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder-macOS-x86_64.pkg",
     },
   },

src/lib/utils/index.js

@@ -106,8 +106,8 @@ export const getOSButtons = (base, os) => {
     str = "for Linux";
   } else if (os === "mac") {
     str = "for macOS";
-    const m1 = "(M1)";
-    const intel = "(Intel)";
+    const m1 = "14.0+ (M1)";
+    const intel = "12.0+ (Intel)";
     osButtons = [
       {
         highlight: true,

src/routes/+layout.svelte

@@ -1,24 +1,35 @@
 <script>
-    import { onMount, onDestroy } from "svelte";
     import { metadata } from "$lib/store";
+
+    import Header from "$lib/blocks/Header.svelte";
+    import Footer from "$lib/blocks/Footer.svelte";
+
+    import "../app.css";
+
     import {
+        siteUrl,
         title as siteTitle,
         author as siteAuthor,
         description as siteDescription,
         keywords as siteKeywords,
     } from "$lib/config";
 
-    import Header from "$lib/blocks/Header.svelte";
-    import Footer from "$lib/blocks/Footer.svelte";
-    import "../app.css";
+    // Allow pages to override default metadata
+    export let data = {};
 
-    onMount(() => {
-        metadata.setMetadata({
-            title: `${siteTitle} | ${siteDescription}`,
-            description: siteDescription,
-            keywords: siteKeywords.join(", "),
-            author: siteAuthor,
-        });
+    $: title = data.title || `${siteTitle} | ${siteDescription}`;
+    $: description = data.description || siteDescription;
+    $: keywords = data.keywords || siteKeywords.join(", ");
+    $: image = data.image || "assets/media/website_screenshot.png";
+    $: fullImageUrl = image.startsWith('http') ? image : `${siteUrl}${image}`;
+
+    $: metadata.setMetadata({
+        title,
+        description,
+        keywords,
+        author: siteAuthor,
+        url: siteUrl,
+        image: fullImageUrl
     });
 </script>
 
@@ -27,22 +38,31 @@
     <meta name="description" content={$metadata.description} />
     <meta name="keywords" content={$metadata.keywords} />
     <meta name="author" content={$metadata.author} />
+    <link rel="canonical" href={$metadata.url} />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={$metadata.url} />
+    <meta property="og:title" content={$metadata.title} />
+    <meta property="og:description" content={$metadata.description} />
+    <meta property="og:image" content={$metadata.image} />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:site_name" content={siteTitle} />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content={$metadata.url} />
+    <meta property="twitter:title" content={$metadata.title} />
+    <meta property="twitter:description" content={$metadata.description} />
+    <meta property="twitter:image" content={$metadata.image} />
 </svelte:head>
 
 <div class="layout grid h-full">
-    <!-- Header -->
     <Header />
-    <!-- End Header -->
-
-    <!-- Main content -->
     <main class="grid grid-flow-row gap-16 xl:gap-32">
         <slot />
     </main>
-    <!-- End Main content -->
-
-    <!-- Footer -->
     <Footer />
-    <!-- End Footer -->
 </div>
 
 <style>