From 77c6179a091f5bea2efa62c7e92f0a28ff125c61 Mon Sep 17 00:00:00 2001 From: harshau007 Date: Mon, 18 Nov 2024 11:45:57 +0530 Subject: [PATCH] tried adding opengraph to the docs site --- astro.config.mjs | 4 +++ package-lock.json | 60 +++++++++++++++++++++++++++++++++++---- package.json | 3 +- src/components/Head.astro | 18 ++++++++++++ src/pages/og/[...slug].ts | 29 +++++++++++++++++++ 5 files changed, 108 insertions(+), 6 deletions(-) create mode 100644 src/components/Head.astro create mode 100644 src/pages/og/[...slug].ts diff --git a/astro.config.mjs b/astro.config.mjs index e5a97ca..ff50ece 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -12,6 +12,10 @@ export default defineConfig({ logo: { src: "./src/assets/alg-logo.png", }, + components: { + // Relative path to the custom component. + Head: "./src/components/Head.astro", + }, social: { github: "https://github.com/arch-linux-gui", }, diff --git a/package-lock.json b/package-lock.json index 0086c3b..6f77e77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.29.0", "astro": "^4.16.10", + "astro-og-canvas": "^0.5.4", "sharp": "^0.32.5", "typescript": "^5.6.3" } @@ -2133,6 +2134,12 @@ "integrity": "sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==", "license": "MIT" }, + "node_modules/@webgpu/types": { + "version": "0.1.21", + "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.21.tgz", + "integrity": "sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==", + "license": "BSD-3-Clause" + }, "node_modules/acorn": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", @@ -2377,6 +2384,23 @@ "astro": "^4.0.0-beta || ^5.0.0-beta || ^3.3.0" } }, + "node_modules/astro-og-canvas": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/astro-og-canvas/-/astro-og-canvas-0.5.4.tgz", + "integrity": "sha512-bKopjX5DZ0WZH3kmUl82EVBhGzoCQwH5Ja4YdB5MO1EtWFZpWzvKWWptsOKGhjz+Kn85+gD/kgw25ebrvYufSg==", + "license": "MIT", + "dependencies": { + "canvaskit-wasm": "^0.39.1", + "deterministic-object-hash": "^2.0.2", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=18.14.1" + }, + "peerDependencies": { + "astro": "^3.0.0 || ^4.0.0" + } + }, "node_modules/astro/node_modules/sharp": { "version": "0.33.5", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz", @@ -2678,6 +2702,15 @@ ], "license": "CC-BY-4.0" }, + "node_modules/canvaskit-wasm": { + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/canvaskit-wasm/-/canvaskit-wasm-0.39.1.tgz", + "integrity": "sha512-Gy3lCmhUdKq+8bvDrs9t8+qf7RvcjuQn+we7vTVVyqgOVO1UVfHpsnBxkTZw+R4ApEJ3D5fKySl9TU11hmjl/A==", + "license": "BSD-3-Clause", + "dependencies": { + "@webgpu/types": "0.1.21" + } + }, "node_modules/ccount": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", @@ -6219,16 +6252,17 @@ } }, "node_modules/prettier": { - "version": "2.8.7", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz", - "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "license": "MIT", "optional": true, + "peer": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" @@ -7994,6 +8028,22 @@ "prettier": "2.8.7" } }, + "node_modules/yaml-language-server/node_modules/prettier": { + "version": "2.8.7", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz", + "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==", + "license": "MIT", + "optional": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/yaml-language-server/node_modules/request-light": { "version": "0.5.8", "resolved": "https://registry.npmjs.org/request-light/-/request-light-0.5.8.tgz", diff --git a/package.json b/package.json index 07884ca..fc467b3 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,11 @@ "astro": "astro" }, "dependencies": { + "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.29.0", "astro": "^4.16.10", + "astro-og-canvas": "^0.5.4", "sharp": "^0.32.5", - "@astrojs/check": "^0.9.4", "typescript": "^5.6.3" } } diff --git a/src/components/Head.astro b/src/components/Head.astro new file mode 100644 index 0000000..01ff4bc --- /dev/null +++ b/src/components/Head.astro @@ -0,0 +1,18 @@ +--- +import type { Props } from '@astrojs/starlight/props' +import Default from '@astrojs/starlight/components/Head.astro' + +// Get the URL of the generated image for the current page using its +// ID and replace the file extension with `.png`. +const ogImageUrl = new URL( + `/og/${Astro.props.id.replace(/\.\w+$/, '.png')}`, + Astro.site, +) +--- + + + + + + + \ No newline at end of file diff --git a/src/pages/og/[...slug].ts b/src/pages/og/[...slug].ts new file mode 100644 index 0000000..7873738 --- /dev/null +++ b/src/pages/og/[...slug].ts @@ -0,0 +1,29 @@ +import { OGImageRoute } from "astro-og-canvas"; +import { getCollection } from "astro:content"; + +// Get all entries from the `docs` content collection. +const entries = await getCollection("docs"); + +// Map the entry array to an object with the page ID as key and the +// frontmatter data as value. +const pages = Object.fromEntries(entries.map(({ data, id }) => [id, { data }])); + +export const { getStaticPaths, GET } = OGImageRoute({ + // Pass down the documentation pages. + pages, + // Define the name of the parameter used in the endpoint path, here `slug` + // as the file is named `[...slug].ts`. + param: "slug", + // Define a function called for each page to customize the generated image. + getImageOptions: (_path, page: (typeof pages)[number]) => { + return { + // Use the page title and description as the image title and description. + title: page.data.title, + description: page.data.description, + // Customize various colors and add a border. + bgGradient: [[24, 24, 27]], + border: { color: [63, 63, 70], width: 20 }, + padding: 120, + }; + }, +});