From d67f3514eff4f45ad1ca84cde6465e622acd4dcc Mon Sep 17 00:00:00 2001 From: flu0r1ne Date: Thu, 7 Sep 2023 21:28:37 -0500 Subject: Scoped global styling to all markdown Make React compatible with markdown-style HTML by added components with identical styling to markdown. This is done while CSS scoping is maintained. Additional style is loaded through the markdown loader by injecting default-styling tags into the components. This allows default-margin to be added to these elements in addition to the styling found in the React elements. The homepage reflects the domain, as defined by an environmental variable. --- components/Box/index.tsx | 14 +- components/BreadCrumbs/index.tsx | 6 +- components/Code/index.tsx | 10 + components/Link/index.tsx | 23 ++ components/Link/link.module.scss | 11 + components/List/index.tsx | 52 ++++ components/List/list.module.scss | 41 +++ components/Markdown/index.tsx | 16 +- components/Markdown/markdown.module.scss | 111 -------- components/Markdown/markdown.scss | 418 +++++++++++++++++++++++++++++++ components/PathCrumbs/index.tsx | 7 +- components/Typ/index.tsx | 47 ++++ components/Typ/typo.module.scss | 3 + components/Typography/index.tsx | 47 ---- components/Typography/typo.module.scss | 64 ----- components/ViewPort/index.tsx | 33 +-- loaders/marked-renderer.js | 92 +++++++ loaders/marked.js | 4 +- pages/_app.tsx | 3 +- pages/greeting.md | 14 +- pages/index.tsx | 49 +++- pages/logs/index.tsx | 11 +- pages/logs/logs.md | 3 +- pages/wg2nd/index.tsx | 10 +- templates/Default/default.module.scss | 34 +-- templates/Default/index.tsx | 25 +- templates/MarkdownPage/index.tsx | 2 +- utils/Posts.tsx | 5 +- 28 files changed, 858 insertions(+), 297 deletions(-) create mode 100644 components/Code/index.tsx create mode 100644 components/Link/index.tsx create mode 100644 components/Link/link.module.scss create mode 100644 components/List/index.tsx create mode 100644 components/List/list.module.scss delete mode 100644 components/Markdown/markdown.module.scss create mode 100644 components/Markdown/markdown.scss create mode 100644 components/Typ/index.tsx create mode 100644 components/Typ/typo.module.scss delete mode 100644 components/Typography/index.tsx delete mode 100644 components/Typography/typo.module.scss create mode 100644 loaders/marked-renderer.js diff --git a/components/Box/index.tsx b/components/Box/index.tsx index 32866b2..f81fa5b 100644 --- a/components/Box/index.tsx +++ b/components/Box/index.tsx @@ -3,15 +3,23 @@ import { getSystemStyle, SystemProps } from '../utils/systemProps'; interface BoxProps extends SystemProps { style?: React.CSSProperties; children?: React.ReactNode; + el?: keyof React.ReactHTML; }; -const Box: React.FC = ({ style, children, ...props}) => { +const Box: React.FC = ({ el, style, children, ...props}) => { const systemStyle = getSystemStyle(props, style); + let Tag = el; + + if(!el) { + Tag = 'div' as keyof React.ReactHTML; + } + return ( -
+ // @ts-ignore + { children } -
+ ); }; diff --git a/components/BreadCrumbs/index.tsx b/components/BreadCrumbs/index.tsx index 693a9d0..98b20b4 100644 --- a/components/BreadCrumbs/index.tsx +++ b/components/BreadCrumbs/index.tsx @@ -1,5 +1,5 @@ import React, { Children, FC } from "react"; -import Link from "next/link"; +import Link from '../Link'; import styles from './breadcrumbs.module.scss'; import clsx from 'clsx'; @@ -9,8 +9,8 @@ export type BreadCrumbsProps = { children: React.ReactNode; }; -const BreadCrumbs : FC = ({children, className, ...props}) => ( - +const BreadCrumbs : FC = ({children, className, style, ...props}) => ( + {Children.map(children, (child, index) => { return ( <> diff --git a/components/Code/index.tsx b/components/Code/index.tsx new file mode 100644 index 0000000..23e7a8b --- /dev/null +++ b/components/Code/index.tsx @@ -0,0 +1,10 @@ +import React, { FC, CSSProperties } from 'react'; + +interface CodeProps extends React.HTMLProps { + style?: CSSProperties; +} +const Code: FC = ({ children, style }) => { + return {children}; +}; + +export default Code; diff --git a/components/Link/index.tsx b/components/Link/index.tsx new file mode 100644 index 0000000..e6477c2 --- /dev/null +++ b/components/Link/index.tsx @@ -0,0 +1,23 @@ +import React, { ReactNode } from 'react'; +import NextLink from 'next/link'; +import styles from './link.module.scss'; +import clsx from 'clsx'; + +interface LinkProps { + href: string; + children: ReactNode; + className?: string; +} + +const Link: React.FC = ({ href, className, children }) => { + return ( + + {children} + + ); +}; + +export default Link; diff --git a/components/Link/link.module.scss b/components/Link/link.module.scss new file mode 100644 index 0000000..b6ef943 --- /dev/null +++ b/components/Link/link.module.scss @@ -0,0 +1,11 @@ +.link { + text-decoration: none; +} + +.link:hover { + text-decoration: underline; +} + +.link, .link:visited, .link:active, .link:hover { + color: #0716ea; +} diff --git a/components/List/index.tsx b/components/List/index.tsx new file mode 100644 index 0000000..ae5c190 --- /dev/null +++ b/components/List/index.tsx @@ -0,0 +1,52 @@ +import React, { FC } from 'react'; +import { getSystemStyle, SystemProps } from '../utils/systemProps'; +import clsx from 'clsx'; + +interface ListProps extends SystemProps { + style?: React.CSSProperties; + variant : 'ordered' | 'unordered'; + children?: React.ReactNode; + className?: string; +}; + +const List : FC = ({ style, className, variant, children, ...props }) => { + + const systemStyle = getSystemStyle(props, style); + + const Tag = { + 'ordered': 'ol', + 'unordered': 'ul' + }[variant] as keyof React.ReactHTML; + + const styleClass = 'md-' + Tag; + + return ( + + ); +}; + +interface ListItemProps extends SystemProps { + style?: React.CSSProperties; + children?: React.ReactNode; + className?: string; +}; + +const ListItem : FC = ({ style, className, children, ...props }) => { + const systemStyle = getSystemStyle(props, style); + + return ( +
  • {children}
    • + ); +} + +export { + List, + ListItem +}; diff --git a/components/List/list.module.scss b/components/List/list.module.scss new file mode 100644 index 0000000..87ec3a3 --- /dev/null +++ b/components/List/list.module.scss @@ -0,0 +1,41 @@ +.list-li { + font-size: 1rem; + letter-spacing: 0.00938em; + + line-height: 1.4; + margin-left: 1em; + + list-style-image: none; + list-style-position: inside; + list-style-type: none; + + box-sizing: border-box; + + font-size: 1rem; +} + +.list-unordered li:not(:first-child) { + margin-top: 0.15rem; +} + +.list { + .list li:first-child { + margin-top: 0.15rem !important; + } +} + +.list-unordered li { + list-style-type: disc; +} + +.list .list-unordered li { + list-style-type: circle; +} + +.list .list .list-unordered li { + list-style-type: square; +} + +.list-ordered li { + list-style-type: decimal; +} diff --git a/components/Markdown/index.tsx b/components/Markdown/index.tsx index 1a71330..b6def4f 100644 --- a/components/Markdown/index.tsx +++ b/components/Markdown/index.tsx @@ -1,24 +1,24 @@ import React, { FC } from 'react'; -import styles from './markdown.module.scss'; + import clsx from 'clsx'; interface MarkdownProps { md: string; className?: string; - props?: object; } -const Markdown : FC = ({md, className, ...props}) => ( -
    = ({md, className}) => { + const prerendered = ( +
    -); + ); + + return prerendered; +}; export type { MarkdownProps diff --git a/components/Markdown/markdown.module.scss b/components/Markdown/markdown.module.scss deleted file mode 100644 index e1debd1..0000000 --- a/components/Markdown/markdown.module.scss +++ /dev/null @@ -1,111 +0,0 @@ -.markdownContainer { - strong { - font-weight: 600; - } - - h1 { - font-size: 2.8rem; - font-weight: 300; - line-height: 1.167; - letter-spacing: -0.01562em; - margin-top: 1.0rem; - margin-bottom: 1rem; - - padding-bottom: 0.4rem; - border-bottom: 0.12rem solid rgb(53, 53, 53); - } - - h2 { - font-size: 2.3rem; - font-weight: 300; - line-height: 1.2; - letter-spacing: -0.00833em; - - margin-top: 1.6rem; - margin-bottom: 0.8rem; - } - - h3 { - font-size: 1.3rem; - font-weight: 400; - line-height: 1.167; - letter-spacing: 0em; - - margin-top: 1.3rem; - margin-bottom: 0.5rem; - } - - h4 { - font-size: 1.25rem; - } - - h5 { - font-size: 1.15rem; - } - - h6 { - font-size: 1.10rem; - } - - h4, h5, h6 { - margin-top: 0.8rem; - margin-bottom: 0.6rem; - } - - p, li { - font-size: 1rem; - letter-spacing: 0.00938em; - font-weight: 300; - } - - p { - font-size: 1rem; - line-height: 1.5; - margin-bottom: 1em; - } - - code { - font-size: 1rem; - line-height: 1.5; - padding: 0.05rem 0.2rem; - } - - pre { - padding: 0.5rem 1.0rem; - margin: 0.5rem 0; - box-sizing: border-box; - } - pre > code { - padding: 0; - } - - code, pre { - background-color: #f2f4f7; - border-radius: 5px; - } - - pre { - overflow: auto; - box-sizing: border-box; - } - - @media screen and (max-width: 700px) { - pre { - padding-bottom: 0.7rem; - } - } - - li { - line-height: 1.15; - margin-left: 1em; - margin-top: 0.3em; - list-style-image: none; - list-style-position: outside; - list-style-type: circle; - } - - img { - max-width: 95%; - margin: 2em 2.5%; - } -} diff --git a/components/Markdown/markdown.scss b/components/Markdown/markdown.scss new file mode 100644 index 0000000..e529e66 --- /dev/null +++ b/components/Markdown/markdown.scss @@ -0,0 +1,418 @@ +/* AUTOMATIC MARGIN APPLIED WHEN md-dl */ + +.md-dl.md-h1, .md-dl.md-h2, .md-dl.md-h3, .md-dl.md-h4, .md-dl.md-h5, .md-dl.md-h6 { + margin-top: 20px; + margin-bottom: 14px; +} + +.md-dl.md-list, .md-dl.md-pre, .md-dl.md-p, .md-dl.md-table, .md-dl.md-blockquote { + margin-bottom: 14px; +} + +.md-dl.md-list .md-list { + margin-bottom: 0; +} + +.md-dl.md-blockquote > :last-child { + margin-bottom: 0; +} + +.md-dl.md-wrapper > :first-child { + margin-top: 0; +} + +/* LINKS */ + +.md-a { + text-decoration: none; +} + +.md-a:hover { + text-decoration: underline; +} + +.md-a, .md-a:visited, .md-a:active, .md-a:hover { + color: #0716ea; +} + +/* TEXT */ + +.md-blockquote, .md-p, .md-li { + font-size: 1rem; + letter-spacing: 0.00938em; + line-height: 1.5; +} + +.md-code { + font-size: 1rem; + line-height: 1.25; +} + +.md-strong { + font-weight: bold; +} + +.md-em { + font-style: italic; +} + +/* LISTS */ + +.md-li { + line-height: 1.25; + margin-left: 1em; + + list-style-image: none; + list-style-position: inside; + list-style-type: none; +} + +// allow wrapping with inside list-style-position elements +.md-li > p { + display: inline; +} + +.md-dl.md-li > p { + margin-bottom: 0; + + &::after { + content: ""; + display: block; + margin-bottom: 14px; + } +} + +.md-li-checkbox { + list-style-type: none !important; +} + +.md-checkbox { + margin: 0; + margin-right: 0.5em; +} + +// UP TO FOUR LEVELS OF DECORATORS + +.md-ol > li { + list-style-type: decimal; +} + +.md-ul > li { + list-style-type: disc; +} + +.md-list .md-ul > li { + list-style-type: circle; +} + +.md-list .md-list .md-ul > li { + list-style-type: square; +} + +.md-list .md-list .md-list .md-ul > li { + list-style-type: disc; +} + +// ADD SLIGHT MARGIN TO SPACE ELEMENTS EXCEPT THE FIRST + +.md-list > li:not(:first-child) { + margin-top: 0.15rem; +} + +.md-list .md-list > li:first-child { + margin-top: 0.15rem; +} + +/* HEADINGS */ + +.md-h1 { + font-size: 3rem; + font-weight: 300; + line-height: 1.167; + letter-spacing: -0.01562em; + + padding-bottom: 0.4rem; + border-bottom: 0.12rem solid rgb(53, 53, 53); +} + +.md-h2 { + font-size: 2.5rem; + font-weight: 300; + line-height: 1.2; + letter-spacing: -0.00833em; +} + +.md-h3 { + font-size: 1.4rem; + font-weight: 400; + line-height: 1.167; + letter-spacing: 0em; +} + +.md-h4 { + font-size: 1.38rem; +} + +.md-h5 { + font-size: 1.26rem; +} + +.md-h6 { + font-size: 1.2rem; +} + + +/* CODE */ + +.md-codespan { + background-color: #f2f4f7; + border-radius: 5px; + padding: 0.05rem 0.2rem; +} + +/* BLOCKQUOTE */ + +.md-blockquote { + box-sizing: border-box; + + position: relative; + padding-left: 1.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + &::before { + content: ""; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 3px; + background-color: grey; + } +} + +/* CODE */ + +.md-pre { + background-color: #f2f4f7; + border-radius: 5px; + padding: 12px; + overflow: scroll; +} + +/* MD LINE / SEP */ + +.md-hr { + font-size: 300; +} + +/* TABLES */ + +.md-table { + width: 100%; + border-collapse: collapse; + margin: 1rem 0; +} + +.md-thead { + background-color: #f2f4f7; + font-size: 1.10rem; + + .md-th { + padding: 0.5rem 0.75rem; + text-align: left; + border-bottom: 2px solid #545454; + } +} + + +.md-tbody { + .md-tr { + &:nth-child(even) { + background-color: #f8f8f8; + } + + &:nth-child(odd) { + background-color: #ffffff; + } + } + + .md-td { + padding: 0.5rem 0.75rem; + border-bottom: 1px solid #ddd; + } +} + +/* IMAGE */ + +.md-img { + max-width: 95%; + margin: 2em 2.5%; +} + +/* DEL */ + +.md-del { } + +.markdownContainer { + /* Strong */ + + strong { + font-weight: 600; + } + + /* Headings */ + + h1 { + font-size: 2.8rem; + font-weight: 300; + line-height: 1.167; + letter-spacing: -0.01562em; + margin-top: 1.0rem; + margin-bottom: 1rem; + + padding-bottom: 0.4rem; + border-bottom: 0.12rem solid rgb(53, 53, 53); + } + + h2 { + font-size: 2.3rem; + font-weight: 300; + line-height: 1.2; + letter-spacing: -0.00833em; + + margin-top: 1.6rem; + margin-bottom: 0.8rem; + } + + h3 { + font-size: 1.3rem; + font-weight: 400; + line-height: 1.167; + letter-spacing: 0em; + + margin-top: 1.3rem; + margin-bottom: 0.5rem; + } + + h4 { + font-size: 1.25rem; + } + + h5 { + font-size: 1.15rem; + } + + h6 { + font-size: 1.10rem; + } + + h4, h5, h6 { + margin-top: 0.8rem; + margin-bottom: 0.6rem; + } + + p, li { + font-size: 1rem; + letter-spacing: 0.00938em; + } + + p { + font-size: 1rem; + line-height: 1.5; + margin-bottom: 1em; + } + + code { + font-size: 1rem; + line-height: 1.5; + padding: 0.05rem 0.2rem; + } + + pre { + padding: 0.5rem 1.0rem; + margin: 0.5rem 0; + box-sizing: border-box; + } + pre > code { + padding: 0; + } + + code, pre { + background-color: #f2f4f7; + border-radius: 5px; + } + + pre { + overflow: auto; + box-sizing: border-box; + } + + @media screen and (max-width: 700px) { + pre { + padding-bottom: 0.7rem; + } + } + + /* LISTS */ + + // li { + // font-size: 1rem; + // letter-spacing: 0.00938em; + + // line-height: 1.4; + // margin-left: 1em; + + // list-style-image: none; + // list-style-position: inside; + // list-style-type: none; + + // box-sizing: border-box; + + // font-size: 1rem; + // } + + // ul, ol { + // li:not(:first-child) { + // margin-top: 0.15rem; + // } + // } + + // ul ol li, ol li { + // list-style-type: decimal; + // } + + // ul li { + // list-style-type: disc; + // } + + // ul, ol { + // ul li:first-child, ol li:first-child { + // margin-top: 0.15rem !important; + // } + + // ul li { + // list-style-type: circle; + // } + + // ul, ol { + // ul li { + // list-style-type: square; + // } + // } + // } + + // li { + // line-height: 1.15; + // margin-left: 1em; + // margin-bottom: 0.3em; + // list-style-image: none; + // list-style-position: outside; + // list-style-type: circle; + // } + + img { + max-width: 95%; + margin: 2em 2.5%; + } +} diff --git a/components/PathCrumbs/index.tsx b/components/PathCrumbs/index.tsx index 1c87344..41875ec 100644 --- a/components/PathCrumbs/index.tsx +++ b/components/PathCrumbs/index.tsx @@ -34,12 +34,13 @@ const urlPathComponentsToFullPath = (urlPathComponents : string[]): string[] => }; export type PathCrumbsProps = { - path: string + path: string; + style?: React.CSSProperties; }; import { BreadCrumbs , LinkCrumb } from '../../components/BreadCrumbs'; -const PathCrumbs: FC = ({ path }) => { +const PathCrumbs: FC = ({ path, style }) => { const pathComponents = urlPathComponents(path); const fullPaths = urlPathComponentsToFullPath(pathComponents); @@ -51,7 +52,7 @@ const PathCrumbs: FC = ({ path }) => { )); return ( - + {linksComponents} ); diff --git a/components/Typ/index.tsx b/components/Typ/index.tsx new file mode 100644 index 0000000..43d7673 --- /dev/null +++ b/components/Typ/index.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import styles from './typo.module.scss'; +import clsx from 'clsx'; + + +type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body'; +type Align = 'inherit' | 'left' | 'center' | 'right'; + +interface TypProps extends React.HTMLAttributes { + variant?: Variant; + align?: Align; + gutter?: boolean; +} + +const variantTagMap: Record = { + h1: 'h1', + h2: 'h2', + h3: 'h3', + h4: 'h4', + h5: 'h5', + h6: 'h6', + body: 'p' +}; + +const Typ: React.FC = ({ + variant = 'body', + align = 'inherit', + gutter = false, + className, + ...props +}) => { + const Tag = variantTagMap[variant] as keyof React.ReactHTML; + + const typographyClassName = clsx( + `md-${variantTagMap[variant]}`, + { + [`align-${align}`]: align !== 'inherit', + [styles['typo-gutter']]: gutter + }, + className + ); + + return ; +}; + +export default Typ; + diff --git a/components/Typ/typo.module.scss b/components/Typ/typo.module.scss new file mode 100644 index 0000000..48a5b10 --- /dev/null +++ b/components/Typ/typo.module.scss @@ -0,0 +1,3 @@ +.typo-gutter { + margin-bottom: 0.35em; +} diff --git a/components/Typography/index.tsx b/components/Typography/index.tsx deleted file mode 100644 index b9babc0..0000000 --- a/components/Typography/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import styles from './typo.module.scss'; -import clsx from 'clsx'; - - -type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body'; -type Align = 'inherit' | 'left' | 'center' | 'right'; - -interface TypographyProps extends React.HTMLAttributes { - variant?: Variant; - align?: Align; - gutter?: boolean; -} - -const variantTagMap: Record = { - h1: 'h1', - h2: 'h2', - h3: 'h3', - h4: 'h4', - h5: 'h5', - h6: 'h6', - body: 'p' -}; - -const Typography: React.FC = ({ - variant = 'body', - align = 'inherit', - gutter = false, - className, - ...props -}) => { - const Tag = variantTagMap[variant] as keyof React.ReactHTML; - - const typographyClassName = clsx( - styles[`typo-${variant}`], - { - [`align-${align}`]: align !== 'inherit', - [styles['typo-gutter']]: gutter - }, - className - ); - - return ; -}; - -export default Typography; - diff --git a/components/Typography/typo.module.scss b/components/Typography/typo.module.scss deleted file mode 100644 index 934333d..0000000 --- a/components/Typography/typo.module.scss +++ /dev/null @@ -1,64 +0,0 @@ -.typo-h1 { - font-size: 2.8rem; - font-weight: 300; - line-height: 1.167; - letter-spacing: -0.01562em; - // margin-top: 1.0rem; - // margin-bottom: 1rem; - - padding-bottom: 0.4rem; - border-bottom: 0.12rem solid rgb(53, 53, 53); -} - -.typo-h2 { - font-size: 2.3rem; - font-weight: 300; - line-height: 1.2; - letter-spacing: -0.00833em; - - // margin-top: 1.6rem; - // margin-bottom: 0.8rem; -} - -.typo-h3 { - font-size: 1.3rem; - font-weight: 400; - line-height: 1.167; - letter-spacing: 0em; - - // margin-top: 1.3rem; - // margin-bottom: 0.5rem; -} - -.typo-h4 { - font-size: 1.25rem; -} - -.typo-h5 { - font-size: 1.15rem; -} - -.typo-h6 { - font-size: 1.10rem; -} - -.typo-h4, .typo-h5, .typo-h6 { - // margin-top: 0.8rem; - // margin-bottom: 0.6rem; -} - -.typo-p { - font-size: 1rem; - letter-spacing: 0.00938em; - font-weight: 300; -} - -.typo-p { - font-size: 1rem; - line-height: 1.5; - // margin-bottom: 1em; -} - -.typo-gutter { - margin-bottom: 0.35em; -} diff --git a/components/ViewPort/index.tsx b/components/ViewPort/index.tsx index 29191a1..08b4c7e 100644 --- a/components/ViewPort/index.tsx +++ b/components/ViewPort/index.tsx @@ -1,24 +1,29 @@ import React, { FC } from "react" import styles from './index.module.scss'; +import { getSystemStyle, SystemProps } from '../utils/systemProps'; import clsx from 'clsx'; -export type Props = { - size?: "sm" | "md" | "lg"; - className?: string; - children?: React.ReactNode; +interface Props extends SystemProps { + size?: "sm" | "md" | "lg"; + className?: string; + children?: React.ReactNode; + style?: React.CSSProperties; }; -const Viewport : FC = ({children, className, size}) => { - const _size : string = size || "md"; - const sizeClass : string = styles['viewport-' + _size]; +const Viewport : FC = ({children, className, style, size, ...systemProps}) => { + style = getSystemStyle(systemProps, style); - return ( -
    - {children} -
    - ) + const _size : string = size || "md"; + const sizeClass : string = styles['viewport-' + _size]; + + return ( +
    + {children} +
    + ) }; export default Viewport; diff --git a/loaders/marked-renderer.js b/loaders/marked-renderer.js new file mode 100644 index 0000000..0b55304 --- /dev/null +++ b/loaders/marked-renderer.js @@ -0,0 +1,92 @@ +const prefix = "md-"; +const selectall = `${prefix}dl`; + +const renderer = { + // Block-level methods + code(code, infostring, escaped) { + return `
    ${code}
    `; + }, + blockquote(quote) { + return `
    ${quote}
    `; + }, + html(html, block) { + return block ? html : `${html}`; + }, + heading(text, level, raw, slugger) { + return `${text}`; + }, + hr() { + return `
    `; + }, + list(body, ordered, start) { + const tag = ordered ? 'ol' : 'ul'; + return `<${tag} class="${selectall} ${prefix}list ${prefix}${tag}"${ordered && start !== 1 ? ` start="${start}"` : ''}>${body}`; + }, + listitem(text, task, checked) { + let classList = `${prefix}li`; + + if(task) { + classList += ` ${prefix}li-checkbox`; + } else { + classList += ` ${prefix}li-nocheckbox`; + } + + return `
  • ${text}
    • `; + }, + checkbox(checked) { + return ``; + }, + paragraph(text) { + return `

    ${text}

    `; + }, + table(header, body) { + return `${header}${body}
    `; + }, + tablerow(content) { + return `${content}`; + }, + tablecell(content, flags) { + const type = flags.header ? 'th' : 'td'; + return `<${type} class="${selectall} ${prefix}${type}">${content}`; + }, + + // Inline-level methods + strong(text) { + return `${text}`; + }, + em(text) { + return `${text}`; + }, + codespan(code) { + return `${code}`; + }, + br() { + return `
    `; + }, + del(text) { + return `${text}`; + }, + link(href, title, text) { + return `${text}`; + }, + image(href, title, text) { + return `${text}`; + }, + text(text) { + return text; // text-level elements typically don't have classes + }, +}; + +const hooks = { + postprocess(html) { + return `
    ${html}
    `; + }, + preprocess(md) { + return md; + } +}; + +module.exports = { + renderer, + hooks +}; diff --git a/loaders/marked.js b/loaders/marked.js index f3c8fcb..a1ed8c3 100644 --- a/loaders/marked.js +++ b/loaders/marked.js @@ -1,15 +1,17 @@ const { Marked } = require('marked'); const { markedHighlight } = require('marked-highlight'); const hljs = require('highlight.js'); +const { renderer, hooks } = require('./marked-renderer.js'); module.exports = function loader(source) { const marker = new Marked( + { renderer, hooks }, markedHighlight({ highlight(code, lang) { const language = hljs.getLanguage(lang) ? lang : 'plaintext'; return hljs.highlight(code, { language }).value; } - }) + }), ); return marker.parse(source); diff --git a/pages/_app.tsx b/pages/_app.tsx index 7b7f22b..cfb045e 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,6 +5,7 @@ import '../styles/defaults.scss'; import type { AppProps } from 'next/app'; import Head from 'next/head'; import 'highlight.js/styles/github.css'; +import '../components/Markdown/markdown.scss'; function MyApp({ Component, pageProps }: AppProps) { return ( @@ -21,4 +22,4 @@ function MyApp({ Component, pageProps }: AppProps) { ); } -export default MyApp; \ No newline at end of file +export default MyApp; diff --git a/pages/greeting.md b/pages/greeting.md index 45514a0..eb7a399 100644 --- a/pages/greeting.md +++ b/pages/greeting.md @@ -1,13 +1,21 @@ ## Hello, -You’ve happened upon my homepage. I’m a student, developer, and engi-nerd pursuing a degree in computer engineering at Texas A&M University. +You've happened upon my homepage. I'm a software developer, engi-nerd, and a recent graduate of computer engineering at Texas A&M University. +I've worked on a wide range of computational projects across a number of subject areas: robotics, bioinformatics, computer security, networking, +deep learning, and computer systems. Engineering projects define my life, and fill much of my waking attention. I've founded and led two robotics teams, +built a SLAM system for autonomous driving, worked as an undergraduate teaching assistant for a datastructures and algorithms course, built genome analysis +toolkits, and have written code in high-performance routers. Much of my code lives in production systems. I'm also passionate about open-source and often flit +around the internet contributing to open-source projects. Recently, I found and reported a buffer overrun in a Linux kernel driver and added zsh autocomplete +support to Python's `argcomplete` module. - [The Logs](/logs) -- [Public Git Projects](https://www.git.flu0r1ne.net) +- [Public Git Projects](https://www.git.al.exander.io) - My PGP keys + [Ascii Armored](/flu0r1ne.asc) + [Binary](/flu0r1ne.pub) +I've a privacy-enthusiast and go by my first name, Alex, or my legacy handle `flu0r1ne`. + Best, -\- Alex < flur01ne [at] flu0r1ne.net > +\- Alex < alex [at] al.exander.io > diff --git a/pages/index.tsx b/pages/index.tsx index 8201dbf..9390157 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,13 +1,54 @@ import MarkdownPage from '../templates/MarkdownPage'; + +import Typ from '../components/Typ'; +import ViewPort from '../components/ViewPort'; +import Link from '../components/Link'; +import Code from '../components/Code'; + // @ts-ignore import md from './greeting.md'; +import { List, ListItem } from '../components/List'; +import { DISPLAY_DOMAIN } from '../utils/env'; + + export default function Home() { + + const gitLink = 'https://git.' + DISPLAY_DOMAIN; + + let email : string; + + switch(DISPLAY_DOMAIN) { + case "flu0r1ne.net": + email = "flu0r1ne [at] flu0r1ne.net"; + break; + case "al.exander.io": + email = "alex [at] al.exander.io"; + break; + default: + throw Error("Display domain not recognized"); + } + return ( <> - + + Hello, + Welcome to my homepage. I'm a software developer, engi-nerd, and a recent graduate in Computer Engineering at Texas A&M University. I've worked on a wide range of computational projects across a number of subject areas: robotics, bioinformatics, computer security, networking, deep learning, and computer systems. Engineering projects define my life, and fill much of my waking attention. I've founded and led two robotics teams, built a SLAM system for autonomous driving, worked as an undergraduate teaching assistant for a Data Structures and Algorithms course, created genome analysis toolkits, and have contributed code to high-performance routers. I'm also passionate about open-source and often flit around the internet contributing to open-source projects. Recently, I found and reported a buffer overrun in an in-tree Linux kernel driver and added zsh auto complete support to the popular argcomplete module for Python. + + The Logs + Public Git Projects + + My PGP keys + + Ascii Armored + Binary + + + + I'm a privacy enthusiast and go by my first name, Alex, or my legacy online handle, flu0r1ne. + Best, + - Alex {"< " + email + " >"} + - ) + ); } diff --git a/pages/logs/index.tsx b/pages/logs/index.tsx index 358dff7..af227e9 100644 --- a/pages/logs/index.tsx +++ b/pages/logs/index.tsx @@ -5,6 +5,10 @@ import styles from './index.module.scss'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import React, { FC } from 'react'; import { getPosts, Post } from '../../utils/Posts'; + +import Link from '../../components/Link'; +import { List, ListItem } from '../../components/List'; + // @ts-ignore import md from './logs.md'; @@ -13,7 +17,6 @@ interface Props { }; const Logs : FC = ({ posts }) => { - return( = ({ posts }) => { > <> -
      + { posts.map(({ directory, meta }) => ( -
    • {meta.name}
      • + {meta.name} )) } -
    +     ); diff --git a/pages/logs/logs.md b/pages/logs/logs.md index c177646..c8bf543 100644 --- a/pages/logs/logs.md +++ b/pages/logs/logs.md @@ -1,4 +1,3 @@ ## The Logs -Eclectic thoughts, miscellany, and discursive drivel - +Eclectic thoughts and miscellany diff --git a/pages/wg2nd/index.tsx b/pages/wg2nd/index.tsx index 3f38a12..a189f6d 100644 --- a/pages/wg2nd/index.tsx +++ b/pages/wg2nd/index.tsx @@ -7,7 +7,7 @@ import TextArea from '../../components/TextArea'; import Input from '../../components/Input'; import Button from '../../components/Button'; import Markdown from '../../components/Markdown'; -import Typography from '../../components/Typography'; +import Typ from '../../components/Typ'; import PathCrumbs from "../../components/PathCrumbs"; @@ -142,10 +142,10 @@ const Wg2nd = () => { {/* Input Panel */} - WireGuard Configuration + WireGuard Configuration {