jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-13 23:55:35 -04:00
Code Issues Activity

update markdown-in-titles parsing

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-12 10:43:21 -05:00
parent e9dfe51863
commit c9f00d567a
4 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/notes/Comments.tsx
View File

@@ -6,7 +6,7 @@ type Props = {
slug: string;
};
const Comments = (props: Props) => {
const Comments = ({ slug }: Props) => {
const [injected, setInjected] = useState(false);
const scriptRef = useRef<HTMLDivElement>(null);
const { resolvedTheme } = useTheme();
@@ -26,7 +26,7 @@ const Comments = (props: Props) => {
// https://utteranc.es/
utterances.setAttribute("repo", githubRepo);
utterances.setAttribute("issue-term", `notes/${props.slug}`);
utterances.setAttribute("issue-term", `Comments on /notes/${slug}`);
utterances.setAttribute("theme", resolvedTheme === "dark" ? "github-dark" : "github-light");
utterances.setAttribute("label", "💬 comments");

10
components/notes/List.tsx
View File

@@ -12,18 +12,18 @@ const List = ({ notesByYear }) => {
<section key={year} className={styles.section}>
<h2 className={styles.year}>{year}</h2>
<ul className={styles.list}>
{notes.map((note) => (
<li key={note.slug} className={styles.row}>
<span className={styles.date}>{format(new Date(note.date), "MMM d")}</span>
{notes.map(({ slug, date, title, htmlTitle = "" }) => (
<li key={slug} className={styles.row}>
<span className={styles.date}>{format(new Date(date), "MMM d")}</span>
<span>
<Link
href={{
pathname: "/notes/[slug]/",
query: { slug: note.slug },
query: { slug: slug },
}}
prefetch={false}
>
<a dangerouslySetInnerHTML={{ __html: note.htmlTitle }} />
<a dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
</Link>
</span>
</li>

4
components/notes/Meta.tsx
View File

@@ -7,7 +7,7 @@ import type { NoteMetaType } from "../../types";
import styles from "./Meta.module.css";
const Meta = ({ title, htmlTitle, date, slug, tags = [] }: NoteMetaType) => (
const Meta = ({ slug, date, title, htmlTitle = "", tags = [] }: NoteMetaType) => (
<>
<div className={styles.meta}>
<div className={styles.date}>
@@ -55,7 +55,7 @@ const Meta = ({ title, htmlTitle, date, slug, tags = [] }: NoteMetaType) => (
<h1 className={styles.title}>
<Link href={`/notes/${slug}/`}>
<a dangerouslySetInnerHTML={{ __html: htmlTitle }} />
<a dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
</Link>
</h1>
</>

13
lib/parse-notes.ts
View File

@@ -30,10 +30,19 @@ export const getNoteData = (slug: string): { frontMatter: NoteMetaType; content:
const rawContent = fs.readFileSync(fullPath, "utf8");
const { data, content } = matter(rawContent);
// carefully allow VERY limited markdown in post titles...
const htmlTitle = sanitizeHtml(marked.parseInline(data.title), {
allowedTags: ["code", "pre", "em", "strong", "del"],
});
// ...and add it as a separate prop *only if it's present*
if (htmlTitle !== data.title) {
data.htmlTitle = htmlTitle;
}
// return both the parsed YAML front matter (with a few amendments) and the raw, unparsed markdown content
return {
frontMatter: {
...(data as NoteMetaType),
htmlTitle: sanitizeHtml(marked.parseInline(data.title), { allowedTags: ["code"] }),
...(data as Omit<NoteMetaType, "slug" | "permalink" | "date" | "readingMins">),
slug,
permalink: `${baseUrl}/notes/${slug}/`,
date: new Date(data.date).toISOString(), // validate/normalize the date string provided from front matter