4 files changed, 229 insertions, 0 deletions
diff --git a/src/deepReadDir.tsx b/src/deepReadDir.tsx
new file mode 100644
index 0000000..ec585ec
--- /dev/null
+++ b/src/deepReadDir.tsx
@@ -0,0 +1,12 @@
+import {lstat, readdir} from 'node:fs/promises'
+import {join} from 'node:path'
+
+const deepReadDir = async (dirPath: string): Promise<string[]> => await Promise.all(
+  (await readdir(dirPath)).map(async (entity) => {
+    const path = join(dirPath, entity)
+    return (await lstat(path)).isDirectory() ? await deepReadDir(path) : path
+  }),
+).then(arr => arr.flat());
+
+
+export default deepReadDir;
diff --git a/src/pages/[...path].tsx b/src/pages/[...path].tsx
new file mode 100644
index 0000000..30fdcd6
--- /dev/null
+++ b/src/pages/[...path].tsx
@@ -0,0 +1,56 @@
+import _ from 'lodash';
+import type { GetStaticPropsContext, NextPage } from "next";
+import ReactMarkdown from 'react-markdown';
+import Head from "next/head";
+import deepReadDir from "../deepReadDir";
+import fs from 'fs';
+
+
+const MARKDOWN_DIR = '../eug-vs-xyz/src';
+
+const transformLinkURI = (uri: string): string => {
+  return uri.match(/(.*)\.md/)?.[1] || uri;
+}
+
+export const getStaticProps = async (context: GetStaticPropsContext) => {
+  const path = _.isArray(context.params?.path) && context.params?.path || [context.params?.path];
+  const markdownSource = fs.readFileSync(`${MARKDOWN_DIR}/${path?.join('/')}.md`).toString();
+  return {
+    props: {
+      markdownSource,
+      path,
+    }
+  }
+}
+
+export const getStaticPaths = async () => {
+  const globalPaths = await deepReadDir(MARKDOWN_DIR);
+  const paths = globalPaths
+    .map(globalPath => globalPath.match(`${MARKDOWN_DIR}/(.*)\.md`)?.[1] )
+    .filter(p => p)
+    .map(p => p?.split('/'))
+    .map(path => ({ params: { path } }));
+  console.log(paths);
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+const Page: NextPage = ({ markdownSource }: any) => {
+  return (
+    <>
+      <Head>
+        <title>Create T3 App</title>
+        <meta name="description" content="Generated by create-t3-app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <ReactMarkdown transformLinkUri={transformLinkURI}>{markdownSource}</ReactMarkdown>
+      </main>
+    </>
+  );
+};
+
+export default Page;
+
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
new file mode 100644
index 0000000..191f276
--- /dev/null
+++ b/src/pages/_app.tsx
@@ -0,0 +1,18 @@
+import "../styles/globals.css";
+import logo from '../../public/eug-vs.png';
+import type { AppProps } from "next/app";
+import Image from 'next/future/image';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <a href="/" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textDecoration: 'none', marginBottom: '12px' }}>
+        <Image src={logo} width={128} height={128} />
+        <h1>Eugene's Space</h1>
+      </a>
+      <Component {...pageProps} />
+    </>
+  )
+}
+
+export default MyApp;
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000..6023273
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,143 @@
+@font-face {
+  font-family: "Bitter";
+  src: url(../../public/fonts/Bitter-Regular.woff) format("truetype");
+}
+html {
+  font-family: "Open Sans", sans-serif;
+  color: #ebdbb2;
+  background-color: #282828;
+}
+body {
+  margin: 0 auto;
+  max-width: 1100px;
+  padding-left: 50px;
+  padding-right: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  word-wrap: break-word;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+  font-size: 16px;
+}
+@media (max-width: 600px) {
+  body {
+    padding: 1em;
+  }
+}
+p {
+  margin: 1em 0;
+}
+a {
+  color: #fabd2f;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+img {
+  max-width: 100%;
+}
+h1 {
+  font-weight: normal;
+}
+h2, h3, h4, h5, h6 {
+  font-family: "Bitter", serif;
+  font-weight: normal;
+  line-height: 1.1;
+  margin-top: 1.4em;
+}
+h2 {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+h3 {
+  font-size: 21px;
+}
+ol, ul {
+  padding-left: 1.7em;
+  margin-top: 1em;
+}
+li > ol, li > ul {
+  margin-top: 0;
+}
+blockquote {
+  margin: 1em 0 1em 1.7em;
+  padding-left: 1em;
+  border-left: 2px solid #e6e6e6;
+  color: rgba(255, 255, 255, 0.75);
+  font-style: italic;
+}
+code {
+  font-family: monospace;
+  font-size: 90%;
+  margin: 0;
+  padding: 2px;
+  background: #1d2021;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+pre {
+  margin: 1em 0;
+  overflow: auto;
+  padding: 16px 8px;
+}
+pre code {
+  overflow: visible;
+}
+.sourceCode {
+  background-color: transparent;
+  overflow: visible;
+  border-radius: 4px;
+}
+div.sourceCode {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+code.sourceCode {
+  padding: 0;
+  border: none;
+}
+hr {
+  background-color: #1a1a1a;
+  border: none;
+  height: 1px;
+  margin: 1em 0;
+}
+table {
+  margin: 1em 0;
+  border-collapse: collapse;
+  width: 100%;
+  overflow-x: auto;
+  display: block;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+table caption {
+  margin-bottom: 0.75em;
+}
+tbody {
+  margin-top: 0.5em;
+  border-top: 1px solid #1a1a1a;
+  border-bottom: 1px solid #1a1a1a;
+}
+th {
+  border-top: 1px solid #1a1a1a;
+  padding: 0.25em 0.5em 0.25em 0.5em;
+}
+td {
+  padding: 0.125em 0.5em 0.25em 0.5em;
+}
+header {
+  margin-bottom: 4em;
+  text-align: center;
+}
+#TOC li {
+  list-style: none;
+}
+#TOC a:not(:hover) {
+  text-decoration: none;
+}
+code{white-space: pre-wrap;}
+span.smallcaps{font-variant: small-caps;}
+span.underline{text-decoration: underline;}
+div.column{display: inline-block; vertical-align: top; width: 50%;}
+div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+ul.task-list{list-style: none;}
+.display.math{display: block; text-align: center; margin: 0.5rem auto;}