Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/jhroemer/jhroemer.github.io. My personal website jensroemer.com
Something went wrong. Try again.
3.2 kB · 132 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133---import SolidComments from "../components/PostComments";import BaseLayout from "./BaseLayout.astro";
interface Props { frontmatter: { title: string; pubDate: Date; tags: string[]; bskyPostId?: string; ogImage?: string; };}const { frontmatter } = Astro.props;---
<style> a { color: rgba(0, 0, 0, 0.8); padding: 6px 4px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 4px; transition: background-color 0.2s cubic-bezier(0.6, 0.6, 0, 1); text-decoration: none; font-size: 1.15em;
&:hover { background-color: rgba(0, 0, 0, 0.04); } }
.tags { display: flex; flex-wrap: wrap; margin: 0 auto; gap: 4px; }</style>
<!-- In order to affect the slot, we unfortunately need to make the style global --><!-- Should be changed to a locally scoped style in the future if possible --><style is:global> pre { padding: 1rem 1.5rem; border-radius: 4px; }
html { scroll-behavior: smooth; }
h2 { position: relative;
&:hover { a { opacity: 1; } }
a { position: absolute; left: -24px; top: 2px; opacity: 0; width: 24px; transition: opacity 0.4s cubic-bezier(0.12, 0.8, 0.42, 1.03); } }
.publish-date { color: var(--text-secondary); font-size: 14px; }
blockquote { font-style: italic; border-left: 3px solid var(--mark-color); padding-left: 1rem; }</style>
<script> const linkSvg = `<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="16" height="16" viewBox="0 0 16 16" stroke-width="1" style="stroke: var(--text-primary);" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"> </svg> `;
const applyAnchorHeadings = () => { const anchorHeadings = document.querySelectorAll("h2, h3, h4, h5, h6");
[...anchorHeadings].forEach((heading) => { const anchor = document.createElement("a"); anchor.href = `#${heading.id}`; anchor.setAttribute("data-testid", `anchor-heading-${heading.id}`); anchor.innerHTML = linkSvg; heading.appendChild(anchor); }); };
if (window.location.pathname.startsWith("/writing")) { applyAnchorHeadings(); }
document.addEventListener("astro:after-swap", () => { if (window.location.pathname.startsWith("/writing")) { applyAnchorHeadings(); } });</script>
<BaseLayout pageTitle={frontmatter.title} ogImage={frontmatter.ogImage}> <h1>{frontmatter.title}</h1> <p class="publish-date"> Published on: {frontmatter.pubDate.toString().slice(0, 15)} </p> <slot /> { frontmatter.bskyPostId ? ( <SolidComments postId={frontmatter.bskyPostId} client:only="solid-js" /> ) : null }</BaseLayout>