From 822d1ee1be99b7d96740585ddd1174b94916335d Mon Sep 17 00:00:00 2001 From: lonkaars Date: Mon, 12 Apr 2021 10:25:43 +0200 Subject: dprint formatter :tada: --- pages/_app.tsx | 13 ++--- pages/index.tsx | 72 +++++++++++------------ pages/post/[id].tsx | 123 ++++++++++++++++++++------------------- pages/search.tsx | 165 +++++++++++++++++++++++++++------------------------- 4 files changed, 190 insertions(+), 183 deletions(-) (limited to 'pages') diff --git a/pages/_app.tsx b/pages/_app.tsx index 62c1c9b..662f841 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,20 +1,19 @@ import Head from 'next/head'; +import '../styles/button.css'; import '../styles/colors.css'; -import '../styles/layout.css'; import '../styles/globals.css'; -import '../styles/navbar.css'; -import '../styles/button.css'; import '../styles/image.css'; -import '../styles/tags.css'; +import '../styles/layout.css'; +import '../styles/navbar.css'; import '../styles/search.css'; +import '../styles/tags.css'; export default function Blog({ Component, pageProps }) { return
- + -
+ ; } - diff --git a/pages/index.tsx b/pages/index.tsx index 96b8684..65b53cb 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,52 +1,52 @@ -import Navbar, { NavbarItem } from '../components/navbar'; import Chapters, { chapter } from '../components/chapters'; +import Navbar, { NavbarItem } from '../components/navbar'; import Seperator from '../components/seperator'; -import { getStaticProps as getBlogPage, ArticleMeta, RenderedArticle } from './post/[id]'; +import { ArticleMeta, getStaticProps as getBlogPage, RenderedArticle } from './post/[id]'; -var posts = ["index", "index", "index"]; +var posts = ['index', 'index', 'index']; export default function Home(props: { posts: Array<{ props: { - content: string, - meta: ArticleMeta - } - }> + content: string; + meta: ArticleMeta; + }; + }>; }) { return
-
-
+
+

{props.posts[0].props.meta.title}

-
-
- - - { - return { - children: post.props.meta.chapters, - name: post.props.meta.title, - sectionLink: "/post/" + post.props.meta.id - } as chapter - }) - ]}/> +
+
+ + + { + return { + children: post.props.meta.chapters, + name: post.props.meta.title, + sectionLink: '/post/' + post.props.meta.id, + } as chapter; + }), + ]} + />
-
- { - props.posts.map((post, index) => { - return <> - { index != 0 &&

{post.props.meta.title}

} - - { index + 1 != props.posts.length && } - - }) - } +
+ {props.posts.map((post, index) => { + return <> + {index != 0 &&

{post.props.meta.title}

} + + {index + 1 != props.posts.length && } + ; + })}
-
+
; } export function getStaticProps() { @@ -54,9 +54,9 @@ export function getStaticProps() { posts.forEach(id => { postsContent.push(getBlogPage({ params: { id } })); - }) + }); var staticProps = { props: { posts: postsContent } }; - - return staticProps + + return staticProps; } diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx index b68b790..c0d4e9d 100644 --- a/pages/post/[id].tsx +++ b/pages/post/[id].tsx @@ -1,14 +1,14 @@ -import { ReactNode } from 'react'; import ReactMarkdownWithHTML from 'react-markdown/with-html'; import { readdirSync, readFileSync } from 'fs'; import { join } from 'path'; +import { ReactNode } from 'react'; import gfm from 'remark-gfm'; -import Seperator from '../../components/seperator'; import Navbar from '../../components/navbar'; +import Seperator from '../../components/seperator'; // import Button from '../../components/button'; -import Image from '../../components/image'; import Chapters, { chapter } from '../../components/chapters'; +import Image from '../../components/image'; import Tags from '../../components/tag'; export interface ArticleMeta { @@ -21,70 +21,72 @@ export interface ArticleMeta { id?: string; } -export function RenderedArticle(props: { content: string }) { +export function RenderedArticle(props: { content: string; }) { return ; + plugins={[gfm]} + allowDangerousHtml + children={props.content} + renderers={{ + image: Image, + thematicBreak: Seperator, + heading: Heading, + }} + />; } var headingLevel = (input: string) => input?.match(/^[#]+/)[0]?.length || 0; -var sectionID = (input: string) => input - .replace(/[()\[\]{}!@#$%^&*<>?,./\;':"\\|=+]/g, "") - .replace(/\s/g, "-") - .toLowerCase(); +var sectionID = (input: string) => + input + .replace(/[()\[\]{}!@#$%^&*<>?,./\;':"\\|=+]/g, '') + .replace(/\s/g, '-') + .toLowerCase(); function Heading(props: { children?: ReactNode; level?: number; }) { - var HeadingTag = "h" + props.level as keyof JSX.IntrinsicElements; - return + var HeadingTag = 'h' + props.level as keyof JSX.IntrinsicElements; + return ; } export default function Post(props: { - content: string, - meta: ArticleMeta + content: string; + meta: ArticleMeta; }) { return
-
-
+
+

{props.meta.title}

-

{props.meta.subtitle}

- { props.meta.tags && } +

{props.meta.subtitle}

+ {props.meta.tags && }
-
-
- - +
+
+ +
-
- +
+
-
+
; } var parseTag = { - "title": (val: string) => val, - "subtitle": (val: string) => val, - "author": (val: string) => val, - "tags": (val: string) => val.split(",").map(i => i.trim()), - "date": (val: string) => new Date(val).toDateString(), -} + 'title': (val: string) => val, + 'subtitle': (val: string) => val, + 'author': (val: string) => val, + 'tags': (val: string) => val.split(',').map(i => i.trim()), + 'date': (val: string) => new Date(val).toDateString(), +}; function parseMeta(file: Array): ArticleMeta { var meta: ArticleMeta = {}; file.forEach(line => { - if (!line.startsWith("[meta]: ")) return; + if (!line.startsWith('[meta]: ')) return; var tags = line.match(/\[meta\]:\s+\<(.+?)\>\s+\((.+?)\)/); if (!tags || !tags[1] || !tags[2]) return; if (!parseTag.hasOwnProperty(tags[1])) return; @@ -98,7 +100,7 @@ function parseToCRecursive(headings: Array): Array { interface WIPchapter extends chapter { unparsedChildren?: Array; } - var children: Array = [] + var children: Array = []; var lowestLevel = headingLevel(headings[0]); var currentChildIndex = -1; @@ -108,44 +110,44 @@ function parseToCRecursive(headings: Array): Array { var chapterName = headings[i].match(/^[#]+\s+(.+)/)[1]; children.push({ name: chapterName, - sectionLink: "#" + sectionID(chapterName), + sectionLink: '#' + sectionID(chapterName), unparsedChildren: [], }); currentChildIndex += 1; } else { - children[currentChildIndex].unparsedChildren.push(headings[i]) + children[currentChildIndex].unparsedChildren.push(headings[i]); } } children.map(child => { - child.children = parseToCRecursive(child.unparsedChildren) + child.children = parseToCRecursive(child.unparsedChildren); delete child.unparsedChildren; - return child - }) + return child; + }); return children as Array; } function parseToC(file: Array): Array { - var fileAsStr = file.join("\n"); - fileAsStr = fileAsStr.replace(/```.*?```/gs, ""); // filter out code blocks from table of contents - var fileAsArr = fileAsStr.split("\n"); - var chapterStrings = fileAsArr.filter(line => line.startsWith("#")); + var fileAsStr = file.join('\n'); + fileAsStr = fileAsStr.replace(/```.*?```/gs, ''); // filter out code blocks from table of contents + var fileAsArr = fileAsStr.split('\n'); + var chapterStrings = fileAsArr.filter(line => line.startsWith('#')); return parseToCRecursive(chapterStrings); } function preprocessor(fileContent: string) { - var fileAsArr = fileContent.split("\n"); + var fileAsArr = fileContent.split('\n'); var meta = parseMeta(fileAsArr); meta.chapters = parseToC(fileAsArr); - var result = fileAsArr.join("\n").trim() - return { meta, result } + var result = fileAsArr.join('\n').trim(); + return { meta, result }; } -export function getStaticProps(props: {params: { id: string }}) { - var filename = join("posts/", props.params.id + ".md") - var filecontent = readFileSync(filename).toString().trim() +export function getStaticProps(props: { params: { id: string; }; }) { + var filename = join('posts/', props.params.id + '.md'); + var filecontent = readFileSync(filename).toString().trim(); var parsed = preprocessor(filecontent); parsed.meta.id = props.params.id; @@ -155,21 +157,20 @@ export function getStaticProps(props: {params: { id: string }}) { content: parsed.result, meta: parsed.meta, }, - } + }; } export function getStaticPaths() { - var files = readdirSync("posts").filter(f => f.endsWith(".md")); + var files = readdirSync('posts').filter(f => f.endsWith('.md')); return { paths: files.map((f) => { return { params: { - id: f.substr(0, f.length - 3) - } - } + id: f.substr(0, f.length - 3), + }, + }; }), fallback: false, - } + }; } - diff --git a/pages/search.tsx b/pages/search.tsx index c9b27a5..8eff8d8 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -1,65 +1,69 @@ -import { useState, useEffect } from 'react'; import Fuse from 'fuse.js'; +import { useEffect, useState } from 'react'; import Navbar from '../components/navbar'; -import Tags from '../components/tag' +import Tags from '../components/tag'; import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined'; -function SearchBar(props: { searchFunction: () => void }) { - return
+function SearchBar(props: { searchFunction: () => void; }) { + return
props.searchFunction()} - spellCheck="false" - autoComplete="off"/> - -
+ className='input' + id='searchInput' + placeholder='Search for posts...' + onChange={() => props.searchFunction()} + spellCheck='false' + autoComplete='off' + /> + +
; } interface Post { - title: string - subtitle: string - author: string - date: string - urlname: string - tags: Array + title: string; + subtitle: string; + author: string; + date: string; + urlname: string; + tags: Array; } interface PostsInfo { - valid_tags: Array - posts: Array + valid_tags: Array; + posts: Array; } -function Post(props: { post: Post }) { - return - {props.post.title} - {props.post.subtitle &&

{props.post.subtitle}

} -

Written by {props.post.author} on {new Date(props.post.date).toLocaleString("en-us", { - month: "long", day: "numeric" - })}

- +function Post(props: { post: Post; }) { + return + {props.post.title} + {props.post.subtitle &&

{props.post.subtitle}

} +

+ Written by {props.post.author} on {new Date(props.post.date).toLocaleString('en-us', { + month: 'long', + day: 'numeric', + })} +

+ ; } -function Posts(props: { posts: Array }) { - return
- { - props.posts.map(post => ) - } +function Posts(props: { posts: Array; }) { + return
+ {props.posts.map(post => )}
; } function searchFilter(query: string, tags: Array) { var output = { - query: "", - tags: [] - } + query: '', + tags: [], + }; // remove string literals from tag matching - var queryWithoutLiterals = query.replace(/\".+?\"/g, ""); + var queryWithoutLiterals = query.replace(/\".+?\"/g, ''); // find tags and remove them from the query tags.forEach(tag => { @@ -67,55 +71,56 @@ function searchFilter(query: string, tags: Array) { if (index == -1) return; // remove tag from query - queryWithoutLiterals = - queryWithoutLiterals.substr(0, index) + - queryWithoutLiterals.substr(index + tag.length); + queryWithoutLiterals = queryWithoutLiterals.substr(0, index) + + queryWithoutLiterals.substr(index + tag.length); output.tags.push(tag); }); // add back in the string literals (janky just gets pasted on end) - output.query = - queryWithoutLiterals + " " + - (query.match(/\".+?\"/g) + output.query = queryWithoutLiterals + ' ' + + (query.match(/\".+?\"/g) ?.map(r => r.substr(1, r.length - 2)) - .join(" ") || ""); + .join(' ') || ''); return output; } export default function SearchPage() { var [posts, setPosts] = useState({ posts: [], valid_tags: [] }); - var [query, setQuery] = useState("-"); + var [query, setQuery] = useState('-'); var [visiblePosts, setVisiblePosts] = useState>([]); var fuse = new Fuse(posts.posts, { keys: [ - "title", - "subtitle", - "author", - "date", - "urlname", - "tags" + 'title', + 'subtitle', + 'author', + 'date', + 'urlname', + 'tags', ], - isCaseSensitive: false - }) + isCaseSensitive: false, + }); - useEffect(() => {(async () => { - var query = new URLSearchParams(window.location.search).get("q") || ""; - if(query) - (document.getElementById("searchInput") as HTMLInputElement).value = query; + useEffect(() => { + (async () => { + var query = new URLSearchParams(window.location.search).get('q') || ''; + if (query) { + (document.getElementById('searchInput') as HTMLInputElement).value = query; + } - var posts = await fetch("/posts.json"); - var postsJson: PostsInfo = await posts.json(); - postsJson.posts = postsJson.posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) - setPosts(postsJson); - setQuery(query); - })()}, []); + var posts = await fetch('/posts.json'); + var postsJson: PostsInfo = await posts.json(); + postsJson.posts = postsJson.posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); + setPosts(postsJson); + setQuery(query); + })(); + }, []); useEffect(() => { var search = searchFilter(query, posts.valid_tags); - if(search.query.length == 0) { + if (search.query.length == 0) { var results = posts.posts; } else { var fuseSearch = fuse.search(search.query); @@ -123,32 +128,34 @@ export default function SearchPage() { } results = results.filter(result => { - for(var i in search.tags) { - if (!result.tags.includes(search.tags[i])) + for (var i in search.tags) { + if (!result.tags.includes(search.tags[i])) { return false; + } } return true; }); - setVisiblePosts(results) + setVisiblePosts(results); }, [query]); return
-
-
+
+

Search for posts

-
-
- +
+
+
-
- { - setTimeout(() => setQuery((document.getElementById("searchInput") as HTMLInputElement).value)); - }}/> - +
+ { + setTimeout(() => setQuery((document.getElementById('searchInput') as HTMLInputElement).value)); + }} + /> +
-
+
; } - -- cgit v1.2.3