chore: move content folder

content/code-blocks.mdx

@@ -0,0 +1,107 @@
+---
+title: Lets see what we can do with rehype pretty code
+description: Syntax highlighting, line numbers, line highlights, word highlights
+date: 2024-03-04
+tags: ["code", "rehype pretty", "mdx"]
+published: true
+---
+
+[`rehype-pretty-code`](https://github.com/atomiks/rehype-pretty-code) is a Rehype plugin powered by the
+[`shiki`](https://github.com/shikijs/shiki) syntax highlighter that provides beautiful code blocks for Markdown or MDX. It works on both the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting.
+
+## Editor-Grade Highlighting
+
+<span className="mix-blend-plus-lighter text-zinc-400/80">
+  Enjoy the accuracy and granularity of VS Code's syntax highlighting engine and
+  the popularity of its themes ecosystem — use any VS Code theme you want!
+</span>
+
+## Line Numbers and Line Highlighting
+
+Draw attention to a particular line of code.
+
+```js {4} showLineNumbers
+import { useFloating } from "@floating-ui/react";
+
+function MyComponent() {
+  const { refs, floatingStyles } = useFloating();
+
+  return (
+    <>
+      <div ref={refs.setReference} />
+      <div ref={refs.setFloating} style={floatingStyles} />
+    </>
+  );
+}
+```
+
+## Word Highlighting
+
+Draw attention to a particular word or series of characters.
+
+```js /floatingStyles/
+import { useFloating } from "@floating-ui/react";
+
+function MyComponent() {
+  const { refs, floatingStyles } = useFloating();
+
+  return (
+    <>
+      <div ref={refs.setReference} />
+      <div ref={refs.setFloating} style={floatingStyles} />
+    </>
+  );
+}
+```
+
+## ANSI Highlighting
+
+```ansi
+  vite v5.0.0 dev server running at:
+
+  > Local: http://localhost:3000/
+  > Network: use `--host` to expose
+
+  ready in 125ms.
+
+8:38:02 PM [vite] hmr update /src/App.jsx
+```
+
+Inline ANSI: `> Local: http://localhost:3000/{:ansi}`
+
+---
+
+### Kitchen Sink Meta Strings
+
+```js showLineNumbers {2-4} title="isEven.js" /console/ caption="Im a caption"
+function isEven(number) {
+  if (number === 1) {
+    return false;
+  } else if (number === 2) {
+    return true;
+  } else if (number === 3) {
+    return false;
+  } else if (number === 4) {
+    return true;
+  } else if (number === 5) {
+    return false;
+  } else if (number === 6) {
+    return true;
+  } else if (number === 7) {
+    return false;
+  } else if (number === 8) {
+    return true;
+  } else if (number === 9) {
+    return false;
+  } else if (number === 10) {
+    return true;
+  } else {
+    return "Number is not between 1 and 10.";
+  }
+}
+
+// Example usage:
+console.log(isEven(3)); // Should return false
+console.log(isEven(4)); // Should return true
+console.log(isEven(11)); // Should return "Number is not between 1 and 10."
+```

content/disappearing-props.mdx

@@ -0,0 +1,74 @@
+---
+title: "The Mysterious Case of the Disappearing Props"
+description: Join us on a humorous detective journey to solve the mystery of disappearing props in a React application. Learn troubleshooting tips and best practices to prevent your props from vanishing into thin air.
+date: 2024-03-01
+tags: ["code", "react", "props"]
+published: true
+---
+
+# The Mysterious Case of the Disappearing Props
+
+In the quiet town of Reactville, developers live in harmony, crafting components and passing props with ease. But one day, a mystery unfolds that sends shockwaves through the community: props begin to disappear without a trace. This tale of intrigue and debugging will guide you through the dark alleys of React development to uncover the truth behind the disappearing props.
+
+## Chapter 1: The Disappearance
+
+Our story begins with a developer, much like yourself, who notices something amiss. A component that once displayed data proudly now stands empty, a shadow of its former self. The props, it seems, have vanished.
+
+```jsx
+const MysteryComponent = ({ clue }) => (
+  <div>{clue ? `Clue: ${clue}` : "No clue found."}</div>
+);
+```
+
+## Chapter 2: Gathering Clues
+
+Determined to solve the mystery, our developer dons their detective hat and begins to gather clues. The first stop? The PropTypes alley, where the types of props are declared. Perhaps the culprit left a clue in the form of a type mismatch.
+
+```jsx
+import PropTypes from "prop-types";
+
+MysteryComponent.propTypes = {
+  clue: PropTypes.string,
+};
+```
+
+## Chapter 3: The Trail of Conditional Rendering
+
+The investigation leads to the shadowy path of conditional rendering, a place where props often go unnoticed. Could it be that a misplaced condition has caused the props to disappear?
+
+```jsx
+const MysteryComponent = ({ clue }) => {
+  return (
+    <>
+      {clue ? (
+        <div>Clue: {clue}</div>
+      ) : (
+        <div className="warning">Warning: Clue is missing!</div>
+      )}
+    </>
+  );
+};
+```
+
+## Chapter 4: The Redux of Red Herring
+
+In a surprising twist, our developer suspects Redux, the state manager, might be involved. But upon closer inspection, they realize it was a red herring; the props were simply not connected correctly.
+
+```jsx
+import { useSelector } from "react-redux";
+
+const MysteryComponent = () => {
+  const clue = useSelector((state) => state.mystery.clue);
+  return <div>{clue ? `Clue: ${clue}` : "No clue found."}</div>;
+};
+```
+
+## Chapter 5: The Resolution
+
+With all clues gathered, our developer uncovers the truth: the props were not disappearing; they were merely lost in the complexity of the application. By ensuring proper prop types, conditional rendering, and state management connections, the props were found safe and sound.
+
+## Epilogue: The Moral of the Story
+
+As peace returns to Reactville, our developer learns an invaluable lesson: in the world of React development, props may seem to disappear, but with careful debugging and attention to detail, they can always be found.
+
+Remember, dear developers, when faced with the mysterious disappearance of props, don your detective hat, gather your tools, and embark on a journey of discovery. The truth is out there, waiting to be uncovered.

content/github-markdown.mdx

@@ -0,0 +1,193 @@
+---
+title: Github Flavoured Markdown CheatSheet
+description: A markdown cheat sheet for GFM
+date: 2024-03-03
+published: true
+---
+
+# Introduction
+
+The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/
+
+# What is Markdown?
+
+Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like `#` or `*`.
+
+# Syntax guide
+
+Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.
+
+## Headers
+
+```mdx
+# This is a h1 tag
+
+## This is a h2 tag
+
+#### This is a h4 tag
+```
+
+# This is a h1 tag
+
+## This is a h2 tag
+
+#### This is a h4 tag
+
+## Emphasis
+
+```mdx
+_This text will be italic_
+
+**This text will be bold**
+
+_You **can** combine them_
+```
+
+_This text will be italic_
+
+**This text will be bold**
+
+_You **can** combine them_
+
+## Lists
+
+### Unordered
+
+```mdx
+- Item 1
+- Item 2
+  - Item 2a
+  - Item 2b
+```
+
+- Item 1
+- Item 2
+  - Item 2a
+  - Item 2b
+
+### Ordered
+
+```mdx
+1. Item 1
+1. Item 2
+1. Item 3
+   1. Item 3a
+   1. Item 3b
+```
+
+1. Item 1
+1. Item 2
+1. Item 3
+   1. Item 3a
+   1. Item 3b
+
+## Images
+
+```mdx
+![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+Format: ![Alt Text](url)
+```
+
+![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+
+## Links
+
+```mdx
+http://github.com - automatic!
+[GitHub](http://github.com)
+```
+
+http://github.com - automatic!
+[GitHub](http://github.com)
+
+## Blockquotes
+
+```mdx
+As Kanye West said:
+
+> We're living the future so
+> the present is our past.
+```
+
+As Kanye West said:
+
+> We're living the future so
+> the present is our past.
+
+## Inline code
+
+```mdx
+I think you should use an
+`<addr>` element here instead.
+```
+
+I think you should use an
+`<addr>` element here instead.
+
+## Syntax highlighting
+
+Here’s an example of how you can use syntax highlighting with [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/):
+
+````mdx
+```js:fancyAlert.js
+function fancyAlert(arg) {
+  if (arg) {
+    $.facebox({ div: '#foo' })
+  }
+}
+```
+````
+
+And here's how it looks - nicely colored with styled code titles!
+
+```jsx
+function fancyAlert(arg) {
+  if (arg) {
+    $.facebox({ div: "#foo" });
+  }
+}
+```
+
+## Footnotes
+
+```mdx
+Here is a simple footnote[^1]. With some additional text after it.
+
+[^1]: My reference.
+```
+
+Here is a simple footnote[^1]. With some additional text after it.
+
+[^1]: My reference.
+
+## Task Lists
+
+```mdx
+- [x] list syntax required (any unordered or ordered list supported)
+- [x] this is a complete item
+- [ ] this is an incomplete item
+```
+
+- [x] list syntax required (any unordered or ordered list supported)
+- [x] this is a complete item
+- [ ] this is an incomplete item
+
+## Tables
+
+You can create tables by assembling a list of words and dividing them with hyphens `-` (for the first row), and then separating each column with a pipe `|`:
+
+```mdx
+| First Header                | Second Header                |
+| --------------------------- | ---------------------------- |
+| Content from cell 1         | Content from cell 2          |
+| Content in the first column | Content in the second column |
+```
+
+| First Header                | Second Header                |
+| --------------------------- | ---------------------------- |
+| Content from cell 1         | Content from cell 2          |
+| Content in the first column | Content in the second column |
+
+## Strikethrough
+
+Any word wrapped with two tildes (like `~~this~~`) will appear ~~crossed out~~.

content/hello-world.mdx

@@ -0,0 +1,15 @@
+---
+title: Hello World
+description: This is our first blog post. Really cool
+date: 2024-03-06
+tags: ["code", "blog"]
+published: true
+---
+
+<Callout type="warning">Hello I am a callout</Callout>
+
+# Hello World
+
+Welcome to my blog `inline code`
+
+### Header 3