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 {
post: any;
}
export default function (props: Props) {
export default function (data: Lume.Data) {
return (
<li className="post-list-item">
<a href={props.post.data.url} className="post-list-title">
{props.post.data.title}
<a href={data.post.data.url} className="post-list-title">
{data.post.data.title}
</a>
<time className="post-list-date">
{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(
props.post.data.date,
data.post.data.date,
)}
</time>
<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>
))}
</ul>
<p className="post-list-description">{props.post.data.description}</p>
<p className="post-list-description">{data.post.data.description}</p>
</li>
);
}

2
_components/footer.tsx
View file

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

12
_components/header.tsx
View file

@ -1,14 +1,4 @@
export interface Props {
title: string;
description?: string;
author?: {
name: string;
};
date: Date;
comp: any;
}
export default function (props: Props) {
export default function (props: Lume.Data) {
const dateFormatted = Intl.DateTimeFormat("en-CA", { dateStyle: "long" })
.format(props.date);
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 feed from "lume/plugins/feed.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 footnotes from "https://deno.land/x/lume_markdown_plugins@v0.6.0/footnotes.ts";
import toc from "lume-markdown-plugins/toc.ts";
import footnotes from "lume-markdown-plugins/footnotes.ts";
import lang_typescript from "npm:highlight.js/lib/languages/typescript";
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
// can style them. If only the Hightlight.js plugin could be configured
// to do this instead.
page.document?.getElementsByClassName("hljs-comment").forEach(
(codeCommentElement) => {
if (page.document) {
for (
const codeCommentElement of page.document.getElementsByClassName(
"hljs-comment",
)
) {
const docStringRegex = /^\/\*\*.*\*\/$/gsm;
const matchResult = codeCommentElement.innerText.match(docStringRegex);
const matchResult = codeCommentElement.textContent?.match(
docStringRegex,
);
if (matchResult) {
codeCommentElement.classList.add("docstring");
}
},
);
}
}
});
});

2
_includes/layouts/base.tsx
View file

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

18
_includes/layouts/post.tsx
View file

@ -1,6 +1,22 @@
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 (
<>
{toc.length > 0 &&

26
blog/index.tsx
View file

@ -1,19 +1,9 @@
export const title = "Blog";
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 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")) {
return (
<div className="no-posts">
@ -32,9 +22,17 @@ export default function ({ nav, comp }) {
return (
<ul className="post-list">
{nav.menu("/blog/posts").children.sort(sortPosts).map((post, index) => (
<PostListItem key={index} post={post} />
))}
{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;
}).map((post, index) => <PostListItem key={index} post={post} />)}
</ul>
);
}

7
deno.json
View file

@ -2,21 +2,22 @@
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "npm:react",
"jsxImportSourceTypes": "npm:@types/react",
"types": [
"https://unpkg.com/@types/react@18.2.37/index.d.ts",
"lume/types.ts"
]
},
"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' -",
"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",
"deploy": "rsync -avh --progress --delete ./_site/ podman:/srv/www/fosterhangdaan.com/"
},
"imports": {
"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": {
"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 default function ({ nav }) {
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;
}
};
export default function (data: Lume.Data) {
return (
<>
<p>
@ -24,7 +14,7 @@ export default function ({ nav }) {
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.
</p>
<h2 id="contact-me" tabIndex="-1">
<h2 id="contact-me" tabIndex={-1}>
<a className="header-anchor" href="#contact-me">Contact Me</a>
</h2>
<p>
@ -35,7 +25,7 @@ export default function ({ nav }) {
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.
</p>
<h2 id="highlighted-projects" tabIndex="-1">
<h2 id="highlighted-projects" tabIndex={-1}>
<a className="header-anchor" href="#highlighted-projects">
Highlighted Projects
</a>
@ -78,21 +68,31 @@ export default function ({ nav }) {
View all projects
</a>
</p>
<h2 id="latest-blog-posts" tabIndex="-1">
<h2 id="latest-blog-posts" tabIndex={-1}>
<a className="header-anchor" href="#latest-blog-posts">
Latest Blog Posts
</a>
</h2>
<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,
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">
{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(
post.data.date,
post.data?.date,
)}
</time>
</li>