demo - custom components

Published: Jan 24, 1984

Tended to: Oct 09, 2023

Tags:

demo •test

here's some tailor-made notes components to spice up this site

~ ~ ~

Custom Components

Callout

webmaster's note:

Heartbreak feels good in a place like this...

This was a pretty straightforward component. It’s really just to replace the default markdown callouts with something more styled and (IMO) easier to work than a lot of markdown-directive based approached to creating callout components. This is just a svelte component which takes attributes for an icon, a title, and the content via a slot.

CodeBlock + Syntax Highlighting

<script lang="ts">import InfoCard from "$lib/InfoCard.svelte";
import ALink from "$lib/Navigation/ALink.svelte";
import Typewriter from "svelte-typewriter";
const byline = "i'm a creative technologist with a background in film/video production and multi-disciplinary design based in San Francisco";
</script>

Jesus christ it took so long to get syntax highlighting working as expected for the codeblocks. MDsveX has built-in support for syntax highlighting using Prism, but I wasn’t a fan of it. Based on some other guides I opted to use Shiki highlighting, but figuring out how to make sure there weren’t conflicts between how MDsveX, Tailwind Typography, and Shiki wanted to hijack the style was a huge pain in the ass.

Anyways, syntax highlighting is looking real nice now. I’m using the Flexoki Color Theme by Steph Ango.

Big problem now is that i’m struggling to get tabs/indentation to be respected within the code blocks… will come back to that. Then hopefully after getting tabs solved i can add some more codeblock features like line numbers, titles, line highlighting, copy buttons, etc.

QuoteBack

We come to this place for magic. We come to AMC theaters to laugh, to cry, to care. Because we need that -- all of us.

We Make Movies Better

Nicole Kidman

View Source

This is another pretty straightforward component that makes for a lovely improvement to just straight quote elements. It’s inspired by the QuoteBacks project, which aims to “bring structured discorse to blogs and personal websites” by allowing for content to not just be quoted, but also linked to the source.

TLDR: it’s a quote block that also acts as a link.

Reduct

I use Reduct as a sort of searchable notebook of video content, so I thought it would be really sick to also have Reduct as a host for video content on this site, especially when combined with their awesome timed-text transcripts.

Turns out there’s a mini-tool from them that allows you to generate iframe emebeds of shared video reels along with the transcript!

Of course, customizing the styles of an iframe can be limited, and in this case one thing i’ve particularly struggled with in code is removing the default white background around the entire iframe. You can go into the browser inspector to target the body of the iframe and change background-color to transparent and then it fits into the webpage much much better. tbd how i’ll solve this in the component used to make the iframe yet though.