mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Updating dependencies and updating the og image generation to use the new read function in SvelteKit v2.
This commit is contained in:
Bradley Shellnut
parent
b2eb0b874d
commit
90bbefc146
5 changed files with 807 additions and 564 deletions
28
package.json
28
package.json
|
|
@ -21,46 +21,46 @@
|
|||
"@iconify-icons/radix-icons": "^1.2.9",
|
||||
"@iconify-icons/simple-icons": "^1.2.74",
|
||||
"@melt-ui/pp": "^0.1.4",
|
||||
"@playwright/test": "^1.40.1",
|
||||
"@playwright/test": "^1.41.1",
|
||||
"@resvg/resvg-js": "^2.6.0",
|
||||
"@sveltejs/adapter-static": "^3.0.0",
|
||||
"@sveltejs/adapter-vercel": "^4.0.0",
|
||||
"@sveltejs/enhanced-img": "^0.1.6",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/adapter-vercel": "^4.0.5",
|
||||
"@sveltejs/enhanced-img": "^0.1.8",
|
||||
"@sveltejs/kit": "^2.4.3",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
"@typescript-eslint/parser": "^5.62.0",
|
||||
"@zerodevx/svelte-img": "^2.1.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.55.0",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-prettier": "^8.10.0",
|
||||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"iconify-icon": "^1.0.8",
|
||||
"just-intersect": "^4.3.0",
|
||||
"mdsvex": "^0.10.6",
|
||||
"mdsvex-relative-images": "^1.0.3",
|
||||
"postcss": "^8.4.32",
|
||||
"postcss": "^8.4.33",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-load-config": "^4.0.2",
|
||||
"postcss-preset-env": "^8.5.1",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"sass": "^1.69.5",
|
||||
"sass": "^1.70.0",
|
||||
"satori": "^0.10.11",
|
||||
"satori-html": "^0.3.2",
|
||||
"scrape-it": "^6.1.0",
|
||||
"sharp": "^0.32.6",
|
||||
"svelte": "^4.2.8",
|
||||
"svelte-check": "^3.6.2",
|
||||
"svelte": "^4.2.9",
|
||||
"svelte-check": "^3.6.3",
|
||||
"svelte-meta-tags": "^3.1.0",
|
||||
"svelte-preprocess": "^5.1.2",
|
||||
"svelte-preprocess": "^5.1.3",
|
||||
"svelte-sequential-preprocessor": "^2.0.1",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.3.3",
|
||||
"vanilla-lazyload": "^17.8.5",
|
||||
"vite": "^5.0.0",
|
||||
"vite": "^5.0.12",
|
||||
"vite-imagetools": "^5.1.2",
|
||||
"vitest": "^1.0.0"
|
||||
"vitest": "^1.2.1"
|
||||
},
|
||||
"type": "module",
|
||||
"engines": {
|
||||
|
|
|
|||
1307
pnpm-lock.yaml
1307
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -1,10 +1,13 @@
|
|||
import satori from 'satori';
|
||||
import { Resvg } from '@resvg/resvg-js';
|
||||
import { html as toReactNode } from 'satori-html';
|
||||
import { dev } from '$app/environment';
|
||||
import { read } from '$app/server';
|
||||
|
||||
// we use a Vite plugin to turn this import into the result of fs.readFileSync during build
|
||||
import firaSansSemiBold from '$lib/fonts/FiraSans-SemiBold.ttf';
|
||||
import { dev } from '$app/environment';
|
||||
|
||||
const fontData = read(firaSansSemiBold).arrayBuffer();
|
||||
|
||||
export async function componentToPng(component,
|
||||
props: Record<string, string | undefined>,
|
||||
|
|
@ -16,7 +19,7 @@ export async function componentToPng(component,
|
|||
fonts: [
|
||||
{
|
||||
name: 'Fira Sans',
|
||||
data: Buffer.from(firaSansSemiBold),
|
||||
data: await fontData,
|
||||
style: 'normal'
|
||||
}
|
||||
],
|
||||
|
|
@ -31,9 +34,9 @@ export async function componentToPng(component,
|
|||
}
|
||||
});
|
||||
|
||||
const png = resvg.render();
|
||||
const image = resvg.render();
|
||||
|
||||
return new Response(png.asPng(), {
|
||||
return new Response(image.asPng(), {
|
||||
headers: {
|
||||
'content-type': 'image/png',
|
||||
'cache-control': dev ? 'no-cache, no-store' : 'public, immutable, no-transform, max-age=86400'
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@ import { componentToPng } from '$root/lib/renderImage';
|
|||
const height = 630;
|
||||
const width = 1200;
|
||||
|
||||
/** @type {import('./$types').RequestHandler} */
|
||||
export async function GET({ url }) {
|
||||
try {
|
||||
const ogImage = `${new URL(url.origin).href}/b_shell_nut_favicon.png`;
|
||||
const faviconImageName = 'b_shell_nut_favicon.png';
|
||||
const image = `${new URL(url.origin).href}${faviconImageName}`;
|
||||
const header = url.searchParams.get('header') ?? undefined;
|
||||
const page = url.searchParams.get('page') ?? undefined;
|
||||
const content = url.searchParams.get('content') ?? '';
|
||||
|
|
@ -15,7 +17,7 @@ export async function GET({ url }) {
|
|||
header,
|
||||
page,
|
||||
content,
|
||||
image: ogImage,
|
||||
image,
|
||||
width: `${width}`,
|
||||
height: `${height}`,
|
||||
url: new URL(url.origin).href
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import fs from 'fs';
|
||||
import type { UserConfig } from 'vite';
|
||||
import { imagetools } from '@zerodevx/svelte-img/vite';
|
||||
|
||||
|
|
@ -12,27 +11,11 @@ const config: UserConfig = {
|
|||
profiles: {
|
||||
run: new URLSearchParams('?w=300;480;640;1024;1920&format=avif;webp;jpg&as=run:64')
|
||||
}
|
||||
}),
|
||||
rawFonts(['.ttf'])
|
||||
})
|
||||
],
|
||||
test: {
|
||||
include: ['src/**/*.{test,spec}.{js,ts}']
|
||||
}
|
||||
};
|
||||
|
||||
function rawFonts(ext) {
|
||||
return {
|
||||
name: 'vite-plugin-raw-fonts',
|
||||
resolveId(id) {
|
||||
return ext.some((e) => id.endsWith(e)) ? id : null;
|
||||
},
|
||||
transform(code, id) {
|
||||
if (ext.some((e) => id.endsWith(e))) {
|
||||
const buffer = fs.readFileSync(id);
|
||||
return { code: `export default ${JSON.stringify(buffer)}`, map: null };
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
Loading…
Reference in a new issue