diff --git a/astro.config.mjs b/astro.config.mjs index 2af9742..c163247 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,3 +1,5 @@ +import { readFileSync } from 'node:fs'; +import { fileURLToPath } from 'node:url'; import { defineConfig } from 'astro/config'; import react from '@astrojs/react'; import tailwind from '@astrojs/tailwind'; @@ -9,9 +11,18 @@ import remarkLinkCard from 'remark-link-card-plus'; import remarkBreaks from 'remark-breaks'; import { remarkMermaidInjector } from './src/plugins/remark/remark-mermaid-injector.mjs'; +const SITE_URL = 'https://www.rowicy.com'; +// data URIはURL.canParse()を通り、かつdev/build/prodのどの環境・ポートでも +// そのまま表示できるため、ホスト名に依存する絶対URLより確実(svgは537byteと小さい)。 +const LINK_CARD_FALLBACK_IMAGE_URL = `data:image/svg+xml;base64,${readFileSync( + fileURLToPath( + new URL('./public/images/link-card-fallback.svg', import.meta.url) + ) +).toString('base64')}`; + // https://astro.build/config export default defineConfig({ - site: 'https://www.rowicy.com', + site: SITE_URL, prefetch: { prefetchAll: true, }, @@ -35,7 +46,15 @@ export default defineConfig({ remarkBreaks, [ remarkLinkCard, - { cache: false, shortenUrl: true, thumbnailPosition: 'left' }, + { + cache: false, + shortenUrl: true, + thumbnailPosition: 'left', + ogTransformer: og => { + if (og.imageUrl && URL.canParse(og.imageUrl)) return og; + return { ...og, imageUrl: LINK_CARD_FALLBACK_IMAGE_URL }; + }, + }, ], ], }, diff --git a/public/images/link-card-fallback.svg b/public/images/link-card-fallback.svg new file mode 100644 index 0000000..30c0001 --- /dev/null +++ b/public/images/link-card-fallback.svg @@ -0,0 +1,8 @@ + + + + No Image + + + + \ No newline at end of file