created COMP3314, COMP3330, COMP3278, COMP3230 os files

.vscode/dev-md-preview.css

@@ -0,0 +1,147 @@
+/* Common styles for all admonitions */
+* {
+  font-family: Atkinson Hyperlegible;
+}
+
+.markdown-body .admonition {
+  margin-bottom: 1em;
+  margin-top: 1em;
+  position: relative;
+  padding: 1em;
+  border-radius: 0;
+}
+
+.markdown-body .admonition-title {
+  font-weight: bold;
+  display: block;
+  padding: 0.25rem 0.75rem;
+  width: min-content;
+  text-wrap: nowrap;
+  color: white;
+  margin-left: -1em;
+  margin-top: -1em;
+  background-color: #888889;
+}
+
+.markdown-body .admonition.light .admonition-title {
+  background-color: #a0a0a0;
+}
+
+/* Unknown MkDocs displayed as info, unknown Docusaurus are not matched */
+.markdown-body .admonition-title::before {
+  content: "";
+}
+.markdown-body .admonition {
+  background-color: #474748;
+  border-bottom: 1px solid #888889;
+  border-left: 8px solid #888889 !important;
+}
+.markdown-body .admonition.light {
+  background-color: #f0f0f0;
+  border-bottom: 1px solid #a0a0a0;
+  border-left: 8px solid #a0a0a0 !important;
+}
+
+/* Remove icons for admonition titles */
+.markdown-body .note .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .tip .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .info .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .warning .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .danger .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .abstract .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .success .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .question .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .failure .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .bug .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .example .admonition-title::before {
+  content: "";
+}
+
+.markdown-body .quote .admonition-title::before {
+  content: "";
+}
+
+/* Background and border colors for dark theme */
+.markdown-body .note {
+  background-color: #474748;
+  border-bottom: 1px solid #888889;
+  border-left: 8px solid #888889 !important;
+}
+.markdown-body .note .admonition-title {
+  background-color: #888889;
+}
+
+.markdown-body .tip {
+  background-color: #003100;
+  border-bottom: 1px solid #009400;
+  border-left: 8px solid #009400 !important;
+}
+.markdown-body .tip > .admonition-title {
+  background-color: #009400;
+}
+
+.markdown-body .info {
+  background-color: oklch(0.359 0.144 278.697);
+  border-bottom: 1px solid oklch(0.257 0.09 281.288);
+  border-left: 8px solid oklch(0.257 0.09 281.288) !important;
+}
+.markdown-body .info > .admonition-title {
+  background-color: oklch(0.257 0.09 281.288);
+}
+
+/* Background and border colors for light theme */
+.markdown-body .note.light {
+  background-color: #f0f0f0;
+  border-bottom: 1px solid #a0a0a0;
+  border-left: 8px solid #a0a0a0 !important;
+}
+.markdown-body .note.light > .admonition-title {
+  background-color: #a0a0a0;
+}
+.markdown-body .tip.light {
+  background-color: #e0f2e0;
+  border-bottom: 1px solid #008000;
+  border-left: 8px solid #008000 !important;
+}
+.markdown-body .tip.light > .admonition-title {
+  background-color: #008000;
+}
+
+.markdown-body .info.light {
+  background-color: oklch(0.93 0.034 272.788);
+  border-bottom: 1px solid oklch(0.511 0.262 276.966);
+  border-left: 8px solid oklch(0.511 0.262 276.966) !important;
+}
+.markdown-body .info.light > .admonition-title {
+  background-color: oklch(0.511 0.262 276.966);
+}

.vscode/mdx.code-snippets

@@ -0,0 +1,14 @@
+{
+  "Admonition": {
+    "scope": "markdown,mdx",
+    "prefix": "!!",
+    "body": ["!!! $1 \"$2\"", "\t", "\t $3"],
+    "description": "Admonition"
+  },
+  "Equation": {
+    "scope": "markdown,mdx",
+    "prefix": "`eq",
+    "body": ["```math", "\\begin{align*}", "\t$1", "\\end{align*}", "```"],
+    "description": "Equation"
+  }
+}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "markdown.styles": ["./.vscode/dev-md-preview.css"],
+  "workbench.colorCustomizations": {
+    "commandCenter.border": "#e7e7e799",
+    "titleBar.activeBackground": "#793600",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#79360099",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#793600",
+  "editor.fontSize": 18,
+  // "editor.fontFamily": "Arial Black",
+  "editor.lineHeight": 1.5,
+  "markdown.preview.fontSize": 16
+}

app/global.css

@@ -6,8 +6,12 @@
   font-size: 16px;
 }
 
+.katex {
+  font-size: 1em !important;
+}
+
 .katex-display > .katex {
-  overflow-x: scroll;
+  overflow-x: auto;
   overflow-y: hidden;
 }
 
@@ -40,10 +44,6 @@ article {
   }
 }
 
-#radix-\:r0\: > div.mt-auto.flex.flex-col.border-t.p-3 > div {
-  flex-wrap: wrap;
-}
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -141,11 +141,9 @@ details summary::-webkit-details-marker {
   display: none;
 }
 
-/* @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-} */
+/* invert images in dark mode */
+
+.dark img,
+.dark picture {
+  filter: invert(1) hue-rotate(180deg);
+}

app/layout.client.ts

@@ -0,0 +1,8 @@
+"use client";
+
+import { useParams } from "next/navigation";
+
+export function useMode(): string | undefined {
+  const { slug } = useParams();
+  return Array.isArray(slug) && slug.length > 0 ? slug[0] : undefined;
+}

app/layout.tsx

@@ -1,3 +1,4 @@
+import CustomSearchDialog from "@/components/Search";
 import getSortedFiles from "@/lib/getSortedFiles";
 import { baseUrl, createMetadata } from "@/lib/metadata";
 import { RootProvider } from "fumadocs-ui/provider";
@@ -11,7 +12,7 @@ const font = GeistSans;
 export const metadata = createMetadata({
   title: {
     template: "%s Notes@HKU",
-    default: "Notes@HKU by Jax",
+    default: "NotesAtHKU",
   },
   description:
     "Notes at HKU is the home to hand-typed notes by students, for students.",
@@ -22,16 +23,33 @@ export default function Layout({ children }: { children: ReactNode }) {
   const sortedFiles = getSortedFiles();
   const tags = sortedFiles.map((file) => ({
     name: file.title,
-    value: file.title, // assuming file has a value property
+    value: file.title,
+    icon: file.icon,
   }));
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "NotesAtHKU by Jax",
+    alternateName: [
+      "Notes@HKU",
+      "NotesATHKU",
+      "Notes at HKU by Jax",
+      "Notes@HKU by Jax",
+    ],
+    url: "https://notes.jaxtam.dev",
+  };
 
   return (
     <html lang="en" className={font.className} suppressHydrationWarning>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <body className="flex flex-col min-h-screen">
         <RootProvider
           search={{
+            SearchDialog: CustomSearchDialog,
             options: {
-              defaultTag: "",
               tags,
             },
           }}

components/Search.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useMode } from "@/app/layout.client";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import { type ReactNode, useEffect, useState } from "react";
+import {
+  SearchDialog,
+  type SharedProps,
+  type TagItem,
+  TagsList,
+} from "./ui/search-dialog";
+
+export interface CustomSearchDialogProps extends SharedProps {
+  /**
+   * @defaultValue 'fetch'
+   */
+  type?: "fetch" | "static";
+
+  tags?: TagItem[];
+
+  /**
+   * Search API URL
+   */
+  api?: string;
+
+  /**
+   * The debounced delay for performing a search.
+   */
+  delayMs?: number;
+
+  footer?: ReactNode;
+
+  /**
+   * Allow to clear tag filters
+   *
+   * @defaultValue false
+   */
+  allowClear?: boolean;
+}
+
+export default function CustomSearchDialog({
+  tags,
+  api,
+  delayMs,
+  type = "fetch",
+  allowClear = false,
+  ...props
+}: CustomSearchDialogProps): ReactNode {
+  const mode = useMode();
+  const [tag, setTag] = useState<string | undefined>(mode || "");
+
+  useEffect(() => {
+    setTag(mode || "");
+  }, [mode]);
+
+  const { search, setSearch, query } = useDocsSearch(
+    type === "fetch"
+      ? {
+          type: "fetch",
+          api,
+        }
+      : {
+          type: "static",
+          from: api,
+        },
+    undefined,
+    tag,
+    delayMs
+  );
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      results={query.data ?? []}
+      {...props}
+      footer={
+        tags ? (
+          <>
+            <TagsList
+              tag={tag}
+              onTagChange={setTag}
+              items={tags}
+              allowClear={allowClear}
+            />
+            {props.footer}
+          </>
+        ) : (
+          props.footer
+        )
+      }
+    />
+  );
+}