style: fix site-documentation styling

functions/src/search_projects.ts

@@ -129,7 +129,11 @@ function sortResults(
 // Main search function
 export const searchProjects = onCall(
     { cors: true },
-    async ({ data }: { data: SearchProjectsParams }): Promise<SearchResponse> => {
+    async ({
+        data
+    }: {
+        data: SearchProjectsParams;
+    }): Promise<SearchResponse> => {
         try {
             const {
                 query,

search/search.ts

@@ -16,7 +16,11 @@ interface DatabaseStructure {
     [key: string]: DatabaseRecord[] | undefined;
 }
 
-const createFuzzySearch = (database: DatabaseStructure = {}, key: string = "", options: SearchOptions = {}): Fuse<DatabaseRecord> | null => {
+const createFuzzySearch = (
+    database: DatabaseStructure = {},
+    key: string = "",
+    options: SearchOptions = {}
+): Fuse<DatabaseRecord> | null => {
     const items = database[key];
     if (typeof items === "undefined" || !Array.isArray(items)) {
         return null;
@@ -33,27 +37,33 @@ const createDatabaseSearch = (database: DatabaseStructure = {}) => {
         keys: ["username", "displayName", "bio"]
     });
     const tags = createFuzzySearch(database, "tags", { keys: ["id"] });
-    const searchMap: Record<string, Fuse<DatabaseRecord> | null> = { projects, profiles, tags };
-
-    return memoize((collection: string = "", query: string = ""): DatabaseRecord[] => {
-        if (
-            typeof collection !== "string" ||
-            typeof query !== "string" ||
-            typeof searchMap[collection] === "undefined" ||
-            collection === "" ||
-            query === ""
-        ) {
-            return [];
-        }
+    const searchMap: Record<string, Fuse<DatabaseRecord> | null> = {
+        projects,
+        profiles,
+        tags
+    };
 
-        const fuse = searchMap[collection];
-        if (!fuse) {
-            return [];
+    return memoize(
+        (collection: string = "", query: string = ""): DatabaseRecord[] => {
+            if (
+                typeof collection !== "string" ||
+                typeof query !== "string" ||
+                typeof searchMap[collection] === "undefined" ||
+                collection === "" ||
+                query === ""
+            ) {
+                return [];
+            }
+
+            const fuse = searchMap[collection];
+            if (!fuse) {
+                return [];
+            }
+
+            const result = fuse.search(query);
+            return result.map((item) => item.item);
         }
-
-        const result = fuse.search(query);
-        return result.map(item => item.item);
-    });
+    );
 };
 
 const compareValues = (key: string, order: string = "asc") => {
@@ -62,8 +72,14 @@ const compareValues = (key: string, order: string = "asc") => {
             return 0;
         }
 
-        const varA = typeof a[key] === "string" ? (a[key] as string).toUpperCase() : a[key];
-        const varB = typeof b[key] === "string" ? (b[key] as string).toUpperCase() : b[key];
+        const varA =
+            typeof a[key] === "string"
+                ? (a[key] as string).toUpperCase()
+                : a[key];
+        const varB =
+            typeof b[key] === "string"
+                ? (b[key] as string).toUpperCase()
+                : b[key];
 
         let comparison = 0;
         if (varA > varB) {
@@ -75,27 +91,39 @@ const compareValues = (key: string, order: string = "asc") => {
     };
 };
 
-const orderArrayByKey = memoize((array: DatabaseRecord[] = [], orderKey: string | boolean = "", order: string | boolean = "asc"): DatabaseRecord[] => {
-    if (
-        Array.isArray(array) &&
-        array.length > 0 &&
-        orderKey !== false &&
-        order !== false &&
-        typeof orderKey === "string" &&
-        typeof array[0][orderKey] !== "undefined" &&
-        typeof order === "string"
-    ) {
-        array.sort(compareValues(orderKey, order));
-    }
+const orderArrayByKey = memoize(
+    (
+        array: DatabaseRecord[] = [],
+        orderKey: string | boolean = "",
+        order: string | boolean = "asc"
+    ): DatabaseRecord[] => {
+        if (
+            Array.isArray(array) &&
+            array.length > 0 &&
+            orderKey !== false &&
+            order !== false &&
+            typeof orderKey === "string" &&
+            typeof array[0][orderKey] !== "undefined" &&
+            typeof order === "string"
+        ) {
+            array.sort(compareValues(orderKey, order));
+        }
 
-    return array;
-});
+        return array;
+    }
+);
 
 const searchResultFilter = memoize(
-    (result: DatabaseRecord[] = [], count: number | string | boolean = 0, offset: number | string | boolean = 0, orderKey: string | boolean = false, order: string | boolean = false): DatabaseRecord[] => {
+    (
+        result: DatabaseRecord[] = [],
+        count: number | string | boolean = 0,
+        offset: number | string | boolean = 0,
+        orderKey: string | boolean = false,
+        order: string | boolean = false
+    ): DatabaseRecord[] => {
         let parsedCount = count;
         let parsedOffset = offset;
-        
+
         if (count !== false && offset !== false) {
             parsedCount = parseInt(String(count));
             parsedOffset = parseInt(String(offset));
@@ -133,8 +161,4 @@ const createDatabaseList = (database: DatabaseStructure = {}) => {
     };
 };
 
-export {
-    createDatabaseSearch,
-    searchResultFilter,
-    createDatabaseList
-};
+export { createDatabaseSearch, searchResultFilter, createDatabaseList };

src/components/site-documents/site-documents.tsx

@@ -1,12 +1,13 @@
+import { useTheme } from "@emotion/react";
 import { mainStyle, rootStyle } from "./styles";
 import { Header } from "../header/header";
-import { main } from "../projects/styles";
 
 export const SiteDocuments = () => {
+    const theme = useTheme();
     return (
-        <div css={rootStyle}>
+        <div css={rootStyle(theme)}>
             <Header />
-            <main css={[mainStyle, main]}>
+            <main css={mainStyle(theme)}>
                 <section>
                     <h1>Csound Web-IDE</h1>
 

src/components/site-documents/styles.ts

@@ -1,27 +1,43 @@
-import { css } from "@emotion/react";
+import { css, Theme } from "@emotion/react";
 import { headerHeight } from "@styles/constants";
 
-export const rootStyle = css({
-    backgroundColor: "#e8e8e8",
-    bottom: "0px",
-    top: `${headerHeight}px`,
-    left: 0,
-    right: 0,
-    position: "relative"
-});
+export const rootStyle = (theme: Theme) =>
+    css({
+        position: "relative",
+        top: `${headerHeight}px`,
+        left: 0,
+        right: 0,
+        minHeight: "100vh",
+        boxSizing: "border-box",
+        backgroundColor: theme.background
+    });
 
-export const mainStyle = css({
-    maxWidth: "1024px",
-    padding: 16,
-    margin: "auto",
-    fontSize: 16,
-    "& h1": {
-        margin: "16px 0"
-    },
-    "& h2": {
-        margin: "40px 0 16px"
-    },
-    "& h3": {
-        margin: "40px 0 16px"
-    }
-});
+export const mainStyle = (theme: Theme) =>
+    css({
+        maxWidth: "1024px",
+        padding: 16,
+        margin: "0 auto",
+        fontSize: 16,
+        color: theme.textColor,
+        "& h1": {
+            margin: "16px 0",
+            color: theme.headerTextColor
+        },
+        "& h2": {
+            margin: "40px 0 16px",
+            color: theme.headerTextColor
+        },
+        "& h3": {
+            margin: "40px 0 16px",
+            color: theme.headerTextColor
+        },
+        "& a": {
+            color: theme.button
+        },
+        "& img": {
+            borderRadius: 6,
+            border: `1px solid ${theme.line}`,
+            display: "block",
+            margin: "16px auto"
+        }
+    });