From 0cce5efb33b0931fb6a555b2df0a588845063884 Mon Sep 17 00:00:00 2001
From: wodeni <wn2155@columbia.edu>
Date: Sun, 29 Dec 2024 22:43:11 -0500
Subject: [PATCH] chore: small fixes

---
 src/AllNotes.tsx             | 19 +++++++++++++++++++
 src/Pool.tsx                 | 10 +++++++++-
 src/components/NoteIndex.tsx | 29 +++++++++++++++++------------
 src/components/Tags.tsx      |  2 +-
 src/index.tsx                | 11 +++++------
 tailwind.config.js           | 21 ++++++++++++++++++++-
 6 files changed, 71 insertions(+), 21 deletions(-)
 create mode 100644 src/AllNotes.tsx

diff --git a/src/AllNotes.tsx b/src/AllNotes.tsx
new file mode 100644
index 0000000..92755b7
--- /dev/null
+++ b/src/AllNotes.tsx
@@ -0,0 +1,19 @@
+import { Socials } from "./Academic";
+import NotesIndex from "./components/NoteIndex";
+import Tabs from "./components/Tabs";
+import { Hero } from "./Pool";
+
+export default () => {
+  return (
+    <>
+      <Hero className="md:col-span-2" />
+      <div className="flex flex-col">
+        <Socials className="mt-8" />
+        <Tabs />
+      </div>
+      <div className="col-span-3">
+        <NotesIndex showTags={true}></NotesIndex>
+      </div>
+    </>
+  );
+};
diff --git a/src/Pool.tsx b/src/Pool.tsx
index 11c4d40..2f43cb0 100644
--- a/src/Pool.tsx
+++ b/src/Pool.tsx
@@ -6,6 +6,7 @@ import Balls from "./components/Balls";
 import Logo from "./Logo";
 import A from "./components/A";
 import NotesIndex from "./components/NoteIndex";
+import { Link } from "react-router-dom";
 
 export const Hero = ({ className }: { className?: string }) => (
   <div className={className}>
@@ -50,12 +51,19 @@ export default () => {
         <Section header={"Notes"}>
           <Text>
             I keep some Obsidian notes on pool, including practice sessions,
-            drills, and reflections on past competitions.
+            drills, and reflections on past competitions. Here are some more
+            organized ones, see{" "}
+            <Link to="/pool/notes">
+              <A>here for all the notes </A>
+            </Link>
+            .
           </Text>
           <NoteHeader>Drills</NoteHeader>
           <NotesIndex tag="drill" />
           <NoteHeader>Tournaments</NoteHeader>
           <NotesIndex tag="tournament" />
+          <NoteHeader>Practice notes</NoteHeader>
+          <NotesIndex tag="journal" />
         </Section>
         <Section header={"Background"}>
           <Background />
diff --git a/src/components/NoteIndex.tsx b/src/components/NoteIndex.tsx
index aa66ad8..8dd0a80 100644
--- a/src/components/NoteIndex.tsx
+++ b/src/components/NoteIndex.tsx
@@ -1,12 +1,15 @@
 // src/NotesIndex.tsx
 import { Link } from "react-router-dom";
 import { notes } from "../notes"; // from step #2
-import Tabs from "./Tabs";
-import { Socials } from "../Academic";
-import { Hero } from "../Pool";
 import Tags from "./Tags";
 
-export default function NotesIndex({ tag }: { tag?: string }) {
+export default function NotesIndex({
+  tag,
+  showTags,
+}: {
+  tag?: string;
+  showTags?: boolean;
+}) {
   const filtered = tag
     ? notes.filter((note) => note.frontmatter?.tags?.includes(tag))
     : notes;
@@ -16,14 +19,16 @@ export default function NotesIndex({ tag }: { tag?: string }) {
         <ul>
           {filtered.map((note) => (
             <li key={note.slug}>
-              <Link
-                to={`/pool/notes/${note.slug}`}
-                className="text-primary text-xl font-bold hover:text-primary/70"
-              >
-                <span className="flex flex-row gap-2">
-                  {note.frontmatter?.title ?? note.slug}
-                </span>
-              </Link>
+              <div className="flex flex-row align-center gap-2">
+                <Link to={`/pool/notes/${note.slug}`}>
+                  <span className="text-primary text-xl font-bold hover:text-primary/70">
+                    {note.frontmatter?.title ?? note.slug}
+                  </span>
+                </Link>
+                {showTags && note.frontmatter?.tags && (
+                  <Tags tags={note.frontmatter.tags} className="text-xs" />
+                )}
+              </div>
             </li>
           ))}
         </ul>
diff --git a/src/components/Tags.tsx b/src/components/Tags.tsx
index d640e7c..bf0b6d4 100644
--- a/src/components/Tags.tsx
+++ b/src/components/Tags.tsx
@@ -1,5 +1,5 @@
 const Tags = ({ tags, className }: { className?: string; tags: string[] }) => (
-  <div className="flex flex-wrap gap-2">
+  <div className="flex flex-wrap gap-2 content-center">
     {tags.map((tag: string) => (
       <span
         key={tag}
diff --git a/src/index.tsx b/src/index.tsx
index 3cf7723..34bd48e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,13 @@
 import React, { useEffect } from "react";
 import ReactDOM from "react-dom/client";
-import App from "./Academic.js";
-import "./index.css";
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Academic from "./Academic.js";
-import Pool from "./Pool.js";
+import AllNotes from "./AllNotes.js";
 import Layout from "./Layout.js";
 import NoPage from "./NoPage.js";
-import NotesIndex from "./components/NoteIndex.js";
+import Pool from "./Pool.js";
 import NotePage from "./components/NotePage.js";
+import "./index.css";
 
 function RedirectToPDF({ link }: { link: string }) {
   useEffect(() => {
@@ -28,7 +27,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
           <Route path="/pool" element={<Pool />} />
           <Route path="*" element={<NoPage />} />
           {/* An index page listing all notes */}
-          <Route path="/pool/notes" element={<NotesIndex />} />
+          <Route path="/pool/notes" element={<AllNotes />} />
           {/* A dynamic route for each individual note */}
           <Route path="/pool/notes/:slug" element={<NotePage />} />
         </Route>
diff --git a/tailwind.config.js b/tailwind.config.js
index f38d4f2..ee7926a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -70,7 +70,26 @@ module.exports = {
             "@apply border-l-4 border-gray-500 dark:border-gray-400 pl-4 italic":
               {},
           },
-
+          // table formatting
+          table: {
+            "@apply border-collapse border dark:border-gray-300 text-left text-sm my-8":
+              {},
+          },
+          thead: {
+            "@apply bg-gray-100 dark:bg-zinc-700 uppercase font-medium": {},
+          },
+          th: {
+            "@apply border border-gray-300 px-4 py-2": {},
+          },
+          td: {
+            "@apply border border-gray-300 px-4 py-2": {},
+          },
+          "tbody tr:nth-child(even)": {
+            "@apply bg-zinc-50 dark:bg-zinc-700": {},
+          },
+          iframe: {
+            "@apply max-w-full rounded py-4": {},
+          },
           // If you wanted code/pre fences, you could add them too:
           // "pre, code": {
           //   "@apply rounded bg-gray-100 text-sm": {},