foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Fix TypeScript errors

Browse source
This commit is contained in:
Foster Hangdaan 2024-09-06 11:05:02 -04:00
parent e55dd81c15
commit f35c21a8c0
Signed by: foster
GPG key ID: E48D7F49A852F112
10 changed files with 72 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
_components/PostListItem.tsx
View file

@ -1,24 +1,20 @@
interface Props { export default function (data: Lume.Data) {
post: any;
}
export default function (props: Props) {
return ( return (
<li className="post-list-item"> <li className="post-list-item">
<a href={props.post.data.url} className="post-list-title"> <a href={data.post.data.url} className="post-list-title">
{props.post.data.title} {data.post.data.title}
</a> </a>
<time className="post-list-date"> <time className="post-list-date">
{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format( {Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(
props.post.data.date, data.post.data.date,
)} )}
</time> </time>
<ul className="tag-list"> <ul className="tag-list">
{props.post.data.tags.map((tag, index) => ( {data.post.data.tags.map((tag: string, index: number) => (
<li key={index} className="tag">{tag}</li> <li key={index} className="tag">{tag}</li>
))} ))}
</ul> </ul>
<p className="post-list-description">{props.post.data.description}</p> <p className="post-list-description">{data.post.data.description}</p>
</li> </li>
); );
} }

2
_components/footer.tsx
View file

@ -1,4 +1,4 @@
export default function ({ comp }) { export default function ({ comp }: Lume.Data) {
const iconStyle = { const iconStyle = {
filter: "var(--filter-fg)", filter: "var(--filter-fg)",
}; };

12
_components/header.tsx
View file

@ -1,14 +1,4 @@
export interface Props { export default function (props: Lume.Data) {
title: string;
description?: string;
author?: {
name: string;
};
date: Date;
comp: any;
}
export default function (props: Props) {
const dateFormatted = Intl.DateTimeFormat("en-CA", { dateStyle: "long" }) const dateFormatted = Intl.DateTimeFormat("en-CA", { dateStyle: "long" })
.format(props.date); .format(props.date);
return ( return (

20
_config.ts
View file

@ -4,8 +4,8 @@ import nav from "lume/plugins/nav.ts";
import sass from "lume/plugins/sass.ts"; import sass from "lume/plugins/sass.ts";
import feed from "lume/plugins/feed.ts"; import feed from "lume/plugins/feed.ts";
import code_highlight from "lume/plugins/code_highlight.ts"; import code_highlight from "lume/plugins/code_highlight.ts";
import toc from "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc.ts"; import toc from "lume-markdown-plugins/toc.ts";
import footnotes from "https://deno.land/x/lume_markdown_plugins@v0.6.0/footnotes.ts"; import footnotes from "lume-markdown-plugins/footnotes.ts";
import lang_typescript from "npm:highlight.js/lib/languages/typescript"; import lang_typescript from "npm:highlight.js/lib/languages/typescript";
import lang_javascript from "npm:highlight.js/lib/languages/javascript"; import lang_javascript from "npm:highlight.js/lib/languages/javascript";
@ -63,15 +63,21 @@ site.process([".html"], (pages) => {
// NOTE: This is a hack to append a class to JS doctrings so that we // NOTE: This is a hack to append a class to JS doctrings so that we
// can style them. If only the Hightlight.js plugin could be configured // can style them. If only the Hightlight.js plugin could be configured
// to do this instead. // to do this instead.
page.document?.getElementsByClassName("hljs-comment").forEach( if (page.document) {
(codeCommentElement) => { for (
const codeCommentElement of page.document.getElementsByClassName(
"hljs-comment",
)
) {
const docStringRegex = /^\/\*\*.*\*\/$/gsm; const docStringRegex = /^\/\*\*.*\*\/$/gsm;
const matchResult = codeCommentElement.innerText.match(docStringRegex); const matchResult = codeCommentElement.textContent?.match(
docStringRegex,
);
if (matchResult) { if (matchResult) {
codeCommentElement.classList.add("docstring"); codeCommentElement.classList.add("docstring");
} }
}, }
); }
}); });
}); });

2
_includes/layouts/base.tsx
View file

@ -1,5 +1,5 @@
export default function ( export default function (
{ title, description, children, comp, metas, links, author, date }, { title, description, children, comp, metas, links, author, date }: Lume.Data,
) { ) {
return ( return (
<html lang="en-CA"> <html lang="en-CA">

18
_includes/layouts/post.tsx
View file

@ -1,6 +1,22 @@
export const layout = "./base.tsx"; export const layout = "./base.tsx";
export default function ({ children, toc, footnotes }) { interface Data {
toc: {
text: string;
slug: string;
children: {
text: string;
slug: string;
}[];
}[];
footnotes: {
refId: string;
content: string;
id: string;
}[];
}
export default function ({ children, toc, footnotes }: Data & Lume.Data) {
return ( return (
<> <>
{toc.length > 0 && {toc.length > 0 &&

26
blog/index.tsx
View file

@ -1,19 +1,9 @@
export const title = "Blog"; export const title = "Blog";
export const description = "Hello, stranger. Stay a while and listen."; export const description = "Hello, stranger. Stay a while and listen.";
export default function ({ nav, comp }) { export default function ({ nav, comp }: Lume.Data) {
const { PostListItem } = comp; const { PostListItem } = comp;
const sortPosts = (a, b) => {
if (a.data.date < b.data.date) {
return 1;
} else if (a.data.date > b.data.date) {
return -1;
} else {
return 0;
}
};
if (!nav.menu("/blog/posts")) { if (!nav.menu("/blog/posts")) {
return ( return (
<div className="no-posts"> <div className="no-posts">
@ -32,9 +22,17 @@ export default function ({ nav, comp }) {
return ( return (
<ul className="post-list"> <ul className="post-list">
{nav.menu("/blog/posts").children.sort(sortPosts).map((post, index) => ( {nav.menu("/blog/posts")?.children?.sort((a, b) => {
<PostListItem key={index} post={post} /> let result = 0;
))} if (a.data && b.data) {
if (a.data.date < b.data.date) {
result = 1;
} else if (a.data.date > b.data.date) {
result = -1;
}
}
return result;
}).map((post, index) => <PostListItem key={index} post={post} />)}
</ul> </ul>
); );
} }

7
deno.json
View file

@ -2,21 +2,22 @@
"compilerOptions": { "compilerOptions": {
"jsx": "react-jsx", "jsx": "react-jsx",
"jsxImportSource": "npm:react", "jsxImportSource": "npm:react",
"jsxImportSourceTypes": "npm:@types/react",
"types": [ "types": [
"https://unpkg.com/@types/react@18.2.37/index.d.ts",
"lume/types.ts" "lume/types.ts"
] ]
}, },
"tasks": { "tasks": {
"lume": "echo \"import 'lume/cli.ts'\" | deno run --allow-write='.' --allow-read='.' --allow-net='deno.land,cdn.deno.land,esm.sh,0.0.0.0:3000,jsr.io,lumeland.github.io' --allow-sys=networkInterfaces --allow-env='LUME_ENV,LUME_LIVE_RELOAD,LUME_LOGS,LUME_NOCACHE,LUME_DRAFTS' -", "lume": "echo \"import 'lume/cli.ts'\" | deno run --allow-write='.' --allow-read='.' --allow-net='deno.land,cdn.deno.land,esm.sh,0.0.0.0:3000,jsr.io,lumeland.github.io' --allow-sys=networkInterfaces --allow-env='LUME_ENV,LUME_LIVE_RELOAD,LUME_LOGS,LUME_NOCACHE,LUME_DRAFTS' -",
"build": "deno task lume", "build": "deno task lume",
"check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx", "check": "deno fmt --check && deno lint && deno check .",
"serve": "deno task lume -s", "serve": "deno task lume -s",
"deploy": "rsync -avh --progress --delete ./_site/ podman:/srv/www/fosterhangdaan.com/" "deploy": "rsync -avh --progress --delete ./_site/ podman:/srv/www/fosterhangdaan.com/"
}, },
"imports": { "imports": {
"react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime", "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime",
"lume/": "https://deno.land/x/lume@v2.2.4/" "lume/": "https://deno.land/x/lume@v2.2.4/",
"lume-markdown-plugins/": "https://deno.land/x/lume_markdown_plugins@v0.7.1/"
}, },
"fmt": { "fmt": {
"exclude": [ "exclude": [

BIN
deno.lock
View file

Binary file not shown.

34
index.tsx
View file

@ -1,16 +1,6 @@
export const description = "Software developer and open-source enthusiast."; export const description = "Software developer and open-source enthusiast.";
export default function ({ nav }) { export default function (data: Lume.Data) {
const sortPosts = (a, b) => {
if (a.data.date < b.data.date) {
return 1;
} else if (a.data.date > b.data.date) {
return -1;
} else {
return 0;
}
};
return ( return (
<> <>
<p> <p>
@ -24,7 +14,7 @@ export default function ({ nav }) {
times, I help in the battle for an open web and for user privacy by times, I help in the battle for an open web and for user privacy by
contributing in the development of free and open-source software. contributing in the development of free and open-source software.
</p> </p>
<h2 id="contact-me" tabIndex="-1"> <h2 id="contact-me" tabIndex={-1}>
<a className="header-anchor" href="#contact-me">Contact Me</a> <a className="header-anchor" href="#contact-me">Contact Me</a>
</h2> </h2>
<p> <p>
@ -35,7 +25,7 @@ export default function ({ nav }) {
If you'd like an encrypted response, you can send me your GPG public If you'd like an encrypted response, you can send me your GPG public
key. You can find mine in the <a href="/gpg-key/">GPG Key</a> page. key. You can find mine in the <a href="/gpg-key/">GPG Key</a> page.
</p> </p>
<h2 id="highlighted-projects" tabIndex="-1"> <h2 id="highlighted-projects" tabIndex={-1}>
<a className="header-anchor" href="#highlighted-projects"> <a className="header-anchor" href="#highlighted-projects">
Highlighted Projects Highlighted Projects
</a> </a>
@ -78,21 +68,31 @@ export default function ({ nav }) {
View all projects View all projects
</a> </a>
</p> </p>
<h2 id="latest-blog-posts" tabIndex="-1"> <h2 id="latest-blog-posts" tabIndex={-1}>
<a className="header-anchor" href="#latest-blog-posts"> <a className="header-anchor" href="#latest-blog-posts">
Latest Blog Posts Latest Blog Posts
</a> </a>
</h2> </h2>
<ul> <ul>
{nav.menu("/blog/posts").children.sort(sortPosts).slice(0, 5).map(( {data.nav.menu("/blog/posts")?.children?.sort((a, b) => {
let result = 0;
if (a.data && b.data) {
if (a.data.date < b.data.date) {
result = 1;
} else if (a.data.date > b.data.date) {
result = -1;
}
}
return result;
}).slice(0, 5).map((
post, post,
index, index,
) => ( ) => (
<li key={index}> <li key={index}>
<a href={post.data.url}>{post.data.title}</a> &mdash;{" "} <a href={post.data?.url}>{post.data?.title}</a> &mdash;{" "}
<time className="post-list-date"> <time className="post-list-date">
{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format( {Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(
post.data.date, post.data?.date,
)} )}
</time> </time>
</li> </li>