Context

Previously, the bulk of my time was learning Svelte, Sveltekit, and really just figuring out other modern web technologies like Tailwind, TypeScript, etc. Now that the blog is more or less up and running, I realized that I include practically zero information about who wrote these posts and how you might be able to get in touch with the author (me!). This is where I am picking things up from.

What Do I Actually Want?

I think the shortest path forward is statically adding link to each post automatically as part of each post layout that includes my name which might link to an email address. I could add it to the post metadata so that this could later be parsed using mdsvex, but I don’t really need all that since I’m the only one that’s going to be writing posts on here. Overall, I think what I want is:

• Adding my name that links to my email address
• Maybe create a new component that will contain links to social media accounts (edit: On second thought, I’ll do this another time)

Adding My Email address

Here’s what the code for my blog posts specifically look like:

<div class="flex flex-row">
	<Button onclick={previousPage} variant="outline" size="sm">
		<MoveLeft />
		<span class="sr-only">Go back</span>
	</Button>
	<article class="prose dark:prose-invert mx-auto mb-16 grow px-5">
		<!-- Title -->]
		<hgroup class="mb-2 flex flex-row">
			<h1 class="grow">{data.meta.title}</h1>
			<p class="content-end justify-end opacity-80">
				<small>Published: {formatDate(data.meta.date)}</small>
			</p>
		</hgroup>

		<!-- Tags -->
		<div class="tags flex flex-wrap">
			{#each data.meta.tags as category}
				<a
					href={`/blog/tags/${category}`}
					class="chip variant-filled-secondary text-sm no-underline dark:text-gray-400 mr-1"
				>
					&num;{category}
				</a>
			{/each}
		</div>

		<!-- Post -->
		<div>
			<data.content />
		</div>
    </article>
</div>

After some fiddling around to see where I want this to be, I ended up putting the following right after the Tags section:

<!-- Author Info -->
<div class="mt-2">
    <p>
        Written by: <a href="mailto:hello@cizzo.dev">cizzo</a>
    </p>
</div>

What that ends up looking like is:

Fun fact, I embedded this image as a part of my markdown post by including this code:

<script>
import authorPreview from '$lib/images/2024-12-29/post-header-with-author.png';
</script>

<img src={authorPreview} alt="Preview image after adding an author to my post layout" />

Pretty cool Svelte, pretty cool!

Nevertheless, for now, this is perfect! It gets the job done and doesn’t look completely awful.

What’s Next?

I was thinking about creating a social media component as a part of this post but I didn’t want this to be too long. This was a pretty quick and easy one which I’m fine with taking the win on. The last thing I want to do is rush into everything and ultimately leave myself burnt out not wanting to do anything anymore.

I’m going to take things slow and be happy that a task was easier than expected and will enjoy the rest of my evening to bask in my success.