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.
Most services/products are keen on going against the file over app 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.
+ );
+}
diff --git a/components/quick-links.tsx b/src/app/components/quick-links.tsx
similarity index 88%
rename from components/quick-links.tsx
rename to src/app/components/quick-links.tsx
index df951bc..bf49a0c 100644
--- a/components/quick-links.tsx
+++ b/src/app/components/quick-links.tsx
@@ -1,5 +1,5 @@
import Link from 'next/link';
-import Pages from '../public/external.json';
+import Pages from '../../../public/external.json';
function QuickLinks() {
return (
diff --git a/components/recent-notes.tsx b/src/app/components/recent-notes.tsx
similarity index 94%
rename from components/recent-notes.tsx
rename to src/app/components/recent-notes.tsx
index b61a2e1..e5ed52e 100644
--- a/components/recent-notes.tsx
+++ b/src/app/components/recent-notes.tsx
@@ -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)
diff --git a/styles/recent-posts.module.css b/src/app/components/recent-posts.module.css
similarity index 100%
rename from styles/recent-posts.module.css
rename to src/app/components/recent-posts.module.css
diff --git a/components/recent-posts.tsx b/src/app/components/recent-posts.tsx
similarity index 91%
rename from components/recent-posts.tsx
rename to src/app/components/recent-posts.tsx
index f070840..dadbd09 100644
--- a/components/recent-posts.tsx
+++ b/src/app/components/recent-posts.tsx
@@ -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 (
diff --git a/styles/title.module.css b/src/app/components/title.module.css
similarity index 100%
rename from styles/title.module.css
rename to src/app/components/title.module.css
diff --git a/components/title.tsx b/src/app/components/title.tsx
similarity index 83%
rename from components/title.tsx
rename to src/app/components/title.tsx
index 3c93564..ce0e1e1 100644
--- a/components/title.tsx
+++ b/src/app/components/title.tsx
@@ -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 (
<>
-
+ {/*
{title && `${title} | PaulW.XYZ` || 'PaulW.XYZ'}
-
+ */}
{title || 'PaulW.XYZ'}
@@ -68,5 +66,3 @@ function Title() {
>
);
}
-
-export default Title;
diff --git a/styles/global.css b/src/app/global.css
similarity index 100%
rename from styles/global.css
rename to src/app/global.css
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..b2e1b5e
--- /dev/null
+++ b/src/app/layout.tsx
@@ -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 (
+
+
+
+
+ {children}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/lib/date.ts b/src/app/lib/date.ts
similarity index 100%
rename from lib/date.ts
rename to src/app/lib/date.ts
diff --git a/lib/read-markdown.ts b/src/app/lib/read-markdown.ts
similarity index 100%
rename from lib/read-markdown.ts
rename to src/app/lib/read-markdown.ts
diff --git a/lib/site.ts b/src/app/lib/site.ts
similarity index 100%
rename from lib/site.ts
rename to src/app/lib/site.ts
diff --git a/pages/404.tsx b/src/app/not-found.tsx
similarity index 65%
rename from pages/404.tsx
rename to src/app/not-found.tsx
index a6024b1..7e66d40 100644
--- a/pages/404.tsx
+++ b/src/app/not-found.tsx
@@ -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 (
<>
-
+{/*
404: Not Found | PaulW.XYZ
-
+
Page Not Found
-
- PaulW.XYZ / ... ??? / 404: Not Found
-
+
PaulW.XYZ / ... ??? / 404: Not Found
+
*/}
Error 404
@@ -28,7 +26,7 @@ function NotFoundPage() {
More on HTTP status codes
-
+ {/*
*/}
>
);
diff --git a/styles/note.module.css b/src/app/notes/[note]/note.module.css
similarity index 100%
rename from styles/note.module.css
rename to src/app/notes/[note]/note.module.css
diff --git a/pages/notes/[note].tsx b/src/app/notes/[note]/page.tsx
similarity index 62%
rename from pages/notes/[note].tsx
rename to src/app/notes/[note]/page.tsx
index d797205..3349ba1 100644
--- a/pages/notes/[note].tsx
+++ b/src/app/notes/[note]/page.tsx
@@ -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) {
}
-function Note({ note }: { note: Note }) {
+export default async function Note({params}: {params: { note: string}}) {
+ const note = params.note
+ const n = await getNotes(note)
return (<>
-
- Last updated: {toLocaleString(note.mtime)}
+ Last updated: {toLocaleString(n.mtime)}
-
+
-
>
);
}
-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)
- }
- }
- }
-}
-
-export async function getStaticPaths() {
- return {
- paths: Object.keys(NotesInfo).map((note: string) => {
- return {
- params: {
- note
- }
- }
- }),
- fallback: false
- };
-}
-
-export default Note;
+ return {...notesInfo[name], content: await readMarkdown('notes', name, true)}
+}
\ No newline at end of file
diff --git a/pages/notes/index.tsx b/src/app/notes/page.tsx
similarity index 84%
rename from pages/notes/index.tsx
rename to src/app/notes/page.tsx
index b1ef7e8..2f10f8b 100644
--- a/pages/notes/index.tsx
+++ b/src/app/notes/page.tsx
@@ -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 (
-
+ <>
{
!notes || notes.length === 0
&& <>No notes found>
@@ -50,7 +48,7 @@ function NotesPage() {
}
-
+ >
)
}
diff --git a/pages/index.tsx b/src/app/page.tsx
similarity index 62%
rename from pages/index.tsx
rename to src/app/page.tsx
index 39204a2..f7b01ca 100644
--- a/pages/index.tsx
+++ b/src/app/page.tsx
@@ -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 (
-
+ <>
-
+ >
)
}
diff --git a/pages/posts/[post].tsx b/src/app/posts/[post]/page.tsx
similarity index 73%
rename from pages/posts/[post].tsx
rename to src/app/posts/[post]/page.tsx
index c93cf04..726c7c8 100644
--- a/pages/posts/[post].tsx
+++ b/src/app/posts/[post]/page.tsx
@@ -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 }) {