init
This commit is contained in:
sup39
commit
2c1f2adcf8
28 changed files with 4155 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules/
|
||||||
|
.next/
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
5
README.md
Normal file
5
README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# supMDX
|
||||||
|
A template to make blog-like site with MDX
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
- `supMDX.yml`
|
||||||
10
components/Footer.tsx
Normal file
10
components/Footer.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import config from '#config';
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
const {startYear: year0, siteAuthor} = config;
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
|
||||||
|
return <footer>{siteAuthor &&
|
||||||
|
<div>Copyright © {year>year0 ? `${year0}-${year}` : year} {siteAuthor} All rights reserved.</div>
|
||||||
|
}</footer>;
|
||||||
|
}
|
||||||
35
components/MDXRoot.tsx
Normal file
35
components/MDXRoot.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import Head from 'next/head';
|
||||||
|
import Nav from './Nav';
|
||||||
|
import MetaInfo from './MetaInfo';
|
||||||
|
import type {HeadingInfo} from '@sup39/rehype-mdx-export-headings';
|
||||||
|
|
||||||
|
export type MDXProps = {
|
||||||
|
children: JSX.Element
|
||||||
|
data: {
|
||||||
|
pathname: string,
|
||||||
|
},
|
||||||
|
meta: Partial<{
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
h1: string
|
||||||
|
[key: string]: any
|
||||||
|
}>
|
||||||
|
headings: HeadingInfo[]
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function MDXRoot({children, data: {pathname}, meta={}, headings}: MDXProps) {
|
||||||
|
const {title, description} = meta;
|
||||||
|
const h1 = meta.h1 ?? title;
|
||||||
|
return <>
|
||||||
|
<Head>
|
||||||
|
<title>{title}</title>
|
||||||
|
{description && <meta name="description" content={description} />}
|
||||||
|
</Head>
|
||||||
|
<Nav pathname={pathname} headings={headings} />
|
||||||
|
<main>
|
||||||
|
{h1 ? <h1>{h1}</h1> : <></>}
|
||||||
|
<MetaInfo data={meta} />
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</>;
|
||||||
|
}
|
||||||
12
components/MetaInfo.tsx
Normal file
12
components/MetaInfo.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import config from '#config';
|
||||||
|
|
||||||
|
export default function MetaInfo({data}: {data: {[_: string]: any}}) {
|
||||||
|
const {metaFields: fields = []} = config;
|
||||||
|
return <div>{fields.map(({label, prop}) => {
|
||||||
|
const val = data[prop];
|
||||||
|
return val == null ? null : <div key={prop}>
|
||||||
|
<span>{label}</span>
|
||||||
|
<span>{val}</span>
|
||||||
|
</div>;
|
||||||
|
})}</div>;
|
||||||
|
}
|
||||||
53
components/Nav.tsx
Normal file
53
components/Nav.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import {useState} from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import NavHeader from './NavHeader';
|
||||||
|
import type {HeadingInfo} from '@sup39/rehype-mdx-export-headings';
|
||||||
|
import config from '#config';
|
||||||
|
|
||||||
|
export type NavEntryInfo = {
|
||||||
|
name: string
|
||||||
|
link: string
|
||||||
|
children?: NavEntryInfo[]|null
|
||||||
|
};
|
||||||
|
|
||||||
|
export function NavEntry<Body, >({
|
||||||
|
entry: {name, link, children}, dir, here, children: childrenJSX,
|
||||||
|
}: {entry: NavEntryInfo, dir: string, here: string, children?: Body}) {
|
||||||
|
const [toggle, setToggle] = useState(false);
|
||||||
|
const href = dir+link;
|
||||||
|
const isHere = href.replace(/\/$/, '')===here; // remove trailing slash
|
||||||
|
const entryCls = 'nav-entry'+(isHere ? ' nav-here' : '');
|
||||||
|
return children?.length ? <div className={'nav-dir'+(toggle ? ' nav-fold-open' : '')}><>
|
||||||
|
<div className={entryCls}>
|
||||||
|
<Link href={href}>{name}</Link>
|
||||||
|
<svg viewBox="0 0 8 8" onClick={()=>setToggle(e=>!e)}><polyline points="6 3 4 5 2 3"></polyline></svg>
|
||||||
|
</div>
|
||||||
|
{isHere ? childrenJSX : <></>}
|
||||||
|
<div className='nav-dir-child'>{
|
||||||
|
children.map(entry => <NavEntry key={entry.link} entry={entry} dir={href} here={here}>{childrenJSX}</NavEntry>)
|
||||||
|
}</div>
|
||||||
|
</></div> : <div className={entryCls}>
|
||||||
|
<Link href={href}>{name}</Link>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Nav({children, headings, pathname}: {
|
||||||
|
children?: JSX.Element
|
||||||
|
headings: HeadingInfo[]
|
||||||
|
pathname: string
|
||||||
|
}) {
|
||||||
|
const [navFold, setNavFold] = useState(false);
|
||||||
|
|
||||||
|
const headingsJSX = <ul className=''>{headings.map(({label, id}) => <li key={id}>
|
||||||
|
<a href={'#'+id}>{label}</a>
|
||||||
|
</li>)}</ul>;
|
||||||
|
|
||||||
|
return <nav className={navFold ? 'open' : ''}>
|
||||||
|
<NavHeader onToggleFold={()=>setNavFold(e=>!e)} />
|
||||||
|
{children}
|
||||||
|
<div className='nav-root'>
|
||||||
|
{config.nav.map(entry => <NavEntry key={entry.link} entry={entry} dir={'/'} here={pathname} />)}
|
||||||
|
{headingsJSX}
|
||||||
|
</div>
|
||||||
|
</nav>;
|
||||||
|
}
|
||||||
10
components/NavHeader.tsx
Normal file
10
components/NavHeader.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
export default function NavHeader({onToggleFold}: {onToggleFold?: ()=>void}) {
|
||||||
|
return <header>
|
||||||
|
<Link href="/" id="icon-link">
|
||||||
|
<div style={{fontSize: '1.5em'}}>supMDX</div>
|
||||||
|
</Link>
|
||||||
|
<div className="menu-toggle" onClick={onToggleFold} />
|
||||||
|
</header>;
|
||||||
|
}
|
||||||
12
components/mdx.tsx
Normal file
12
components/mdx.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
/** <S $="span" _=".a.b.c" className="extra class-name">...</S> */
|
||||||
|
export function S<E extends React.ElementType='span'>({
|
||||||
|
$: TagName = 'span',
|
||||||
|
_: modifier = '',
|
||||||
|
className, children, ...props
|
||||||
|
}: {
|
||||||
|
$?: string,
|
||||||
|
_?: string,
|
||||||
|
} & React.ComponentProps<E>) {
|
||||||
|
const cls = [className, ...(modifier.match(/\.(\w+)/g) ?? [])].map(s => s.slice(1)).join(' ');
|
||||||
|
return <TagName className={cls} {...props}>{children}</TagName>;
|
||||||
|
}
|
||||||
5
next-env.d.ts
vendored
Normal file
5
next-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
/// <reference types="next" />
|
||||||
|
/// <reference types="next/image-types/global" />
|
||||||
|
|
||||||
|
// NOTE: This file should not be edited
|
||||||
|
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||||
30
next.config.mjs
Normal file
30
next.config.mjs
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import mdx from '@next/mdx';
|
||||||
|
import remarkFrontmatter from 'remark-frontmatter';
|
||||||
|
import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
|
||||||
|
import ExportHeadings from '@sup39/rehype-mdx-export-headings';
|
||||||
|
import ComponentWrapper from '@sup39/rehype-mdx-component-wrapper';
|
||||||
|
|
||||||
|
const withMDX = mdx({
|
||||||
|
extension: /\.mdx?$/,
|
||||||
|
options: {
|
||||||
|
remarkPlugins: [
|
||||||
|
remarkFrontmatter,
|
||||||
|
() => remarkMdxFrontmatter({name: 'meta'}),
|
||||||
|
],
|
||||||
|
rehypePlugins: [
|
||||||
|
() => ExportHeadings({tags: ['h2'], name: 'headings'}),
|
||||||
|
() => ComponentWrapper({props: ['headings', 'meta']}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
export default withMDX({
|
||||||
|
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
|
||||||
|
trailingSlash: true,
|
||||||
|
webpack(config) {
|
||||||
|
config.module.rules.push({
|
||||||
|
test: /\.ya?ml$/,
|
||||||
|
use: 'yaml-loader',
|
||||||
|
});
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
});
|
||||||
67
package.json
Normal file
67
package.json
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
{
|
||||||
|
"name": "supMDX",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "eslint --ext .js,.jsx,.ts,.tsx,.md,.mdx ."
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"next/core-web-vitals",
|
||||||
|
"@sup39/typescript"
|
||||||
|
],
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": [
|
||||||
|
"*.ts",
|
||||||
|
"*.tsx"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"no-undef": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": [
|
||||||
|
"*.mdx"
|
||||||
|
],
|
||||||
|
"extends": [
|
||||||
|
"plugin:mdx/recommended"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"no-trailing-spaces": "off",
|
||||||
|
"indent": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"eslintIgnore": [
|
||||||
|
"node_modules"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"@mdx-js/loader": "^2.1.5",
|
||||||
|
"@mdx-js/react": "^2.1.5",
|
||||||
|
"@next/mdx": "^13.0.2",
|
||||||
|
"@sup39/rehype-mdx-component-wrapper": "^0.1.0",
|
||||||
|
"@sup39/rehype-mdx-export-headings": "^0.1.1",
|
||||||
|
"next": "^13.0.2",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"remark-frontmatter": "^4.0.1",
|
||||||
|
"remark-mdx-frontmatter": "^2.1.1",
|
||||||
|
"sass": "^1.56.0",
|
||||||
|
"yaml-loader": "^0.8.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@sup39/eslint-config-typescript": "^0.1.2",
|
||||||
|
"@types/node": "18.11.9",
|
||||||
|
"@types/react": "18.0.24",
|
||||||
|
"eslint": "^8.26.0",
|
||||||
|
"eslint-config-next": "^13.0.2",
|
||||||
|
"eslint-plugin-mdx": "^2.0.5",
|
||||||
|
"typescript": "4.8.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
20
pages/_app.tsx
Normal file
20
pages/_app.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import React from 'react';
|
||||||
|
import type {AppProps} from 'next/app';
|
||||||
|
import {MDXProvider} from '@mdx-js/react';
|
||||||
|
import {S} from '@/mdx';
|
||||||
|
import '../styles/index.sass';
|
||||||
|
|
||||||
|
// add anchor to all headings having id
|
||||||
|
const hx = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
|
||||||
|
const extendedHx = Object.fromEntries(hx.map(H => [H,
|
||||||
|
({children, id, ...props}: React.ComponentProps<(typeof hx)[number]>) => <H id={id} {...props}>
|
||||||
|
{id && <a className="anchor" />}
|
||||||
|
{children}
|
||||||
|
</H>,
|
||||||
|
]));
|
||||||
|
|
||||||
|
export default function App({Component, pageProps, router: {pathname}}: AppProps) {
|
||||||
|
return <MDXProvider components={{S, ...extendedHx}}>
|
||||||
|
<Component data={{pathname}} {...pageProps} />
|
||||||
|
</MDXProvider>;
|
||||||
|
}
|
||||||
8
pages/index.mdx
Normal file
8
pages/index.mdx
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
title: supMDX
|
||||||
|
description: You can write any meta data you want
|
||||||
|
author: me
|
||||||
|
---
|
||||||
|
|
||||||
|
## h2
|
||||||
|
### h3
|
||||||
27
styles/a.sass
Normal file
27
styles/a.sass
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
a, .link
|
||||||
|
color: #72E5DB
|
||||||
|
text-decoration: none
|
||||||
|
cursor: pointer
|
||||||
|
a:hover, .link:hover
|
||||||
|
color: #72E5DB
|
||||||
|
text-decoration: underline
|
||||||
|
a:active, .link:active
|
||||||
|
color: #A0E5DF
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
a.anchor
|
||||||
|
float: left
|
||||||
|
padding-right: 4px
|
||||||
|
margin-left: -24px
|
||||||
|
a.anchor:before
|
||||||
|
content: ""
|
||||||
|
background-image: url("https://cdn.sup39.dev/img/anchor.svg")
|
||||||
|
width: 16px
|
||||||
|
height: 16px
|
||||||
|
vertical-align: middle
|
||||||
|
margin: 0 0 4px 0
|
||||||
|
display: inline-block
|
||||||
|
visibility: hidden
|
||||||
23
styles/code.sass
Normal file
23
styles/code.sass
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
code
|
||||||
|
font-family: Menlo, Monaco, Consolas, "Courier New", "Hiragino Kaku Gothic ProN", monospace
|
||||||
|
padding: 2px 4px
|
||||||
|
margin: 0 1px 0 0
|
||||||
|
font-size: 90%
|
||||||
|
font-variant-numeric: slashed-zero
|
||||||
|
background-color: #4a4a4a
|
||||||
|
border-radius: 4px
|
||||||
|
white-space: nowrap
|
||||||
|
pre code
|
||||||
|
white-space: break-spaces
|
||||||
|
background: unset
|
||||||
|
padding: 0
|
||||||
|
margin: 0
|
||||||
|
pre
|
||||||
|
background: #333
|
||||||
|
color: #fff
|
||||||
|
border-radius: 4px
|
||||||
|
overflow-x: auto
|
||||||
|
padding: 0.6em
|
||||||
35
styles/heading.sass
Normal file
35
styles/heading.sass
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
margin: 0
|
||||||
|
h1
|
||||||
|
font-size: 2.5em
|
||||||
|
font-weight: 600
|
||||||
|
line-height: 1.3
|
||||||
|
margin-bottom: 0.5em
|
||||||
|
h2
|
||||||
|
font-size: 1.8em
|
||||||
|
font-weight: 500
|
||||||
|
line-height: 1.3
|
||||||
|
padding-bottom: 0.1em
|
||||||
|
border-bottom: 1px solid var(--bd)
|
||||||
|
margin-top: 1.0em
|
||||||
|
margin-bottom: 0.25em
|
||||||
|
h3
|
||||||
|
font-size: 1.5em
|
||||||
|
font-weight: bold
|
||||||
|
line-height: 1.6
|
||||||
|
margin-top: 0.5em
|
||||||
|
h4
|
||||||
|
font-size: 1.2em
|
||||||
|
font-weight: 600
|
||||||
|
margin-top: 1em
|
||||||
|
h5
|
||||||
|
font-size: 1.1em
|
||||||
|
font-weight: 500
|
||||||
|
margin-top: 1em
|
||||||
|
h6
|
||||||
|
font-size: 1em
|
||||||
|
font-weight: 400
|
||||||
|
margin-top: 1em
|
||||||
11
styles/index.sass
Normal file
11
styles/index.sass
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
@import './vars.sass'
|
||||||
|
@import './nav.sass'
|
||||||
|
@import './menu-toggle.sass'
|
||||||
|
@import './heading.sass'
|
||||||
|
@import './span.sass'
|
||||||
|
@import './a.sass'
|
||||||
|
@import './code.sass'
|
||||||
|
@import './misc.sass'
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px)
|
||||||
|
@import './nav.pc.sass'
|
||||||
37
styles/menu-toggle.sass
Normal file
37
styles/menu-toggle.sass
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
.menu-toggle
|
||||||
|
width: 20px
|
||||||
|
height: 20px
|
||||||
|
display: block
|
||||||
|
cursor: pointer
|
||||||
|
.menu-toggle:before
|
||||||
|
top: 30%
|
||||||
|
.menu-toggle:after
|
||||||
|
top: 70%
|
||||||
|
|
||||||
|
.menu-toggle:before,
|
||||||
|
.menu-toggle:after
|
||||||
|
position: absolute
|
||||||
|
content: ""
|
||||||
|
width: 100%
|
||||||
|
height: 2px
|
||||||
|
transform: translate(0, -50%)
|
||||||
|
background: var(--fg)
|
||||||
|
transition: all .25s ease-out
|
||||||
|
|
||||||
|
.open
|
||||||
|
.menu-toggle:before
|
||||||
|
transform: translate(0, -50%) rotate(135deg)
|
||||||
|
.menu-toggle:after
|
||||||
|
transform: translate(0, -50%) rotate(-135deg)
|
||||||
|
.menu-toggle:before,
|
||||||
|
.menu-toggle:after
|
||||||
|
top: 50%
|
||||||
|
left: -10%
|
||||||
|
width: 120%
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px)
|
||||||
|
.menu-toggle
|
||||||
|
display: none
|
||||||
261
styles/misc.sass
Normal file
261
styles/misc.sass
Normal file
|
|
@ -0,0 +1,261 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
html
|
||||||
|
font-size: 16px
|
||||||
|
body
|
||||||
|
color: var(--fg)
|
||||||
|
background: var(--bg)
|
||||||
|
line-height: 1.6
|
||||||
|
font-weight: 300
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, Verdana, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
|
||||||
|
font-variant-numeric: tabular-nums
|
||||||
|
margin: 0
|
||||||
|
*
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
/**** font ****/
|
||||||
|
html:lang(zh-TW) body
|
||||||
|
font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif
|
||||||
|
|
||||||
|
/**** image ****/
|
||||||
|
article img
|
||||||
|
max-width: 100%
|
||||||
|
height: auto
|
||||||
|
margin: 1em 0
|
||||||
|
|
||||||
|
#icon-link
|
||||||
|
text-decoration: none
|
||||||
|
> *
|
||||||
|
float: left
|
||||||
|
.icon
|
||||||
|
width: 72px
|
||||||
|
height: 72px
|
||||||
|
.icon-text
|
||||||
|
height: 72px
|
||||||
|
font-size: 27px
|
||||||
|
font-weight: 600
|
||||||
|
line-height: 1.2
|
||||||
|
padding-left: 16px
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
text-align: center
|
||||||
|
.pink
|
||||||
|
font-size: 24px
|
||||||
|
#icon-link:link
|
||||||
|
color: unset
|
||||||
|
|
||||||
|
/**** main ****/
|
||||||
|
main
|
||||||
|
padding: 24px
|
||||||
|
article
|
||||||
|
font-weight: 300
|
||||||
|
h3
|
||||||
|
+ table, + h4
|
||||||
|
margin-top: 0.5em
|
||||||
|
h4 + table
|
||||||
|
margin-top: 0.5em
|
||||||
|
table
|
||||||
|
margin-block-start: 1em
|
||||||
|
margin-block-end: 1em
|
||||||
|
table,
|
||||||
|
table th,
|
||||||
|
table td
|
||||||
|
border: solid 1px var(--bd)
|
||||||
|
border-collapse: collapse
|
||||||
|
padding: 4px
|
||||||
|
> ul
|
||||||
|
padding-inline-start: 2em
|
||||||
|
margin-block-start: 0.5em
|
||||||
|
margin-block-end: 1em
|
||||||
|
ul ul
|
||||||
|
padding-inline-start: 1.25em
|
||||||
|
> h2 + ul
|
||||||
|
padding-inline-start: 1.5em
|
||||||
|
|
||||||
|
footer
|
||||||
|
background: #18181e
|
||||||
|
background: #222
|
||||||
|
font-size: 0.75em
|
||||||
|
line-height: 1em
|
||||||
|
padding: 1.5em 2em
|
||||||
|
margin-top: 1em
|
||||||
|
|
||||||
|
p + *.compact
|
||||||
|
margin-block-start: -1em
|
||||||
|
*.compact
|
||||||
|
margin-block-start: 0em
|
||||||
|
|
||||||
|
/**** table ****/
|
||||||
|
.tac
|
||||||
|
text-align: center
|
||||||
|
.tar
|
||||||
|
text-align: right
|
||||||
|
table.tb-r tbody
|
||||||
|
text-align: right
|
||||||
|
|
||||||
|
/**** form ****/
|
||||||
|
form > div
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
> *
|
||||||
|
margin: 3px
|
||||||
|
|
||||||
|
/**** input ****/
|
||||||
|
input, textarea
|
||||||
|
color: var(--fg)
|
||||||
|
background: #222
|
||||||
|
border: var(--bd) solid 1px
|
||||||
|
font-size: 1em
|
||||||
|
input[invalid]
|
||||||
|
background: #600
|
||||||
|
input[type="number"]
|
||||||
|
text-align: right
|
||||||
|
|
||||||
|
/**** button ****/
|
||||||
|
button,
|
||||||
|
input[type="button"],
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="reset"]
|
||||||
|
color: var(--fg)
|
||||||
|
background: #2a8
|
||||||
|
border: #2a8 1px solid
|
||||||
|
border-radius: 4px
|
||||||
|
font-size: 14px
|
||||||
|
cursor: pointer
|
||||||
|
button:hover,
|
||||||
|
input[type="button"]:hover,
|
||||||
|
input[type="submit"]:hover,
|
||||||
|
input[type="reset"]:hover
|
||||||
|
border: #197 1px solid
|
||||||
|
background: #197
|
||||||
|
button:active,
|
||||||
|
input[type="button"]:active,
|
||||||
|
input[type="submit"]:active,
|
||||||
|
input[type="reset"]:active
|
||||||
|
border: #075 1px solid
|
||||||
|
background: #075
|
||||||
|
|
||||||
|
button:disabled
|
||||||
|
background: #444
|
||||||
|
border: #555 1px solid
|
||||||
|
cursor: not-allowed
|
||||||
|
button[variant="warning"]
|
||||||
|
background: #c87603
|
||||||
|
border: #c87603 1px solid
|
||||||
|
button[variant="warning"]:enabled:hover
|
||||||
|
background: #b60
|
||||||
|
border: #b60 1px solid
|
||||||
|
button[variant="warning"]:enabled:active
|
||||||
|
background: #a50
|
||||||
|
border: #b60 1px solid
|
||||||
|
button[variant="danger"]:enabled
|
||||||
|
background: #c32
|
||||||
|
border: #c32 1px solid
|
||||||
|
button[variant="danger"]:enabled:hover
|
||||||
|
background: #b21
|
||||||
|
border: #b21 1px solid
|
||||||
|
button[variant="danger"]:enabled:active
|
||||||
|
background: #a10
|
||||||
|
border: #b21 1px solid
|
||||||
|
button.sm
|
||||||
|
font-size: 12px
|
||||||
|
|
||||||
|
/**** div.bt ****/
|
||||||
|
div.bt-plus, div.bt-minus
|
||||||
|
position: relative
|
||||||
|
width: 1.2em
|
||||||
|
height: 1.2em
|
||||||
|
border: #2ee5b8 1px solid
|
||||||
|
border-radius: 4px
|
||||||
|
cursor: pointer
|
||||||
|
user-select: none
|
||||||
|
-webkit-user-select: none
|
||||||
|
-moz-user-select: none
|
||||||
|
-khtml-user-select: none
|
||||||
|
-ms-user-select: none
|
||||||
|
div.bt-plus:before,
|
||||||
|
div.bt-plus:after,
|
||||||
|
div.bt-minus:before
|
||||||
|
content: ""
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
left: 50%
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
width: 50%
|
||||||
|
height: 1px
|
||||||
|
background: var(--fg)
|
||||||
|
div.bt-plus:after
|
||||||
|
width: 1px
|
||||||
|
height: 50%
|
||||||
|
|
||||||
|
/**** variant ****/
|
||||||
|
span.danger
|
||||||
|
color: #f66
|
||||||
|
button.danger
|
||||||
|
background: #a33
|
||||||
|
|
||||||
|
/**** details ****/
|
||||||
|
details
|
||||||
|
border: 1px solid
|
||||||
|
padding: 0.5em 1em
|
||||||
|
margin-block-start: 0.5em
|
||||||
|
margin-block-end: 0.5em
|
||||||
|
> summary
|
||||||
|
padding: 4px 0.5em
|
||||||
|
margin: -0.5em -1em -0.5em
|
||||||
|
details[open]
|
||||||
|
padding-bottom: 0
|
||||||
|
> summary
|
||||||
|
border-bottom: 1px solid
|
||||||
|
margin: -0.5em -1em 0
|
||||||
|
> ul, > ol
|
||||||
|
padding-inline-start: 1.5em
|
||||||
|
|
||||||
|
/**** misc ****/
|
||||||
|
video
|
||||||
|
max-width: 100%
|
||||||
|
.noselect
|
||||||
|
-webkit-touch-callout: none // iOS Safari
|
||||||
|
-webkit-user-select: none // Safari
|
||||||
|
-khtml-user-select: none // Konqueror HTML
|
||||||
|
-moz-user-select: none // Old versions of Firefox
|
||||||
|
-ms-user-select: none // Internet Explorer/Edge
|
||||||
|
user-select: none // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox
|
||||||
|
|
||||||
|
/**** hide ****/
|
||||||
|
div.hide-ctn
|
||||||
|
position: relative
|
||||||
|
color: #fff
|
||||||
|
margin-block-start: -1em
|
||||||
|
margin-block-end: 2em
|
||||||
|
z-index:-1
|
||||||
|
*
|
||||||
|
position: absolute
|
||||||
|
font-size: 0.25em
|
||||||
|
color: #0000
|
||||||
|
|
||||||
|
/**** highlight ****/
|
||||||
|
table.code-lnum
|
||||||
|
padding: 0
|
||||||
|
margin: 0
|
||||||
|
width: 100%
|
||||||
|
border: none
|
||||||
|
td
|
||||||
|
border: none
|
||||||
|
td:first-child
|
||||||
|
padding-left: 0.5em
|
||||||
|
padding-right: 1em
|
||||||
|
text-align: right
|
||||||
|
td:last-child
|
||||||
|
width: 100%
|
||||||
|
white-space: pre
|
||||||
|
.hljs-comment
|
||||||
|
color: #7d6
|
||||||
|
.hljs-keyword
|
||||||
|
color: #ffa
|
||||||
|
font-weight: bold
|
||||||
|
.hljs-number, .hljs-string
|
||||||
|
color: #ffb7e7
|
||||||
32
styles/nav.pc.sass
Normal file
32
styles/nav.pc.sass
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
nav
|
||||||
|
width: var(--nav-width)
|
||||||
|
overflow: auto
|
||||||
|
position: fixed
|
||||||
|
left: 0
|
||||||
|
top: 0
|
||||||
|
bottom: 0
|
||||||
|
border-bottom: none
|
||||||
|
border-right: 1px solid var(--bd)
|
||||||
|
padding: 1em 1em
|
||||||
|
header
|
||||||
|
margin-bottom: 1em
|
||||||
|
.menu-toggle
|
||||||
|
display: none
|
||||||
|
.nav-root
|
||||||
|
height: auto
|
||||||
|
opacity: 1
|
||||||
|
visibility: visible
|
||||||
|
|
||||||
|
main, footer
|
||||||
|
margin-left: var(--nav-width)
|
||||||
|
main
|
||||||
|
padding: 24px 32px
|
||||||
|
|
||||||
|
*:hover > a.anchor:before
|
||||||
|
visibility: visible
|
||||||
|
|
||||||
|
.mobile-only
|
||||||
|
display: none
|
||||||
107
styles/nav.sass
Normal file
107
styles/nav.sass
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
$yellow: #ff9
|
||||||
|
$bd: var(--bd)
|
||||||
|
|
||||||
|
/** mobile */
|
||||||
|
nav
|
||||||
|
width: 100%
|
||||||
|
background: #28282e
|
||||||
|
border-bottom: 1px solid var(--bd)
|
||||||
|
border-right: none
|
||||||
|
padding: 1.25em 1.25em
|
||||||
|
|
||||||
|
header
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
.menu-toggle
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
right: 1em
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
|
||||||
|
.nav-root
|
||||||
|
height: 0
|
||||||
|
// opacity: 0
|
||||||
|
visibility: hidden
|
||||||
|
|
||||||
|
*
|
||||||
|
padding: 0
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
a
|
||||||
|
display: block
|
||||||
|
color: #eee
|
||||||
|
|
||||||
|
.nav-dir-child
|
||||||
|
padding-left: 1em
|
||||||
|
|
||||||
|
.nav-here, .nav-here a,
|
||||||
|
.nav-here + ul, .nav-here + ul a
|
||||||
|
color: $yellow
|
||||||
|
ul
|
||||||
|
list-style-type: square
|
||||||
|
margin-block-start: 0
|
||||||
|
margin-block-end: 0
|
||||||
|
padding-inline-start: 24px
|
||||||
|
|
||||||
|
.nav-root
|
||||||
|
> div
|
||||||
|
border-top: 1px solid $bd
|
||||||
|
padding: 0.5em 0.5em
|
||||||
|
|
||||||
|
/** heading list */
|
||||||
|
> ul
|
||||||
|
border-top: 1px solid $bd
|
||||||
|
padding-top: 0.75em
|
||||||
|
// margin-bottom: 0.5em
|
||||||
|
|
||||||
|
|
||||||
|
/** here */
|
||||||
|
.nav-here
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
|
||||||
|
/** container of entry */
|
||||||
|
.nav-entry
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
> a
|
||||||
|
flex-grow: 1
|
||||||
|
|
||||||
|
> svg
|
||||||
|
stroke: #9ff
|
||||||
|
fill: none
|
||||||
|
stroke-width: 1
|
||||||
|
stroke-linecap: round
|
||||||
|
stroke-linejoin: round
|
||||||
|
width: 1.2em
|
||||||
|
height: 1.2em
|
||||||
|
cursor: pointer
|
||||||
|
border-radius: 50%
|
||||||
|
> svg:hover
|
||||||
|
background: #18181e
|
||||||
|
|
||||||
|
|
||||||
|
/** folder hide */
|
||||||
|
.nav-dir-child
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.nav-fold-open > .nav-dir-child
|
||||||
|
display: block
|
||||||
|
|
||||||
|
.nav-fold-open > .nav-entry > svg
|
||||||
|
rotate: 180deg
|
||||||
|
|
||||||
|
nav.open
|
||||||
|
header
|
||||||
|
margin-bottom: 1.25em
|
||||||
|
.nav-root
|
||||||
|
height: auto
|
||||||
|
opacity: 1
|
||||||
|
visibility: visible
|
||||||
|
// transition: opacity 0.4s ease-in-out
|
||||||
29
styles/span.sass
Normal file
29
styles/span.sass
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
.mint
|
||||||
|
color: var(--mint)
|
||||||
|
.pink
|
||||||
|
color: var(--pink)
|
||||||
|
.kw
|
||||||
|
color: #9ff
|
||||||
|
font-weight: bold
|
||||||
|
.mk
|
||||||
|
color: #ff99e5
|
||||||
|
font-weight: bold
|
||||||
|
.y
|
||||||
|
color: #ff7
|
||||||
|
font-weight: bold
|
||||||
|
.note
|
||||||
|
color: #777
|
||||||
|
.arg
|
||||||
|
color: #da8cff
|
||||||
|
font-weight: bold
|
||||||
|
.u
|
||||||
|
text-decoration: underline
|
||||||
|
font-weight: bold
|
||||||
|
.mono
|
||||||
|
font-family: monospace
|
||||||
|
span[title]
|
||||||
|
cursor: help
|
||||||
|
text-decoration: dotted underline
|
||||||
10
styles/vars.sass
Normal file
10
styles/vars.sass
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2022 sup39
|
||||||
|
|
||||||
|
:root
|
||||||
|
--bg: #222228
|
||||||
|
--fg: #eee
|
||||||
|
--bd: #777
|
||||||
|
--mint: #2ee5b8
|
||||||
|
--pink: #e58acf
|
||||||
|
--nav-width: 256px
|
||||||
16
supMDX-env.d.ts
vendored
Normal file
16
supMDX-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
declare module '#config' {
|
||||||
|
import type {NavEntry} from '@/Nav';
|
||||||
|
type Config = {
|
||||||
|
startYear: number
|
||||||
|
siteAuthor?: string
|
||||||
|
metaFields?: {label: string, prop: string}[]
|
||||||
|
nav: NavEntry[]
|
||||||
|
};
|
||||||
|
const config: Config;
|
||||||
|
export default config;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.yaml' {
|
||||||
|
const data: any;
|
||||||
|
export default data;
|
||||||
|
}
|
||||||
7
supMDX.yml
Normal file
7
supMDX.yml
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
startYear: 2022
|
||||||
|
siteAuthor: <Edit author name in supMDX.yml>
|
||||||
|
metaFields:
|
||||||
|
- {prop: author, label: 'Author: '}
|
||||||
|
- {prop: createdAt, label: 'Created at '}
|
||||||
|
- {prop: updatedAt, label: 'Updated at '}
|
||||||
|
nav: []
|
||||||
37
tsconfig.json
Normal file
37
tsconfig.json
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["components/*"],
|
||||||
|
"#/*": ["pages/*"],
|
||||||
|
"#config": ["supMDX.yml"],
|
||||||
|
"%/*": ["utils/*"]
|
||||||
|
},
|
||||||
|
"target": "es5",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"incremental": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue