diff --git a/assets/style/IosevkaAile.css b/assets/style/IosevkaAile.css new file mode 100644 index 0000000..6b3f4d9 --- /dev/null +++ b/assets/style/IosevkaAile.css @@ -0,0 +1,315 @@ + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 100; + font-stretch: normal; + font-style: normal; + src: url('../fonts/WOFF2/IosevkaAile-Thin.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-Thin.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 100; + font-stretch: normal; + font-style: oblique; + src: url('../fonts/WOFF2/IosevkaAile-ThinOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ThinOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web Oblique'; + font-display: swap; + font-weight: 100; + font-stretch: normal; + src: url('../fonts/WOFF2/IosevkaAile-ThinOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ThinOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 100; + font-stretch: normal; + font-style: italic; + src: url('../fonts/WOFF2/IosevkaAile-ThinItalic.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ThinItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 200; + font-stretch: normal; + font-style: normal; + src: url('../fonts/WOFF2/IosevkaAile-ExtraLight.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ExtraLight.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 200; + font-stretch: normal; + font-style: oblique; + src: url('../fonts/WOFF2/IosevkaAile-ExtraLightOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ExtraLightOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web Oblique'; + font-display: swap; + font-weight: 200; + font-stretch: normal; + src: url('../fonts/WOFF2/IosevkaAile-ExtraLightOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ExtraLightOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 200; + font-stretch: normal; + font-style: italic; + src: url('../fonts/WOFF2/IosevkaAile-ExtraLightItalic.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ExtraLightItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 300; + font-stretch: normal; + font-style: normal; + src: url('../fonts/WOFF2/IosevkaAile-Light.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-Light.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 300; + font-stretch: normal; + font-style: oblique; + src: url('../fonts/WOFF2/IosevkaAile-LightOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-LightOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web Oblique'; + font-display: swap; + font-weight: 300; + font-stretch: normal; + src: url('../fonts/WOFF2/IosevkaAile-LightOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-LightOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 300; + font-stretch: normal; + font-style: italic; + src: url('../fonts/WOFF2/IosevkaAile-LightItalic.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-LightItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 400; + font-stretch: normal; + font-style: normal; + src: url('../fonts/WOFF2/IosevkaAile-Regular.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 400; + font-stretch: normal; + font-style: oblique; + src: url('../fonts/WOFF2/IosevkaAile-Oblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-Oblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web Oblique'; + font-display: swap; + font-weight: 400; + font-stretch: normal; + src: url('../fonts/WOFF2/IosevkaAile-Oblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-Oblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 400; + font-stretch: normal; + font-style: italic; + src: url('../fonts/WOFF2/IosevkaAile-Italic.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-Italic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 500; + font-stretch: normal; + font-style: normal; + src: url('../fonts/WOFF2/IosevkaAile-Medium.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-Medium.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 500; + font-stretch: normal; + font-style: oblique; + src: url('../fonts/WOFF2/IosevkaAile-MediumOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-MediumOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web Oblique'; + font-display: swap; + font-weight: 500; + font-stretch: normal; + src: url('../fonts/WOFF2/IosevkaAile-MediumOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-MediumOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 500; + font-stretch: normal; + font-style: italic; + src: url('../fonts/WOFF2/IosevkaAile-MediumItalic.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-MediumItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 600; + font-stretch: normal; + font-style: normal; + src: url('../fonts/WOFF2/IosevkaAile-SemiBold.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-SemiBold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 600; + font-stretch: normal; + font-style: oblique; + src: url('../fonts/WOFF2/IosevkaAile-SemiBoldOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-SemiBoldOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web Oblique'; + font-display: swap; + font-weight: 600; + font-stretch: normal; + src: url('../fonts/WOFF2/IosevkaAile-SemiBoldOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-SemiBoldOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 600; + font-stretch: normal; + font-style: italic; + src: url('../fonts/WOFF2/IosevkaAile-SemiBoldItalic.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-SemiBoldItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 700; + font-stretch: normal; + font-style: normal; + src: url('../fonts/WOFF2/IosevkaAile-Bold.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-Bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 700; + font-stretch: normal; + font-style: oblique; + src: url('../fonts/WOFF2/IosevkaAile-BoldOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-BoldOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web Oblique'; + font-display: swap; + font-weight: 700; + font-stretch: normal; + src: url('../fonts/WOFF2/IosevkaAile-BoldOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-BoldOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 700; + font-stretch: normal; + font-style: italic; + src: url('../fonts/WOFF2/IosevkaAile-BoldItalic.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-BoldItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 800; + font-stretch: normal; + font-style: normal; + src: url('../fonts/WOFF2/IosevkaAile-ExtraBold.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ExtraBold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 800; + font-stretch: normal; + font-style: oblique; + src: url('../fonts/WOFF2/IosevkaAile-ExtraBoldOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ExtraBoldOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web Oblique'; + font-display: swap; + font-weight: 800; + font-stretch: normal; + src: url('../fonts/WOFF2/IosevkaAile-ExtraBoldOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ExtraBoldOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 800; + font-stretch: normal; + font-style: italic; + src: url('../fonts/WOFF2/IosevkaAile-ExtraBoldItalic.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-ExtraBoldItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 900; + font-stretch: normal; + font-style: normal; + src: url('../fonts/WOFF2/IosevkaAile-Heavy.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-Heavy.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 900; + font-stretch: normal; + font-style: oblique; + src: url('../fonts/WOFF2/IosevkaAile-HeavyOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-HeavyOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web Oblique'; + font-display: swap; + font-weight: 900; + font-stretch: normal; + src: url('../fonts/WOFF2/IosevkaAile-HeavyOblique.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-HeavyOblique.ttf') format('truetype'); +} + +@font-face { + font-family: 'Iosevka Aile Web'; + font-display: swap; + font-weight: 900; + font-stretch: normal; + font-style: italic; + src: url('../fonts/WOFF2/IosevkaAile-HeavyItalic.woff2') format('woff2'), url('../fonts/TTF/IosevkaAile-HeavyItalic.ttf') format('truetype'); +} diff --git a/assets/style/common.css b/assets/style/common.css index 3c313ba..01ac389 100644 --- a/assets/style/common.css +++ b/assets/style/common.css @@ -1,4 +1,6 @@ @import url(/assets/style/fonts.css); +@import url(/assets/style/IosevkaAile.css); + :root { --bg: #282828; --bg-accent: #504945; @@ -9,12 +11,12 @@ --info: #83a598; --warn: #fabd2f; --error: #fb4934; - --font-main: Andika, sans-serif; + --font-main: Iosevka Aile Web, sans-serif; --font-mono: Iosevka, monospace; } * { font-family: var(--font-main); - font-feature-settings: "ss13" on; + font-weight: 300; padding: 0pt; margin: 0pt; } @@ -28,6 +30,12 @@ header { background-color: var(--bg-accent); text-align: center; } +h1, h2, h3, h4, h5, h6 { + font-weight: 800; +} +strong { + font-weight: 600; +} header h1 a { text-decoration: none; @@ -59,7 +67,7 @@ a { } ul.sresult { width: 50vw; - height: 50vw; + height: 20vw; overflow: scroll; justify-content: center; position: absolute; @@ -82,17 +90,17 @@ main { padding: 25pt 10pt; } -@media (min-width: 800px) { +@media (min-width: 1000px) { #main-body {display: flex;} main { - width: calc(100% - 10em); + width: calc(100% - 20em); } aside { margin: 10pt 10pt 10pt 0pt; - width: 10em; + width: 20em; } } -@media (max-width: 800px) { +@media (max-width: 1000px) { main { width: 100% - 20pt } @@ -111,11 +119,6 @@ main li { main table { margin: 1em; } -main table, main td, main tr { - text-align: center; - border-collapse: collapse; - border: 2px solid var(--fg); -} main td { padding: 0em 1em; margin: 0; @@ -130,12 +133,22 @@ main .high { font-family: inherit; } main em { - color: var(--accent) + color: var(--accent); +} +main table, main td, main tr { + border-collapse: collapse; + margin: 10px; + border-collapse: collapse; + border: 1px solid var(--fg-disabled); + text-align: center; +} + +main h2, main h3, main h4, main h5, main h6{ + padding-top: 1em; } /****** GLOSSES ******/ .gloss, .gloss tr, .gloss td { - stroke: none; border: none; text-align: left; padding: 0 .25em; diff --git a/build.ts b/build.ts index 87cddec..81a6f35 100755 --- a/build.ts +++ b/build.ts @@ -6,29 +6,50 @@ import { JSDOM } from "jsdom"; import { Dirent } from "node:fs"; import { mkdir, stat } from "node:fs/promises"; + function out_path(path: string) { } -type LogLevel = "INFO"|"WARN"|"ERROR"|"FATAL" +enum LogLevel { + DEBUG = 0, + INFO = 1, + WARN = 2, + ERROR = 3, + FATAL = 4 +} +let {DEBUG, INFO, WARN, ERROR, FATAL} = LogLevel +let minLogLevel : LogLevel = INFO function log(level: LogLevel, message: any) { const p = Bun.argv[1]?.split("/").slice(-1)[0] ?? "build script"; switch (level) { - case "INFO": console.log(`\x1b[90m${p}: \x1b[1;42;97m [INFO] \x1b[0m ${message}`); break; - case "WARN": console.log(`\x1b[90m${p}: \x1b[1;48;5;208;97m [WARN] \x1b[0m ${message}`); break; - case "ERROR": console.log(`\x1b[90m${p}: \x1b[1;41;97m [ERROR] \x1b[0m ${message}`); break; - case "FATAL": console.log(`\x1b[90m${p}: \x1b[1;41;97m [FATAL] ${message} \x1b[0m`); process.exit(); break; + case DEBUG: if (minLogLevel <= DEBUG) console.log(`\x1b[90m${p}: \x1b[1;45;97m [DEBUG] \x1b[0m ${message}`); break; + case INFO: if (minLogLevel <= INFO) console.log(`\x1b[90m${p}: \x1b[1;44;97m [INFO] \x1b[0m ${message}`); break; + case WARN: if (minLogLevel <= WARN) console.log(`\x1b[90m${p}: \x1b[1;48;5;208;97m [WARN] \x1b[0m ${message}`); break; + case ERROR: if (minLogLevel <= ERROR) console.log(`\x1b[90m${p}: \x1b[1;41;97m [ERROR] \x1b[0m ${message}`); break; + case FATAL: /*Cannot suppress fatal*/console.log(`\x1b[90m${p}: \x1b[1;41;97m [FATAL] ${message} \x1b[0m`); process.exit(); break; + default: log(FATAL, `${level} isn't a valid log level`); } } +log(INFO, "Annwan’s wiki’s custom build script v2") async function build_typst_file(file: Dirent) { let path = file.parentPath + "/" + file.name let dir = "public_html" + file.parentPath.slice(3) let slug = path.slice(4, -4) let outfile = `public_html/${slug}.html` - log("INFO", `Building ${path}`) + log(INFO, `Compiling ${slug}`) await mkdir(dir, {recursive: true}) await $`typst c --features html --format html --root . ${path} ${outfile}` - log("INFO", `Built ${path}`) + log(DEBUG, `Checking if ${slug} needs post processing`) + let html = await Bun.file(outfile).text(); + let heads = html.match(new RegExp("
.*?", "sg")); + if (heads != null && heads.length >= 2) { + log(DEBUG, `Postprocessing ${slug}`) + html = html.replace(heads[1], ""); + html = html.replace(heads[0], heads[1]); + await Bun.write(outfile, html); + } + log(INFO, `${slug} done`) } @@ -43,26 +64,30 @@ async function build_all_typst() { } async function copy_assets() { - log("INFO", "Updating assets") - await $`rm -rf public_html/assets/` - await $`cp -r assets/ public_html/` + log(INFO, "Updating assets") + await $`rm -rf ${minLogLevel == DEBUG ? "-v" : ""} public_html/assets/` + await $`cp -r ${minLogLevel == DEBUG ? "-v" : ""} assets/ public_html/` } type IndexEntry = { id: string; title: string; body: string; tags: string;} async function collect_data(f:string) : Promise