git.stevedylan.dev

added new colors and logos 0e28b139

Steve · 2023-08-23 20:59 4 file(s) · +58 −95

astro.config.ts +1 −1

  site: "https://stevedylan.dev",
  markdown: {
    shikiConfig: {
      theme: gruvboxMaterial,
      theme: 'rose-pine-moon',
      wrap: true
    }
  },

src/components/layout/Header.astro +6 −31

27	27		href="/"
28	28		class="inline-flex items-center sm:relative sm:inline-block"
29	29		aria-current={url.pathname === "/" ? "page" : false}
30		-	>
31		-	<svg
32		-	class="mr-3 h-10 w-6 sm:absolute sm:left-[-4.5rem] sm:mr-0 sm:h-20 sm:w-12"
33		-	aria-hidden="true"
34		-	focusable="false"
35		-	fill="none"
36		-	xmlns="http://www.w3.org/2000/svg"
37		-	viewBox="0 0 400 400"
38		-	>
39		-	<title>Logo</title>
40		-	<svg
41		-	width="387"
42		-	height="334"
43		-	viewBox="0 0 387 334"
44		-	fill="none"
45		-	xmlns="http://www.w3.org/2000/svg"
46		-	>
47		-	<path
48		-	d="M6.80859 330H379.955L275.803 149.691L243.564 175.635L214.147 154.88L193.382 175.635L165.695 154.88L147.526 175.635L113.457 145.367L6.80859 330Z"
49		-	fill="#7c6f64"></path>
50		-	<path
51		-	d="M193.382 7L113.457 145.367L147.526 175.635L165.695 154.88L193.382 175.635L214.147 154.88L243.564 175.635L275.803 149.691L193.382 7Z"
52		-	fill="#a89984"></path>
53		-	<path
54		-	d="M113.457 145.367L6.80859 330H379.955L275.803 149.691M113.457 145.367L193.382 7L275.803 149.691M113.457 145.367L147.526 175.635L165.695 154.88L193.382 175.635L214.147 154.88L243.564 175.635L275.803 149.691"
55		-	stroke="black"
56		-	stroke-width="7"></path>
57		-	<line x1="206.608" y1="101.617" x2="230.392" y2="142.787" stroke="black" stroke-width="5"
58		-	></line>
59		-	</svg>
60		-	</svg>
	30	+	>
	31	+
	32	+	<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-3 h-10 w-6 sm:absolute sm:left-[-4.5rem] sm:mr-0 sm:h-20 sm:w-12">
	33	+	<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
	34	+	</svg>
	35	+
61	36		<span class="text-xl font-bold sm:text-2xl">Steve Simkins</span>
62	37		</a>
63	38		<nav

src/pages/og-image/[slug].png.ts +39 −51

import { getFormattedDate } from "@/utils";

const monoFontReg = await fetch(
	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-400-normal.ttf"
  "https://api.fontsource.org/v1/fonts/roboto-mono/latin-400-normal.ttf"
);

const monoFontBold = await fetch(
	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-700-normal.ttf"
  "https://api.fontsource.org/v1/fonts/roboto-mono/latin-700-normal.ttf"
);

const ogOptions: SatoriOptions = {
	width: 1200,
	height: 630,
	// debug: true,
	embedFont: true,
	fonts: [
		{
			name: "Roboto Mono",
			data: await monoFontReg.arrayBuffer(),
			weight: 400,
			style: "normal",
		},
		{
			name: "Roboto Mono",
			data: await monoFontBold.arrayBuffer(),
			weight: 700,
			style: "normal",
		},
	],
  width: 1200,
  height: 630,
  // debug: true,
  embedFont: true,
  fonts: [
    {
      name: "Roboto Mono",
      data: await monoFontReg.arrayBuffer(),
      weight: 400,
      style: "normal",
    },
    {
      name: "Roboto Mono",
      data: await monoFontBold.arrayBuffer(),
      weight: 700,
      style: "normal",
    },
  ],
};

const markup = (title: string, pubDate: string, description: string) => html`<div
	tw="flex flex-col w-full h-full bg-[#141617] text-[#ddc7a1]"
	tw="flex flex-col w-full h-full bg-[#191724] text-[#e0def4]"
>
	<div tw="flex flex-col flex-1 w-full p-10 justify-center">
		<p tw="text-2xl mb-6">${pubDate}</p>

	</div>
	<div tw="flex items-center justify-between w-full p-10 border-t border-[#7c6f64] text-xl">
		<div tw="flex items-center">
			<svg height="60" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
				<path
					d="M20.1465 448.094H479L350.926 226.37L311.281 258.273L275.108 232.751L249.573 258.273L215.528 232.751L193.185 258.273L151.291 221.053L20.1465 448.094Z"
					fill="#7c6f64"
				/>
				<path
					d="M249.573 50.9053L151.291 221.053L193.185 258.273L215.528 232.751L249.573 258.273L275.108 232.751L311.281 258.273L350.926 226.37L249.573 50.9053Z"
					fill="#a89984"
				/>
				<path
					d="M151.291 221.053L20.1465 448.094H479L350.926 226.37M151.291 221.053L249.573 50.9053L350.926 226.37M151.291 221.053L193.185 258.273L215.528 232.751L249.573 258.273L275.108 232.751L311.281 258.273L350.926 226.37"
					stroke="black"
					stroke-width="7"
				/>
				<line x1="265.341" y1="167.541" x2="294.587" y2="218.169" stroke="black" stroke-width="5" />
			</svg>

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" height="60">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
      </svg>
			<p tw="ml-3 font-semibold text-3xl">${siteConfig.title}</p>
		</div>
	</div>
</div>`;

export async function get({ params: { slug } }: APIContext) {
	const post = await getEntryBySlug("post", slug!);
	const title = post?.data.title ?? siteConfig.title;
	const postDate = getFormattedDate(post?.data.publishDate ?? Date.now(), {
		weekday: "long",
	});
	const description = post?.data.description ?? siteConfig.title;
	const svg = await satori(markup(title, postDate, description), ogOptions);
	const png = new Resvg(svg).render().asPng();
	return {
		body: png,
		encoding: "binary",
	};
  const post = await getEntryBySlug("post", slug!);
  const title = post?.data.title ?? siteConfig.title;
  const postDate = getFormattedDate(post?.data.publishDate ?? Date.now(), {
    weekday: "long",
  });
  const description = post?.data.description ?? siteConfig.title;
  const svg = await satori(markup(title, postDate, description), ogOptions);
  const png = new Resvg(svg).render().asPng();
  return {
    body: png,
    encoding: "binary",
  };
}

export async function getStaticPaths(): Promise<GetStaticPathsResult> {
	const posts = await getCollection("post");
	return posts.filter(({ data }) => !data.ogImage).map(({ slug }) => ({ params: { slug } }));
  const posts = await getCollection("post");
  return posts.filter(({ data }) => !data.ogImage).map(({ slug }) => ({ params: { slug } }));
}

src/styles/global.css +12 −12

@layer base {
	:root {
		color-scheme: light;
		--theme-bg: #f9f5d7;
		--theme-link: #6c782e;
		--theme-text: #4f3829;
		--theme-accent: #a96b2c;
		--theme-accent-2: #4f3829;
		--theme-quote: #a96b2c;
		--theme-bg: #fffaf3;
		--theme-link: #286983;
		--theme-text: #575279;
		--theme-accent: #286983;
		--theme-accent-2: #575279;
		--theme-quote: #286983;
		--theme-menu-bg: rgb(250 250 250 / 0.85);
	}

	:root.dark {
		color-scheme: dark;
		--theme-bg: #141617;
		--theme-link: #ea6962;
		--theme-text: #ddc7a1;
		--theme-accent: #d8a658;
		--theme-accent-2: #ddc7a1;
		--theme-quote: #d8a658;
		--theme-bg: #191724;
		--theme-link: #31748f;
		--theme-text: #e0def4;
		--theme-accent: #c4a7e7;
		--theme-accent-2: #e0def4;
		--theme-quote: #c4a7e7;
		--theme-menu-bg: rgb(40, 40, 40 / 0.85);
	}


16	16		site: "https://stevedylan.dev",
17	17		markdown: {
18	18		shikiConfig: {
19		-	theme: gruvboxMaterial,
	19	+	theme: 'rose-pine-moon',
20	20		wrap: true
21	21		}
22	22		},

7	7		import { getFormattedDate } from "@/utils";
8	8
9	9		const monoFontReg = await fetch(
10		-	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-400-normal.ttf"
	10	+	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-400-normal.ttf"
11	11		);
12	12
13	13		const monoFontBold = await fetch(
14		-	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-700-normal.ttf"
	14	+	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-700-normal.ttf"
15	15		);
16	16
17	17		const ogOptions: SatoriOptions = {
18		-	width: 1200,
19		-	height: 630,
20		-	// debug: true,
21		-	embedFont: true,
22		-	fonts: [
23		-	{
24		-	name: "Roboto Mono",
25		-	data: await monoFontReg.arrayBuffer(),
26		-	weight: 400,
27		-	style: "normal",
28		-	},
29		-	{
30		-	name: "Roboto Mono",
31		-	data: await monoFontBold.arrayBuffer(),
32		-	weight: 700,
33		-	style: "normal",
34		-	},
35		-	],
	18	+	width: 1200,
	19	+	height: 630,
	20	+	// debug: true,
	21	+	embedFont: true,
	22	+	fonts: [
	23	+	{
	24	+	name: "Roboto Mono",
	25	+	data: await monoFontReg.arrayBuffer(),
	26	+	weight: 400,
	27	+	style: "normal",
	28	+	},
	29	+	{
	30	+	name: "Roboto Mono",
	31	+	data: await monoFontBold.arrayBuffer(),
	32	+	weight: 700,
	33	+	style: "normal",
	34	+	},
	35	+	],
36	36		};
37	37
38	38		const markup = (title: string, pubDate: string, description: string) => html`<div
39		-	tw="flex flex-col w-full h-full bg-[#141617] text-[#ddc7a1]"
	39	+	tw="flex flex-col w-full h-full bg-[#191724] text-[#e0def4]"
40	40		>
41	41		<div tw="flex flex-col flex-1 w-full p-10 justify-center">
42	42		<p tw="text-2xl mb-6">${pubDate}</p>

45	45		</div>
46	46		<div tw="flex items-center justify-between w-full p-10 border-t border-[#7c6f64] text-xl">
47	47		<div tw="flex items-center">
48		-	<svg height="60" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
49		-	<path
50		-	d="M20.1465 448.094H479L350.926 226.37L311.281 258.273L275.108 232.751L249.573 258.273L215.528 232.751L193.185 258.273L151.291 221.053L20.1465 448.094Z"
51		-	fill="#7c6f64"
52		-	/>
53		-	<path
54		-	d="M249.573 50.9053L151.291 221.053L193.185 258.273L215.528 232.751L249.573 258.273L275.108 232.751L311.281 258.273L350.926 226.37L249.573 50.9053Z"
55		-	fill="#a89984"
56		-	/>
57		-	<path
58		-	d="M151.291 221.053L20.1465 448.094H479L350.926 226.37M151.291 221.053L249.573 50.9053L350.926 226.37M151.291 221.053L193.185 258.273L215.528 232.751L249.573 258.273L275.108 232.751L311.281 258.273L350.926 226.37"
59		-	stroke="black"
60		-	stroke-width="7"
61		-	/>
62		-	<line x1="265.341" y1="167.541" x2="294.587" y2="218.169" stroke="black" stroke-width="5" />
63		-	</svg>
	48	+
	49	+	<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" height="60">
	50	+	<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
	51	+	</svg>
64	52		<p tw="ml-3 font-semibold text-3xl">${siteConfig.title}</p>
65	53		</div>
66	54		</div>
67	55		</div>`;
68	56
69	57		export async function get({ params: { slug } }: APIContext) {
70		-	const post = await getEntryBySlug("post", slug!);
71		-	const title = post?.data.title ?? siteConfig.title;
72		-	const postDate = getFormattedDate(post?.data.publishDate ?? Date.now(), {
73		-	weekday: "long",
74		-	});
75		-	const description = post?.data.description ?? siteConfig.title;
76		-	const svg = await satori(markup(title, postDate, description), ogOptions);
77		-	const png = new Resvg(svg).render().asPng();
78		-	return {
79		-	body: png,
80		-	encoding: "binary",
81		-	};
	58	+	const post = await getEntryBySlug("post", slug!);
	59	+	const title = post?.data.title ?? siteConfig.title;
	60	+	const postDate = getFormattedDate(post?.data.publishDate ?? Date.now(), {
	61	+	weekday: "long",
	62	+	});
	63	+	const description = post?.data.description ?? siteConfig.title;
	64	+	const svg = await satori(markup(title, postDate, description), ogOptions);
	65	+	const png = new Resvg(svg).render().asPng();
	66	+	return {
	67	+	body: png,
	68	+	encoding: "binary",
	69	+	};
82	70		}
83	71
84	72		export async function getStaticPaths(): Promise<GetStaticPathsResult> {
85		-	const posts = await getCollection("post");
86		-	return posts.filter(({ data }) => !data.ogImage).map(({ slug }) => ({ params: { slug } }));
	73	+	const posts = await getCollection("post");
	74	+	return posts.filter(({ data }) => !data.ogImage).map(({ slug }) => ({ params: { slug } }));
87	75		}

2	2		@layer base {
3	3		:root {
4	4		color-scheme: light;
5		-	--theme-bg: #f9f5d7;
6		-	--theme-link: #6c782e;
7		-	--theme-text: #4f3829;
8		-	--theme-accent: #a96b2c;
9		-	--theme-accent-2: #4f3829;
10		-	--theme-quote: #a96b2c;
	5	+	--theme-bg: #fffaf3;
	6	+	--theme-link: #286983;
	7	+	--theme-text: #575279;
	8	+	--theme-accent: #286983;
	9	+	--theme-accent-2: #575279;
	10	+	--theme-quote: #286983;
11	11		--theme-menu-bg: rgb(250 250 250 / 0.85);
12	12		}
13	13
14	14		:root.dark {
15	15		color-scheme: dark;
16		-	--theme-bg: #141617;
17		-	--theme-link: #ea6962;
18		-	--theme-text: #ddc7a1;
19		-	--theme-accent: #d8a658;
20		-	--theme-accent-2: #ddc7a1;
21		-	--theme-quote: #d8a658;
	16	+	--theme-bg: #191724;
	17	+	--theme-link: #31748f;
	18	+	--theme-text: #e0def4;
	19	+	--theme-accent: #c4a7e7;
	20	+	--theme-accent-2: #e0def4;
	21	+	--theme-quote: #c4a7e7;
22	22		--theme-menu-bg: rgb(40, 40, 40 / 0.85);
23	23		}
24	24