morten/morten-olsen.github.io
1
0
Fork 0
mirror of https://github.com/morten-olsen/morten-olsen.github.io.git synced 2026-02-08 01:46:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Morten Olsen
2023-03-28 08:10:46 +02:00
parent 9b1a067d56
commit 7adf03c83f
44 changed files with 1780 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.eslintrc Normal file
View File

@@ -0,0 +1,12 @@
{
"extends": "@react-native-community",
"rules": {
"react/react-in-jsx-scope": 0,
"prettier/prettier": [
"error",
{
"singleQuote": true
}
]
}
}

14
.prettierrc.json Normal file
View File

@@ -0,0 +1,14 @@
{
"semi": true,
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"jsxSingleQuote": false,
"bracketSameLine": false,
"printWidth": 100,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "css",
"bracketSpacing": true,
"quoteProps": "as-needed",
"trailingComma": "all"
}

31
bin/build/data.ts Normal file
View File

@@ -0,0 +1,31 @@
import { Config } from '../../types/config';
import { Bundler } from '../bundler';
import { createArticles } from '../data/articles';
import { createPositions } from '../data/positions';
import { createProfile } from '../data/profile';
type GetDataOptions = {
cwd: string;
config: Config;
bundler: Bundler;
};
const getData = ({ cwd, config, bundler }: GetDataOptions) => ({
articles: createArticles({
cwd,
pattern: config.articles.pattern,
bundler,
}),
positions: createPositions({
cwd,
pattern: config.positions.pattern,
bundler,
}),
profile: createProfile({
cwd,
path: config.profile.path,
bundler,
}),
});
export { getData };

99
bin/build/index.ts
View File

@@ -1,47 +1,33 @@
import { resolve } from "path";
import { createReact } from "../resources/react";
import { Observable, getCollectionItems } from "../observable";
import { createPage } from "../resources/page";
import { createArticles } from "../data/articles";
import { Bundler } from "../bundler";
import { forEach } from "../utils/observable";
import { createEjs } from "../resources/ejs";
import { createLatex } from "../resources/latex";
import { markdownToLatex } from "../utils/markdown";
import { createPositions } from "../data/positions";
import { createProfile } from "../data/profile";
import { Position } from "../../types";
import { resolve } from 'path';
import { Observable, getCollectionItems } from '../observable';
import { createPage } from '../resources/page';
import { Bundler } from '../bundler';
import { forEach } from '../utils/observable';
import { createLatex } from '../resources/latex';
import { markdownToLatex } from '../utils/markdown';
import { Position } from '../../types';
import { Config } from '../../types/config';
import { getTemplates } from './templates';
import { getData } from './data';
const build = async () => {
const build = async (cwd: string, config: Config) => {
const bundler = new Bundler();
const articles = createArticles({
bundler,
});
const positions = createPositions({
bundler,
});
const profile = createProfile({
const data = getData({
cwd,
config,
bundler,
});
const templates = getTemplates(cwd, config);
const latex = {
article: createEjs(resolve("content/templates/latex/article.tex")),
resume: createEjs(resolve("content/templates/latex/resume.tex")),
};
const react = {
article: createReact(resolve("content/templates/react/article.tsx")),
frontpage: createReact(resolve("content/templates/react/frontpage.tsx")),
};
const resumeProps = Observable.combine({
articles: articles.pipe(getCollectionItems),
positions: positions.pipe(async (positions) => {
const resumeData = Observable.combine({
articles: data.articles.pipe(getCollectionItems),
// TODO: collection observer
positions: data.positions.pipe(async (positions) => {
const result: Position[] = [];
for (const a of positions) {
const item = await a.data;
const content = markdownToLatex({
root: resolve("content"),
root: resolve('content'),
content: item.raw,
});
result.push({
@@ -51,38 +37,43 @@ const build = async () => {
}
return result;
}),
profile,
profile: data.profile,
});
resumeData.subscribe(() => {
console.log('resume');
});
const resumeUrl = createLatex({
bundler,
path: "/resume",
data: resumeProps,
template: latex.resume,
path: '/resume',
data: resumeData,
template: templates.latex.resume,
});
{
const props = Observable.combine({
articles: articles.pipe(getCollectionItems),
positions: positions.pipe(getCollectionItems),
profile,
resumeUrl: new Observable(async () => resumeUrl),
articles: data.articles.pipe(getCollectionItems),
positions: data.positions.pipe(getCollectionItems),
profile: data.profile,
resumeUrl: Observable.link([resumeUrl.item], async () => resumeUrl.url),
});
createPage({
path: "/",
path: '/',
props,
template: react.frontpage,
template: templates.react.frontpage,
bundler,
});
}
await forEach(articles, async (article) => {
await forEach(data.articles, async (article) => {
const { slug } = await article.data;
const pdfUrl = createLatex({
const pdf = createLatex({
bundler,
path: resolve("/articles", slug),
template: latex.article,
path: resolve('/articles', slug),
template: templates.latex.article,
data: Observable.combine({
profile: data.profile,
article: article.pipe(async ({ title, cover, root, raw }) => {
const body = markdownToLatex({
root,
@@ -98,14 +89,16 @@ const build = async () => {
});
const props = Observable.combine({
article,
profile,
pdfUrl: new Observable(async () => pdfUrl),
resumeUrl: new Observable(async () => resumeUrl),
profile: data.profile,
pdfUrl: Observable.link([pdf.item], async () => pdf.url),
});
article.subscribe(() => {
console.log('updated', slug);
});
createPage({
path: `/articles/${slug}`,
props,
template: react.article,
template: templates.react.article,
bundler,
});
});

17
bin/build/templates.ts Normal file
View File

@@ -0,0 +1,17 @@
import { resolve } from 'path';
import { Config } from '../../types/config';
import { createEjs } from '../resources/ejs';
import { createReact } from '../resources/react';
const getTemplates = (cwd: string, config: Config) => ({
latex: {
article: createEjs(resolve(cwd, config.articles.latex.template)),
resume: createEjs(resolve(cwd, config.resume.latex.template)),
},
react: {
article: createReact(resolve(cwd, config.articles.react.template)),
frontpage: createReact(resolve(cwd, config.frontpage.react.template)),
},
});
export { getTemplates };

8
bin/bundler/index.ts
View File

@@ -1,5 +1,5 @@
import { resolve } from "path";
import { Observable } from "../observable";
import { resolve } from 'path';
import { Observable } from '../observable';
type Asset = {
content: string | Buffer;
@@ -17,7 +17,7 @@ class Bundler {
}
public register = (path: string, asset: Observable<Asset>) => {
const realPath = resolve("/", path);
const realPath = resolve('/', path);
if (!this.#assets.has(realPath)) {
this.#assets.set(realPath, asset);
}
@@ -25,7 +25,7 @@ class Bundler {
};
public get = (path: string) => {
const realPath = resolve("/", path);
const realPath = resolve('/', path);
return this.#assets.get(realPath);
};
}

27
bin/data/articles/index.ts
View File

@@ -1,19 +1,22 @@
import { createGlob } from "../../resources/glob";
import { createFile } from "../../resources/file";
import grayMatter from "gray-matter";
import { Article } from "../../../types/article";
import { Bundler } from "../../bundler";
import { markdownBundleImages } from "../../utils/markdown";
import { dirname, resolve } from "path";
import { createImage } from "../../resources/image";
import { createGlob } from '../../resources/glob';
import { createFile } from '../../resources/file';
import grayMatter from 'gray-matter';
import { Article } from '../../../types/article';
import { Bundler } from '../../bundler';
import { markdownBundleImages } from '../../utils/markdown';
import { dirname, resolve } from 'path';
import { createImage } from '../../resources/image';
type ArticleOptions = {
cwd: string;
pattern: string;
bundler: Bundler;
};
const createArticles = ({ bundler }: ArticleOptions) => {
const createArticles = ({ bundler, cwd, pattern }: ArticleOptions) => {
const files = createGlob({
pattern: "content/articles/**/*.md",
pattern,
cwd,
create: (path) => {
const file = createFile({ path });
const article = file.pipe(async (raw) => {
@@ -27,12 +30,12 @@ const createArticles = ({ bundler }: ArticleOptions) => {
});
const coverUrl = createImage({
image: resolve(cwd, cover),
format: "avif",
format: 'avif',
bundler,
});
const thumbUrl = createImage({
image: resolve(cwd, cover),
format: "avif",
format: 'avif',
width: 400,
bundler,
});

24
bin/data/positions/index.ts
View File

@@ -1,20 +1,24 @@
import { createGlob } from "../../resources/glob";
import { createFile } from "../../resources/file";
import grayMatter from "gray-matter";
import { Bundler } from "../../bundler";
import { markdownBundleImages } from "../../utils/markdown";
import { dirname } from "path";
import { Position } from "../../../types";
import { Observable } from "../../observable";
import { createGlob } from '../../resources/glob';
import { createFile } from '../../resources/file';
import grayMatter from 'gray-matter';
import { Bundler } from '../../bundler';
import { markdownBundleImages } from '../../utils/markdown';
import { dirname } from 'path';
import { Position } from '../../../types';
import { Observable } from '../../observable';
type PositionOptions = {
cwd: string;
pattern: string;
bundler: Bundler;
};
const createPositions = ({ bundler }: PositionOptions) => {
const createPositions = ({ cwd, pattern, bundler }: PositionOptions) => {
const files = createGlob<Observable<Position>>({
pattern: "content/resume/positions/**/*.md",
pattern,
cwd,
create: (path) => {
console.log('c', path);
const file = createFile({ path });
const position = file.pipe(async (raw) => {
const { data, content } = grayMatter(raw);

22
bin/data/profile/index.ts
View File

@@ -1,27 +1,29 @@
import { resolve } from "path";
import { createFile } from "../../resources/file";
import YAML from "yaml";
import { Bundler } from "../../bundler";
import { Profile } from "../../../types";
import { createImage } from "../../resources/image";
import { resolve } from 'path';
import { createFile } from '../../resources/file';
import YAML from 'yaml';
import { Bundler } from '../../bundler';
import { Profile } from '../../../types';
import { createImage } from '../../resources/image';
type ProfileOptions = {
path: string;
cwd: string;
bundler: Bundler;
};
const createProfile = ({ bundler }: ProfileOptions) => {
const createProfile = ({ cwd, path, bundler }: ProfileOptions) => {
const file = createFile({
path: resolve("content/profile.yml"),
path: resolve(cwd, path),
});
const profile = file.pipe(async (yaml) => {
const data = YAML.parse(yaml);
const imagePath = resolve("content", data.image);
const imagePath = resolve('content', data.image);
const result: Profile = {
...data,
imageUrl: createImage({
image: imagePath,
format: "avif",
format: 'webp',
bundler,
}),
imagePath,

39
bin/dev/server.ts
View File

@@ -1,6 +1,6 @@
import express, { Express } from "express";
import { Bundler } from "../bundler";
import { extname } from "path";
import express, { Express } from 'express';
import { Bundler } from '../bundler';
import { extname } from 'path';
const createServer = (bundler: Bundler): Express => {
const app = express();
@@ -8,35 +8,40 @@ const createServer = (bundler: Bundler): Express => {
let path = req.path;
let asset = bundler.get(path);
if (!asset) {
path = path.endsWith("/") ? path + "index.html" : path + "/index.html";
path = path.endsWith('/') ? path + 'index.html' : path + '/index.html';
asset = bundler.get(path);
}
if (asset) {
const ext = extname(path);
asset.data.then((data) => {
if (ext === ".html") {
asset.data
.then((data) => {
if (ext === '.html') {
const unsubscribe = asset!.subscribe(async () => {
await asset?.data;
unsubscribe();
res.end(`<script>window.location.reload()</script>`);
res.end('<script>window.location.reload()</script>');
});
res.on("close", unsubscribe);
res.on("finish", unsubscribe);
res.on("error", unsubscribe);
res.on('close', unsubscribe);
res.on('finish', unsubscribe);
res.on('error', unsubscribe);
res.writeHead(200, {
"content-type": "text/html;charset=utf-8",
"Cache-Control": "no-cache, no-store, must-revalidate",
Pragma: "no-cache",
Expires: "0",
"keep-alive": "timeout=5, max=100",
'content-type': 'text/html;charset=utf-8',
'Cache-Control': 'no-cache, no-store, must-revalidate',
Pragma: 'no-cache',
Expires: '0',
'keep-alive': 'timeout=5, max=100',
});
res.write(data.content.toString().replace("</html>", ""));
res.write(data.content.toString().replace('</html>', ''));
} else {
res.send(data.content);
}
})
.catch((err) => {
console.error(err);
res.status(500).send(err.message);
});
} else {
res.status(404).send("Not found");
res.status(404).send('Not found');
}
});

40
bin/index.ts
View File

@@ -1,21 +1,35 @@
import { program } from "commander";
import { build } from "./build";
import { createServer } from "./dev/server";
import { dirname, join, resolve } from "path";
import { mkdir, rm, writeFile } from "fs/promises";
import { existsSync } from "fs";
import { program } from 'commander';
import { build } from './build';
import { createServer } from './dev/server';
import { dirname, join, resolve } from 'path';
import { mkdir, rm, writeFile } from 'fs/promises';
import { existsSync } from 'fs';
const dev = program.command("dev");
dev.action(async () => {
const bundler = await build();
const getConfig = (path: string) => {
const resolved = resolve(path);
const module = require(resolved);
const config = module.default || module;
return {
cwd: dirname(resolved),
config,
};
};
const dev = program.command('dev');
dev.argument('<config>', 'Path to config file');
dev.action(async (configLocation) => {
const { cwd, config } = getConfig(configLocation);
const bundler = await build(cwd, config);
const server = createServer(bundler);
server.listen(3000);
});
const bundle = program.command("build");
bundle.action(async () => {
const bundler = await build();
const outputDir = resolve("out");
const bundle = program.command('build');
bundle.argument('<config>', 'Path to config file');
bundle.action(async (configLocation) => {
const { cwd, config } = getConfig(configLocation);
const bundler = await build(cwd, config);
const outputDir = resolve('out');
if (existsSync(outputDir)) {
rm(outputDir, { recursive: true });
}

20
bin/observable/index.test.ts
View File

@@ -1,15 +1,15 @@
import { Observable } from "./observable";
import { getCollectionItems } from "./utils";
import { Observable } from './observable';
import { getCollectionItems } from './utils';
describe("observable", () => {
it("should be able to create an observable", async () => {
describe('observable', () => {
it('should be able to create an observable', async () => {
const observable = new Observable(() => Promise.resolve(1));
expect(observable).toBeDefined();
const data = await observable.data;
expect(data).toBe(1);
});
it("should be able to combine observables", async () => {
it('should be able to combine observables', async () => {
const observable1 = new Observable(() => Promise.resolve(1));
const observable2 = new Observable(() => Promise.resolve(2));
const combined = Observable.combine({ observable1, observable2 });
@@ -18,7 +18,7 @@ describe("observable", () => {
expect(data.observable2).toBe(2);
});
it("should be able to update observable", async () => {
it('should be able to update observable', async () => {
const observable = new Observable(() => Promise.resolve(1));
const data = await observable.data;
expect(data).toBe(1);
@@ -27,20 +27,20 @@ describe("observable", () => {
expect(data2).toBe(2);
});
it("should be able to extract collection items", async () => {
it('should be able to extract collection items', async () => {
const observable = new Observable(() =>
Promise.resolve([
new Observable(() => Promise.resolve(1)),
new Observable(() => Promise.resolve(2)),
new Observable(() => Promise.resolve(3)),
])
]),
);
const flatten = observable.pipe(getCollectionItems);
const data = await flatten.data;
expect(data).toEqual([1, 2, 3]);
});
it("should update observable when subscribed", async () => {
it('should update observable when subscribed', async () => {
const observable = new Observable(() => Promise.resolve(1));
const spy = jest.fn();
observable.subscribe(spy);
@@ -50,7 +50,7 @@ describe("observable", () => {
expect(spy).toHaveBeenCalledTimes(1);
});
it("should update combined observable when subscribed", async () => {
it('should update combined observable when subscribed', async () => {
const observable1 = new Observable(() => Promise.resolve(1));
const observable2 = new Observable(() => Promise.resolve(2));
const combined = Observable.combine({ observable1, observable2 });

4
bin/observable/index.ts
View File

@@ -1,2 +1,2 @@
export { Observable } from "./observable";
export { getCollectionItems } from "./utils";
export { Observable } from './observable';
export { getCollectionItems } from './utils';

14
bin/observable/observable.ts
View File

@@ -58,7 +58,7 @@ class Observable<T> {
};
static combine = <U extends Record<string, Observable<any>>>(
record: U
record: U,
): Observable<ObservableRecord<U>> => {
const loader = () =>
Object.entries(record).reduce(
@@ -66,7 +66,7 @@ class Observable<T> {
...(await accP),
[key]: await value.data,
}),
{} as any
{} as any,
);
const observable = new Observable<ObservableRecord<U>>(loader);
Object.values(record).forEach((item) => {
@@ -76,6 +76,16 @@ class Observable<T> {
});
return observable;
};
static link = <T>(observables: Observable<any>[], generate: () => Promise<T>) => {
const observable = new Observable<T>(generate);
observables.forEach((item) => {
item.subscribe(() => {
observable.recreate();
});
});
return observable;
};
}
export { Observable };

2
bin/observable/utils.ts
View File

@@ -1,4 +1,4 @@
import { Observable } from "./observable";
import { Observable } from './observable';
const getCollectionItems = async <T>(items: Observable<T>[]) => {
return Promise.all(items.map((item) => item.data));

4
bin/resources/ejs/index.ts
View File

@@ -1,5 +1,5 @@
import { createFile } from "../file";
import ejs from "ejs";
import { createFile } from '../file';
import ejs from 'ejs';
const createEjs = (path: string) => {
const file = createFile({ path });

22
bin/resources/file/index.ts
View File

@@ -1,16 +1,26 @@
import { readFile } from "fs/promises";
import { Observable } from "../../observable";
import { watch } from "fs";
import { readFile } from 'fs/promises';
import { Observable } from '../../observable';
import { watch } from 'fs';
type FileOptions = {
path: string;
};
const createFile = ({ path }: FileOptions) => {
const file = new Observable(async () => readFile(path, "utf-8"));
watch(path, () => {
let watcher: ReturnType<typeof watch> | undefined;
const addWatcher = () => {
if (watcher) {
watcher.close();
}
watcher = watch(path, () => {
file.recreate();
addWatcher();
});
};
const file = new Observable(async () => {
addWatcher();
return readFile(path, 'utf-8');
});
return file;

21
bin/resources/glob/index.ts
View File

@@ -1,28 +1,25 @@
import fastGlob from "fast-glob";
import watchGlob from "glob-watcher";
import { Observable } from "../../observable";
import fastGlob from 'fast-glob';
import watchGlob from 'glob-watcher';
import { Observable } from '../../observable';
import { resolve } from 'path';
type GlobOptions<T> = {
cwd?: string;
cwd: string;
pattern: string;
create?: (path: string) => T;
};
const defaultCreate = (a: any) => a;
const createGlob = <T = string>({
cwd,
pattern,
create = defaultCreate,
}: GlobOptions<T>) => {
const createGlob = <T = string>({ cwd, pattern, create = defaultCreate }: GlobOptions<T>) => {
const glob = new Observable(async () => {
const files = await fastGlob(pattern, { cwd });
return files.map(create);
return files.map((path) => create(resolve(cwd, path)));
});
const watcher = watchGlob(pattern, { cwd });
watcher.on("add", (path) => {
glob.set((current) => Promise.resolve([...(current || []), create(path)]));
watcher.on('add', (path) => {
glob.set((current) => Promise.resolve([...(current || []), create(resolve(cwd, path))]));
return glob;
});

11
bin/resources/image/index.ts
View File

@@ -1,7 +1,7 @@
import { createHash } from "crypto";
import { Asset, Bundler } from "../../bundler";
import { Observable } from "../../observable";
import sharp, { FormatEnum } from "sharp";
import { createHash } from 'crypto';
import { Asset, Bundler } from '../../bundler';
import { Observable } from '../../observable';
import sharp, { FormatEnum } from 'sharp';
type ImageOptions = {
format: keyof FormatEnum;
@@ -13,8 +13,7 @@ type ImageOptions = {
};
const createImage = (options: ImageOptions) => {
let path =
options.name || createHash("sha256").update(options.image).digest("hex");
let path = options.name || createHash('sha256').update(options.image).digest('hex');
if (options.width) {
path += `-w${options.width}`;
}

14
bin/resources/latex/index.ts
View File

@@ -1,7 +1,7 @@
import { Asset, Bundler } from "../../bundler";
import { Observable } from "../../observable";
import { createEjs } from "../ejs";
import { latexToPdf } from "./utils";
import { Asset, Bundler } from '../../bundler';
import { Observable } from '../../observable';
import { createEjs } from '../ejs';
import { latexToPdf } from './utils';
type LatexOptions = {
path: string;
@@ -23,7 +23,11 @@ const createLatex = ({ template, data, path, bundler }: LatexOptions) => {
};
return asset;
});
return bundler.register(`${path}.pdf`, pdf);
const url = bundler.register(`${path}.pdf`, pdf);
return {
url,
item: pdf,
};
};
export { createLatex };

10
bin/resources/latex/utils.ts
View File

@@ -1,5 +1,5 @@
import latex from "node-latex";
import { Readable } from "stream";
import latex from 'node-latex';
import { Readable } from 'stream';
const latexToPdf = (doc: string) =>
new Promise<Buffer>((resolve, reject) => {
@@ -8,14 +8,14 @@ const latexToPdf = (doc: string) =>
input.push(doc);
input.push(null);
const latexStream = latex(input);
latexStream.on("data", (chunk) => {
latexStream.on('data', (chunk) => {
chunks.push(Buffer.from(chunk));
});
latexStream.on("finish", () => {
latexStream.on('finish', () => {
const result = Buffer.concat(chunks);
resolve(result);
});
latexStream.on("error", (err) => {
latexStream.on('error', (err) => {
reject(err);
});
});

22
bin/resources/page/index.ts
View File

@@ -1,10 +1,10 @@
import React, { ComponentType } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { HelmetProvider, FilledContext } from "react-helmet-async";
import { Asset, Bundler } from "../../bundler";
import { Observable } from "../../observable";
import { ServerStyleSheet } from "styled-components";
import { resolve } from "path";
import React, { ComponentType } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { HelmetProvider, FilledContext } from 'react-helmet-async';
import { Asset, Bundler } from '../../bundler';
import { Observable } from '../../observable';
import { ServerStyleSheet } from 'styled-components';
import { resolve } from 'path';
type PageOptions = {
path: string;
@@ -24,8 +24,8 @@ const createPage = (options: PageOptions) => {
React.createElement(
HelmetProvider,
{ context: helmetContext },
React.createElement(template, props)
)
React.createElement(template, props),
),
);
const bodyHtml = renderToStaticMarkup(body);
const { helmet } = helmetContext;
@@ -40,7 +40,7 @@ const createPage = (options: PageOptions) => {
helmet.script?.toString(),
]
.filter(Boolean)
.join("");
.join('');
const html = `<!DOCTYPE html>
<html lang="en">
<head>
@@ -55,7 +55,7 @@ const createPage = (options: PageOptions) => {
return asset;
});
const path = resolve("/", options.path, "index.html");
const path = resolve('/', options.path, 'index.html');
return options.bundler.register(path, page);
};

52
bin/resources/react/index.ts
View File

@@ -1,27 +1,27 @@
import vm from "vm";
import React, { ComponentType } from "react";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import replace from "@rollup/plugin-replace";
import sucrase from "@rollup/plugin-sucrase";
import alias from "@rollup/plugin-alias";
import externalGlobals from "rollup-plugin-external-globals";
import { createScript } from "../script";
import orgStyled from "styled-components";
import * as styledExports from "styled-components";
import ReactHelmetAsync from "react-helmet-async";
import { resolve } from "path";
import vm from 'vm';
import React, { ComponentType } from 'react';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import sucrase from '@rollup/plugin-sucrase';
import alias from '@rollup/plugin-alias';
import externalGlobals from 'rollup-plugin-external-globals';
import { createScript } from '../script';
import orgStyled from 'styled-components';
import * as styledExports from 'styled-components';
import ReactHelmetAsync from 'react-helmet-async';
import { resolve } from 'path';
const styled = orgStyled.bind(null);
for (let key of Object.keys(orgStyled)) {
if (key === "default") {
if (key === 'default') {
continue;
}
(styled as any)[key] = (orgStyled as any)[key];
}
for (let key of Object.keys(styledExports)) {
if (key === "default") {
if (key === 'default') {
continue;
}
(styled as any)[key] = (styledExports as any)[key];
@@ -30,34 +30,32 @@ for (let key of Object.keys(styledExports)) {
const createReact = <TProps = any>(path: string) => {
const script = createScript({
path,
format: "cjs",
format: 'cjs',
plugins: [
replace({
preventAssignment: true,
"process.env.NODE_ENV": JSON.stringify("production"),
'process.env.NODE_ENV': JSON.stringify('production'),
}),
alias({
entries: [
{ find: "@", replacement: resolve("content/templates/react") },
],
entries: [{ find: '@', replacement: resolve('content/templates/react') }],
}),
sucrase({
exclude: ["node_modules/**"],
transforms: ["jsx", "typescript"],
exclude: ['node_modules/**'],
transforms: ['jsx', 'typescript'],
}),
nodeResolve({
browser: true,
preferBuiltins: false,
extensions: [".js", ".ts", ".tsx"],
extensions: ['.js', '.ts', '.tsx'],
}),
json(),
commonjs({
include: /node_modules/,
}),
externalGlobals({
react: "React",
"styled-components": "StyledComponents",
"react-helmet-async": "ReactHelmetAsync",
react: 'React',
'styled-components': 'StyledComponents',
'react-helmet-async': 'ReactHelmetAsync',
}),
],
});

12
bin/resources/script/index.ts
View File

@@ -1,5 +1,5 @@
import { Observable } from "../../observable";
import { InputPluginOption, ModuleFormat, watch } from "rollup";
import { Observable } from '../../observable';
import { InputPluginOption, ModuleFormat, watch } from 'rollup';
type ScriptOptions = {
path: string;
@@ -22,8 +22,8 @@ const build = (options: ScriptOptions, update: (code: string) => void) =>
},
});
watcher.on("event", async (event) => {
if (event.code === "BUNDLE_END") {
watcher.on('event', async (event) => {
if (event.code === 'BUNDLE_END') {
const { output } = await event.result.generate({
format: options.format,
});
@@ -35,7 +35,7 @@ const build = (options: ScriptOptions, update: (code: string) => void) =>
update(code);
}
}
if (event.code === "ERROR") {
if (event.code === 'ERROR') {
reject(event.error);
}
});
@@ -43,7 +43,7 @@ const build = (options: ScriptOptions, update: (code: string) => void) =>
const createScript = (options: ScriptOptions) => {
const script: Observable<string> = new Observable(() =>
build(options, (code) => script.set(() => Promise.resolve(code)))
build(options, (code) => script.set(() => Promise.resolve(code))),
);
return script;

30
bin/utils/markdown/index.ts
View File

@@ -1,11 +1,11 @@
import { resolve } from "path";
import { decode } from "html-entities";
import { marked } from "marked";
import remark from "remark";
import visit from "unist-util-visit";
import { Bundler } from "../../bundler";
import { createImage } from "../../resources/image";
import { renderer } from "./latex";
import { resolve } from 'path';
import { decode } from 'html-entities';
import { marked } from 'marked';
import remark from 'remark';
import visit from 'unist-util-visit';
import { Bundler } from '../../bundler';
import { createImage } from '../../resources/image';
import { renderer } from './latex';
type MarkdownBundleImagesOptions = {
cwd: string;
@@ -13,15 +13,11 @@ type MarkdownBundleImagesOptions = {
bundler: Bundler;
};
const markdownBundleImages = async ({
bundler,
cwd,
content,
}: MarkdownBundleImagesOptions) => {
const markdownBundleImages = async ({ bundler, cwd, content }: MarkdownBundleImagesOptions) => {
const result = await remark()
.use(() => (tree) => {
visit(tree, "image", (node) => {
if (!("url" in node)) {
visit(tree, 'image', (node) => {
if (!('url' in node)) {
return;
}
const url = node.url as string;
@@ -29,7 +25,7 @@ const markdownBundleImages = async ({
const image = createImage({
image: path,
bundler,
format: "webp",
format: 'avif',
});
const newUrl = image;
node.url = newUrl;
@@ -46,7 +42,7 @@ type MarkdownToLatexOptions = {
const markdownToLatex = ({ root, content }: MarkdownToLatexOptions) => {
const render: any = {
...renderer(0),
...renderer(0, root),
};
const latex = marked(content, {
renderer: render,

34
bin/utils/markdown/latex.ts
View File

@@ -1,19 +1,20 @@
import { decode } from "html-entities";
import { existsSync } from "fs";
import { decode } from 'html-entities';
import { existsSync } from 'fs';
import { resolve } from 'path';
const latexTypes = ["", "section", "subsection", "paragraph", "subparagraph"];
const latexTypes = ['', 'section', 'subsection', 'paragraph', 'subparagraph'];
const sanitize = (text?: string) => {
if (!text) {
return "";
return '';
}
return decode(text)
.replace("&", "\\&")
.replace("_", "\\_")
.replace(/([^\\])\}/g, "$1\\}")
.replace(/([^\\])\{/g, "$1\\{")
.replace(/[^\\]\[/g, "\\[")
.replace(/#/g, "\\#");
.replace('&', '\\&')
.replace('_', '\\_')
.replace(/([^\\])\}/g, '$1\\}')
.replace(/([^\\])\{/g, '$1\\{')
.replace(/[^\\]\[/g, '\\[')
.replace(/#/g, '\\#');
};
type Renderer = (depth: number) => {
@@ -30,7 +31,7 @@ type Renderer = (depth: number) => {
image?: (link: string) => string;
};
const renderer = (outerDepth: number) => ({
const renderer = (outerDepth: number, cwd: string) => ({
heading: (text: string, depth: number) => {
return `\\${latexTypes[outerDepth + depth]}{${sanitize(text)}}\n\n`;
},
@@ -76,13 +77,12 @@ const renderer = (outerDepth: number) => ({
return `\\texttt{${sanitize(code)}}`;
},
image: (link: string) => {
if (!existsSync(link)) {
return "Online image not supported";
const path = resolve(cwd, link);
if (!existsSync(path)) {
return `Online image not supported ${path}`;
}
return `\\begin{figure}[h!]
\\includegraphics[width=0.5\\textwidth]{${link}}
\\centering
\\end{figure}
return `
\\noindent\\includegraphics[width=\\linewidth]{${path}}
`;
},
});

10
bin/utils/observable/index.ts
View File

@@ -1,14 +1,10 @@
import { Observable } from "../../observable";
import { Observable } from '../../observable';
const forEach = async <T extends Observable<any[]>>(
observable: T,
fn: (
value: T extends Observable<infer U>
? U extends Array<infer A>
? A
: never
: never
) => Promise<void>
value: T extends Observable<infer U> ? (U extends Array<infer A> ? A : never) : never,
) => Promise<void>,
) => {
const knownValues = new Set();
const update = async () => {

31
content/config.ts Normal file
View File

@@ -0,0 +1,31 @@
import { Config } from '../types/config';
const config: Config = {
profile: {
path: 'profile.yml',
},
frontpage: {
react: {
template: 'templates/react/pages/frontpage/index.tsx',
},
},
resume: {
latex: {
template: 'templates/latex/resume.tex',
},
},
articles: {
pattern: 'articles/**/*.md',
react: {
template: 'templates/react/pages/article/index.tsx',
},
latex: {
template: 'templates/latex/article.tex',
},
},
positions: {
pattern: 'resume/positions/**/*.md',
},
};
export default config;

2
content/resume/positions/zeronorth/main.md
View File

@@ -5,4 +5,4 @@ from: 2022
to: Present
---
Hello world
// TODO

23
content/templates/latex/article.tex
View File

@@ -1,9 +1,28 @@
\documentclass{article}
\usepackage[top=2cm, bottom=2cm, left=2cm, right=2cm]{geometry}
\usepackage{graphicx}
\usepackage{hyperref}
\usepackage{multicol}
\usepackage{fancyhdr}
\pagestyle{fancy}
\fancyhf{}
\rhead{<%-profile.name%> \today}
\lhead{<%-article.title%>}
\rfoot{Page \thepage}
\title{<%-article.title%>}
\begin{document}
\maketitle
\includegraphics[width=0.5\textwidth]{<%-article.cover%>}
\begin{multicols}{2}
\noindent\begin{minipage}{\linewidth}
\Huge{<%-article.title%>}
\newline
\large{By <%-profile.name%>}
\vspace{0.5cm}\\
\includegraphics[width=\linewidth]{<%-article.cover%>}
\vspace{1.5cm}
\end{minipage}
<%-article.body%>
\end{multicols}
\end{document}

14
content/templates/react/components/article/grid/index.tsx
View File

@@ -1,9 +1,9 @@
import React, { useMemo } from "react";
import styled from "styled-components";
import ArticlePreview from "../preview";
import { JumboArticlePreview } from "../preview/jumbo";
import { MiniArticlePreview } from "../preview/mini";
import { Article } from "types";
import React, { useMemo } from 'react';
import styled from 'styled-components';
import ArticlePreview from '../preview';
import { JumboArticlePreview } from '../preview/jumbo';
import { MiniArticlePreview } from '../preview/mini';
import { Article } from 'types';
type Props = {
articles: Article[];
@@ -47,7 +47,7 @@ const ArticleGrid: React.FC<Props> = ({ articles }) => {
// new Date(b.published).getTime() -
// new Date(a.published).getTime()
// ),
[articles]
[articles],
);
const featured1 = useMemo(() => sorted.slice(0, 1)[0], [sorted]);

20
content/templates/react/components/article/preview/index.tsx
View File

@@ -1,9 +1,9 @@
import React, { useMemo } from "react";
import styled from "styled-components";
import { Title1 } from "@/typography";
import { createTheme } from "@/theme/create";
import { ThemeProvider } from "@/theme/provider";
import { Article } from "types";
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Title1 } from '@/typography';
import { createTheme } from '@/theme/create';
import { ThemeProvider } from '@/theme/provider';
import { Article } from 'types';
type Props = {
article: Article;
@@ -28,7 +28,7 @@ const Wrapper = styled.a`
const Title = styled(Title1)`
background: ${({ theme }) => theme.colors.primary};
line-height: 40px;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
font-size: 25px;
padding: 0 5px;
margin: 5px 0;
@@ -48,7 +48,7 @@ const AsideWrapper = styled.aside<{
background: ${({ theme }) => theme.colors.primary};
background-size: cover;
background-position: center;
${({ image }) => (image ? `background-image: url(${image});` : "")}
${({ image }) => (image ? `background-image: url(${image});` : '')}
flex: 1;
top: 0;
bottom: 0;
@@ -63,14 +63,14 @@ const ArticlePreview: React.FC<Props> = ({ article }) => {
createTheme({
baseColor: article.color,
}),
[article.color]
[article.color],
);
return (
<ThemeProvider theme={theme}>
<Wrapper href={`/articles/${article.slug}`}>
<AsideWrapper image={article.thumbUrl} />
<MetaWrapper>
{article.title.split(" ").map((word, index) => (
{article.title.split(' ').map((word, index) => (
<Title key={index}>{word}</Title>
))}
</MetaWrapper>

12
content/templates/react/components/article/preview/jumbo.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { Title1, Body1 } from "@/typography";
import { Article } from "types";
import React from 'react';
import styled from 'styled-components';
import { Title1, Body1 } from '@/typography';
import { Article } from 'types';
type Props = {
article: Article;
@@ -24,7 +24,7 @@ const Wrapper = styled.a`
const Title = styled(Title1)`
line-height: 40px;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
font-size: 25px;
padding: 0 5px;
margin: 5px 0;
@@ -55,7 +55,7 @@ const AsideWrapper = styled.aside<{
background: ${({ theme }) => theme.colors.primary};
background-size: cover;
background-position: center;
${({ image }) => (image ? `background-image: url(${image});` : "")}
${({ image }) => (image ? `background-image: url(${image});` : '')}
flex: 1;
top: 0;
bottom: 0;

20
content/templates/react/components/article/preview/mini.tsx
View File

@@ -1,9 +1,9 @@
import React, { useMemo } from "react";
import styled from "styled-components";
import { Title1 } from "@/typography";
import { createTheme } from "@/theme/create";
import { ThemeProvider } from "@/theme/provider";
import { Article } from "types";
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Title1 } from '@/typography';
import { createTheme } from '@/theme/create';
import { ThemeProvider } from '@/theme/provider';
import { Article } from 'types';
type Props = {
article: Article;
@@ -26,7 +26,7 @@ const Title = styled(Title1)`
line-height: 20px;
font-size: 20px;
padding: 5px 5px;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
margin: 5px 0;
background: ${({ theme }) => theme.colors.background};
`;
@@ -46,7 +46,7 @@ const AsideWrapper = styled.aside<{
background: ${({ theme }) => theme.colors.primary};
background-size: cover;
background-position: center;
${({ image }) => (image ? `background-image: url(${image});` : "")}
${({ image }) => (image ? `background-image: url(${image});` : '')}
position: absolute;
top: 0;
bottom: 0;
@@ -61,14 +61,14 @@ const MiniArticlePreview: React.FC<Props> = ({ article }) => {
createTheme({
baseColor: article.color,
}),
[article.color]
[article.color],
);
return (
<ThemeProvider theme={theme}>
<Wrapper href={`/articles/${article.slug}`}>
<AsideWrapper image={article.thumbUrl} />
<MetaWrapper>
{article.title.split(" ").map((word, index) => (
{article.title.split(' ').map((word, index) => (
<Title key={index}>{word}</Title>
))}
</MetaWrapper>

7
content/templates/react/components/html/index.tsx
View File

@@ -1,4 +1,4 @@
import { FC, ReactNode } from "react"
import { FC, ReactNode } from 'react';
type HtmlProps = {
body: ReactNode;
@@ -18,7 +18,10 @@ const Html: FC<HtmlProps> = ({ body, head, scripts }) => {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Black+Ops+One&family=Merriweather:wght@400;700&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Black+Ops+One&family=Merriweather:wght@400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="root">{body}</div>

12
content/templates/react/components/sheet/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { ReactNode, useMemo } from "react";
import styled from "styled-components";
import { createTheme } from "@/theme/create";
import { ThemeProvider } from "@/theme/provider";
import React, { ReactNode, useMemo } from 'react';
import styled from 'styled-components';
import { createTheme } from '@/theme/create';
import { ThemeProvider } from '@/theme/provider';
const Wrapper = styled.div`
background: ${({ theme }) => theme.colors.background};
@@ -25,7 +25,7 @@ const BackgroundWrapper = styled.div<{
background-size: cover;
background-position: center;
opacity: 0.2;
${({ image }) => (image ? `background-image: url(${image});` : "")}
${({ image }) => (image ? `background-image: url(${image});` : '')}
`;
const Content = styled.div`
@@ -50,7 +50,7 @@ const Sheet: React.FC<Props> = ({ color, background, children }) => {
createTheme({
baseColor: color,
}),
[color]
[color],
);
return (
<ThemeProvider theme={theme}>

42
content/templates/react/article.tsx → content/templates/react/pages/article/index.tsx
View File

@@ -1,9 +1,9 @@
import styled, { createGlobalStyle } from "styled-components";
import ReactMarkdown from "react-markdown";
import { Jumbo } from "./typography";
import { createTheme, ThemeProvider } from "./theme";
import { Helmet } from "react-helmet-async";
import { Page } from "types";
import styled, { createGlobalStyle } from 'styled-components';
import ReactMarkdown from 'react-markdown';
import { Jumbo } from '../../typography';
import { createTheme, ThemeProvider } from '../../theme';
import { Helmet } from 'react-helmet-async';
import { Page } from 'types';
const GlobalStyle = createGlobalStyle`
* { box-sizing: border-box; }
@@ -36,7 +36,7 @@ const ArticleTitleWord = styled(Jumbo)`
padding: 0 15px;
text-transform: uppercase;
margin: 10px;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
background: ${({ theme }) => theme.colors.primary};
color: ${({ theme }) => theme.colors.foreground};
@media only screen and (max-width: 900px) {
@@ -57,7 +57,7 @@ const Wrapper = styled.div`
const ArticleWrapper = styled.article`
font-size: 1.1rem;
font-family: "Merriweather", serif;
font-family: 'Merriweather', serif;
> p,
ul,
@@ -82,7 +82,7 @@ const ArticleWrapper = styled.article`
}
> p:first-of-type::first-letter {
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
border: solid 5px ${({ theme }) => theme.colors.foreground};
margin: 0 1rem 0 0;
font-size: 6rem;
@@ -118,7 +118,7 @@ const ArticleWrapper = styled.article`
padding-right: 40px;
shape-outside: padding-box;
position: relative;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
text-transform: uppercase;
display: flex;
align-items: flex-start;
@@ -132,7 +132,7 @@ const ArticleWrapper = styled.article`
&:after {
position: absolute;
content: "";
content: '';
right: 20px;
top: 0;
bottom: 0;
@@ -162,14 +162,14 @@ const ArticleWrapper = styled.article`
&:before {
color: ${({ theme }) => theme.colors.primary};
content: "\\00BB";
content: '\\00BB';
float: left;
font-size: 6rem;
}
&:after {
position: absolute;
content: "";
content: '';
right: 20px;
top: 0;
bottom: 0;
@@ -222,14 +222,14 @@ const Download = styled.a`
text-align: center;
padding: 1rem;
font-size: 1rem;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
text-transform: uppercase;
text-decoration: none;
`;
const Author = styled.a`
text-transform: uppercase;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
font-size: 2rem;
margin: 1rem;
display: inline-block;
@@ -238,7 +238,7 @@ const Author = styled.a`
color: ${({ theme }) => theme.colors.foreground};
&:after {
content: "";
content: '';
border-bottom: solid 15px ${({ theme }) => theme.colors.primary};
display: block;
width: 100%;
@@ -249,17 +249,13 @@ const Author = styled.a`
}
`;
const ArticlePage: Page<"article"> = ({ article, profile, pdfUrl }) => {
const ArticlePage: Page<'article'> = ({ article, profile, pdfUrl }) => {
return (
<ThemeProvider theme={createTheme({ baseColor: article.color })}>
<Helmet>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Black+Ops+One&family=Merriweather:wght@400;700&display=swap"
rel="stylesheet"
@@ -269,7 +265,7 @@ const ArticlePage: Page<"article"> = ({ article, profile, pdfUrl }) => {
<Wrapper>
<Content>
<Title>
{article.title.split(" ").map((word, index) => (
{article.title.split(' ').map((word, index) => (
<ArticleTitleWord key={index}>{word}</ArticleTitleWord>
))}
<Author href="/">by {profile.name}</Author>

40
content/templates/react/frontpage.tsx → content/templates/react/pages/frontpage/index.tsx
View File

@@ -1,12 +1,12 @@
import styled, { createGlobalStyle } from "styled-components";
import { ArticleGrid } from "@/components/article/grid";
import { Jumbo } from "@/typography";
import { useMemo } from "react";
import { Sheet } from "./components/sheet";
import { ThemeProvider, createTheme } from "./theme";
import chroma from "chroma-js";
import { Helmet } from "react-helmet-async";
import { Page } from "../../../types";
import styled, { createGlobalStyle } from 'styled-components';
import { ArticleGrid } from '@/components/article/grid';
import { Jumbo } from '@/typography';
import { useMemo } from 'react';
import { Sheet } from '../../components/sheet';
import { ThemeProvider, createTheme } from '@/theme';
import chroma from 'chroma-js';
import { Helmet } from 'react-helmet-async';
import { Page } from 'types';
const GlobalStyle = createGlobalStyle`
* { box-sizing: border-box; }
@@ -32,7 +32,7 @@ const Download = styled.a`
padding: 0 15px;
text-transform: uppercase;
margin: 10px;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
@media only screen and (max-width: 700px) {
margin: 5px;
font-size: 3rem;
@@ -49,7 +49,7 @@ const Title = styled(Jumbo)`
padding: 0 15px;
text-transform: uppercase;
margin: 10px;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
@media only screen and (max-width: 700px) {
margin: 5px;
font-size: 3rem;
@@ -71,7 +71,7 @@ const Arrow = styled.div`
border-radius: 50%;
width: 80px;
height: 80px;
content: "↓";
content: '↓';
font-size: 50px;
@media only screen and (max-width: 700px) {
width: 40px;
@@ -99,13 +99,13 @@ const ImageBg = styled.picture`
}
`;
const FrontPage: Page<"frontpage"> = ({ articles, profile }) => {
const FrontPage: Page<'frontpage'> = ({ articles, profile }) => {
const theme = useMemo(
() =>
createTheme({
baseColor: chroma.random().brighten(1).hex(),
}),
[]
[],
);
return (
@@ -113,11 +113,7 @@ const FrontPage: Page<"frontpage"> = ({ articles, profile }) => {
<Helmet>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Black+Ops+One&family=Merriweather:wght@400;700&display=swap"
rel="stylesheet"
@@ -130,12 +126,12 @@ const FrontPage: Page<"frontpage"> = ({ articles, profile }) => {
</ImageBg>
<Arrow />
<Hero>
{"Hi, I'm Morten".split(" ").map((char, index) => (
{"Hi, I'm Morten".split(' ').map((char, index) => (
<Title key={index}>{char}</Title>
))}
</Hero>
<Hero>
{"And I make software".split(" ").map((char, index) => (
{'And I make software'.split(' ').map((char, index) => (
<Title key={index}>{char}</Title>
))}
</Hero>
@@ -147,7 +143,7 @@ const FrontPage: Page<"frontpage"> = ({ articles, profile }) => {
</Sheet>
<Sheet color="#ef23e2">
<Hero>
{"Table of Content".split(" ").map((char, index) => (
{'Table of Content'.split(' ').map((char, index) => (
<Title key={index}>{char}</Title>
))}
</Hero>

9
content/templates/react/theme/create.ts
View File

@@ -11,13 +11,9 @@ type CreateOptions = {
const isBright = (color: chroma.Color) => color.luminance() > 0.4;
const createTheme = (options: CreateOptions = {}) => {
const baseColor = options.baseColor
? chroma(options.baseColor)
: chroma.random();
const baseColor = options.baseColor ? chroma(options.baseColor) : chroma.random();
const text = isBright(baseColor) ? BLACK : WHITE;
const bg = isBright(baseColor)
? baseColor.luminance(0.9)
: baseColor.luminance(0.01);
const bg = isBright(baseColor) ? baseColor.luminance(0.9) : baseColor.luminance(0.01);
const theme: Theme = {
typography: {
Jumbo: {
@@ -57,4 +53,3 @@ const createTheme = (options: CreateOptions = {}) => {
};
export { createTheme };

1
content/templates/react/theme/global.d.ts vendored
View File

@@ -3,4 +3,3 @@ import { Theme } from './theme';
declare module 'styled-components' {
export interface DefaultTheme extends Theme {}
}

44
content/templates/react/typography/index.tsx
View File

@@ -1,49 +1,43 @@
import styled from "styled-components";
import { Theme, Typography } from "../theme";
import styled from 'styled-components';
import { Theme, Typography } from '../theme';
interface TextProps {
color?: keyof Theme["colors"];
color?: keyof Theme['colors'];
bold?: boolean;
theme: Theme;
}
const BaseText = styled.span<TextProps>`
${({ theme }) =>
theme.font.family ? `font-family: ${theme.font.family};` : ""}
color: ${({ color, theme }) =>
color ? theme.colors[color] : theme.colors.foreground};
font-weight: ${({ bold }) => (bold ? "bold" : "normal")};
${({ theme }) => (theme.font.family ? `font-family: ${theme.font.family};` : '')}
color: ${({ color, theme }) => (color ? theme.colors[color] : theme.colors.foreground)};
font-weight: ${({ bold }) => (bold ? 'bold' : 'normal')};
font-size: ${({ theme }) => theme.font.baseSize}px;
`;
const get = (name: keyof Theme["typography"], theme: Theme): Typography => {
const get = (name: keyof Theme['typography'], theme: Theme): Typography => {
const typography = theme.typography[name];
return typography;
};
const createTypography = (name: keyof Theme["typography"]) => {
const createTypography = (name: keyof Theme['typography']) => {
const Component = styled(BaseText)<TextProps>`
font-size: ${({ theme }) =>
theme.font.baseSize * (get(name, theme).size || 1)}px;
font-size: ${({ theme }) => theme.font.baseSize * (get(name, theme).size || 1)}px;
font-weight: ${({ bold, theme }) =>
typeof bold !== "undefined"
? "bold"
: get(name, theme).weight || "normal"};
${({ theme }) =>
get(name, theme).upperCase ? "text-transform: uppercase;" : ""}
typeof bold !== 'undefined' ? 'bold' : get(name, theme).weight || 'normal'};
${({ theme }) => (get(name, theme).upperCase ? 'text-transform: uppercase;' : '')}
`;
return Component;
};
const Jumbo = createTypography("Jumbo");
const Title2 = createTypography("Title2");
const Title1 = createTypography("Title1");
const Body1 = createTypography("Body1");
const Overline = createTypography("Overline");
const Caption = createTypography("Caption");
const Link = createTypography("Link");
const Jumbo = createTypography('Jumbo');
const Title2 = createTypography('Title2');
const Title1 = createTypography('Title1');
const Body1 = createTypography('Body1');
const Overline = createTypography('Overline');
const Caption = createTypography('Caption');
const Link = createTypography('Link');
const types: { [key in keyof Theme["typography"]]: typeof BaseText } = {
const types: { [key in keyof Theme['typography']]: typeof BaseText } = {
Jumbo,
Title2,
Title1,

3
package.json
View File

@@ -43,6 +43,7 @@
"yaml": "^2.2.1"
},
"devDependencies": {
"@react-native-community/eslint-config": "^3.2.0",
"@types/chroma-js": "^2.4.0",
"@types/ejs": "^3.1.2",
"@types/express": "^4.17.17",
@@ -54,7 +55,9 @@
"@types/react-dom": "^18.0.11",
"@types/sharp": "^0.31.1",
"@types/styled-components": "^5.1.26",
"eslint": "^8.36.0",
"jest": "^29.5.0",
"prettier": "^2.8.7",
"ts-jest": "^29.0.5",
"ts-node": "^10.9.1",
"typescript": "^5.0.2"

1241
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

29
types/config.ts Normal file
View File

@@ -0,0 +1,29 @@
interface Config {
profile: {
path: string;
};
frontpage: {
react: {
template: string;
};
};
articles: {
pattern: string;
react: {
template: string;
};
latex: {
template: string;
};
};
resume: {
latex: {
template: string;
};
};
positions: {
pattern: string;
};
}
export { Config };