1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 14:45:32 -04:00

a bunch of cleanup, mostly of my messy css hacks over the years

This commit is contained in:
2025-04-18 12:11:16 -04:00
parent eec8f5e1c2
commit 98ea88dae9
25 changed files with 221 additions and 184 deletions

View File

@@ -1,5 +1,6 @@
.meta {
display: inline-flex;
display: flex;
justify-items: flex-start;
flex-wrap: wrap;
font-size: 0.925em;
line-height: 2.3;
@@ -8,6 +9,8 @@
}
.meta .metaItem {
display: inline-flex;
align-items: center;
margin-right: 1.6em;
white-space: nowrap;
}
@@ -17,17 +20,16 @@
}
.meta .metaIcon {
display: inline-block;
width: 1.2em;
height: 1.2em;
vertical-align: -0.225em;
width: 1.25em;
height: 1.25em;
margin-right: 0.6em;
flex-shrink: 0;
}
.meta .metaTags {
white-space: normal;
display: inline-flex;
flex-wrap: wrap;
white-space: normal;
}
.meta .metaTag {

View File

@@ -1,7 +1,8 @@
import { env } from "../../../lib/env";
import { Suspense } from "react";
import { JsonLd } from "react-schemaorg";
import { CalendarIcon, TagIcon, SquarePenIcon, EyeIcon } from "lucide-react";
import clsx from "clsx";
import { CalendarDaysIcon, TagIcon, SquarePenIcon, EyeIcon } from "lucide-react";
import Link from "../../../components/Link";
import Time from "../../../components/Time";
import Comments from "../../../components/Comments";
@@ -89,16 +90,14 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
/>
<div className={styles.meta}>
<div className={styles.metaItem}>
<Link href={`/${POSTS_DIR}/${frontmatter!.slug}`} plain className={styles.metaLink}>
<CalendarIcon size="1.2em" className={styles.metaIcon} />
<Time date={frontmatter!.date} format="MMMM d, y" />
</Link>
</div>
<Link href={`/${POSTS_DIR}/${frontmatter!.slug}`} plain className={clsx(styles.metaItem, styles.metaLink)}>
<CalendarDaysIcon size="1.25em" className={styles.metaIcon} />
<Time date={frontmatter!.date} format="MMMM d, y" />
</Link>
{frontmatter!.tags && (
<div className={styles.metaItem}>
<TagIcon size="1.2em" className={styles.metaIcon} />
<TagIcon size="1.25em" className={styles.metaIcon} />
<span className={styles.metaTags}>
{frontmatter!.tags.map((tag) => (
<span key={tag} title={tag} className={styles.metaTag} aria-label={`Tagged with ${tag}`}>
@@ -109,17 +108,15 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
</div>
)}
<div className={styles.metaItem}>
<Link
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${frontmatter!.slug}/index.mdx`}
title={`Edit "${frontmatter!.title}" on GitHub`}
plain
className={styles.metaLink}
>
<SquarePenIcon size="1.2em" className={styles.metaIcon} />
<span>Improve This Post</span>
</Link>
</div>
<Link
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${frontmatter!.slug}/index.mdx`}
title={`Edit "${frontmatter!.title}" on GitHub`}
plain
className={clsx(styles.metaItem, styles.metaLink)}
>
<SquarePenIcon size="1.25em" className={styles.metaIcon} />
<span>Improve This Post</span>
</Link>
<div
className={styles.metaItem}
@@ -129,7 +126,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
marginRight: 0,
}}
>
<EyeIcon size="1.2em" className={styles.metaIcon} />
<EyeIcon size="1.25em" className={styles.metaIcon} />
<Suspense
// when this loads, the component will count up from zero to the actual number of hits, so we can simply
// show a zero here as a "loading indicator"