updoot

Author: apacheli

src/assets/css/index.css

@@ -11,7 +11,7 @@ html {
 
 :root {
 	--color-background: #ffffff;
-	--color-font-secondary: #787e87;
+	--color-font-secondary: hsl(215, 6%, 40%);
 	--color-font: #10181a;
 	--color-header-font: #ffffff;
 	--color-header: #080c0df0;
@@ -27,6 +27,7 @@ html {
 @media (prefers-color-scheme: dark) {
 	:root {
 		--color-background: #10181a;
+		--color-font-secondary: hsl(215, 6%, 60%);
 		--color-font: #ffffff;
 		--color-dark-1: #ffffff10;
 		--color-dark-2: #ffffff20;
@@ -325,6 +326,10 @@ ul {
 	fill: #0077b5;
 }
 
+.icon-link.pinterest {
+	fill: #e7001e;
+}
+
 .main-footer {
 	display: flex;
 	align-items: center;

src/components/common.tsx

@@ -16,7 +16,7 @@ const Article = (page: BluejayPage) => {
 			<a href={page.url} class="blog-anchor" title={title}>
 				<div class="blog-entry">
 					<div class="blog-image-container">
-						<img src={image ?? "/assets/images/blog/placeholder.avif"} class="blog-image" alt={title} />
+						<img src={image ?? "/assets/images/placeholder.avif"} class="blog-image" alt={title} />
 						{page.data.index === 0 ? <span class="blog-new">NEW!</span> : undefined}
 					</div>
 					<div class="blog-metadata">

src/components/icons.tsx

@@ -60,6 +60,12 @@ const LinkedInIcon = () => (
 	</svg>
 );
 
+const PinterestIcon = () => (
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+		<path d="M568 320C568 457 457 568 320 568C294.4 568 269.8 564.1 246.6 556.9C256.7 540.4 271.8 513.4 277.4 491.9C280.4 480.3 292.8 432.9 292.8 432.9C300.9 448.3 324.5 461.4 349.6 461.4C424.4 461.4 478.3 392.6 478.3 307.1C478.3 225.2 411.4 163.9 325.4 163.9C218.4 163.9 161.5 235.7 161.5 314C161.5 350.4 180.9 395.7 211.8 410.1C216.5 412.3 219 411.3 220.1 406.8C220.9 403.4 225.1 386.5 227 378.7C227.6 376.2 227.3 374 225.3 371.6C215.2 359.1 207 336.3 207 315C207 260.3 248.4 207.4 319 207.4C379.9 207.4 422.6 248.9 422.6 308.3C422.6 375.4 388.7 421.9 344.6 421.9C320.3 421.9 302 401.8 307.9 377.1C314.9 347.6 328.4 315.8 328.4 294.5C328.4 275.5 318.2 259.6 297 259.6C272.1 259.6 252.1 285.3 252.1 319.8C252.1 341.8 259.5 356.6 259.5 356.6C259.5 356.6 235 460.4 230.5 479.8C225.5 501.2 227.5 531.4 229.6 551C137.4 514.9 72 425.1 72 320C72 183 183 72 320 72C457 72 568 183 568 320z" />
+	</svg>
+);
+
 const RssIcon = () => (
 	<svg viewBox="0 0 640 640">
 		<path d="M160 96c-35.3 0-64 28.7-64 64v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H160zm32 104c0-13.3 10.7-24 24-24 137 0 248 111 248 248 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24 83.9 0 152 68.1 152 152 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104-13.3 0-24-10.7-24-24zm0 120c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32z" />
@@ -78,4 +84,4 @@ const CodeIcon = () => (
 	</svg>
 );
 
-export { CodeIcon, DiscordIcon, EmailIcon, FacebookIcon, GitHubIcon, HouseIcon, LinkedInIcon, MenuCloseIcon, MenuOpenIcon, RssIcon, TwitchIcon, TwitterIcon, YouTubeIcon };
+export { CodeIcon, DiscordIcon, EmailIcon, FacebookIcon, GitHubIcon, HouseIcon, LinkedInIcon, MenuCloseIcon, MenuOpenIcon, PinterestIcon, RssIcon, TwitchIcon, TwitterIcon, YouTubeIcon };

src/components/templates.tsx

@@ -1,6 +1,6 @@
 import type { BluejayContext } from "bluejay";
 import { Article, CommonBody, CommonHead, dtf } from "./common.tsx";
-import { FacebookIcon, LinkedInIcon, TwitterIcon } from "./icons.tsx";
+import { FacebookIcon, LinkedInIcon, PinterestIcon, TwitterIcon } from "./icons.tsx";
 
 const _url = (ctx: BluejayContext) => encodeURIComponent(Bun.env.BLUEJAY_URL + ctx.page.url);
 
@@ -23,6 +23,12 @@ const shareLinks = [
 		createHref: (ctx: BluejayContext) => `https://www.linkedin.com/sharing/share-offsite?url=${_url(ctx)}`,
 		icon: LinkedInIcon,
 	},
+	{
+		id: "pinterest",
+		title: "Pin on Pinterest",
+		createHref: (ctx: BluejayContext) => `https://pinterest.com/pin/create/button/?url=${_url(ctx)}`,
+		icon: PinterestIcon,
+	},
 ];
 
 const PageTemplate = (ctx: BluejayContext) => (
@@ -58,7 +64,7 @@ const BlogTemplate = (ctx: BluejayContext) => {
 					<h1 class="post-title">{ctx.page.metadata.title}</h1>
 					<span class="blog-tag">{ctx.page.metadata.tag}</span>
 					<time class="blog-date">{dtf.format(new Date(ctx.page.metadata.date))}</time>
-					<img class="post-image" src={ctx.page.metadata.image ?? "/assets/images/blog/placeholder.avif"} alt={ctx.page.metadata.title} />
+					<img class="post-image" src={ctx.page.metadata.image ?? "/assets/images/placeholder.avif"} alt={ctx.page.metadata.title} />
 				</header>
 				<main class="markdown">{ctx.page.element(ctx)}</main>
 				<footer class="post-footer">