Styled note template
Fixed link regex Fixed pre width Squashed commit of the following: commit20038e290aAuthor: wholteza <zackarias@montell.se> Date: Sat Sep 20 20:55:21 2025 +0200 Fix width of pre element commit52b49e18a2Author: wholteza <zackarias@montell.se> Date: Sat Sep 20 18:59:36 2025 +0200 Fix link regexp commit5036b3bca6Author: wholteza <zackarias@montell.se> Date: Sat Sep 20 18:53:00 2025 +0200 Changed font size commit5063c088ebAuthor: wholteza <zackarias@montell.se> Date: Sat Sep 20 18:52:22 2025 +0200 Fixed margins commitacd6ed63e1Author: wholteza <zackarias@montell.se> Date: Sat Sep 20 18:51:03 2025 +0200 Add leading space to links commit8b3c7871abAuthor: wholteza <zackarias@montell.se> Date: Sat Sep 20 18:50:38 2025 +0200 Add color to links commit2658d688caAuthor: wholteza <zackarias@montell.se> Date: Sat Sep 20 18:45:49 2025 +0200 Fixed reloading of browser when developing commit03e2361798Author: wholteza <zackarias@montell.se> Date: Fri Sep 19 21:45:40 2025 +0200 Change header line height commita1f6994c02Author: wholteza <zackarias@montell.se> Date: Fri Sep 19 21:42:08 2025 +0200 Align note with index
This commit is contained in:
10
bs-config.cjs
Normal file
10
bs-config.cjs
Normal file
@@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
port: 3000,
|
||||
server: "./dist",
|
||||
files: "./dist/**/*",
|
||||
watchOptions: {
|
||||
usePolling: true,
|
||||
interval: 200,
|
||||
binaryInterval: 200
|
||||
}
|
||||
}
|
||||
1929
package-lock.json
generated
1929
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -6,9 +6,9 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "concurrently --kill-others -n Build,Serve -c auto \"npm run watch-build\" \"npm run serve\"",
|
||||
"watch-build": "nodemon --ext js,ts,json,md,html --watch notes --watch src --watch packages/@zblog/toolchain/src --watch markdown.ts --exec \"npm run build --workspaces && npm run build && npm run generate-blog\"",
|
||||
"watch-build": "nodemon --ext js,ts,json,md,html --watch notes --watch src --watch templates --watch packages/@zblog/toolchain/src --watch markdown.ts --exec \"npm run build --workspaces && npm run build && npm run generate-blog\"",
|
||||
"build": "tsc -p tsconfig.json",
|
||||
"serve": "serve dist",
|
||||
"serve": "browser-sync start --config bs-config.cjs",
|
||||
"generate-blog": "node bin/index.js",
|
||||
"initialize-firebase": "npm install -g firebase-tools && firebase login",
|
||||
"deploy": "npm run generate-blog && firebase deploy"
|
||||
@@ -20,9 +20,9 @@
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.11.5",
|
||||
"browser-sync": "^3.0.4",
|
||||
"concurrently": "^8.2.1",
|
||||
"nodemon": "^3.0.1",
|
||||
"serve": "^14.2.1",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
@@ -304,8 +304,9 @@ class Link extends Symbol {
|
||||
/**
|
||||
* @type {RegExp}
|
||||
*/
|
||||
static textAndLinkRegExp: RegExp = new RegExp(
|
||||
/\[(?<text>.*)\]\((?<link>.*)\)/
|
||||
static textAndLinkRegExp: RegExp = new RegExp
|
||||
(
|
||||
/\[(?<text>[^\]]+)\]\((?<link>[^)]+)\)/
|
||||
);
|
||||
/**
|
||||
* @type {string}
|
||||
@@ -350,6 +351,7 @@ class Link extends Symbol {
|
||||
}
|
||||
|
||||
render() {
|
||||
// TODO: This leading space should probably be somewhere else.
|
||||
return ` <a href="${this.link}">${this.text}</a>`;
|
||||
}
|
||||
}
|
||||
@@ -899,7 +901,7 @@ export const toHtml = (markdown: string, assetDirectory: string): string => {
|
||||
// .filter((s) => !(s instanceof JustALineBreak))
|
||||
.map((s) => s.render())
|
||||
.join("");
|
||||
return `<div>${html}</div>`;
|
||||
return `<div class="content">${html}</div>`;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -23,6 +23,7 @@ export class StartPagePlugin implements IPluginBuilder {
|
||||
${links.join("")}
|
||||
`;
|
||||
htmlTemplate = htmlTemplate.replace("{{content}}", html);
|
||||
console.log("Generating index", this.options.indexTemplatePath);
|
||||
writeTextAsFile(
|
||||
`${builderContext.outputDirectory}/index.html`,
|
||||
htmlTemplate
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Measuring mash temperatures 🍺 🌡️
|
||||
# Measuring mash temperatures
|
||||
|
||||
_2025-02-03 - 5 minute read_
|
||||
|
||||
|
||||
@@ -7,8 +7,7 @@
|
||||
<title>Document</title>
|
||||
<style>
|
||||
html {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 17px;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -98,25 +97,32 @@
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.banner .title {
|
||||
.banner {
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
color: #1c1b28;
|
||||
background-color: #00FFFF;
|
||||
white-space: nowrap;
|
||||
padding: 5px;
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner .title::after {
|
||||
.title::after {
|
||||
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.banner .title .name {
|
||||
color: #1c1b28;
|
||||
background-color: #00FFFF;
|
||||
white-space: nowrap;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -124,7 +130,7 @@
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="title">
|
||||
<div class="name">Zackarias Montell</div>
|
||||
<div class="name"><a href="/">Zackarias Montell</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile">
|
||||
|
||||
@@ -1,56 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
html {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 1.3em;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 26px;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
html {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 800px;
|
||||
color: #fbfbfe;
|
||||
background-color: #1c1b22;
|
||||
background-color: #1c1b28;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
pre {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #00FFFF;
|
||||
padding: 1rem;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 20px;
|
||||
|
||||
h1 {
|
||||
color: #00FFFF;
|
||||
}
|
||||
|
||||
h1::after {
|
||||
margin-top: 1rem;
|
||||
content: "";
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-top: 3px dotted #00FFFF;
|
||||
border-bottom: 3px dotted #00FFFF;
|
||||
height: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0px;
|
||||
text-transform: capitalize;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
h1+p:has(> i) {
|
||||
font-size: smaller;
|
||||
margin-top: 10px;
|
||||
margin-top: 1rem;
|
||||
color: #00FFFF;
|
||||
}
|
||||
|
||||
p:has(> img)+p:has(> i) {
|
||||
font-size: smaller;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.banner {
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
color: #1c1b28;
|
||||
background-color: #00FFFF;
|
||||
white-space: nowrap;
|
||||
padding: 5px;
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title::after {
|
||||
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00FFFF;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="title">
|
||||
<div class="name"><a href="/">Zackarias Montell</a></div>
|
||||
</div>
|
||||
</div>
|
||||
{{markdown}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user