Add new note category for glossary

Author: rivea0

app/(subpages)/notes/[category]/category.module.css

@@ -9,16 +9,22 @@
   gap: 1.5rem;
 }
 
-.noteList > a {
+.noteList > a, .glossaryList > a {
   border: 2px solid var(--gray);
   padding: 1rem;
   background-color: var(--bg-2);
   color: var(--gray);
-  height: 8rem;
   border-radius: var(--radius);
 }
 
-.noteList > a:hover {
+.glossaryList > a {
+  border: 2px solid transparent;
+  color: var(--fg);
+  font-size: larger;
+  line-height: normal;
+}
+
+.noteList > a:hover, .glossaryList > a:hover {
   color: var(--fg);
   border: 2px solid var(--link);
 }
@@ -27,8 +33,29 @@
   color: var(--gray);
 }
 
+.glossaryList {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+}
+
+.noteList > a > span {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.glossaryList > a > span > svg {
+  margin-bottom: 2rem;
+}
+
+.glossaryDesc {
+  color: var(--gray);
+  margin-bottom: 2rem;
+}
+
 @media screen and (max-width: 768px) {
-  .noteList {
+  .noteList, .glossaryList {
     grid-template-columns: repeat(1, 1fr);
   }
 }

app/(subpages)/notes/[category]/note/[slug]/note.module.css

@@ -2,19 +2,23 @@
   grid-column-start: 1;
   grid-column-end: 3;
   border: 2px solid var(--link);
-  padding: 1rem 2rem 0 2rem;
+  padding: 1rem 2rem;
   background-color: var(--bg-2);
   margin-top: 1rem;
 }
 
+.glossaryEntry > p  {
+  padding:  0 0 2rem 0;
+}
+
 .tags {
   display: flex;
   gap: 1rem;
   margin-top: 1rem;
   position: absolute;
   z-index: 1;
   top: 10rem;
-  left: 23rem;
+  padding-left: 3.5rem;
 }
 
 .tags > li {
@@ -33,6 +37,5 @@
 
   .tags {
     flex-wrap: wrap;
-    left: 2rem;
   }
 }

app/(subpages)/notes/[category]/note/[slug]/page.tsx

@@ -11,7 +11,8 @@ import styles from './note.module.css';
 import { convertMDWithInlineCodeToHTML } from '@lib/utils';
 
 import '../../../../../../public/assets/katex/katex.min.css';
-import { NoteEntry } from '@lib/types';
+import { GlossaryEntry, NoteEntry } from '@lib/types';
+import Link from '@components/link';
 
 const firaCode = Fira_Code({
   subsets: ['latin'],
@@ -22,7 +23,7 @@ const firaCode = Fira_Code({
 
 export async function generateStaticParams() {
   const categories = getNoteCategories();
-  const allNotes = [];
+  const allNotes: { category: string; slug: string; date?: string }[] = [];
   categories.forEach((category) => {
     let notes = getNotesInCategory(category);
     notes.forEach((note) => {
@@ -64,7 +65,7 @@ export default async function Page({
   }: {
     category: string;
     slug: string;
-  }): NoteEntry {
+  }): NoteEntry | GlossaryEntry {
     const notes = getNotesInCategory(category);
     const noteIndex = notes.findIndex((n) => n?.slug === slug);
     const note = notes[noteIndex];
@@ -79,21 +80,31 @@ export default async function Page({
 
   return (
     <>
-      <ul className={styles.tags}>
-        {tags.length > 1 ? (
-          tags.map((tag) => <li key={tag}>{tag}</li>)
-        ) : (
-          <li>{tags}</li>
-        )}
-      </ul>
-      <div className={`${firaCode.className} ${styles.note}`}>
+      {/* Don't display tags for glossary entries for now */}
+      {params.category !== 'glossary' && (
+        <ul className={styles.tags}>
+          {tags.length > 1 ? (
+            tags.map((tag) => <li key={tag}>{tag}</li>)
+          ) : (
+            <li>{tags}</li>
+          )}
+        </ul>
+      )}
+      <div
+        className={`${firaCode.className} ${styles.note} ${
+          params.category === 'glossary' ? styles.glossaryEntry : ''
+        }`}
+      >
         <h1
           className={styles.title}
           dangerouslySetInnerHTML={{
             __html: convertMDWithInlineCodeToHTML(title),
           }}
         ></h1>
         <EntryContent mdxFunctionBody={mdxFunctionBody} />
+        {params.category === 'glossary' && (
+          <Link href="/notes/glossary">← Back to Glossary</Link>
+        )}
       </div>
     </>
   );

app/(subpages)/notes/[category]/page.tsx

@@ -2,6 +2,7 @@ import { getNoteCategories, getNotesInCategory } from '@lib/get-entries';
 import { capitalizeFirstLetter } from '@lib/utils';
 import styles from './category.module.css';
 import NoteBlock from '@components/note-block';
+import { GlossaryEntry, NoteEntry } from '@lib/types';
 
 export async function generateStaticParams() {
   const categories = getNoteCategories();
@@ -24,8 +25,17 @@ export default function Page({ params }: { params: { category: string } }) {
           category.replace(/-/g, ' ').replace(/script/, 'Script')
         )}
       </h1>
-      <div className={styles.noteList}>
-        {notes.map((note) => (
+      {category === 'glossary' && (
+        <div className={styles.glossaryDesc}>
+          <p>Very simple definitions of terms, idioms, etc.</p>
+        </div>
+      )}
+      <div
+        className={
+          category === 'glossary' ? styles.glossaryList : styles.noteList
+        }
+      >
+        {notes.map((note: NoteEntry | GlossaryEntry) => (
           <NoteBlock key={note.title} note={note} category={category} />
         ))}
       </div>

app/(subpages)/notes/page.tsx

@@ -18,7 +18,7 @@ export default async function Notes() {
 
   return (
     <Suspense fallback={<LoaderIcon />}>
-      <p><em>Total of {noteCount} notes</em></p>
+      <p><em>Total of {noteCount} entries</em></p>
       {categories
         .sort((a: string, b: string) => b.charCodeAt(0) - a.charCodeAt(0))
         .map((category) => {

app/components/note-block/index.tsx

@@ -1,25 +1,27 @@
-import { NoteEntry } from '@lib/types';
+import { GlossaryEntry, NoteEntry } from '@lib/types';
 import Link from '@components/link';
 
 export default function NoteBlock({
   note,
   category,
 }: {
-  note: NoteEntry;
+  note: NoteEntry | GlossaryEntry;
   category: string;
 }) {
   return (
     <Link key={note.slug} href={`/notes/${category}/note/${note.slug}`}>
       <span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          fill="var(--gray)"
-          viewBox="0 0 256 256"
-        >
-          <path d="M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z"></path>
-        </svg>
+        {category !== 'glossary' && (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="var(--gray)"
+            viewBox="0 0 256 256"
+          >
+            <path d="M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z"></path>
+          </svg>
+        )}
         <br />
         <span>{note.title}</span>
       </span>

app/lib/get-entries.ts

@@ -1,7 +1,7 @@
 import matter from 'gray-matter';
 import fs from 'node:fs';
 import path from 'node:path';
-import type { NoteEntry, PostEntry } from './types';
+import type { GlossaryEntry, NoteEntry, PostEntry } from './types';
 
 const thirdPartyPosts: PostEntry[] = [
   {
@@ -13,7 +13,8 @@ const thirdPartyPosts: PostEntry[] = [
     slug: '',
     tags: ['TypeScript'],
     isThirdParty: true,
-    thirdPartyPostHref: 'https://www.freecodecamp.org/news/recursive-types-in-typescript-a-brief-exploration',
+    thirdPartyPostHref:
+      'https://www.freecodecamp.org/news/recursive-types-in-typescript-a-brief-exploration',
   },
 ];
 
@@ -51,7 +52,9 @@ export function getNoteCategories(): string[] {
     .filter((dir) => !dir.startsWith('.'));
 }
 
-export function getNotesInCategory(category: string): NoteEntry[] {
+export function getNotesInCategory(
+  category: string
+): NoteEntry[] | GlossaryEntry[] {
   const categories = getNoteCategories();
   if (!categories.includes(category)) {
     console.error('Note category does not exist');
@@ -67,11 +70,15 @@ export function getNotesInCategory(category: string): NoteEntry[] {
       const entryContent = fs.readFileSync(filePath, 'utf8');
       const { data, content } = matter(entryContent);
       return { ...data, body: content } as NoteEntry;
-    });
+    })
+    .filter((entry) => entry !== null);
 
-  return notesWithMetadata
-    .filter((entry) => entry !== null)
-    .sort((a, b) =>
+  // Sort glossary entries alphabetically, other notes by date
+  if (category === 'glossary') {
+    return notesWithMetadata.sort() as GlossaryEntry[];
+  } else {
+    return notesWithMetadata.sort((a, b) =>
       a && b ? new Date(b.date).getTime() - new Date(a.date).getTime() : 0
     ) as NoteEntry[];
+  }
 }

app/lib/types.d.ts

@@ -19,6 +19,12 @@ export interface PostEntryData extends PostEntry {
 
 export interface NoteEntry extends Entry {}
 
+export interface GlossaryEntry {
+  title: string,
+  slug: string,
+  tags?: string[]
+}
+
 interface BaseProject {
   title: string,
   description: string | ReactNode,

notes-to-self/glossary/arity.mdx

@@ -0,0 +1,6 @@
+---
+title: Arity
+slug: arity
+---
+
+The arity of a function is the number of arguments it requires.

notes-to-self/glossary/challenge-response.mdx

@@ -0,0 +1,8 @@
+---
+title: Challenge-response authentication
+slug: challenge-response
+---
+
+Challenge-response authentication is a family of security protocols where one party presents a challenge that the other party must provide a valid response to in order to be authenticated.
+
+A simple example is where the challenge is asking for the password, and the response is to provide the correct password.