chore: small fixes (#30)

Author: wodeni

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>
+    </>
+  );
+};

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 />

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>

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}

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>

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": {},