From 5a959cc9b2903aacd8c517b5396c8a8bcb8b1009 Mon Sep 17 00:00:00 2001 From: jlightner Date: Tue, 31 Mar 2026 05:41:54 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Added=20/about=20page=20with=20three=20?= =?UTF-8?q?content=20sections=20(what,=20how,=20who)=20an=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - "frontend/src/pages/About.tsx" - "frontend/src/App.tsx" - "frontend/src/components/AppFooter.tsx" - "frontend/src/App.css" GSD-Task: S02/T01 --- frontend/src/App.css | 123 ++++++++++++++++++++++++++ frontend/src/App.tsx | 4 + frontend/src/components/AppFooter.tsx | 6 ++ frontend/src/pages/About.tsx | 94 ++++++++++++++++++++ frontend/tsconfig.app.tsbuildinfo | 2 +- 5 files changed, 228 insertions(+), 1 deletion(-) create mode 100644 frontend/src/pages/About.tsx diff --git a/frontend/src/App.css b/frontend/src/App.css index 4816e47..b475eab 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -3354,3 +3354,126 @@ a.app-footer__repo:hover { gap: 0.3rem; text-decoration: none; } + +/* ── About page ───────────────────────────────────────────────────────────── */ + +.about { + max-width: 44rem; + margin: 0 auto; + padding: 2rem 1.5rem 3rem; +} + +.about-hero { + text-align: center; + margin-bottom: 2.5rem; +} + +.about-hero__title { + font-size: 2rem; + font-weight: 700; + color: var(--color-text-primary); + margin: 0 0 0.5rem; +} + +.about-hero__subtitle { + font-size: 1.05rem; + color: var(--color-text-secondary); + margin: 0; +} + +.about-section { + margin-bottom: 2rem; +} + +.about-section__heading { + font-size: 1.25rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 0.75rem; +} + +.about-section__text { + color: var(--color-text-secondary); + line-height: 1.7; + margin: 0 0 0.75rem; +} + +.about-pipeline { + list-style: none; + counter-reset: pipeline; + padding: 0; + margin: 1rem 0; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.about-pipeline__step { + counter-increment: pipeline; + display: flex; + align-items: baseline; + gap: 0.75rem; + color: var(--color-text-secondary); + line-height: 1.6; + padding: 0.75rem 1rem; + background: var(--color-bg-surface); + border-radius: 0.5rem; + border: 1px solid var(--color-border); +} + +.about-pipeline__step::before { + content: counter(pipeline); + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + font-size: 0.75rem; + font-weight: 700; + color: var(--color-accent); + background: var(--color-accent-subtle); + border-radius: 50%; + flex-shrink: 0; +} + +.about-pipeline__step strong { + color: var(--color-text-primary); +} + +.about-link { + color: var(--color-accent); + text-decoration: none; + transition: color 0.15s; +} + +.about-link:hover { + color: var(--color-accent-hover); +} + +.about-cta { + text-align: center; + margin-top: 2.5rem; +} + +.about-cta__btn { + display: inline-block; +} + +/* Footer about link */ + +.app-footer__about { + color: var(--color-text-muted); + text-decoration: none; + transition: color 0.15s; +} + +a.app-footer__about:hover, +.app-footer__about:hover { + color: var(--color-accent); +} + +@media (max-width: 600px) { + .about-hero__title { + font-size: 1.5rem; + } +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e92edb1..c22b061 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -7,6 +7,7 @@ import CreatorDetail from "./pages/CreatorDetail"; import TopicsBrowse from "./pages/TopicsBrowse"; import AdminReports from "./pages/AdminReports"; import AdminPipeline from "./pages/AdminPipeline"; +import About from "./pages/About"; import AdminDropdown from "./components/AdminDropdown"; import AppFooter from "./components/AppFooter"; @@ -43,6 +44,9 @@ export default function App() { } /> } /> + {/* Info routes */} + } /> + {/* Fallback */} } /> diff --git a/frontend/src/components/AppFooter.tsx b/frontend/src/components/AppFooter.tsx index e2899fa..9162e61 100644 --- a/frontend/src/components/AppFooter.tsx +++ b/frontend/src/components/AppFooter.tsx @@ -1,5 +1,7 @@ const REPO_URL = "https://github.com/xpltdco/chrysopedia"; +import { Link } from "react-router-dom"; + export default function AppFooter() { const commitUrl = __GIT_COMMIT__ !== "dev" @@ -37,6 +39,10 @@ export default function AppFooter() { > GitHub + · + + About + ); } diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx new file mode 100644 index 0000000..4830581 --- /dev/null +++ b/frontend/src/pages/About.tsx @@ -0,0 +1,94 @@ +import { Link } from "react-router-dom"; + +export default function About() { + return ( +
+
+

About Chrysopedia

+

+ A structured knowledge base for music production techniques +

+
+ +
+

What Is Chrysopedia?

+

+ Chrysopedia turns long-form music production tutorials into a + searchable, structured knowledge base. Instead of scrubbing through + hours of video looking for the one technique you need, you can search + by topic, creator, or keyword and jump straight to the insight. +

+

+ The name comes from chrysopoeia — the art of transmutation. + We transmute raw video content into distilled, accessible knowledge. +

+
+ +
+

How Content Is Extracted

+

+ Videos are processed through a multi-stage pipeline that transcribes + audio, identifies key moments, classifies topics, and generates + structured technique pages — all using a combination of speech + recognition and large language models. +

+
    +
  1. + Transcription — Audio is converted to timestamped + text +
    2. +
  2. + Key Moment Detection — The transcript is analyzed + to find discrete techniques and insights +
    3. +
  3. + Topic Classification — Each moment is tagged with + categories and sub-topics +
    4. +
  4. + Page Generation — Structured technique pages are + written with context, steps, and creator attribution +
    5. +
  5. + Indexing — Content is embedded for semantic search +
    6. +
+

+ Every technique page links back to its source video and creator, + preserving attribution throughout. +

+
+ +
+

Who Maintains This

+

+ Chrysopedia is built and maintained by{" "} + + xpltd + + . The project is open source on{" "} + + GitHub + + . +

+
+ +
+ + Start Exploring + +
+
+ ); +} diff --git a/frontend/tsconfig.app.tsbuildinfo b/frontend/tsconfig.app.tsbuildinfo index 7db0d54..0bc3fdb 100644 --- a/frontend/tsconfig.app.tsbuildinfo +++ b/frontend/tsconfig.app.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"} \ No newline at end of file +{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"} \ No newline at end of file