From 9916881e5677c810bc8b1e15c45c0a5ac9fdef87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hl=C3=B6=C3=B0ver=20Sigur=C3=B0sson?= Date: Sun, 16 Aug 2026 18:44:04 +0300 Subject: [PATCH] style: fix site-documentation styling --- functions/src/search_projects.ts | 6 +- search/search.ts | 110 +++++++++++------- .../site-documents/site-documents.tsx | 7 +- src/components/site-documents/styles.ts | 64 ++++++---- 4 files changed, 116 insertions(+), 71 deletions(-) diff --git a/functions/src/search_projects.ts b/functions/src/search_projects.ts index 69069fba..877d6020 100644 --- a/functions/src/search_projects.ts +++ b/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 => { + async ({ + data + }: { + data: SearchProjectsParams; + }): Promise => { try { const { query, diff --git a/search/search.ts b/search/search.ts index 77486c72..c20d3aff 100644 --- a/search/search.ts +++ b/search/search.ts @@ -16,7 +16,11 @@ interface DatabaseStructure { [key: string]: DatabaseRecord[] | undefined; } -const createFuzzySearch = (database: DatabaseStructure = {}, key: string = "", options: SearchOptions = {}): Fuse | null => { +const createFuzzySearch = ( + database: DatabaseStructure = {}, + key: string = "", + options: SearchOptions = {} +): Fuse | 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 | 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 | 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 }; diff --git a/src/components/site-documents/site-documents.tsx b/src/components/site-documents/site-documents.tsx index 0251c44b..a34c1306 100644 --- a/src/components/site-documents/site-documents.tsx +++ b/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 ( -
+
-
+

Csound Web-IDE

diff --git a/src/components/site-documents/styles.ts b/src/components/site-documents/styles.ts index 2a85463c..01321a26 100644 --- a/src/components/site-documents/styles.ts +++ b/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" + } + });