+
+ + #MKR +
++ Words from{" "} + + Muthu Kumar + +
+
+
+ Designer / Developer / Architect
+
+
+
+
+
} />
+
+ {category}
+ ·
+ {new Date(published).toLocaleDateString()}
+
+ );
+};
diff --git a/src/pages/blog/components/BlogContent.tsx b/src/pages/blog/components/BlogContent.tsx
new file mode 100644
index 0000000..f6dbe47
--- /dev/null
+++ b/src/pages/blog/components/BlogContent.tsx
@@ -0,0 +1,210 @@
+import React, { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { marked } from "marked";
+import { Article, blog, getBlogPath, nextAndPrev } from "../../../data";
+import "../../../blog.css";
+import { ArticleSubHeader } from "./ArticleSubHeader";
+import { css, cx } from "@emotion/css";
+import { ReactComponent as Arrow } from "../../../assets/arrow-thin.svg";
+import { ellipses, useNav } from "../../../util";
+
+const Markdown: React.FC<{ content: string }> = ({ content }) => {
+ return (
+
+ );
+};
+
+const Preview: React.FC<{ article: Article }> = ({ article }) => {
+ return (
+
+ ![Featured]({"/blog/assets/")
+
+
+
+ );
+};
+
+const btn = css`
+ background-color: #535353;
+ border: 0;
+ cursor: pointer;
+ border-radius: 0.5rem;
+ padding: 0.5rem 1.4rem;
+ color: #c8c8c8;
+ font-size: 1.2rem;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 600;
+ transition: background-color 150ms;
+
+ &:hover {
+ background-color: #414141;
+ color: var(--text-colour);
+ }
+
+ & svg {
+ height: 2rem;
+ width: 1.5rem;
+ }
+`;
+
+export const BlogPost: React.FC = () => {
+ const navigate = useNav();
+ const location = useLocation();
+ const [content, setContent] = useState("");
+ const [error, setError] = useState("");
+ const [loading, setLoading] = useState(true);
+
+ const [year, slug] = location.pathname.split("/").slice(-2);
+ const article = blog[year]?.[slug];
+
+ const [next, prev] = nextAndPrev(year, slug);
+
+ useEffect(() => {
+ async function query() {
+ setLoading(true);
+
+ const path = getBlogPath(article) + ".md";
+ const res = await fetch(path);
+ console.log(res.status);
+ // not success and not a cached response
+ if (res.status > 299 && res.status !== 304) {
+ if (res.status > 399) {
+ const err = await res.text().catch(() => "Unknown error");
+ return setError(err);
+ } else return setError("Unexpected redirect");
+ }
+
+ const content = await res.text();
+
+ setContent(content.split("---").slice(2).join("---"));
+ setLoading(false);
+ }
+
+ query();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [location]);
+
+ if (loading) return {article.title}
+{ellipses(article.snippet, 110)}
+Loading...
;
+
+ if (!article || error) return {error || "Unknown error occurred"}
;
+
+ return (
+ <>
+
+ + {article.title} +
+
+ {prev && (
+
+
+
+ );
+};
diff --git a/src/util/index.ts b/src/util/index.ts
index 3988943..2bb4df1 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -1,3 +1,6 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
export const getTimeout = () => {
const clearables = new Set