From b90124aa31c2aee3afcecb6aca877e18aeba742d Mon Sep 17 00:00:00 2001 From: Andrew <74398819+AndrewDTR@users.noreply.github.com> Date: Wed, 9 Oct 2024 12:59:42 -0500 Subject: [PATCH] astro canvas initial commit --- package-lock.json | 33 +++++++++++++++++++++++++++++ package.json | 1 + src/amoses.png | Bin 0 -> 2439 bytes src/amoses.svg | 14 +++++++++++++ src/layouts/BaseLayout.astro | 5 +++++ src/layouts/Blog.astro | 3 ++- src/pages/about.md | 2 ++ src/pages/og/[...route].ts | 39 +++++++++++++++++++++++++++++++++++ 8 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 src/amoses.png create mode 100644 src/amoses.svg create mode 100644 src/pages/og/[...route].ts diff --git a/package-lock.json b/package-lock.json index 304fd16..9f5ebd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@expressive-code/plugin-line-numbers": "^0.37.0", "astro": "^4.15.9", "astro-expressive-code": "^0.37.0", + "astro-og-canvas": "^0.5.3", "childprocess": "^2.0.2", "rehype-autolink-headings": "^7.1.0", "rehype-slug": "^6.0.0" @@ -1730,6 +1731,12 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", "license": "ISC" }, + "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.12.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", @@ -1937,6 +1944,23 @@ "astro": "^4.0.0-beta || ^5.0.0-beta || ^3.3.0" } }, + "node_modules/astro-og-canvas": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/astro-og-canvas/-/astro-og-canvas-0.5.3.tgz", + "integrity": "sha512-xy4k3D/fq4vq71B8CKsqBRuAd2kRJjMaeOMH9EFVtPPqudrDGXG2k87SdxPr5FATvttWpIjYplqK/vYJAoZ2DA==", + "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/axobject-query": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", @@ -2111,6 +2135,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", diff --git a/package.json b/package.json index af62e64..0db792a 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@expressive-code/plugin-line-numbers": "^0.37.0", "astro": "^4.15.9", "astro-expressive-code": "^0.37.0", + "astro-og-canvas": "^0.5.3", "childprocess": "^2.0.2", "rehype-autolink-headings": "^7.1.0", "rehype-slug": "^6.0.0" diff --git a/src/amoses.png b/src/amoses.png new file mode 100644 index 0000000000000000000000000000000000000000..744905d2caa75daf49b0685b3b412440002d0955 GIT binary patch literal 2439 zcmZXU3p|tiAIC>xttPZCghQwiT^ynl$`G4NGppPxx|$*-I&_=a=4gMBGxv^vW0+8? zaZ0BP&MDCxmv(WBo!O0SBSn$@pAG$A=hgH2JkRrcp5OQL`M!U@*YkSP(E;92h!F$? z0zr{Jo*3Yc2F?TECBXG;E}sAbX|m9MSTEpF`Tyg&Qu#*7W-I&pl!Jo;fj}gBBaw8D zjIc*Xd1GUJGTDH9a8SYT8W*r9hPe}>o)6-_50d^#Y4_v^`{O7FD0?sH85`~!6ZXqQ zY`KV|koGF1ed8nS@e$5~Mbrzp#>8xygd>x1Wm2AexK}RhQvk&xu0q5c7x$Ha*YF0yC#4@30E%Rsidk00=WvHeqIs|;2M|o z$b{T+3E<+X)gu=J0%BFkfKin!0;GZgjEg*~SfF065|FI2C{$910~QHarTNT7*S}+V z>e!wMRsNz;Z66n_c~s0iHOzeYH*7VMI()v}0@5O|iWxu!n7{FSTe5f_OubSS)qMV9 zca;%vEjC&h0Gp|4-US-Z~AXuYwC z=?@z$EUh-et!*~j+HKjk-Tp@h#~n`2JAc~c;_9}?9pT~WwbvVo^79Ya7l;YM?muww zU~ouCSoopCMeT>K`}!@$}jA7mZEL zfByCIRZDBz8&><@9i3fo*&Hsfr?;Mcp&vHPy0pJ$<0G6&^T zv&CacpIn|6i@%bunM^4=O(Pw;kRtQThqqL8tmNBw`Abg|k()NHK6Qvl5`du=dTWpl zS5j)H$>ke}9v7C`vGlc@rQ2bVwYjDt;8e;aFSEn3oOMK(Xj_nIr~kmV*UI8}60;~1 z?Ujpe@Qm4oVCS^jM(63@c}>0E(4|Mwi@D7-CzGFn1GkqUA0c845Zy%7srMDRsU0h5 zllv@l1KT{Ja?!0z%LAWC_xR`rg@RYmX@-cvW~4O4teAWijQBVi|6#~?gVjY3vo5a~ zBTZjtufzA2{ZNkn2};BFqO=@_c98THkrri{=4VP1VT95^#67o6r-T=Iu(f3w3R-?w z9C&%<0B*PFYkwFPm6(y?IXU}}AJ0Wd$NZ<&l->nvf`7U2h2%T@5gcqfokKp!uq0tL z=neggvzPl>1-7}Qu!QY*`bg_r8tNg0ep>oR+7 zCWzcV8H~T4y{>v?M6gGuEzi+sPT_E+sN;TH?fWWb7_{cKYx41C*pJ(0usgpNt}s7e zPca?6{nWk4s-xkI^)aiw-Rn){CH2ctN=zunV%4?Ub!jO#sB1vY4CB<_FGB_!+aQGv@>1-xw9tJK z=4IX~_p$ZOzP=~{{{-CMyVct62r5Pky@#&@T2)z%&#Q#pf)16vb4~vIWG+1V9?hcc zAc!7RptJQAyxM)~6Nzv?J#a>gV%=Y(GZbSZh~$znPS|ZJiB9;6N|PIp{32Hqg;?!I z*&)bh2BUzoLk_B83?z{eNxQ&DFi0Zn%3rX(CD|;dR13ScG_knpq|c>FCf*-HTFyoz zosz@TL2)UjGTp2IOr=hd1?**GS{<{RP@85NMuTA*#CY$E5b^03X*|tBjM-&RU*u-^ zMfg|UqA^%DKdAfI@N-z}Q8PdKiH%ga&02ovuT2`${HPh1vL#txx|o|ZQLAiDMWj2s zKd{ue%A!+sD``c&kDa5IVJ9LDz09F=CUh!D=xsw<+1Qbaa`SVfAh!^&CHPvy+>6|$ zKgZ{j(T~AF*ScJ}8cOY;Q0P~+2-E;;=-eCH4juQ_(xL05-G*;<&798(VV|1rN#BP1 z>rt^NoZ_?=v;f?y3%MIS&8BFdav`8Ah)sv5xrOEOQvG22GVJu)@lF0!`aCf#*1HrE zh6|(> zfYSo+HYEuSUy`!39g|PO7vJhKYLs~JJz-5Jm%kn?v^W#J>vepMo?FJ<@D@gfQm`8` X_b5ae@<<2x4TF$g0iJge5rqE%ezBAt literal 0 HcmV?d00001 diff --git a/src/amoses.svg b/src/amoses.svg new file mode 100644 index 0000000..c962ab0 --- /dev/null +++ b/src/amoses.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 87b0109..ca4a34e 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -2,16 +2,21 @@ import Footer from "../components/Footer.astro"; import Header from "../components/Header.astro"; import "../styles/global.css"; + +const { imgLink } = Astro.props; --- + Andrew Moses + + {imgLink && }
diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro index 8d6482d..82a6d44 100644 --- a/src/layouts/Blog.astro +++ b/src/layouts/Blog.astro @@ -2,9 +2,10 @@ import BaseLayout from "./BaseLayout.astro"; const { frontmatter } = Astro.props; const hasTags = frontmatter.tags && frontmatter.tags.length > 0; +const imgLink = `${Astro.site.origin}/og/${Astro.props.post.slug}.png`; --- - +

{frontmatter.title}

{frontmatter.subtitle}

diff --git a/src/pages/about.md b/src/pages/about.md index eea1767..d1ce1e7 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -6,6 +6,8 @@ author: Andrew tags: ["one", "two", "three"] --- +![Example image](/og/index.png) + External Link with Subdomain
Google
diff --git a/src/pages/og/[...route].ts b/src/pages/og/[...route].ts new file mode 100644 index 0000000..a39f7b0 --- /dev/null +++ b/src/pages/og/[...route].ts @@ -0,0 +1,39 @@ +import { OGImageRoute } from "astro-og-canvas"; + +const pages = await import.meta.glob("/src/pages/**/*.md", { eager: true }); +console.log(pages); + +export const { getStaticPaths, GET } = OGImageRoute({ + param: "route", + pages, + getImageOptions: (_path, page) => ({ + title: page.frontmatter.title || "Default Title", + description: page.frontmatter.subtitle || "Default Subtitle", + dir: page.dir, + logo: { path: "./src/amoses.png", size: [50] }, + border: { color: [240, 231, 216], width: 20, side: "inline-start" }, + bgGradient: [[27, 25, 25]], + padding: 60, + font: { + title: { + size: 78, + families: ["Charter"], + weight: "Bold", + color: [240, 231, 216], + }, + description: { + size: 45, + lineHeight: 1.25, + families: ["Charter"], + weight: "Normal", + color: [240, 231, 216], + }, + }, + fonts: [ + "https://cdn.jsdelivr.net/npm/charter-webfont@4/fonts/charter_regular.woff2", + "https://cdn.jsdelivr.net/npm/charter-webfont@4/fonts/charter_bold.woff2", + "https://cdn.jsdelivr.net/npm/charter-webfont@4/fonts/charter_italic.woff2", + "https://cdn.jsdelivr.net/npm/charter-webfont@4/fonts/charter_bold_italic.woff2", + ], + }), +});