feat: simplify

shepherdjerred · Jul 1, 2024 · 6236085 · 6236085
1 parent 9aaeeb1
commit 6236085
Show file tree

Hide file tree

Showing 22 changed files with 672 additions and 3,809 deletions.
diff --git a/README.md b/README.md
@@ -59,7 +59,7 @@ You've probably seen this in action when posting a link on Facebook, Twitter, Sl
 
 1. Install the fonts you want to use. Fonts must be explicitly declared to be used for images. System fonts are _not_ available. For this quick start guide, we'll install the [Roboto](https://fontsource.org/fonts/roboto) font.
 
-   You can find more fonts on [Fontsource](https://fontsource.org/), or you can use any font file.
+   You can find more fonts on [Fontsource](https://fontsource.org/), or you can use any font file that you have. See the Satori documentation on [loading fonts](https://github.com/vercel/satori?tab=readme-ov-file#overview).
 
    ```bash
    npm i @fontsource/roboto
@@ -85,20 +85,24 @@ You've probably seen this in action when posting a link on Facebook, Twitter, Sl
    +          },
    +        ],
    +      },
-   +      render: presets.blackAndWhite,
+   +      render: presets.blackAndWhite, // TODO: make this the default to make the initial configuration more terse
    +    }),
      ],
    });
    ```
 
 1. Update your layout to add the appropriate `meta` tags. The [OpenGraph site](https://ogp.me/) has more information about valid tags.
 
-   The integration will replace `[[OPENGRAPH IMAGE]]` with the path to the image it generated for that page. Note: `site` must be defined in your Astro config.
+   The easiest way to do this is with the [`astro-seo`](https://github.com/jonasmerlin/astro-seo) project. Install it:
 
-   At a minimum, you should define the tags below.
+   ```bash
+   npm i astro-seo
+   ```
 
    ```diff
    ---
+   + import { SEO } from "astro-seo";
+
    interface Props {
      title: string;
    }
@@ -116,21 +120,30 @@ You've probably seen this in action when posting a link on Facebook, Twitter, Sl
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
-
-   +    <meta name="description" content="Your page description" />
-
-   +    <meta property="og:title" content="{title}" />
-   +    <!-- Add the correct type from https://ogp.me/#types -->
-   +    <meta property="og:type" content="website" />
-   +    <meta property="og:url" content={url} />
-   +    <meta property="og:image" content={`${site?.toString()}[[OPENGRAPH IMAGE]]`} />
-     </head>
-     <body>
-       <slot />
-     </body>
-   </html>
    ```
 
+-     <SEO
+-       openGraph={{
+-         basic: {
+-           title: title,
+-           // Add the correct type from https://ogp.me/#types
+-           type: "website",
+-           image: TODO: add some function to determine the URL at build time,
+-           url: url,
+-         },
+-         optional: {
+-           description: "My page description",
+-         },
+-       }}
+-     />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+```
+
 1. Confirm that your OpenGraph images are accessible. After you deploy these changes, navigate to [OpenGraph.xyz](https://www.opengraph.xyz/) and test your site.
 
 ## Presets
@@ -201,3 +214,4 @@ Here are some similar libraries using Satori and Astro. I haven't done a feature
 - https://github.com/cijiugechu/astro-satori (Possibly dead, hasn't been updated in a year)
 - https://github.com/kevinzunigacuellar/astro-satori (Possibly dead, hasn't been updated in a year)
 - https://github.com/rumaan/astro-vercel-og (Possibly dead, hasn't been updated in a year)
+```
diff --git a/README.md.tmpl b/README.md.tmpl
@@ -93,12 +93,10 @@ You've probably seen this in action when posting a link on Facebook, Twitter, Sl
 
 1. Update your layout to add the appropriate `meta` tags. The [OpenGraph site](https://ogp.me/) has more information about valid tags.
 
-   The integration will replace `[[OPENGRAPH IMAGE]]` with the path to the image it generated for that page. Note: `site` must be defined in your Astro config.
-
-   At a minimum, you should define the tags below:
-
    ```diff
    ---
+   + import { SEO } from "astro-seo";
+
    interface Props {
      title: string;
    }
@@ -117,13 +115,20 @@ You've probably seen this in action when posting a link on Facebook, Twitter, Sl
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
 
-   +    <meta name="description" content="Your page description" />
-
-   +    <meta property="og:title" content="{title}" />
-   +    <!-- Add the correct type from https://ogp.me/#types -->
-   +    <meta property="og:type" content="website" />
-   +    <meta property="og:url" content={url} />
-   +    <meta property="og:image" content={`${site?.toString()}[[OPENGRAPH IMAGE]]`} />
+  +     <SEO
+  +       openGraph={{
+  +         basic: {
+  +           title: title,
+  +           // Add the correct type from https://ogp.me/#types
+  +           type: "website",
+  +           image: TODO: add some function to determine the URL at build time,
+  +           url: url,
+  +         },
+  +         optional: {
+  +           description: "My page description",
+  +         },
+  +       }}
+  +     />
      </head>
      <body>
        <slot />