feat: use astro:assets for social .svgs too (#262)

* feat: use astro:assets for social .svgs too

* chore: remove unused Solid JSX

* pnpm lint --fix

* fix: children

src/components/SocialImage.astro

@@ -0,0 +1,29 @@
+---
+import type { ImageMetadata } from "astro";
+
+import { Image } from "astro:assets";
+
+interface Props {
+	alt: string;
+	class?: string;
+	image: ImageMetadata;
+}
+---
+
+<Image
+	alt={Astro.props.alt}
+	class:list={["social-image", Astro.props.class]}
+	src={Astro.props.image}
+/>
+
+<style>
+	.social-image {
+		height: 1.25rem;
+		width: 1.25rem;
+		vertical-align: text-bottom;
+	}
+
+	:global(html.dark) .social-image {
+		filter: invert() hue-rotate(180deg);
+	}
+</style>

src/components/Socials.astro

@@ -1,24 +1,30 @@
 ---
+import bsky from "~/assets/icons/bsky.svg";
+import github from "~/assets/icons/github.svg";
+import mastodon from "~/assets/icons/mastodon.svg";
+import twitch from "~/assets/icons/twitch.svg";
+import twitter from "~/assets/icons/twitter.svg";
+import youtube from "~/assets/icons/youtube.svg";
 import { Squiggly } from "~/components/Squiggly";
 import { Text } from "~/components/Text";
 
-import { SocialImage } from "./SocialImage";
+import SocialImage from "./SocialImage.astro";
 
 const socials = [
-	["bsky", "https://bsky.app/profile/joshuakgoldberg.com", "/icons/bsky.svg"],
-	["GitHub", "https://github.com/JoshuaKGoldberg", "/icons/github.svg"],
-	["Mastodon", "https://fosstodon.org/@JoshuaKGoldberg", "/icons/mastodon.svg"],
-	["Twitch", "https://twitch.tv/JoshuaKGoldberg", "/icons/twitch.svg"],
-	["Twitter", "https://twitter.com/JoshuaKGoldberg", "/icons/twitter.svg"],
-	["YouTube", "https://youtube.com/@JoshuaKGoldberg", "/icons/youtube.svg"],
+	["bsky", "https://bsky.app/profile/joshuakgoldberg.com", bsky],
+	["GitHub", "https://github.com/JoshuaKGoldberg", github],
+	["Mastodon", "https://fosstodon.org/@JoshuaKGoldberg", mastodon],
+	["Twitch", "https://twitch.tv/JoshuaKGoldberg", twitch],
+	["Twitter", "https://twitter.com/JoshuaKGoldberg", twitter],
+	["YouTube", "https://youtube.com/@JoshuaKGoldberg", youtube],
 ] as const;
 ---
 
 <Text as="p" class="socials" fontSize="smaller" fontWeight="light">
 	{
-		socials.map(([alt, href, src]) => (
+		socials.map(([alt, href, image]) => (
 			<a class="social" href={href} target="_blank">
-				<SocialImage alt={alt} src={src} />
+				<SocialImage alt={alt} image={image} />
 				<Squiggly as="span" fontSize="smaller" variant="onHover">
 					{alt}
 				</Squiggly>
@@ -47,7 +53,6 @@ const socials = [
 			display: grid;
 			grid-template-columns: auto auto auto;
 			grid-template-rows: auto auto;
-			/* justify-content: center; */
 			margin-left: 0;
 		}
 	}

src/components/blog/BlogHero.astro

@@ -5,7 +5,7 @@ import HeroImage from "../HeroImage.astro";
 import HeroSecondary from "../HeroSecondary.astro";
 import HeroTertiary from "../HeroTertiary.astro";
 import HeroTitle from "../HeroTitle.astro";
-import { BlogShare } from "./BlogShare";
+import BlogShare from "./BlogShare.astro";
 import { DateAndMinutes } from "./DateAndMinutes";
 
 export interface BlogImage {

src/components/blog/BlogShare.astro

@@ -0,0 +1,61 @@
+---
+import linkedin from "~/assets/icons/linkedin.svg";
+import twitter from "~/assets/icons/twitter.svg";
+
+import SocialImage from "../SocialImage.astro";
+
+interface Props {
+	class?: string;
+	description: string;
+	title: string;
+	url: URL;
+}
+
+const channels = [
+	[
+		"LinkedIn",
+		`https://linkedin.com/sharing/share-offsite/?url=${Astro.props.url.toString()}`,
+		linkedin,
+	],
+	[
+		"Twitter",
+		`https://twitter.com/intent/tweet?text=${[
+			`📝 ${Astro.props.title}`,
+			`"${Astro.props.description}" - by @JoshuaKGoldberg`,
+			"",
+		].join("%0a%0a")}&url=${Astro.props.url.toString()}`,
+		twitter,
+	],
+] as const;
+---
+
+<span class:list={["shares", Astro.props.class]}>
+	<slot />
+	{
+		channels.map(([network, href, image]) => (
+			<a
+				class="share"
+				href={href}
+				target="_blank"
+				title={`Share on ${network}`}
+			>
+				<SocialImage alt={`${network} logo`} class="share-img" image={image} />
+			</a>
+		))
+	}
+</span>
+
+<style>
+	.shares {
+		align-items: baseline;
+		display: inline-flex;
+		gap: 1rem;
+		margin: 0.5em 0 0;
+	}
+
+	@media (min-width: 700px) {
+		.shares {
+			margin: 0 0 -0.25em;
+		}
+	}
+</style>

src/components/blog/BlogShareBottom.astro

@@ -0,0 +1,21 @@
+---
+import BlogShare from "./BlogShare.astro";
+
+interface Props {
+	description: string;
+	title: string;
+	url: URL;
+}
+---
+
+<hr />
+<BlogShare {...Astro.props} class="blog-share-bottom">
+	Liked this post? Thanks! Let the world know:
+</BlogShare>
+
+<style>
+	.blog-share-bottom {
+		font-size: var(--fontSizeSmall);
+		font-weight: var(--fontWeightMedium);
+	}
+</style>

src/pages/blog/[slug].astro

@@ -4,7 +4,7 @@ import { getCollection, getEntry } from "astro:content";
 import BodyContents from "~/components/BodyContents.astro";
 import BlogContent from "~/components/blog/BlogContent.astro";
 import BlogHero from "~/components/blog/BlogHero.astro";
-import { BlogShareBottom } from "~/components/blog/BlogShareBottom";
+import BlogShareBottom from "~/components/blog/BlogShareBottom.astro";
 import { TableOfContents } from "~/components/blog/TableOfContents";
 import BaseLayout from "~/layouts/BaseLayout.astro";