Stevan/onspring-api-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: begin working on being able to immplement dark mode and light mode

Browse Source
This commit is contained in:
Stevan Freeborn
2023-04-20 22:39:47 -05:00
parent ec87b67385
commit 8eb224e018
8 changed files with 91 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/CodeSnippet.module.css
+1
View File
@@ -14,6 +14,7 @@
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
font-size: 1rem; font-size: 1rem;
color: white;
} }
.snippetContent>pre { .snippetContent>pre {
src/app/components/Main.tsx
+7 -1
View File
@@ -1,4 +1,7 @@
'use client';
import { Fragment } from 'react'; import { Fragment } from 'react';
import { themes, useThemeContext } from '../theme';
import { DocSection } from '../types/types'; import { DocSection } from '../types/types';
import styles from './Main.module.css'; import styles from './Main.module.css';
import Section from './Section'; import Section from './Section';
@@ -8,8 +11,11 @@ export default function Main({
}: { }: {
versionSections: DocSection[]; versionSections: DocSection[];
}) { }) {
const { theme } = useThemeContext();
const themeStyles = themes[theme];
return ( return (
<main className={styles.container}> <main style={themeStyles} className={styles.container}>
{versionSections.map(section => ( {versionSections.map(section => (
<Fragment key={section.title}> <Fragment key={section.title}>
<Section key={section.title}> <Section key={section.title}>
src/app/components/NavBar.tsx
+7 -3
View File
@@ -1,8 +1,9 @@
'use client'; 'use client';
import Link from 'next/link.js'; import Link from 'next/link';
import { Fragment, useState } from 'react'; import { Fragment, useState } from 'react';
import { Doc, DocsStructure } from '../types/types.js'; import { themes, useThemeContext } from '../theme';
import { Doc, DocsStructure } from '../types/types';
import styles from './NavBar.module.css'; import styles from './NavBar.module.css';
function VersionsDropdown({ function VersionsDropdown({
@@ -153,6 +154,9 @@ export default function NavBar({
}: { }: {
version: DocsStructure; version: DocsStructure;
}) { }) {
const { theme } = useThemeContext();
const themeStyles = themes[theme];
const [isNavOpen, setIsNavOpen] = const [isNavOpen, setIsNavOpen] =
useState<boolean>(false); useState<boolean>(false);
@@ -161,7 +165,7 @@ export default function NavBar({
}; };
return ( return (
<nav className={styles.nav}> <nav style={themeStyles} className={styles.nav}>
<ul className={styles.navListLeft}> <ul className={styles.navListLeft}>
<li className={styles.sectionDropdown}> <li className={styles.sectionDropdown}>
<SectionDropdown version={version} /> <SectionDropdown version={version} />
src/app/components/Section.module.css
+1 -1
View File
@@ -31,10 +31,10 @@
.container>article>p { .container>article>p {
margin-top: 20px; margin-top: 20px;
color: #c1c9d2;
} }
.container>article code { .container>article code {
color: white;
background-color: #0b3766; background-color: #0b3766;
border-radius: 5px; border-radius: 5px;
} }
src/app/components/SideBar.tsx
+22 -6
View File
@@ -2,6 +2,7 @@
import Link from 'next/link.js'; import Link from 'next/link.js';
import { useState } from 'react'; import { useState } from 'react';
import { useThemeContext } from '../theme';
import { Doc, DocsStructure } from '../types/types.js'; import { Doc, DocsStructure } from '../types/types.js';
import styles from './SideBar.module.css'; import styles from './SideBar.module.css';
@@ -92,14 +93,29 @@ export default function SideBar({
}: { }: {
version: DocsStructure; version: DocsStructure;
}) { }) {
const { theme, setTheme } = useThemeContext();
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Link href="/" className={styles.link}> <div>
<h1 className={styles.title}> <Link href="/" className={styles.link}>
<span className={styles.onspring}>Onspring</span>{' '} <h1 className={styles.title}>
<span className={styles.api}>API</span> <span className={styles.onspring}>
</h1> Onspring
</Link> </span>{' '}
<span className={styles.api}>API</span>
</h1>
</Link>
<label className="switch">
<input
onChange={() =>
setTheme(theme === 'light' ? 'dark' : 'light')
}
type="checkbox"
/>
<span className="slider round"></span>
</label>
</div>
<ListTree docs={version.docs} /> <ListTree docs={version.docs} />
</div> </div>
); );
src/app/global-error.tsx
-27
View File
@@ -1,27 +0,0 @@
'use client';
import styles from './error.module.css';
export default function GlobalError({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<html lang="en">
<body>
<div className={styles.container}>
<h2>Something went wrong!</h2>
<a
className={styles.navLink}
onClick={() => reset()}
>
Try again
</a>
</div>
</body>
</html>
);
}
src/app/layout.tsx
+11 -1
View File
@@ -1,5 +1,6 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import './globals.css'; import './globals.css';
import { ThemeContextProvider } from './theme';
export const metadata = { export const metadata = {
title: 'Onspring API Docs', title: 'Onspring API Docs',
@@ -12,6 +13,11 @@ export const metadata = {
}, },
], ],
}, },
viewport: {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
},
}; };
export default function RootLayout({ export default function RootLayout({
@@ -21,7 +27,11 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body>{children}</body> <body>
<ThemeContextProvider>
{children}
</ThemeContextProvider>
</body>
</html> </html>
); );
} }
src/app/theme.tsx
+42
View File
@@ -0,0 +1,42 @@
'use client';
import {
ReactNode,
createContext,
useContext,
useState,
} from 'react';
const ThemeContext = createContext({});
const darkTheme = {
color: 'white',
backgroundColor: '#05254a',
};
const lightTheme = {
color: 'black',
backgroundColor: 'white',
};
export const themes = {
dark: darkTheme,
light: lightTheme,
} as { [key: string]: { [key: string]: string } };
export const ThemeContextProvider = ({
children,
}: {
children: ReactNode;
}) => {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useThemeContext: any = () =>
useContext(ThemeContext);