c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

So much styling

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-18 16:46:33 +02:00
parent 3d968a8f0e
commit 0554ecaeae
7 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/content/generateBackend.ts
View File

@ -122,10 +122,15 @@ async function generateDiaryHTML(diary: Diary, selectedPage?: number): Promise<s
}
}
export function generateHighlightedDOM(html: string) {
const el = new JSDOM(html);
el.window.document.querySelectorAll("pre code").forEach((block) => {
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;
}

5
pages/blog/diary/[did].tsx
View File

@ -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
}
}

6
pages/blog/diary/[did]/[page].tsx
View File

@ -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)
}
}

5
pages/blog/project/[pid].tsx
View File

@ -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,
}
}
};

33
styles/Blog/Content.module.scss
View File

@ -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 */

2
styles/Blog/DiaryPageSelector.module.scss
View File

@ -62,7 +62,7 @@
padding: 5px;
border-radius: 1em;
border: 1px solid var(--blog_content-border);
background: #333;
background: var(--blog_background-main);
}
&.top {

7
styles/globals.scss
View File

@ -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 {