jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 15:16:40 -04:00
Code Issues Activity

properly import and optimize/cache images in markdown files

Browse Source
This commit is contained in:
Jake Jarvis
2025-03-03 15:56:57 -05:00
parent 36faa6c234
commit ba10742c9b
71 changed files with 685 additions and 1100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/notes/[slug]/page.module.css
View File

@ -7,16 +7,16 @@
color: var(--colors-medium);
}
.meta .item {
.meta .metaItem {
margin-right: 1.6em;
white-space: nowrap;
}
.meta .link {
.meta .metaLink {
color: inherit !important;
}
.meta .icon {
.meta .metaIcon {
display: inline;
width: 1.2em;
height: 1.2em;
@ -24,23 +24,23 @@
margin-right: 0.6em;
}
.meta .tags {
.meta .metaTags {
white-space: normal;
display: inline-flex;
flex-wrap: wrap;
}
.meta .tag {
.meta .metaTag {
text-transform: lowercase;
white-space: nowrap;
margin-right: 0.75em;
}
.meta .tag:before {
.meta .metaTag:before {
content: "\0023"; /* cosmetically hashtagify tags */
padding-right: 0.125em;
color: var(--colors-light);
}
.meta .tag:last-of-type {
.meta .metaTag:last-of-type {
margin-right: 0;
}

61
app/notes/[slug]/page.tsx
View File

@ -1,7 +1,5 @@
import { Suspense } from "react";
import * as runtime from "react/jsx-runtime";
import { ErrorBoundary } from "react-error-boundary";
import { evaluate } from "@mdx-js/mdx";
import Content from "../../../components/Content";
import Link from "../../../components/Link";
import Time from "../../../components/Time";
@ -9,7 +7,6 @@ import Comments from "../../../components/Comments";
import Loading from "../../../components/Loading";
import HitCounter from "./counter";
import { getPostSlugs, getPostData } from "../../../lib/helpers/posts";
import * as mdxComponents from "../../../lib/helpers/mdx-components";
import { metadata as defaultMetadata } from "../../layout";
import config from "../../../lib/config";
import { FiCalendar, FiTag, FiEdit, FiEye } from "react-icons/fi";
@ -62,7 +59,7 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params;
const { frontMatter, markdown } = await getPostData(slug);
const { frontMatter } = await getPostData(slug);
const jsonLd: WithContext<Article> = {
"@context": "https://schema.org",
@ -76,49 +73,30 @@ export default async function Page({ params }: { params: Promise<{ slug: string
author: {
"@type": "Person",
name: config.authorName,
url: defaultMetadata.metadataBase?.href || `https://${config.siteDomain}`,
url: config.baseUrl,
},
};
const { remarkGfm, remarkSmartypants, rehypeSlug, rehypeUnwrapImages, rehypePrism } = await import(
"../../../lib/helpers/remark-rehype-plugins"
);
const { default: MDXContent } = await evaluate(markdown, {
...runtime,
remarkPlugins: [
[remarkGfm, { singleTilde: false }],
[
remarkSmartypants,
{
quotes: true,
dashes: "oldschool",
backticks: false,
ellipses: false,
},
],
],
rehypePlugins: [rehypeSlug, rehypeUnwrapImages, [rehypePrism, { ignoreMissing: true }]],
});
const { default: MDXContent } = await import(`../../../notes/${slug}.mdx`);
return (
<>
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
<div className={styles.meta}>
<div className={styles.item}>
<Link href={`/notes/${frontMatter.slug}` as Route} underline={false} className={styles.link}>
<FiCalendar className={styles.icon} />
<div className={styles.metaItem}>
<Link href={`/notes/${frontMatter.slug}` as Route} plain className={styles.metaLink}>
<FiCalendar className={styles.metaIcon} />
<Time date={frontMatter.date} format="MMMM D, YYYY" />
</Link>
</div>
{frontMatter.tags && (
<div className={styles.item}>
<FiTag className={styles.icon} />
<span className={styles.tags}>
<div className={styles.metaItem}>
<FiTag className={styles.metaIcon} />
<span className={styles.metaTags}>
{frontMatter.tags.map((tag) => (
<span key={tag} title={tag} className={styles.tag} aria-label={`Tagged with ${tag}`}>
<span key={tag} title={tag} className={styles.metaTag} aria-label={`Tagged with ${tag}`}>
{tag}
</span>
))}
@ -126,14 +104,14 @@ export default async function Page({ params }: { params: Promise<{ slug: string
</div>
)}
<div className={styles.item}>
<div className={styles.metaItem}>
<Link
href={`https://github.com/${config.githubRepo}/blob/main/notes/${frontMatter.slug}.mdx`}
title={`Edit "${frontMatter.title}" on GitHub`}
underline={false}
className={styles.link}
plain
className={styles.metaLink}
>
<FiEdit className={styles.icon} />
<FiEdit className={styles.metaIcon} />
<span>Improve This Post</span>
</Link>
</div>
@ -142,14 +120,14 @@ export default async function Page({ params }: { params: Promise<{ slug: string
{process.env.NEXT_PUBLIC_VERCEL_ENV === "production" && (
<ErrorBoundary fallback={null}>
<div
className={styles.item}
className={styles.metaItem}
style={{
// fix potential layout shift when number of hits loads
minWidth: "7em",
marginRight: 0,
}}
>
<FiEye className={styles.icon} />
<FiEye className={styles.metaIcon} />
<Suspense fallback={<Loading boxes={3} width={20} />}>
<HitCounter slug={`notes/${frontMatter.slug}`} />
</Suspense>
@ -162,16 +140,13 @@ export default async function Page({ params }: { params: Promise<{ slug: string
<Link
href={`/notes/${frontMatter.slug}` as Route}
dangerouslySetInnerHTML={{ __html: frontMatter.htmlTitle || frontMatter.title }}
underline={false}
plain
className={styles.link}
/>
</h1>
<Content>
<MDXContent
// @ts-ignore
components={{ ...mdxComponents }}
/>
<MDXContent />
</Content>
{!frontMatter.noComments && (