added projects

content/projects/first-project.md

@@ -0,0 +1,16 @@
+---
+title: "My First Project"
+date: 29.12.2022
+author: kookroach
+authorLink: https://git.peroxy.dev/kookroach
+description: Short description
+thumbnail: https://images.unsplash.com/photo-1640539984026-c1b0d7c5d4b5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80
+---
+
+# First project
+
+This is a project
+
+You can add pics
+
+![Foo](https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=578&q=80)

content/projects/markdown-test.md

@@ -0,0 +1,241 @@
+---
+title: "Markdown test"
+date: 29.12.2022
+author: kookroach
+authorLink: https://git.peroxy.dev/kookroach
+description: Short description
+---
+
+# h1 Heading 8-)
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+## Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,,  -- ---
+
+"Smartypants, double quotes" and 'single quotes'
+
+
+## Emphasis
+
+**This is bold text**
+
+__This is bold text__
+
+*This is italic text*
+
+_This is italic text_
+
+~~Strikethrough~~
+
+
+## Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+
+## Lists
+
+Unordered
+
++ Create a list by starting a line with `+`, `-`, or `*`
++ Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    * Ac tristique libero volutpat at
+    + Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
++ Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+
+1. You can use sequential numbers...
+1. ...or keep all the numbers as `1.`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+
+## Code
+
+Inline `code`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+
+Block code "fences"
+
+```
+Sample text here...
+```
+
+Syntax highlighting
+
+``` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+```
+
+## Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+Right aligned columns
+
+| Option | Description |
+| ------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+Like links, Images also have a footnote style syntax
+
+![Alt text][id]
+
+With a reference later in the document defining the URL location:
+
+[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+
+
+## Plugins
+
+The killer feature of `markdown-it` is very effective support of
+[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
+
+
+### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+>
+> Shortcuts (emoticons): :-) :-( 8-) ;)
+
+see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
+
+
+### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
+
+- 19^th^
+- H~2~O
+
+
+### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
+
+++Inserted text++
+
+
+### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
+
+==Marked text==
+
+
+### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
+
+Footnote 1 link[^first].
+
+Footnote 2 link[^second].
+
+Inline footnote^[Text of inline footnote] definition.
+
+Duplicated footnote reference[^second].
+
+[^first]: Footnote **can have markup**
+
+    and multiple paragraphs.
+
+[^second]: Footnote text.
+
+
+### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+Term 1
+
+:   Definition 1
+with lazy continuation.
+
+Term 2 with *inline markup*
+
+:   Definition 2
+
+        { some code, part of Definition 2 }
+
+    Third paragraph of definition 2.
+
+_Compact style:_
+
+Term 1
+  ~ Definition 1
+
+Term 2
+  ~ Definition 2a
+  ~ Definition 2b
+
+
+### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+*[HTML]: Hyper Text Markup Language
+
+### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+::: warning
+*here be dragons*
+:::

pages/blog/[slug].tsx

@@ -3,7 +3,7 @@ import fs from "fs";
 import { ParsedUrlQuery } from "querystring";
 import {
   BLOGS_PATH,
-  getFileContentBySlug,
+  getBlogContentBySlug,
   renderMarkdown,
 } from "../../utils/markdown";
 import { MarkdownRenderingResult } from "../../types/types";
@@ -27,15 +27,17 @@ export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
         {date}
       </div>
       <div className="lg:text-5xl font-bold">{title}</div>
-      <div className="mt-2 font-medium">
+      {author && (
-        By{" "}
+        <div className="mt-2 font-medium">
-        {authorLink && (
+          By{" "}
-          <Link href={authorLink} className="text-action">
+          {authorLink && (
-            @{author}
+            <Link href={authorLink} className="text-action">
-          </Link>
+              @{author}
-        )}
+            </Link>
-        {!authorLink && <span className="text-action">@{author}</span>}
+          )}
-      </div>
+          {!authorLink && <span className="text-action">@{author}</span>}
+        </div>
+      )}
       <div className="mt-2">{description}</div>
       <div
         className="mt-4 prose prose-headings:text-primary-text prose-p:text-gray-400"
@@ -62,7 +64,7 @@ export const getStaticPaths: GetStaticPaths<BlogProps> = async () => {
 export const getStaticProps: GetStaticProps<MarkdownRenderingResult> = async ({
   params,
 }) => {
-  const markdownContent = getFileContentBySlug(params?.slug as string);
+  const markdownContent = getBlogContentBySlug(params?.slug as string);
   const renderedHTML = await renderMarkdown(markdownContent.content);
   return {
     props: {

pages/blog/index.tsx

@@ -1,8 +1,9 @@
 import { GetServerSideProps } from "next";
 import { MainLayout } from "../../layouts/MainLayout";
-import { BlogPost, getAllFilesFrontMatter } from "../../utils/markdown";
+import { Post, getAllBlogsFrontMatter } from "../../utils/markdown";
 import { FrontMatter } from "../../types/types";
 import Link from "next/link";
+import { formatDate } from "../../utils/general";
 
 export interface BasicBlogProps extends FrontMatter {
   title: string;
@@ -13,19 +14,10 @@ export interface BasicBlogProps extends FrontMatter {
 }
 
 const BlogCard = ({ blog, slug }: { blog: BasicBlogProps; slug: string }) => {
-  const format = (date: string) => {
-    const [day, month, year] = date.split(".");
-    const d = new Date(`${year}-${month}-${day}`);
-    return d.toLocaleDateString("en-US", {
-      month: "long",
-      day: "numeric",
-      year: "numeric",
-    });
-  };
   return (
     <div className="p-4 rounded-md border border-gray-700">
       <div className="text-sm font-medium text-gray-500">
-        {format(blog.date)}
+        {formatDate(blog.date)}
       </div>
       <h2 className="text-2xl font-bold">{blog.title}</h2>
       <p className="text-gray-400 text-lg">{blog.description}</p>
@@ -38,7 +30,7 @@ const BlogCard = ({ blog, slug }: { blog: BasicBlogProps; slug: string }) => {
   );
 };
 
-const Blog = ({ posts }: { posts: BlogPost[] }) => {
+const Blog = ({ posts }: { posts: Post[] }) => {
   return (
     <MainLayout>
       <h1 className="text-3xl font-bold">Blog</h1>
@@ -57,7 +49,7 @@ const Blog = ({ posts }: { posts: BlogPost[] }) => {
 };
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const posts = getAllFilesFrontMatter();
+  const posts = getAllBlogsFrontMatter();
   return {
     props: {
       posts,

pages/project/[slug].tsx

@@ -0,0 +1,79 @@
+import { GetStaticPaths, GetStaticProps } from "next";
+import fs from "fs";
+import { ParsedUrlQuery } from "querystring";
+import {
+  getProjectContentBySlug,
+  PROJECTS_PATH,
+  renderMarkdown,
+} from "../../utils/markdown";
+import { MarkdownRenderingResult } from "../../types/types";
+import { MainLayout } from "../../layouts/MainLayout";
+import Link from "next/link";
+import { IoMdArrowRoundBack as BackIcon } from "react-icons/io";
+import { BasicProjectProps } from "../projects";
+
+export const ProjectArticle = ({
+  frontMatter,
+  html,
+}: MarkdownRenderingResult) => {
+  const { title, author, date, description, authorLink } =
+    frontMatter as BasicProjectProps;
+  return (
+    <MainLayout>
+      <Link href="/projects">
+        <button className="flex flex-row items-center gap-2 text-secondary hover:text-secondary/50 transition-all ease-in duration-75">
+          <BackIcon />
+          <span>Go Back</span>
+        </button>
+      </Link>
+      <div className="lg:mt-10 mt-4 mb-2 text-sm font-medium text-gray-500">
+        {date}
+      </div>
+      <div className="lg:text-5xl font-bold">{title}</div>
+      {author && (
+        <div className="mt-2 font-medium">
+          By{" "}
+          {authorLink && (
+            <Link href={authorLink} className="text-action">
+              @{author}
+            </Link>
+          )}
+          {!authorLink && <span className="text-action">@{author}</span>}
+        </div>
+      )}
+      <div className="mt-2 mb-10">{description}</div>
+      <div
+        className="prose prose-headings:text-primary-text prose-p:text-gray-400 prose-img:w-full prose-img:h-auto xl:prose-img:max-h-96 prose-img:object-cover"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </MainLayout>
+  );
+};
+interface ProjectProps extends ParsedUrlQuery {
+  slug: string;
+}
+export const getStaticPaths: GetStaticPaths<ProjectProps> = async () => {
+  const paths = fs
+    .readdirSync(PROJECTS_PATH)
+    .map((path) => path.replace(/\.mdx?$/, ""))
+    .map((slug) => ({ params: { slug } }));
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export const getStaticProps: GetStaticProps<MarkdownRenderingResult> = async ({
+  params,
+}) => {
+  const markdownContent = getProjectContentBySlug(params?.slug as string);
+  const renderedHTML = await renderMarkdown(markdownContent.content);
+  return {
+    props: {
+      frontMatter: markdownContent.frontMatter,
+      html: renderedHTML,
+    },
+  };
+};
+export default ProjectArticle;

pages/projects/index.tsx

@@ -0,0 +1,76 @@
+import { GetServerSideProps } from "next";
+import { MainLayout } from "../../layouts/MainLayout";
+import { Post, getAllProjectsFrontMatter } from "../../utils/markdown";
+import { FrontMatter } from "../../types/types";
+import Link from "next/link";
+import { formatDate } from "../../utils/general";
+
+export interface BasicProjectProps extends FrontMatter {
+  title: string;
+  description: string;
+  date: string;
+  author: string;
+  authorLink: string;
+  thumbnail: string;
+}
+
+const ProjectCard = ({
+  project,
+  slug,
+}: {
+  project: BasicProjectProps;
+  slug: string;
+}) => {
+  return (
+    <div className="p-4 rounded-md border border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4">
+      <div className="order-last xl:order-1">
+        <div className="text-sm font-medium text-gray-500">
+          {formatDate(project.date)}
+        </div>
+        <h2 className="text-2xl font-bold">{project.title}</h2>
+        <p className="text-gray-400 text-lg">{project.description}</p>
+        <Link href={`project/${slug}`}>
+          <button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
+            Read more
+          </button>
+        </Link>
+      </div>
+      {project.thumbnail && (
+        <img
+          src={project.thumbnail}
+          alt={`${slug}-thumbnail`}
+          className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
+        />
+      )}
+    </div>
+  );
+};
+
+const Projects = ({ posts }: { posts: Post[] }) => {
+  return (
+    <MainLayout>
+      <h1 className="text-3xl font-bold">Projects</h1>
+      <div className="w-full h-0.5 bg-white/50 my-4 rounded-full" />
+      <div className="grid grid-cols-1 gap-4">
+        {posts.map((post, index) => (
+          <ProjectCard
+            key={index}
+            project={post.frontMatter as BasicProjectProps}
+            slug={post.slug}
+          />
+        ))}
+      </div>
+    </MainLayout>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  const posts = getAllProjectsFrontMatter();
+  return {
+    props: {
+      posts,
+    },
+  };
+};
+
+export default Projects;

styles/globals.css

@@ -5,3 +5,8 @@
 body {
   @apply dark:bg-gradient-dark dark:text-primary-text bg-white text-gradient-dark xl:w-2/3 w-11/12 mx-auto;
 }
+
+.prose {
+  margin: 0;
+  min-width: 100%;
+}

utils/general.ts

@@ -0,0 +1,10 @@
+export const formatDate = (date: string) => {
+  if (!date) return null;
+  const [day, month, year] = date.split(".");
+  const d = new Date(`${year}-${month}-${day}`);
+  return d.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+};

utils/markdown.ts

@@ -6,8 +6,13 @@ import { remark } from "remark";
 import html from "remark-html";
 
 export const BLOGS_PATH = join(process.cwd(), "content/blogs");
+export const PROJECTS_PATH = join(process.cwd(), "content/projects");
+export interface Post {
+  frontMatter: FrontMatter;
+  slug: string;
+}
 
-export const getFileContentBySlug = (slug: string): MarkdownDocument => {
+export const getBlogContentBySlug = (slug: string): MarkdownDocument => {
   const filepath = join(BLOGS_PATH, `${slug}.md` || `${slug}.mdx`);
   const filecontents = fs.readFileSync(filepath);
 
@@ -18,18 +23,34 @@ export const getFileContentBySlug = (slug: string): MarkdownDocument => {
     content: content,
   };
 };
+export const getProjectContentBySlug = (slug: string): MarkdownDocument => {
+  const filepath = join(PROJECTS_PATH, `${slug}.md` || `${slug}.mdx`);
+  const filecontents = fs.readFileSync(filepath);
 
-export interface BlogPost {
+  const { data, content } = matter(filecontents);
-  frontMatter: FrontMatter;
-  slug: string;
-}
 
-export const getAllFilesFrontMatter = (): BlogPost[] => {
+  return {
+    frontMatter: data,
+    content: content,
+  };
+};
+
+export const getAllBlogsFrontMatter = (): Post[] => {
   const files = fs.readdirSync(BLOGS_PATH);
 
-  return files.reduce((allPosts: BlogPost[], postSlug: string) => {
+  return files.reduce((allPosts: Post[], postSlug: string) => {
     const slug = postSlug.replace(".md", "");
-    const post = getFileContentBySlug(slug);
+    const post = getBlogContentBySlug(slug);
+
+    return [{ frontMatter: post.frontMatter, slug }, ...allPosts];
+  }, []);
+};
+export const getAllProjectsFrontMatter = (): Post[] => {
+  const files = fs.readdirSync(PROJECTS_PATH);
+
+  return files.reduce((allPosts: Post[], postSlug: string) => {
+    const slug = postSlug.replace(".md", "");
+    const post = getProjectContentBySlug(slug);
 
     return [{ frontMatter: post.frontMatter, slug }, ...allPosts];
   }, []);