xyz/www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

turbopack and app router; very annoying to work with!

Browse Source
This commit is contained in:
Paul W. 2025-05-31 22:06:24 -04:00
parent 43229c4c47
commit 1cca454a75
Signed by: xyz
GPG Key ID: DF12EBB915A949ED
35 changed files with 125 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

15
components/container.tsx
View File

@ -1,15 +0,0 @@
import { JSX } from "react";
export type ChildrenType = JSX.Element| Array<ChildrenType>;
function Container(props: { children?: ChildrenType, ignore?: boolean }) {
if (props.ignore)
return <>{props.children}</>;
return (
<div className='container'>
{props.children}
</div>
);
}
export default Container;

20
components/layout.tsx
View File

@ -1,20 +0,0 @@
import Title from './title';
import Container, { ChildrenType } from './container';
type LayoutProps = {
children?: ChildrenType,
removeContainer?: boolean,
};
function Layout(props: LayoutProps) {
return (
<>
<Title />
<Container ignore={props.removeContainer}>
{props.children}
</Container>
</>
);
}
export default Layout;

3
next-env.d.ts vendored
View File

@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

19
next.config.ts
View File

@ -3,14 +3,19 @@ import NextBundleAnalyzer from '@next/bundle-analyzer';
let config: NextConfig = {
reactStrictMode: true,
i18n: {
locales: ['en-US'],
defaultLocale: 'en-US'
turbopack: {
rules: {
'*.txt': {
as: '*.js',
loaders: ['raw-loader'],
},
'*.md': {
as: '*.js',
loaders: ['raw-loader'],
}
},
resolveExtensions: ['.txt', '.md', '.tsx', '.ts', '.js']
},
// not sure why this breaks prod build in the latest version
// aah it's so frustrating to deal with an warning log that
// shows up regardless of the config but its presence halts
// the entire thing.
webpack: (config, _options) => {
config.module.rules.push(
{

7
notes/programming-resources.md
View File

@ -7,13 +7,6 @@ refer to someone or within something.
- https://www.gingerbill.org/series/memory-allocation-strategies/
## Untangling Lifetimes: The Arena Allocator
Making performant dynamic manual memory management in C feel almost like
garbage collection.
- https://www.rfleury.com/p/untangling-lifetimes-the-arena-allocator
## Immediate-Mode Graphical User Interfaces (2005)
- https://caseymuratori.com/blog_0001

3
notes/references.md Normal file
View File

@ -0,0 +1,3 @@
# References
## [Intel® 64 and IA-32 Architectures Software Developer’s Manual](https://software.intel.com/en-us/download/intel-64-and-ia-32-architectures-sdm-combined-volumes-1-2a-2b-2c-2d-3a-3b-3c-3d-and-4)

7
package.json
View File

@ -2,16 +2,17 @@
"private": true,
"scripts": {
"prebuild": "node ./scripts/generate-metadata.js",
"dev": "next dev",
"build": "next build",
"dev": "next dev --turbopack",
"build": "next build --turbopack",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"dotenv": "^16.3.1",
"highlight.js": "^11.10.0",
"next": "^15.0.4",
"next": "^15.3.1",
"normalize.css": "^8.0.1",
"raw-loader": "^4.0.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-markdown": "^9.0.1",

7
pages/_app.tsx
View File

@ -1,7 +0,0 @@
import type { AppProps } from 'next/app'
import 'normalize.css';
import '../styles/global.css';
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}

13
pages/_document.tsx
View File

@ -1,13 +0,0 @@
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}

16
pages/about.tsx → src/app/about/page.tsx
View File

@ -1,22 +1,20 @@
import ReactMarkdown from 'react-markdown';
import ReadmeMd from '../README.md';
import License from '../LICENSE.txt';
import Layout from '../components/layout';
import ReadmeMd from '../../../README.md';
import License from '../../../LICENSE.txt';
function AboutPage() {
return (
<Layout >
<>
<section className='block'>
<p>Paul&apos;s Personal Website.</p>
<p> You can find me on the following:
<p> You can find me on the following platforms:</p>
<ul>
<li>X/Twitter: <a href='https://x.com/paulw_xyz'>paulw_xyz</a></li>
<li>GitHub: <a href='https://github.com/paulwxyz'>paulwxyz</a></li>
<li>BlueSky (unused): <a href='https://bsky.app/profile/@paulw.xyz'>@paulw.xyz</a></li>
{/* <li>BlueSky (unused): <a href='https://bsky.app/profile/@paulw.xyz'>@paulw.xyz</a></li> */}
<li><a href='https://git.paulw.xyz/xyz'>git.paulw.xyz</a></li>
</ul>
</p>
<p>
The original motivation was to just play with Next.js as it pretty much did the things I wanted web pages to do. But it came at the cost of needless complexity. As I use the JavaScript/ECMAScript/Whatever-you-want-to-call-it-script more and more, I am convinced that it is not a platform worth pursuing because the more complex it gets, the less control I have over what it does and this platform and its users seems to be okay with that sort of loss. I have been instead pivoting toward things that impressed and got me interested in working with computers.</p>
<p>Most services/products are keen on going against the <a href='https://stephango.com/file-over-app'>file over app</a> philosophy which entails prioritizing data over software and anticipate and embrace the eventual death of software. People instead want subscription services that barely support open formats and sometimes do not support exporting data to commonly used formats. The goal here is to avoid storing artifacts under locations that are easily not accessible, not under my control, and does not lock me out of using it with other software. The only reason I have not completely abandoned this is thanks to my decision to rely on Markdown files alone. Had it been reliant on any cloud software, I would have started over.</p>
@ -31,14 +29,14 @@ function AboutPage() {
<section className='block'>
<h2>README</h2>
<ReactMarkdown>
{ReadmeMd.replace(/^#{1,5} /g, (s: string) => { return `#${s}` })}
{ReadmeMd.replace(/^#{6}\s+(.*)\s+$/gm, (s: string, a) => `**${a}**\n`).replace(/^#{1,5} /gm, (s: string) => { return `##${s}` })}
</ReactMarkdown>
</section>
<section className='block'>
<h2>LICENSE</h2>
<pre className='license'>{License}</pre>
</section>
</Layout>
</>
);
}

9
src/app/components/container.tsx Normal file
View File

@ -0,0 +1,9 @@
export default function Container(props: { children?: React.ReactNode, ignore?: boolean }) {
if (props.ignore)
return <>{props.children}</>;
return (
<div className='container'>
{props.children}
</div>
);
}

2
components/quick-links.tsx → src/app/components/quick-links.tsx
View File

@ -1,5 +1,5 @@
import Link from 'next/link';
import Pages from '../public/external.json';
import Pages from '../../../public/external.json';
function QuickLinks() {
return (

2
components/recent-notes.tsx → src/app/components/recent-notes.tsx
View File

@ -1,5 +1,5 @@
import Link from "next/link";
import NotesInfo from '../public/notes.json';
import NotesInfo from '../../../public/notes.json';
function RecentNotes() {
const notes = Object.entries(NotesInfo)

0
styles/recent-posts.module.css → src/app/components/recent-posts.module.css
View File

4
components/recent-posts.tsx → src/app/components/recent-posts.tsx
View File

@ -1,7 +1,7 @@
import Link from "next/link";
import { toRelativeDate } from "../lib/date";
import style from '../styles/recent-posts.module.css';
import PostsInfo from '../public/posts.json';
import style from './recent-posts.module.css';
import PostsInfo from '../../../public/posts.json';
function PostBlock({ slug, otime, title }: { slug: string, otime: string, title: string }) {
return (

0
styles/title.module.css → src/app/components/title.module.css
View File

24
components/title.tsx → src/app/components/title.tsx
View File

@ -1,10 +1,10 @@
'use client'
import Link from 'next/link';
import { useRouter } from 'next/router';
import { usePathname } from 'next/navigation';
import { Fragment } from 'react';
import style from '../styles/title.module.css';
import SiteMap from '../public/sitemap.json';
import Head from 'next/head';
import style from './title.module.css';
import SiteMap from '../../../public/sitemap.json';
import { Sites } from '../lib/site';
function createPathElements(ancestors: Array<{ name: string, path: string }>) {
@ -20,19 +20,17 @@ function createPathElements(ancestors: Array<{ name: string, path: string }>) {
});
}
function Title() {
const router = useRouter();
const pagePath = router.asPath;
export default function Title() {
const pagePath = usePathname();
const splitPath: Array<{ name: string, path: string }> = [];
// TODO(Paul): clean this up
let currRoot: Sites = SiteMap.pages;
let title: string | null = null;
if (pagePath !== '/') {
if (pagePath && pagePath !== '/') {
const subPaths = pagePath.split('?')[0].split('#')[0].split('/');
for (const p of subPaths.slice(1, subPaths.length)) {
if (!p)
if (!p || !currRoot[p])
continue;
splitPath.push({ name: currRoot[p].title, path: p });
@ -50,9 +48,9 @@ function Title() {
const pathElements = splitPath && createPathElements(splitPath) || <></>;
return (
<>
<Head>
{/* <head>
<title>{title && `${title} | PaulW.XYZ` || 'PaulW.XYZ'}</title>
</Head>
</head> */}
<div className={style.container}>
<h1 className={style.title}>
{title || 'PaulW.XYZ'}
@ -68,5 +66,3 @@ function Title() {
</>
);
}
export default Title;

0
styles/global.css → src/app/global.css
View File

18
src/app/layout.tsx Normal file
View File

@ -0,0 +1,18 @@
import type {Metadata} from 'next'
import 'normalize.css'
import './global.css'
import Container from './components/container'
import Title from './components/title'
export default function RootLayout({children,}: Readonly<{children: React.ReactNode}>) {
return (
<html lang='en'>
<body>
<Title />
<Container>
{children}
</Container>
</body>
</html>
)
}

0
lib/date.ts → src/app/lib/date.ts
View File

0
lib/read-markdown.ts → src/app/lib/read-markdown.ts
View File

0
lib/site.ts → src/app/lib/site.ts
View File

16
pages/404.tsx → src/app/not-found.tsx
View File

@ -1,23 +1,21 @@
import Head from 'next/head';
import Link from 'next/link';
import style from '../styles/title.module.css';
import style from '../components/title.module.css';
function NotFoundPage() {
// clean this page up
// TODO: figure out a way to somehow get next to ignore layout in special cases. tried /not-found/page.tsx but it doesn't work :X
return (
<>
<Head>
{/* <head>
<title>404: Not Found | PaulW.XYZ</title>
</Head>
</head>
<div className={style.container}>
<h1 className={style.title}>
Page Not Found
</h1>
</div>
<div className={`${style.nav} h1`}>
<Link href='/'>PaulW.XYZ</Link> / ... ??? / 404: Not Found </div>
<div className='container'>
<div className={`${style.nav} h1`}><Link href='/'>PaulW.XYZ</Link> / ... ??? / 404: Not Found</div>
<div className='container'>*/}
<section className='block text center'>
<h1>Error 404</h1>
<p>
@ -28,7 +26,7 @@ function NotFoundPage() {
More on HTTP status codes
</a>
</section>
</div>
{/*</div>*/}
</>
);

0
styles/note.module.css → src/app/notes/[note]/note.module.css
View File

44
pages/notes/[note].tsx → src/app/notes/[note]/page.tsx
View File

@ -11,12 +11,11 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeHighlight from 'rehype-highlight';
import rehypeHighlightCodeLines, { type HighlightLinesOptions } from 'rehype-highlight-code-lines';
import Layout from '../../components/layout';
import readMarkdown from '../../lib/read-markdown';
import { toLocaleString } from '../../lib/date';
import NotesInfo from '../../public/notes.json';
import NotesInfo from '../../../../public/notes.json';
import style from '../../styles/note.module.css';
import style from './note.module.css';
import 'highlight.js/styles/monokai-sublime.css';
import 'katex/dist/katex.min.css';
@ -47,46 +46,21 @@ function Markdown({ content }: any) {
</ReactMarkdown>
}
function Note({ note }: { note: Note }) {
export default async function Note({params}: {params: { note: string}}) {
const note = params.note
const n = await getNotes(note)
return (<>
<Layout >
<span className={style['last-updated']}>
Last updated: {toLocaleString(note.mtime)}
Last updated: {toLocaleString(n.mtime)}
</span>
<section className='block'>
<Markdown content={note.content} />
<Markdown content={n.content} />
</section>
</Layout>
</>
);
}
export async function getStaticProps({ params }: { params: { note: string } }) {
const note: string = params.note;
async function getNotes(name: string) {
const notesInfo: Notes = NotesInfo;
const noteInfo: Note = notesInfo[note];
return {
props: {
note: {
...noteInfo,
content: await readMarkdown('notes', note, true)
return {...notesInfo[name], content: await readMarkdown('notes', name, true)}
}
}
}
}
export async function getStaticPaths() {
return {
paths: Object.keys(NotesInfo).map((note: string) => {
return {
params: {
note
}
}
}),
fallback: false
};
}
export default Note;

10
pages/notes/index.tsx → src/app/notes/page.tsx
View File

@ -1,9 +1,7 @@
import Link from 'next/link';
import Layout from '../../components/layout';
import { toRelativeDate } from '../../lib/date';
import NotesInfo from '../../public/notes.json';
import { toRelativeDate } from '../lib/date';
import NotesInfo from '../../../public/notes.json';
function NoteEntry({ note }: { note: { title: string, mtime: string, slug: string } }) {
return (
@ -36,7 +34,7 @@ function NotesPage() {
);
return (
<Layout>
<>
{
!notes || notes.length === 0
&& <>No notes found</>
@ -50,7 +48,7 @@ function NotesPage() {
</tbody>
</table>
}
</Layout>
</>
)
}

13
pages/index.tsx → src/app/page.tsx
View File

@ -1,10 +1,9 @@
import React from 'react';
import Link from 'next/link';
import Layout from '../components/layout';
import QuickLinks from '../components/quick-links';
import RecentNotes from '../components/recent-notes';
import RecentPosts from '../components/recent-posts';
import RootInfo from '../public/home.json';
import QuickLinks from './components/quick-links';
import RecentNotes from './components/recent-notes';
import RecentPosts from './components/recent-posts';
import RootInfo from '../../public/home.json';
function Nav() {
const nav = Object.entries(RootInfo);
@ -22,12 +21,12 @@ function Nav() {
function HomePage() {
return (
<Layout>
<>
<QuickLinks />
<RecentPosts />
<RecentNotes />
<Nav />
</Layout>
</>
)
}

47
pages/posts/[post].tsx → src/app/posts/[post]/page.tsx
View File

@ -1,7 +1,6 @@
import Layout from '../../components/layout';
import ReactMarkdown from 'react-markdown';
import style from '../../styles/post.module.css';
import PostsInfo from '../../public/posts.json';
import PostsInfo from '../../../../public/posts.json';
import readMarkdown from '../../lib/read-markdown';
import DateTool, { toLocaleString } from '../../lib/date';
@ -11,11 +10,6 @@ interface IPost {
otime?: string;
}
interface IPosts {
[slug: string]: IPost
}
function TimeBlock({ mtime, otime }: { mtime: string, otime: string }) {
const ampm = (h: number) => { if (h >= 12) return 'p.m.'; return 'a.m.'; };
@ -50,14 +44,14 @@ function TimeBlock({ mtime, otime }: { mtime: string, otime: string }) {
</div>
);
}
function Post({ post }: { post: IPost & { content: string, cover?: string, otime: string, mtime?: string } }) {
// post: IPost & { content: string, cover?: string, otime: string, mtime?: string }
export default async function Post({ params }: { params: {post: string} }) {
const post = await getPost((await params).post);
if (!post)
return <></>;
return (<>
<Layout removeContainer={true} >
<div className='container'>
{ post.otime !== post.mtime &&
{ post.otime !== post.mtime && post.mtime &&
<span className={style.time}>
Last updated: {toLocaleString(post.mtime)}
</span>
@ -80,37 +74,12 @@ function Post({ post }: { post: IPost & { content: string, cover?: string, otime
</div>
</section>
<div className={style.spacer}></div>
</Layout>
</>
);
}
export async function getStaticProps({ params }: any) {
const postsInfo: IPosts = PostsInfo;
const post: IPost = postsInfo[params.post];
return {
props: {
post: {
...post,
content: await readMarkdown('posts', params.post, true)
export async function getPost(n: string) {
const postsInfo: Record<string, (IPost & { cover?: string, otime: string, mtime?: string })> = PostsInfo;
return {...postsInfo[n], content: await readMarkdown('posts', n, true)};
}
}
}
}
export async function getStaticPaths() {
return {
paths: Object.keys(PostsInfo).map((post: string) => {
return {
params: {
post
}
}
}),
fallback: false
};
}
export default Post;

10
pages/posts/index.tsx → src/app/posts/page.tsx
View File

@ -1,13 +1,11 @@
import Link from 'next/link';
import Layout from '../../components/layout';
import date from '../../lib/date';
import PostsInfo from '../../public/posts.json';
import date from '../lib/date';
import PostsInfo from '../../../public/posts.json';
function PostsPage() {
return (
<Layout>
return (<>
{Object.keys(PostsInfo).length && <Posts /> || <NoPosts />}
</Layout>
</>
)
}

7
pages/sitemap.tsx → src/app/sitemap/page.tsx
View File

@ -1,7 +1,6 @@
import Link from 'next/link';
import Layout from '../components/layout';
import { Sites } from '../lib/site';
import SiteMap from '../public/sitemap.json';
import SiteMap from '../../../public/sitemap.json';
function Desc(props: any) {
return (
@ -33,9 +32,9 @@ function traverseMap(head?: Sites, cwd = '', depth = 0) {
}
function SiteMapPage() {
return <Layout>
return <>
{traverseMap(SiteMap.pages)}
</Layout>;
</>;
}
export default SiteMapPage;

0
styles/post.module.css → src/app/styles/post.module.css
View File

55
styles/github-profile.module.css
View File

@ -1,55 +0,0 @@
.avatarContainer {
padding: 0.5rem;
text-align: center;
overflow: hidden;
}
.avatarContainer img {
border-radius: 1rem;
}
.cardLabel {
display: block;
font-weight: 700;
font-size: 1rem;
padding: .5rem;
}
.cardLabel:after {
content: ':';
}
.cardValue {
background-color: #303436;
font-size: 1rem;
padding: 0.25rem 1rem;
margin: 0.25rem 0;
border: none;
display: block;
border-radius: 0.5rem;
}
@media screen and (min-width: 800px) {
.card {
display: flex;
}
.cardTable {
flex: 1 1;
padding: 0.5rem;
align-items: stretch;
}
.cardRow {
display: flex;
}
.cardLabel {
flex: .2 1;
}
.cardValue {
flex: 1 1;
}
}

39
styles/lists.module.css
View File

@ -1,39 +0,0 @@
.desc {
font-size: 0.95rem;
}
.listItem {
padding: 0.25rem;
display: block;
}
.listItem::before {
content: '■';
padding: 0 0.5rem;
}
.listItemDesc {
display: inline-block;
padding: 0.25rem;
margin-left: 2.5rem;
font-size: 0.95rem;
}
.block .block {
margin: 0;
margin-left: 0.5rem;
border-radius: 0;
border-right: none;
border-bottom: none;
border-top: 1px dashed var(--main-border-color);
border-left: 1px dashed var(--main-border-color);
}
.block .block:first-of-type {
border-top: none;
}
.block .block:last-of-type {
border-bottom-left-radius: 1rem;
border-bottom: 1px dashed var(--main-border-color);
}

19
tsconfig.json
View File

@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es2023",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@ -18,13 +14,22 @@
"isolatedModules": true,
"jsx": "preserve",
"importHelpers": true,
"incremental": true
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"lib/slug.js"
"lib/slug.js",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"