diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/button.tsx | 9 | ||||
| -rw-r--r-- | components/card.tsx | 14 | ||||
| -rw-r--r-- | components/chapters.tsx | 68 | ||||
| -rw-r--r-- | components/image.tsx | 11 | ||||
| -rw-r--r-- | components/navbar.tsx | 70 | ||||
| -rw-r--r-- | components/seperator.tsx | 12 | ||||
| -rw-r--r-- | components/tag.tsx | 28 |
7 files changed, 0 insertions, 212 deletions
diff --git a/components/button.tsx b/components/button.tsx deleted file mode 100644 index 23201aa..0000000 --- a/components/button.tsx +++ /dev/null @@ -1,9 +0,0 @@ -export default function Button(props: { - text: string; - 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>; -} diff --git a/components/card.tsx b/components/card.tsx deleted file mode 100644 index 7a6a472..0000000 --- a/components/card.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Tags from './tag'; - -import { ArticleMeta } from '../pages/post/[id]'; - -export default function PostCard(props: { - post: ArticleMeta; -}) { - return <a className='postCard' href={'/post/' + props.post.id}> - {props.post.cover && <img src={props.post.cover} className='cover' />} - <h2 className='title'>{props.post.title}</h2> - <strong className='subtitle'>{props.post.subtitle}</strong> - {props.post.tags?.length != 0 && <Tags tags={props.post.tags} />} - </a>; -} diff --git a/components/chapters.tsx b/components/chapters.tsx deleted file mode 100644 index 62d8285..0000000 --- a/components/chapters.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { CSSProperties, ReactNode, useState } from 'react'; - -import { NavbarItem } from '../components/navbar'; - -import KeyboardArrowDownRoundedIcon from '@material-ui/icons/KeyboardArrowDownRounded'; -import RemoveRoundedIcon from '@material-ui/icons/RemoveRounded'; - -export interface chapter { - name: string; - sectionLink?: string; - children?: Array<chapter>; -} - -function NavbarChapter(props: { - level: number; - chapter: chapter; - children?: ReactNode; -}) { - var [collapsed, setCollapsed] = useState(true); - - 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'); - - 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} - > - {props.children} - </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>; - } -} - -export default function Chapters(props: { - chapters: Array<chapter>; -}) { - return new Chapter(props.chapters, 0).render(); -} diff --git a/components/image.tsx b/components/image.tsx deleted file mode 100644 index 5a8b2cf..0000000 --- a/components/image.tsx +++ /dev/null @@ -1,11 +0,0 @@ -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>; -} diff --git a/components/navbar.tsx b/components/navbar.tsx deleted file mode 100644 index acbec40..0000000 --- a/components/navbar.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { CSSProperties, ReactNode } from 'react'; - -import HomeRoundedIcon from '@material-ui/icons/HomeRounded'; -import MenuIcon from '@material-ui/icons/Menu'; -import SearchRoundedIcon from '@material-ui/icons/SearchRounded'; - -export function NavbarItem(props: { - icon?: ReactNode; - title: string; - href?: string; - active?: boolean; - children?: ReactNode; - classList?: Array<string>; - style?: CSSProperties; - outerStyle?: CSSProperties; - onIconClick?: () => void; - 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> - </div> - {props.children} - </a>; -} - -export default function Navbar(props: { - page?: string; -}) { - return <div className='globalLinks' style={{ marginBottom: 24 }}> - <NavbarItem - 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>; -} - -export function MobileNavbar() { - return <div className='mobileNav'> - <a className='home button small' href='/'> - <HomeRoundedIcon /> - </a> - <a className='search button small' href='/search'> - <SearchRoundedIcon /> - </a> - <div - className='mainButton button' - onClick={() => { - document.getElementsByClassName('mobileNav')[0].classList.toggle('open'); - document.getElementsByClassName('navAreaWrapper')[0].classList.toggle('navVisible'); - }} - > - <MenuIcon style={{ 'fill': 'var(--oxford-blue)' }} /> - </div> - </div>; -} diff --git a/components/seperator.tsx b/components/seperator.tsx deleted file mode 100644 index f1843a7..0000000 --- a/components/seperator.tsx +++ /dev/null @@ -1,12 +0,0 @@ -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>; -} diff --git a/components/tag.tsx b/components/tag.tsx deleted file mode 100644 index 048c405..0000000 --- a/components/tag.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { CSSProperties } from 'react'; - -export default function Tags(props: { - tags: Array<string>; -}) { - return <div className='tags'> - <span>Tags:</span> - {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} - > - {props.name} - </a>; -} |