Skip to content

Commit 0eccfa0

Browse files
authored
Merge pull request #10 from devrimtech/blog
2 parents b62d5fe + a21ab0e commit 0eccfa0

File tree

13 files changed

+960
-28
lines changed

13 files changed

+960
-28
lines changed

components/navbar/navbar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ export const Navbar = () => {
44
<header className="nav-header">
55
<nav className="nav-nav">
66
<Link href="/">Kai Devrim</Link>
7-
{/* <Link href="/blog">Blog</Link>
8-
<Link href="/resume">Résumé</Link> */}
7+
<Link href="/blog">Blog</Link>
8+
{/* <Link href="/resume">Résumé</Link> */}
99
<Link href="/now">Now</Link>
1010
<Link href="/uses">Uses</Link>
1111
{/* <Link href="/contact">Contact</Link> */}

package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,15 @@
1414
"@mdx-js/loader": "^2.0.0",
1515
"@mdx-js/react": "^2.0.0",
1616
"@next/mdx": "^12.1.0",
17+
"@types/lodash": "^4.14.179",
1718
"@types/mdx": "^2.0.1",
19+
"@types/prismjs": "^1.26.0",
1820
"gray-matter": "^4.0.3",
21+
"lodash": "^4.17.21",
1922
"next": "12.1.0",
2023
"next-mdx-remote": "^4.0.0",
24+
"prism-react-renderer": "^1.3.1",
25+
"prismjs": "^1.27.0",
2126
"react": "17.0.2",
2227
"react-dom": "17.0.2",
2328
"react-icons": "^4.3.1",

pages/_app.tsx

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,62 @@
1-
import '../styles/globals.css'
2-
import type { AppProps } from 'next/app'
3-
1+
import "../styles/globals.css";
2+
import "../styles/prism-lucario.css";
3+
import type { AppProps } from "next/app";
4+
import NavBar from "../components/navbar/navbar";
5+
import Head from "next/head";
46
function MyApp({ Component, pageProps }: AppProps) {
5-
return <Component {...pageProps} />
7+
return (
8+
<>
9+
<Head>
10+
<title>Kai&apos;s Wacky Website</title>
11+
<meta
12+
name="description"
13+
content="Part-Time High School Student, Part-Time Computer Wizard"
14+
/>
15+
<link rel="icon" type="image/jpg" href="/Kai.jpg" />
16+
<meta httpEquiv="X-Clacks-Overhead" content="GNU Terry Pratchett" />
17+
<title>Kai Devrim</title>
18+
<meta
19+
name="keywords"
20+
content="kai, kai devrim, kai mccormick, devrim, devrimkai, devrim kai, kai devrim mccormick, kai the penguin, penguin kai, penguinkai"
21+
/>
22+
<meta name="robots" content="index, follow" />
23+
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
24+
<meta name="language" content="English" />
25+
<meta name="author" content="Kai Devrim" />
26+
<meta name="title" content="Kai Devrim" />
27+
<meta
28+
name="description"
29+
content="Part-Time High School Student, Part-Time Computer Wizard"
30+
/>
31+
32+
<meta itemProp="name" content="Kai Devrim" />
33+
<meta
34+
itemProp="description"
35+
content="Part-Time High School Student, Part-Time Computer Wizard"
36+
/>
37+
<meta itemProp="image" content="https://devrim.tech/meta.png" />
38+
39+
<meta property="og:type" content="website" />
40+
<meta property="og:url" content="https://devrim.tech/" />
41+
<meta property="og:title" content="Kai Devrim" />
42+
<meta
43+
property="og:description"
44+
content="Part-Time High School Student, Part-Time Computer Wizard"
45+
/>
46+
<meta property="og:image" content="https://devrim.tech/meta.png" />
47+
48+
<meta name="twitter:card" content="summary_large_image" />
49+
<meta property="twitter:url" content="https://devrim.tech/" />
50+
<meta property="twitter:title" content="Kai Devrim" />
51+
<meta
52+
property="twitter:description"
53+
content="Part-Time High School Student, Part-Time Computer Wizard"
54+
/>
55+
<meta name="twitter:image" content="https://devrim.tech/meta.png" />
56+
</Head>
57+
<NavBar /> <Component {...pageProps} />
58+
</>
59+
);
660
}
761

8-
export default MyApp
62+
export default MyApp;

pages/blog.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import fs from "fs";
2+
import path from "path";
3+
import matter from "gray-matter";
4+
import Link from "next/link";
5+
import _ from "lodash";
6+
export default function Blog({ posts }: any) {
7+
return (
8+
<>
9+
<div className="blog-root pages">
10+
{posts.map((post: any, index: any) => (
11+
<Link href={"/blog/" + post.slug} passHref key={index}>
12+
<div className="blog-details">
13+
<header>{post.frontMatter.title}</header>
14+
<section>{post.frontMatter.description}</section>
15+
<footer>{post.frontMatter.date}</footer>
16+
<hr />
17+
</div>
18+
</Link>
19+
))}
20+
</div>
21+
</>
22+
);
23+
}
24+
export const getStaticProps = async () => {
25+
const files = fs.readdirSync(path.join("posts"));
26+
let posts = files.map((filename) => {
27+
const markdownWithMeta = fs.readFileSync(
28+
path.join("posts", filename),
29+
"utf-8"
30+
);
31+
const { data: frontMatter } = matter(markdownWithMeta);
32+
return {
33+
frontMatter,
34+
slug: filename.split(".")[0],
35+
};
36+
});
37+
posts = _.reverse(_.sortBy(posts, (post) => post.frontMatter.date));
38+
return {
39+
props: {
40+
posts,
41+
},
42+
};
43+
};

pages/blog/[slug].tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { serialize } from "next-mdx-remote/serialize";
2+
import { MDXRemote } from "next-mdx-remote";
3+
import fs from "fs";
4+
import path from "path";
5+
import matter from "gray-matter";
6+
import Prism from "prismjs";
7+
import { useEffect } from "react";
8+
9+
const PostPage = ({ frontMatter: { title }, mdxSource }: any) => {
10+
useEffect(() => {
11+
Prism.highlightAll();
12+
}, []);
13+
return (
14+
<>
15+
<div className="content pages blog">
16+
<h1 className="blog-title">{title}</h1>
17+
<MDXRemote {...mdxSource} />
18+
</div>
19+
</>
20+
);
21+
};
22+
23+
export const getStaticPaths = async () => {
24+
const files = fs.readdirSync(path.join("posts"));
25+
const paths = files.map((filename) => ({
26+
params: {
27+
slug: filename.replace(".mdx", ""),
28+
},
29+
}));
30+
return {
31+
paths,
32+
fallback: false,
33+
};
34+
};
35+
36+
export const getStaticProps = async ({ params: { slug } }: any) => {
37+
const markdownWithMeta = fs.readFileSync(
38+
path.join("posts", slug + ".mdx"),
39+
"utf-8"
40+
);
41+
const { data: frontMatter, content } = matter(markdownWithMeta);
42+
const mdxSource = await serialize(content);
43+
return {
44+
props: {
45+
frontMatter,
46+
slug,
47+
mdxSource,
48+
},
49+
};
50+
};
51+
52+
export default PostPage;

pages/index.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Head from "next/head";
33
import Image from "next/image";
44
import Link from "next/link";
55
import Header from "../components/header/header";
6-
import Navbar from "../components/navbar/navbar";
76
import Webring from "../components/webring/webring";
87

98
const Home: NextPage = () => {
@@ -59,7 +58,6 @@ const Home: NextPage = () => {
5958
</Head>
6059

6160
<main>
62-
<Navbar />
6361
<About />
6462
</main>
6563
</div>

pages/now.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
import type { NextPage } from "next";
2-
import Head from "next/head";
32
import Link from "next/link";
4-
import Navbar from "../components/navbar/navbar";
53
const Now: NextPage = () => {
64
return (
7-
<div>
8-
<Head>
9-
<title>Kai&apos;s Wacky Website</title>
10-
<meta name="description" content="Generated by create next app" />
11-
<link rel="icon" href="/favicon.ico" />
12-
</Head>
5+
<>
136
<main>
14-
<Navbar />
157
<NowPage />
168
</main>
17-
</div>
9+
</>
1810
);
1911
};
2012

pages/uses.tsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,13 @@
11
import type { NextPage } from "next";
22
import Head from "next/head";
33
import Link from "next/link";
4-
import Navbar from "../components/navbar/navbar";
54
const Uses: NextPage = () => {
65
return (
7-
<div>
8-
<Head>
9-
<title>Kai&apos;s Wacky Website</title>
10-
<meta name="description" content="Generated by create next app" />
11-
<link rel="icon" href="/favicon.ico" />
12-
</Head>
6+
<>
137
<main>
14-
<Navbar />
158
<UsesPage />
169
</main>
17-
</div>
10+
</>
1811
);
1912
};
2013

pnpm-lock.yaml

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)