diff --git a/README.md b/README.md index abc5355..7f32483 100644 --- a/README.md +++ b/README.md @@ -111,64 +111,82 @@ You've probably seen this in action when posting a link on Facebook, Twitter, Sl ```diff export default defineConfig({ - + site: "https://.com", - }); ``` - The `site` property is required because Open Graph images must be referenced as an absolute URL. +- site: "https://.com", + integrations: [ + opengraphImages({ + options: { + fonts: [ + { + name: "Roboto", + weight: 400, + style: "normal", + data: fs.readFileSync("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff"), + }, + ], + }, + render: presets.blackAndWhite, + }), + ], + }); - Install the [`astro-seo`](https://github.com/jonasmerlin/astro-seo) package to make this a bit easier: +```` - ```bash - npm i astro-seo - ``` +The `site` property is required because Open Graph images must be referenced as an absolute URL. - Update your Astro layout: +Install the [`astro-seo`](https://github.com/jonasmerlin/astro-seo) package to make this a bit easier: - ```diff - --- - + import { SEO } from "astro-seo"; - - interface Props { - title: string; - } - - const { title } = Astro.props; - +const { url, site } = Astro; - +const openGraphImageUrl = getImagePath({ url, site }); - --- - - - - - - - - - - {title} - - + - - - - - - ``` +```bash +npm i astro-seo +```` + +Update your Astro layout: + +```diff +--- ++ import { SEO } from "astro-seo"; + +interface Props { + title: string; +} + +const { title } = Astro.props; ++const { url, site } = Astro; ++const openGraphImageUrl = getImagePath({ url, site }); +--- + + + + + + + + + + {title} + ++ + + + + + +``` 1. Build your site. You should see a `.png` file next to each `.html` page in your `dist` folder. Double-check that the `og:image` proprety in your `.html` file matches the path to the `.png` file. diff --git a/README.md.tmpl b/README.md.tmpl index 70dceea..45ce8bb 100644 --- a/README.md.tmpl +++ b/README.md.tmpl @@ -111,7 +111,22 @@ You've probably seen this in action when posting a link on Facebook, Twitter, Sl ```diff export default defineConfig({ - + site: "https://.com", + + site: "https://.com", + integrations: [ + opengraphImages({ + options: { + fonts: [ + { + name: "Roboto", + weight: 400, + style: "normal", + data: fs.readFileSync("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff"), + }, + ], + }, + render: presets.blackAndWhite, + }), + ], }); ``` diff --git a/example/astro.config.mjs b/example/astro.config.mjs index 40fe553..797dcb8 100644 --- a/example/astro.config.mjs +++ b/example/astro.config.mjs @@ -1,5 +1,4 @@ import { defineConfig } from "astro/config"; - import opengraphImages, { presets } from "astro-opengraph-images"; // https://astro.build/config