aboutsummaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/button.tsx6
-rw-r--r--components/chapters.tsx64
-rw-r--r--components/image.tsx14
-rw-r--r--components/navbar.tsx40
-rw-r--r--components/seperator.tsx16
-rw-r--r--components/tag.tsx26
6 files changed, 86 insertions, 80 deletions
diff --git a/components/button.tsx b/components/button.tsx
index 452d85f..23201aa 100644
--- a/components/button.tsx
+++ b/components/button.tsx
@@ -3,7 +3,7 @@ export default function Button(props: {
href?: string;
onclick?: () => void;
}) {
- return props.href ?
- <a href={props.href} className="button">{props.text}</a> :
- <button onClick={props.onclick} className="button">{props.text}</button>
+ return props.href
+ ? <a href={props.href} className='button'>{props.text}</a>
+ : <button onClick={props.onclick} className='button'>{props.text}</button>;
}
diff --git a/components/chapters.tsx b/components/chapters.tsx
index facf1e1..62d8285 100644
--- a/components/chapters.tsx
+++ b/components/chapters.tsx
@@ -1,9 +1,9 @@
-import { ReactNode, useState, CSSProperties } from 'react';
+import { CSSProperties, ReactNode, useState } from 'react';
import { NavbarItem } from '../components/navbar';
-import RemoveRoundedIcon from '@material-ui/icons/RemoveRounded';
import KeyboardArrowDownRoundedIcon from '@material-ui/icons/KeyboardArrowDownRounded';
+import RemoveRoundedIcon from '@material-ui/icons/RemoveRounded';
export interface chapter {
name: string;
@@ -16,50 +16,48 @@ function NavbarChapter(props: {
chapter: chapter;
children?: ReactNode;
}) {
- var [ collapsed, setCollapsed ] = useState(true);
+ var [collapsed, setCollapsed] = useState(true);
- var icon = <div className={ "collapseIcon" + (collapsed ? "" : " collapsed") }>
- {
- props.chapter.children?.length > 0 ?
- <KeyboardArrowDownRoundedIcon/> :
- <RemoveRoundedIcon/>
- }
- </div>
+ var icon = <div className={'collapseIcon' + (collapsed ? '' : ' collapsed')}>
+ {props.chapter.children?.length > 0
+ ? <KeyboardArrowDownRoundedIcon />
+ : <RemoveRoundedIcon />}
+ </div>;
var classes = [
- "chapter",
- `indentLevel${props.level}`
- ]
- !collapsed && classes.push("childrenCollapsed");
+ 'chapter',
+ `indentLevel${props.level}`,
+ ];
+ !collapsed && classes.push('childrenCollapsed');
var outercss = /* { "--children-height": 0 + "px" } */ {} as CSSProperties;
return <NavbarItem
- icon={icon}
- classList={classes}
- title={props.chapter.name}
- onIconClick={() => props.chapter.children?.length > 0 && setCollapsed(!collapsed)}
- href={props.chapter.sectionLink}
- key={(() => Math.round(Math.random() * 1e12))()}
- style={{
- marginLeft: 12 * props.level,
- }} outerStyle={outercss}>
+ icon={icon}
+ classList={classes}
+ title={props.chapter.name}
+ onIconClick={() => props.chapter.children?.length > 0 && setCollapsed(!collapsed)}
+ href={props.chapter.sectionLink}
+ key={(() => Math.round(Math.random() * 1e12))()}
+ style={{
+ marginLeft: 12 * props.level,
+ }}
+ outerStyle={outercss}
+ >
{props.children}
- </NavbarItem>
+ </NavbarItem>;
}
class Chapter {
constructor(public chapters: Array<chapter>, public level: number) {}
render() {
- return <div className="chapterChildren">
- {
- this.chapters?.map(chapter => {
- return <NavbarChapter level={this.level} chapter={chapter}>
- { new Chapter(chapter.children, this.level + 1).render() }
- </NavbarChapter>
- })
- }
- </div>
+ return <div className='chapterChildren'>
+ {this.chapters?.map(chapter => {
+ return <NavbarChapter level={this.level} chapter={chapter}>
+ {new Chapter(chapter.children, this.level + 1).render()}
+ </NavbarChapter>;
+ })}
+ </div>;
}
}
diff --git a/components/image.tsx b/components/image.tsx
index ad84ff6..5a8b2cf 100644
--- a/components/image.tsx
+++ b/components/image.tsx
@@ -2,12 +2,10 @@ export default function Image(props: {
src: string;
alt?: string;
}) {
- return <div className="image">
- <img src={props.src} alt={props.alt}/>
- {
- props.alt && <div>
- <p>{props.alt}</p>
- </div>
- }
- </div>
+ return <div className='image'>
+ <img src={props.src} alt={props.alt} />
+ {props.alt && <div>
+ <p>{props.alt}</p>
+ </div>}
+ </div>;
}
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 9a78eec..35949f4 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
@@ -16,15 +16,15 @@ export function NavbarItem(props: {
onClick?: () => void;
}) {
var classes = props.classList || [];
- classes.push("navbarItem");
- props.active && classes.push("active");
- return <a href={props.href} className={classes.join(" ")} style={props.outerStyle}>
- <div className="inner" style={props.style}>
- <div className="icon" onClick={props.onIconClick}>{props.icon}</div>
- <span className="title" onClick={props.onClick}>{props.title}</span>
+ classes.push('navbarItem');
+ props.active && classes.push('active');
+ return <a href={props.href} className={classes.join(' ')} style={props.outerStyle}>
+ <div className='inner' style={props.style}>
+ <div className='icon' onClick={props.onIconClick}>{props.icon}</div>
+ <span className='title' onClick={props.onClick}>{props.title}</span>
</div>
{props.children}
- </a>
+ </a>;
}
export default function Navbar(props: {
@@ -32,16 +32,18 @@ export default function Navbar(props: {
}) {
return <div style={{ marginBottom: 24 }}>
<NavbarItem
- active={props.page == "home"}
- icon={<HomeRoundedIcon/>}
- title="Home"
- href="/"
- classList={["indentLevel0", "link"]}/>
+ active={props.page == 'home'}
+ icon={<HomeRoundedIcon />}
+ title='Home'
+ href='/'
+ classList={['indentLevel0', 'link']}
+ />
<NavbarItem
- active={props.page == "search"}
- icon={<SearchRoundedIcon/>}
- title="Search for posts"
- href="/search"
- classList={["indentLevel0", "link"]}/>
- </div>
+ active={props.page == 'search'}
+ icon={<SearchRoundedIcon />}
+ title='Search for posts'
+ href='/search'
+ classList={['indentLevel0', 'link']}
+ />
+ </div>;
}
diff --git a/components/seperator.tsx b/components/seperator.tsx
index 5f05aca..f1843a7 100644
--- a/components/seperator.tsx
+++ b/components/seperator.tsx
@@ -1,8 +1,12 @@
export default function ArticleSeperator() {
- return <div className="seperator">
- <svg width="96" height="12" viewBox="0 0 96 12" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path fillRule="evenodd" clipRule="evenodd" d="M8.04282 8.19986C6.51226 9.73171 4.24587 12 0 12V6C1.68094 6 2.4102 5.34716 3.87868 3.87868C3.90463 3.85273 3.9308 3.82654 3.95718 3.80014C5.48774 2.26829 7.75413 0 12 0C16.2459 0 18.5123 2.26829 20.0428 3.80014C20.0692 3.82654 20.0954 3.85273 20.1213 3.87868C21.5898 5.34716 22.3191 6 24 6C25.6809 6 26.4102 5.34716 27.8787 3.87868C27.9046 3.85273 27.9308 3.82654 27.9572 3.80014C29.4877 2.26829 31.7541 0 36 0C40.2459 0 42.5123 2.26829 44.0428 3.80014C44.0692 3.82654 44.0954 3.85273 44.1213 3.87868C45.5898 5.34716 46.3191 6 48 6C49.6809 6 50.4102 5.34716 51.8787 3.87868C51.9046 3.85273 51.9308 3.82654 51.9572 3.80014C53.4877 2.26829 55.7541 0 60 0C64.2459 0 66.5123 2.26829 68.0428 3.80014C68.0692 3.82654 68.0954 3.85273 68.1213 3.87868C69.5898 5.34716 70.3191 6 72 6C73.6809 6 74.4102 5.34716 75.8787 3.87868L75.9572 3.80014C77.4877 2.26829 79.7541 0 84 0C88.2459 0 90.5123 2.26829 92.0428 3.80014L92.1213 3.87868C93.5898 5.34716 94.3191 6 96 6V12C91.7541 12 89.4877 9.73171 87.9572 8.19986L87.8787 8.12132C86.4102 6.65284 85.6809 6 84 6C82.3191 6 81.5898 6.65284 80.1213 8.12132L80.0428 8.19986C78.5123 9.73171 76.2459 12 72 12C67.7541 12 65.4877 9.73171 63.9572 8.19986C63.9308 8.17346 63.9046 8.14727 63.8787 8.12132C62.4102 6.65284 61.6809 6 60 6C58.3191 6 57.5898 6.65284 56.1213 8.12132C56.0954 8.14727 56.0692 8.17346 56.0428 8.19986C54.5123 9.73171 52.2459 12 48 12C43.7541 12 41.4877 9.73171 39.9572 8.19986C39.9308 8.17346 39.9046 8.14727 39.8787 8.12132C38.4102 6.65284 37.6809 6 36 6C34.3191 6 33.5898 6.65284 32.1213 8.12132C32.0954 8.14727 32.0692 8.17346 32.0428 8.19986C30.5123 9.73171 28.2459 12 24 12C19.7541 12 17.4877 9.73171 15.9572 8.19986C15.9308 8.17346 15.9046 8.14727 15.8787 8.12132C14.4102 6.65284 13.6809 6 12 6C10.3191 6 9.5898 6.65284 8.12132 8.12132C8.09537 8.14727 8.0692 8.17346 8.04282 8.19986Z" fill="var(--fire-opal)"/>
-</svg>
- </div>
+ return <div className='seperator'>
+ <svg width='96' height='12' viewBox='0 0 96 12' fill='none' xmlns='http://www.w3.org/2000/svg'>
+ <path
+ fillRule='evenodd'
+ clipRule='evenodd'
+ d='M8.04282 8.19986C6.51226 9.73171 4.24587 12 0 12V6C1.68094 6 2.4102 5.34716 3.87868 3.87868C3.90463 3.85273 3.9308 3.82654 3.95718 3.80014C5.48774 2.26829 7.75413 0 12 0C16.2459 0 18.5123 2.26829 20.0428 3.80014C20.0692 3.82654 20.0954 3.85273 20.1213 3.87868C21.5898 5.34716 22.3191 6 24 6C25.6809 6 26.4102 5.34716 27.8787 3.87868C27.9046 3.85273 27.9308 3.82654 27.9572 3.80014C29.4877 2.26829 31.7541 0 36 0C40.2459 0 42.5123 2.26829 44.0428 3.80014C44.0692 3.82654 44.0954 3.85273 44.1213 3.87868C45.5898 5.34716 46.3191 6 48 6C49.6809 6 50.4102 5.34716 51.8787 3.87868C51.9046 3.85273 51.9308 3.82654 51.9572 3.80014C53.4877 2.26829 55.7541 0 60 0C64.2459 0 66.5123 2.26829 68.0428 3.80014C68.0692 3.82654 68.0954 3.85273 68.1213 3.87868C69.5898 5.34716 70.3191 6 72 6C73.6809 6 74.4102 5.34716 75.8787 3.87868L75.9572 3.80014C77.4877 2.26829 79.7541 0 84 0C88.2459 0 90.5123 2.26829 92.0428 3.80014L92.1213 3.87868C93.5898 5.34716 94.3191 6 96 6V12C91.7541 12 89.4877 9.73171 87.9572 8.19986L87.8787 8.12132C86.4102 6.65284 85.6809 6 84 6C82.3191 6 81.5898 6.65284 80.1213 8.12132L80.0428 8.19986C78.5123 9.73171 76.2459 12 72 12C67.7541 12 65.4877 9.73171 63.9572 8.19986C63.9308 8.17346 63.9046 8.14727 63.8787 8.12132C62.4102 6.65284 61.6809 6 60 6C58.3191 6 57.5898 6.65284 56.1213 8.12132C56.0954 8.14727 56.0692 8.17346 56.0428 8.19986C54.5123 9.73171 52.2459 12 48 12C43.7541 12 41.4877 9.73171 39.9572 8.19986C39.9308 8.17346 39.9046 8.14727 39.8787 8.12132C38.4102 6.65284 37.6809 6 36 6C34.3191 6 33.5898 6.65284 32.1213 8.12132C32.0954 8.14727 32.0692 8.17346 32.0428 8.19986C30.5123 9.73171 28.2459 12 24 12C19.7541 12 17.4877 9.73171 15.9572 8.19986C15.9308 8.17346 15.9046 8.14727 15.8787 8.12132C14.4102 6.65284 13.6809 6 12 6C10.3191 6 9.5898 6.65284 8.12132 8.12132C8.09537 8.14727 8.0692 8.17346 8.04282 8.19986Z'
+ fill='var(--fire-opal)'
+ />
+ </svg>
+ </div>;
}
-
diff --git a/components/tag.tsx b/components/tag.tsx
index 477b8e2..048c405 100644
--- a/components/tag.tsx
+++ b/components/tag.tsx
@@ -3,22 +3,26 @@ import { CSSProperties } from 'react';
export default function Tags(props: {
tags: Array<string>;
}) {
- return <div className="tags">
+ return <div className='tags'>
<span>Tags:</span>
- {props.tags.map(tag => <Tag key={Math.random().toString()} name={tag}/>)}
- </div>
+ {props.tags.map(tag => <Tag key={Math.random().toString()} name={tag} />)}
+ </div>;
}
export function Tag(props: {
name: string;
}) {
- return <a className="tag" href={"/search?q=" + props.name} style={{
- "--tag-hue": props.name
- .split("")
- .map(char => char.charCodeAt(0))
- .reduce((a, b) => a + b)
- % 360
- } as CSSProperties}>
+ return <a
+ className='tag'
+ href={'/search?q=' + props.name}
+ style={{
+ '--tag-hue': props.name
+ .split('')
+ .map(char => char.charCodeAt(0))
+ .reduce((a, b) => a + b)
+ % 360,
+ } as CSSProperties}
+ >
{props.name}
- </a>
+ </a>;
}