feat: add more content

src/app/components/CodeSnippet.tsx

@@ -126,7 +126,7 @@ export default function CodeSnippet({
       if (React.isValidElement(child)) {
         const languageClassParts =
           child.props.className.split('-');
-        if (languageClassParts.length == 2) {
+        if (languageClassParts.length > 1) {
           const language = languageClassParts[1];
           return language;
         }

src/app/components/Fence.tsx

@@ -1,6 +1,8 @@
 import Prism from 'prismjs';
 import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-csharp';
 import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-python';
 import './prism-custom.css';
 
 export default function Fence({

src/app/components/Section.module.css

@@ -44,4 +44,31 @@
   .container>article:nth-child(2)>h1 {
     padding-top: 75px;
   }
+}
+
+.container>article>h2 {
+  margin-top: 1rem;
+}
+
+.container table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.container table>thead>tr>th,
+.container table>tbody>tr>td {
+  padding: 0.5rem;
+  text-align: left;
+  border-bottom: 1px solid #0b3766;
+}
+
+.container table>thead>tr>th {
+  white-space: nowrap;
+}
+
+.container a {
+  text-decoration: none;
+  color: #64adac;
+  font-weight: bold;
 }

src/app/components/SideBar.tsx

@@ -51,7 +51,9 @@ function TreeNode({ doc }: { doc: Doc }) {
         </div>
       ) : (
         <a
-          href={`#${doc.title.toLowerCase()}`}
+          href={`#${doc.title
+            .replaceAll(' ', '-')
+            .toLowerCase()}`}
           className={styles.link}
         >
           {doc.title}