Skip to content

Commit e233597

Browse files
flpmflpm
authored
[Refactor] Simplify JavaScript code (#3)
* components reorg * updating pages * make sure tailwind classes needed for headline are loaded * added hcard
1 parent bb5de05 commit e233597

File tree

20 files changed

+146
-140
lines changed

20 files changed

+146
-140
lines changed

‎components/content_markdown.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ReactMarkdown } from "react-markdown/lib/react-markdown";
2+
import Date from "./utils/date";
3+
import Link from "next/link";
4+
5+
const relatedLinkList = (related) => {
6+
return (
7+
<div className="pt-12">
8+
<div className="pb-4">
9+
<span className="bg-slate-200">Related content:</span>
10+
</div>
11+
<ul>
12+
{related.map((x) => (
13+
<li key={x.link}>
14+
<Link key={x.link} href={x.link}>
15+
{x.label}
16+
</Link>
17+
</li>
18+
))}
19+
</ul>
20+
</div>
21+
);
22+
};
23+
24+
export default function ContentMarkdown({
25+
content,
26+
contentDate,
27+
related = [],
28+
}) {
29+
return (
30+
<div className="markdown-content text-xl">
31+
{contentDate === undefined ? (
32+
""
33+
) : (
34+
<p className="text-slate-300">
35+
Last updated on <Date dateString={contentDate} />.
36+
</p>
37+
)}
38+
39+
<ReactMarkdown
40+
components={{
41+
a: ({ children, href }) => {
42+
return <Link href={href}>{children}</Link>;
43+
},
44+
}}
45+
>
46+
{content}
47+
</ReactMarkdown>
48+
49+
{related.length > 0 && relatedLinkList(related)}
50+
</div>
51+
);
52+
}

‎components/headline.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { openSans } from "./utils/fonts";
2+
3+
export default function Headline({
4+
title,
5+
subtitle,
6+
titleSize = "6xl",
7+
subtitleSize = "5xl",
8+
}) {
9+
return (
10+
<div
11+
className={`${openSans.className} text-${titleSize} font-semibold pb-12`}
12+
>
13+
{title}
14+
<div
15+
className={`${openSans.className} text-${subtitleSize} pt-4 font-light`}
16+
>
17+
{subtitle}
18+
</div>
19+
</div>
20+
);
21+
}

‎components/layout.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import Head from "next/head";
22
import Link from "next/link";
33

4-
import FrameTop from "./frame_top";
5-
import FrameBottom from "./frame_bottom";
6-
import FrameContent from "./frame_content";
4+
import FrameTop from "./layout_components/frame_top";
5+
import FrameBottom from "./layout_components/frame_bottom";
6+
import FrameContent from "./layout_components/frame_content";
77

88
import { lightContentGridColor } from "../lib/grid_view";
99

@@ -14,9 +14,10 @@ export default function Layout({ title, children, gridClassName }) {
1414
<div className="min-w-[800px]">
1515
<Head>
1616
<link rel="icon" href="/favicon.ico" />
17+
<link rel="profile" href="/profile/hcard.html"></link>
1718
<meta
1819
name="description"
19-
content="Felipe Moreno | security + code + data + design"
20+
content="This is the personal site of Felipe Moreno, covering his projects, reading, and other interests."
2021
/>
2122
<meta name="og:title" content={siteTitle} />\
2223
<title>{title || siteTitle}</title>
@@ -26,7 +27,7 @@ export default function Layout({ title, children, gridClassName }) {
2627
siteMenu={[
2728
["about", "/about"],
2829
["links", "/links"],
29-
["books", "/books"],
30+
["reading", "/books"],
3031
["projects", "/projects"],
3132
]}
3233
siteName="flpm.dev"

‎components/frame_bottom.js renamed to ‎components/layout_components/frame_bottom.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Link from "next/link";
2-
import SectionLink from "./section_link";
3-
import { lightFrameGridColor, darkFrameGridColor } from "../lib/grid_view";
4-
import { iADuo } from "./fonts";
2+
import SectionLink from "../sections/section_link";
3+
import { lightFrameGridColor, darkFrameGridColor } from "../../lib/grid_view";
4+
import { iADuo } from "../utils/fonts";
55

66
export default function FrameBottom({
77
contactPage,

‎components/frame_content.js renamed to ‎components/layout_components/frame_content.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
import { lightContentGridColor, lightFrameGridColor } from "../lib/grid_view";
2-
import { iADuo } from "./fonts";
1+
import {
2+
lightContentGridColor,
3+
lightFrameGridColor,
4+
} from "../../lib/grid_view";
5+
import { iADuo } from "../utils/fonts";
36

47
export default function FrameContent({
58
leftBar,

‎components/frame_top.js renamed to ‎components/layout_components/frame_top.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import SectionLink from "./section_link";
2-
import { lightFrameGridColor, darkFrameGridColor } from "../lib/grid_view";
3-
import { iADuo } from "./fonts";
1+
import SectionLink from "../sections/section_link";
2+
import { lightFrameGridColor, darkFrameGridColor } from "../../lib/grid_view";
3+
import { iADuo } from "../utils/fonts";
44

55
export default function FrameTop({ siteMenu, siteName, showFrame = false }) {
66
return (

‎components/sections/main_section.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Section from "./section";
2+
3+
export default function MainSection({ children }) {
4+
return (
5+
<Section
6+
columns={8}
7+
spaceBefore={1}
8+
spaceAfter={3}
9+
className="flex flex-col-reverse"
10+
>
11+
<div className="py-[6rem]">{children}</div>
12+
</Section>
13+
);
14+
}

‎components/section.js renamed to ‎components/sections/section.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { gridWidth, darkContentGridColor } from "../lib/grid_view";
1+
import { gridWidth, darkContentGridColor } from "../../lib/grid_view";
22
import Spacer from "./spacer";
33

44
export default function Section({

‎components/section_link.js renamed to ‎components/sections/section_link.js

File renamed without changes.

‎components/spacer.js renamed to ‎components/sections/spacer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { gridWidth, darkContentGridColor } from "../lib/grid_view";
1+
import { gridWidth, darkContentGridColor } from "../../lib/grid_view";
22

33
export default function Spacer({ columns = 1, className = "" }) {
44
if (columns === 0) return null;

‎components/date.js renamed to ‎components/utils/date.js

File renamed without changes.

‎components/fonts.js renamed to ‎components/utils/fonts.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import { Open_Sans, Trispace } from "next/font/google";
22
import LocalFont from "next/font/local";
33

44
export const iADuoItalic = LocalFont({
5-
src: "../fonts/iAWriterDuoV-Italic.ttf",
5+
src: "../../fonts/iAWriterDuoV-Italic.ttf",
66
subsets: ["latin"],
77
axes: ["wdth"],
88
display: "swap",
99
});
1010

1111
export const iADuo = LocalFont({
12-
src: "../fonts/iAWriterDuoV.ttf",
12+
src: "../../fonts/iAWriterDuoV.ttf",
1313
subsets: ["latin"],
1414
axes: ["wdth"],
1515
display: "swap",

‎components/text_link.js renamed to ‎components/utils/text_link.js

File renamed without changes.

‎pages/[...page].js

Lines changed: 11 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { ReactMarkdown } from "react-markdown/lib/react-markdown";
1+
import Headline from "../components/headline";
22
import Layout from "../components/layout";
3-
import Section from "../components/section";
4-
import Link from "next/link";
5-
import Date from "../components/date";
6-
import { openSans } from "../components/fonts";
3+
import MainSection from "../components/sections/main_section";
4+
import ContentMarkdown from "../components/content_markdown";
75
import { getPageData, getAllPageIds } from "../lib/pages";
86
import { useRouter } from "next/router";
97

@@ -24,62 +22,18 @@ export async function getStaticPaths() {
2422
};
2523
}
2624

27-
const relatedLinkList = (related) => {
28-
return (
29-
<div className="pt-12">
30-
<div className="pb-4">
31-
<span className="bg-slate-200">Related content:</span>
32-
</div>
33-
<ul>
34-
{related.map((x) => (
35-
<li key={x.link}>
36-
<Link key={x.link} href={x.link}>
37-
{x.label}
38-
</Link>
39-
</li>
40-
))}
41-
</ul>
42-
</div>
43-
);
44-
};
45-
4625
export default function Page({ data }) {
4726
const router = useRouter();
4827
return (
4928
<Layout>
50-
<Section
51-
columns={8}
52-
spaceBefore={1}
53-
spaceAfter={3}
54-
className="flex flex-col-reverse"
55-
>
56-
<div className="py-[6rem] ">
57-
<div className={`${openSans.className} text-6xl font-semibold pb-12`}>
58-
{data.title}
59-
<div className={`${openSans.className} text-5xl pt-4 font-light`}>
60-
{data.subtitle}
61-
</div>
62-
</div>
63-
<div className="markdown-content text-xl">
64-
<p className="text-slate-300">
65-
Last updated on <Date dateString={data.date} />.
66-
</p>
67-
<ReactMarkdown
68-
components={{
69-
a: ({ children, href }) => {
70-
return <Link href={href}>{children}</Link>;
71-
},
72-
}}
73-
>
74-
{data.content}
75-
</ReactMarkdown>
76-
77-
{data.related !== undefined &&
78-
data.related.length > 0 &&
79-
relatedLinkList(data.related)}
80-
</div>
81-
</div>
82-
</Section>
29+
<MainSection>
30+
<Headline title={data.title} subtitle={data.subtitle} />
31+
<ContentMarkdown
32+
content={data.content}
33+
contentDate={data.date}
34+
related={data.related}
35+
/>
36+
</MainSection>
8337
</Layout>
8438
);
8539
}

‎pages/_app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "../styles/globals.css";
2-
import { iADuo } from "../components/fonts";
2+
import { iADuo } from "../components/utils/fonts";
33

44
export default function App({ Component, pageProps }) {
55
return (

‎pages/books/[list].js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import Section from "../../components/section";
1+
import Section from "../../components/sections/section";
22
import Layout from "../../components/layout";
33
import Image from "next/image";
4-
import { openSans } from "../../components/fonts";
4+
import { openSans } from "../../components/utils/fonts";
55
import { getListData, getAllIds } from "../../lib/books";
66

77
import { ReactMarkdown } from "react-markdown/lib/react-markdown";

‎pages/books/index.js

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import Section from "../../components/section";
1+
import Section from "../../components/sections/section";
22
import Layout from "../../components/layout";
3-
import Image from "next/image";
4-
import { openSans } from "../../components/fonts";
3+
import { openSans } from "../../components/utils/fonts";
54
import { getAllBooks } from "../../lib/books";
6-
import path from "path";
7-
import matter from "gray-matter";
85

9-
import { ReactMarkdown } from "react-markdown/lib/react-markdown";
106
import Link from "next/link";
117

128
export async function getStaticProps() {
@@ -30,9 +26,9 @@ export default function Bookshelf({ data }) {
3026
>
3127
<div className="pt-[6rem] pb-12">
3228
<div className={`${openSans.className} text-6xl font-semibold pb-12`}>
33-
My Books
29+
My Personal Bookshelf
3430
<div className={`${openSans.className} text-5xl pt-4 font-light`}>
35-
A list of the books and audiobooks I own
31+
A catalog of the books and audiobooks I own
3632
</div>
3733
</div>
3834
<div className="markdown-content text-xl">
@@ -72,28 +68,6 @@ export default function Bookshelf({ data }) {
7268
</p>
7369
</div>
7470
</div>
75-
{/* <div>
76-
{data.map((book) => {
77-
return (
78-
<div
79-
key={book.asin}
80-
className={"inline-block flex-col-reverse w-[140px]"}
81-
>
82-
<Link href={`/books/info/${book.path}`}>
83-
<Image
84-
alt={`cover for ${book.title} by ${book.authors?.join(
85-
", "
86-
)}`}
87-
src={`/images/covers/${book.cover_filename}`}
88-
width={128}
89-
height={128}
90-
className=""
91-
/>
92-
</Link>
93-
</div>
94-
);
95-
})}
96-
</div> */}
9771
</Section>
9872
</Layout>
9973
);

0 commit comments

Comments
 (0)