From 0554ecaeae85b74dbaba1d5e6184885e7a9f517e Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Tue, 18 Oct 2022 16:46:33 +0200 Subject: [PATCH] So much styling --- lib/content/generateBackend.ts | 13 ++++++--- pages/blog/diary/[did].tsx | 5 ++-- pages/blog/diary/[did]/[page].tsx | 6 ++--- pages/blog/project/[pid].tsx | 5 ++-- styles/Blog/Content.module.scss | 33 +++++++++++++++++------ styles/Blog/DiaryPageSelector.module.scss | 2 +- styles/globals.scss | 7 +++-- 7 files changed, 49 insertions(+), 22 deletions(-) diff --git a/lib/content/generateBackend.ts b/lib/content/generateBackend.ts index 188af46..2c97420 100644 --- a/lib/content/generateBackend.ts +++ b/lib/content/generateBackend.ts @@ -122,10 +122,15 @@ async function generateDiaryHTML(diary: Diary, selectedPage?: number): Promise { +export function prepareDOM(html: string) { + const dom = (new JSDOM(html)).window.document; + dom.querySelectorAll("pre code").forEach((block) => { hljs.highlightElement(block as HTMLElement); }); - return el.window.document.body.innerHTML; + + dom.querySelectorAll("a[href^='#']").forEach((link) => { + (link as HTMLAnchorElement).href = `/blog/${(link as HTMLAnchorElement).href.split("#")[1]}`; + }); + + return dom.body.innerHTML; } \ No newline at end of file diff --git a/pages/blog/diary/[did].tsx b/pages/blog/diary/[did].tsx index 5f9d3ff..d1f0236 100644 --- a/pages/blog/diary/[did].tsx +++ b/pages/blog/diary/[did].tsx @@ -1,7 +1,7 @@ import type { GetServerSideProps, NextPage } from "next"; import Layout from "../../../components/Blog/Layout"; import ContentPage from "../../../components/Blog/ContentPage"; -import { generateContent, getContentList } from "../../../lib/content/generateBackend"; +import { generateContent, getContentList, prepareDOM } from "../../../lib/content/generateBackend"; import type { ContentList, DiaryRender, Diary } from "../../../lib/content/types"; const DiaryMain: NextPage<{ content: DiaryRender }> = ({ content }) => { @@ -19,12 +19,13 @@ export const getServerSideProps: GetServerSideProps = async (context) => { if (!contentEntry) return { notFound: true }; const contentHtml = await generateContent(contentEntry); + const contentPrepared = prepareDOM(contentHtml); return { props: { content: { ...contentEntry, - html: contentHtml, + html: contentPrepared, pageSelected: 0 } } diff --git a/pages/blog/diary/[did]/[page].tsx b/pages/blog/diary/[did]/[page].tsx index bc7989b..32d0e69 100644 --- a/pages/blog/diary/[did]/[page].tsx +++ b/pages/blog/diary/[did]/[page].tsx @@ -1,7 +1,7 @@ import type { GetServerSideProps, NextPage } from "next"; import ContentPage from "../../../../components/Blog/ContentPage"; import Layout from "../../../../components/Blog/Layout"; -import { generateContent, getContentList, generateHighlightedDOM } from "../../../../lib/content/generateBackend"; +import { generateContent, getContentList, prepareDOM } from "../../../../lib/content/generateBackend"; import type { ContentList, Diary, DiaryRender } from "../../../../lib/content/types"; const DiaryMain: NextPage<{ content: DiaryRender }> = ({ content }) => { @@ -19,13 +19,13 @@ export const getServerSideProps: GetServerSideProps = async (context) => { if (!contentEntry || !page || typeof page !== "string") return { notFound: true }; const contentHtml = await generateContent(contentEntry, Number.parseInt(page)); - const contentHighlighted = generateHighlightedDOM(contentHtml); + const contentPrepared = prepareDOM(contentHtml); return { props: { content: { ...contentEntry, - html: contentHighlighted, + html: contentPrepared, pageSelected: Number.parseInt(page) } } diff --git a/pages/blog/project/[pid].tsx b/pages/blog/project/[pid].tsx index 356dbc4..d41fa3c 100644 --- a/pages/blog/project/[pid].tsx +++ b/pages/blog/project/[pid].tsx @@ -1,7 +1,7 @@ import type { GetServerSideProps, NextPage } from "next"; import ContentPage from "../../../components/Blog/ContentPage"; import Layout from "../../../components/Blog/Layout"; -import { generateContent, getContentList } from "../../../lib/content/generateBackend"; +import { generateContent, getContentList, prepareDOM } from "../../../lib/content/generateBackend"; import type { ContentList, ProjectRender } from "../../../lib/content/types"; const Post: NextPage<{ content: ProjectRender }> = ({ content }) => { @@ -20,6 +20,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { if (!contentEntry) return { notFound: true }; const contentHtml = await generateContent(contentEntry); + const contentPrepared = prepareDOM(contentHtml); return { props: { @@ -27,7 +28,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { more: contentEntry.more || null, repo: contentEntry.repo || null, title: contentEntry.title, - html: contentHtml, + html: contentPrepared, } } }; diff --git a/styles/Blog/Content.module.scss b/styles/Blog/Content.module.scss index 09c0b29..9ddcb69 100644 --- a/styles/Blog/Content.module.scss +++ b/styles/Blog/Content.module.scss @@ -6,7 +6,7 @@ @import "../asciidocMain"; h1 { - color: var(--repl_color-link, #2ac02a); + color: var(--blog_color-accent); font-size: 2em; } @@ -31,7 +31,7 @@ h4, h5, h6 { - color: var(--repl_color, #188a18); + color: var(--blog_color-accent-dark); } #preamble { @@ -45,16 +45,21 @@ tbody>tr:nth-of-type(odd), #footer { - background-color: #1f2420; + background-color: var(--blog_background-main); + } + + #footer { + clear: right; + border-radius: 1em; } tbody>tr:hover { - background-color: #364239; + background-color: rgba(0,0,0,0.2); } pre { background-color: #282c34; - border: 1px solid var(--repl_color-hint, #188a18); + border: 1px solid var(--blog_content-border); padding: 1em; color: #abb2bf; clear: right; @@ -64,9 +69,21 @@ padding: 1px; } - code { - background-color: #282c34; - color: #abb2bf; + :not(pre)>code, kbd { + background-color: var(--blog_background-main); + color: inherit; + + [data-theme="light"] & { + background-color: #d49a9a; + } + } + + a:link, a:visited, a:active { + color: var(--blog_color-accent); + text-decoration: none; + } + a:hover { + text-decoration: underline; } /* This _should_ have been included in the Asciidoc style but it isn't */ diff --git a/styles/Blog/DiaryPageSelector.module.scss b/styles/Blog/DiaryPageSelector.module.scss index 85a76d3..7dcdf07 100644 --- a/styles/Blog/DiaryPageSelector.module.scss +++ b/styles/Blog/DiaryPageSelector.module.scss @@ -62,7 +62,7 @@ padding: 5px; border-radius: 1em; border: 1px solid var(--blog_content-border); - background: #333; + background: var(--blog_background-main); } &.top { diff --git a/styles/globals.scss b/styles/globals.scss index d6e3828..1d47e47 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -16,8 +16,8 @@ --blog_nav-background: rgba(128, 128, 128, 0.3); --blog_nav-border: #ccc; - --blog_back-background-main: rgba(61, 0, 0,1); --blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(32, 19, 19,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E "); + --blog_background-main: rgba(32, 19, 19,1); --blog_content-background: rgba(40, 40, 40, 0.2); --blog_content-border: rgba(221, 221, 221, 0.25); /* #ddd but less opacity */ --blog_content-blur: 10px; @@ -30,8 +30,8 @@ --blog_nav-background: rgba(192, 192, 192, 0.3); --blog_nav-border: #ccc; - --blog_back-background-main: rgba(61, 0, 0,1); --blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(245, 179, 179,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E "); + --blog_background-main: rgba(245, 179, 179,1); --blog_content-background: rgba(160, 160, 160, 0.15); --blog_content-border: rgb(34, 34, 34, 0.17); /* #222 but less opacity */ --blog_content-blur: 5px; @@ -40,6 +40,9 @@ --blog_light-el-display: initial; --blog_dark-el-display: none; } + + --blog_color-accent: rgba(229, 62, 62,1); + --blog_color-accent-dark: rgb(190, 54, 54); } body {