diff --git a/astro.config.mjs b/astro.config.mjs
index c97ada1..802b209 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -21,6 +21,7 @@ export default defineConfig(
markdown: {
// TODO: Maybe use shiki and see if it is better and has line highlighting.
syntaxHighlight: false,
+ mode: "mdx",
remarkPlugins: [
"remark-gfm",
codeHighlightPre,
diff --git a/package-lock.json b/package-lock.json
index e42d6f2..82a3792 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -586,9 +586,9 @@
"dev": true
},
"node_modules/@proload/core": {
- "version": "0.2.2",
- "resolved": "https://registry.npmjs.org/@proload/core/-/core-0.2.2.tgz",
- "integrity": "sha512-HYQEblYXIpW77kvGyW4penEl9D9e9MouPhTqVaDz9+QVFliYjsq18inTfnfTa81s3oraPVtTk60tqCWOf2fKGQ==",
+ "version": "0.3.2",
+ "resolved": "https://registry.npmjs.org/@proload/core/-/core-0.3.2.tgz",
+ "integrity": "sha512-4ga4HpS0ieVYWVMS+F62W++6SNACBu0lkw8snw3tEdH6AeqZu8i8262n3I81jWAWXVcg3sMfhb+kBexrfGrTUQ==",
"dev": true,
"dependencies": {
"deepmerge": "^4.2.2",
@@ -596,15 +596,15 @@
}
},
"node_modules/@proload/plugin-tsm": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/@proload/plugin-tsm/-/plugin-tsm-0.1.1.tgz",
- "integrity": "sha512-qfGegg6I3YBCZDjYR9xb41MTc2EfL0sQQmw49Z/yi9OstIpUa/67MBy4AuNhoyG9FuOXia9gPoeBk5pGnBOGtA==",
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/@proload/plugin-tsm/-/plugin-tsm-0.2.1.tgz",
+ "integrity": "sha512-Ex1sL2BxU+g8MHdAdq9SZKz+pU34o8Zcl9PHWo2WaG9hrnlZme607PU6gnpoAYsDBpHX327+eu60wWUk+d/b+A==",
"dev": true,
"dependencies": {
"tsm": "^2.1.4"
},
"peerDependencies": {
- "@proload/core": "^0.2.1"
+ "@proload/core": "^0.3.2"
}
},
"node_modules/@tootallnate/once": {
@@ -932,9 +932,9 @@
}
},
"node_modules/astro": {
- "version": "1.0.0-beta.17",
- "resolved": "https://registry.npmjs.org/astro/-/astro-1.0.0-beta.17.tgz",
- "integrity": "sha512-CpPJVBiuz4twPH4XgabEpj3py2YMhPnrIxrduJZzSY5NuVs+K7h23wq1umbDZnIY67pRFaPZZtdx0YqKajIXHw==",
+ "version": "1.0.0-beta.18",
+ "resolved": "https://registry.npmjs.org/astro/-/astro-1.0.0-beta.18.tgz",
+ "integrity": "sha512-ttrJDf20s3jd1SrHvv8vJ6tkjrhNylHGpsmDOuMy36EMk5fmoL5NOtXzoex7FevwMfmQ90+mOOYst2TNnOjScA==",
"dev": true,
"dependencies": {
"@astrojs/compiler": "^0.14.2",
@@ -946,8 +946,8 @@
"@babel/generator": "^7.17.9",
"@babel/parser": "^7.17.9",
"@babel/traverse": "^7.17.9",
- "@proload/core": "^0.2.2",
- "@proload/plugin-tsm": "^0.1.1",
+ "@proload/core": "^0.3.2-next.4",
+ "@proload/plugin-tsm": "^0.2.1-next.0",
"ast-types": "^0.14.2",
"boxen": "^6.2.1",
"ci-info": "^3.3.0",
@@ -956,7 +956,7 @@
"diff": "^5.0.0",
"eol": "^0.9.1",
"es-module-lexer": "^0.10.5",
- "esbuild": "^0.14.36",
+ "esbuild": "^0.14.38",
"estree-walker": "^3.0.1",
"execa": "^6.1.0",
"fast-glob": "^3.2.11",
@@ -7412,9 +7412,9 @@
"dev": true
},
"@proload/core": {
- "version": "0.2.2",
- "resolved": "https://registry.npmjs.org/@proload/core/-/core-0.2.2.tgz",
- "integrity": "sha512-HYQEblYXIpW77kvGyW4penEl9D9e9MouPhTqVaDz9+QVFliYjsq18inTfnfTa81s3oraPVtTk60tqCWOf2fKGQ==",
+ "version": "0.3.2",
+ "resolved": "https://registry.npmjs.org/@proload/core/-/core-0.3.2.tgz",
+ "integrity": "sha512-4ga4HpS0ieVYWVMS+F62W++6SNACBu0lkw8snw3tEdH6AeqZu8i8262n3I81jWAWXVcg3sMfhb+kBexrfGrTUQ==",
"dev": true,
"requires": {
"deepmerge": "^4.2.2",
@@ -7422,9 +7422,9 @@
}
},
"@proload/plugin-tsm": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/@proload/plugin-tsm/-/plugin-tsm-0.1.1.tgz",
- "integrity": "sha512-qfGegg6I3YBCZDjYR9xb41MTc2EfL0sQQmw49Z/yi9OstIpUa/67MBy4AuNhoyG9FuOXia9gPoeBk5pGnBOGtA==",
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/@proload/plugin-tsm/-/plugin-tsm-0.2.1.tgz",
+ "integrity": "sha512-Ex1sL2BxU+g8MHdAdq9SZKz+pU34o8Zcl9PHWo2WaG9hrnlZme607PU6gnpoAYsDBpHX327+eu60wWUk+d/b+A==",
"dev": true,
"requires": {
"tsm": "^2.1.4"
@@ -7715,9 +7715,9 @@
}
},
"astro": {
- "version": "1.0.0-beta.17",
- "resolved": "https://registry.npmjs.org/astro/-/astro-1.0.0-beta.17.tgz",
- "integrity": "sha512-CpPJVBiuz4twPH4XgabEpj3py2YMhPnrIxrduJZzSY5NuVs+K7h23wq1umbDZnIY67pRFaPZZtdx0YqKajIXHw==",
+ "version": "1.0.0-beta.18",
+ "resolved": "https://registry.npmjs.org/astro/-/astro-1.0.0-beta.18.tgz",
+ "integrity": "sha512-ttrJDf20s3jd1SrHvv8vJ6tkjrhNylHGpsmDOuMy36EMk5fmoL5NOtXzoex7FevwMfmQ90+mOOYst2TNnOjScA==",
"dev": true,
"requires": {
"@astrojs/compiler": "^0.14.2",
@@ -7729,8 +7729,8 @@
"@babel/generator": "^7.17.9",
"@babel/parser": "^7.17.9",
"@babel/traverse": "^7.17.9",
- "@proload/core": "^0.2.2",
- "@proload/plugin-tsm": "^0.1.1",
+ "@proload/core": "^0.3.2-next.4",
+ "@proload/plugin-tsm": "^0.2.1-next.0",
"ast-types": "^0.14.2",
"boxen": "^6.2.1",
"ci-info": "^3.3.0",
@@ -7739,7 +7739,7 @@
"diff": "^5.0.0",
"eol": "^0.9.1",
"es-module-lexer": "^0.10.5",
- "esbuild": "^0.14.36",
+ "esbuild": "^0.14.38",
"estree-walker": "^3.0.1",
"execa": "^6.1.0",
"fast-glob": "^3.2.11",
diff --git a/src/blogComponents/intersectionObserver/IntersectionObserver.astro b/src/blogComponents/intersectionObserver/IntersectionObserver.astro
index f912ed0..60e8cb5 100644
--- a/src/blogComponents/intersectionObserver/IntersectionObserver.astro
+++ b/src/blogComponents/intersectionObserver/IntersectionObserver.astro
@@ -116,7 +116,7 @@ const { threshold = 0, percentage = false, rootMargin = 0 } = Astro.props
scrollElement.addEventListener("scroll", e => {
cloneContainer.style.bottom = `${e.target.scrollTop}px`
})
- console.log(`${rootMargin}px`)
+
const observer = new IntersectionObserver(
entries => observerCallback(entries[0], [mainElement, cloneElement]),
{ threshold, rootMargin: `${rootMargin}px`, root: scrollElement }
diff --git a/src/components/BlogList.jsx b/src/components/BlogList.jsx
index 8a23690..49951a0 100644
--- a/src/components/BlogList.jsx
+++ b/src/components/BlogList.jsx
@@ -1,10 +1,11 @@
-import { useState } from "preact/hooks"
import TagBar from "./TagBar.jsx"
import SearchBar from "./SearchBar.jsx"
import BlogPostPreview from "./BlogPostPreview.jsx"
+import { useSessionStorage } from "../hooks/useStorage.js"
export default function BlogList({ allPosts }) {
- const [selectedTags, setSelectedTags] = useState([])
+ const [searchQuery, setSearchQuery] = useSessionStorage("searchTerm", "")
+ const [selectedTags, setSelectedTags] = useSessionStorage("selectedTags", [])
const tags = Object.entries(
allPosts.reduce((totals, post) => {
return post.tags.reduce((tagTotals, tag) => {
@@ -20,7 +21,6 @@ export default function BlogList({ allPosts }) {
.map(tag => {
return { ...tag, selected: selectedTags.includes(tag.name) }
})
- const [searchQuery, setSearchQuery] = useState("")
const filteredPosts = allPosts.filter(post => {
return (
(post.title.toLowerCase().includes(searchQuery) ||
diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
index 5ba1f49..c4ba57e 100644
--- a/src/components/BlogPost.astro
+++ b/src/components/BlogPost.astro
@@ -1,7 +1,7 @@
---
import dateFormatter from '../utils/dateFormatter.js'
import TagBar from './TagBar.jsx'
-import ShareButtons from '/src/components/ShareButtons.jsx'
+import ShareButtons from './ShareButtons.jsx'
export interface Props {
title: string;
@@ -10,7 +10,7 @@ export interface Props {
tags: string[]
}
-const { title, date, tags, url } = Astro.props;
+const { title, date, tags, url, nextPost, prevPost } = Astro.props;
const siteUrl = Astro.site.href
---
@@ -32,15 +32,23 @@ const siteUrl = Astro.site.href
-
+
+
+
+
-
-
-
-
@@ -62,6 +70,13 @@ const siteUrl = Astro.site.href
margin-bottom: 2rem;
}
+ footer {
+ margin-top: 2rem;
+ display: flex;
+ justify-content: space-between;
+ gap: 1rem;
+ }
+
.title,
.publish-date {
margin: 0;
@@ -76,6 +91,16 @@ const siteUrl = Astro.site.href
font-weight: 700;
}
+ .adjacent-post-link-title {
+ color: var(--theme-text-lighter);
+ font-weight: bold;
+ font-size: .8em;
+ }
+
+ .next {
+ text-align: end;
+ }
+
@media (max-width: 50em) {
.title {
font-size: 1.75rem;
diff --git a/src/hooks/useStorage.js b/src/hooks/useStorage.js
new file mode 100644
index 0000000..5602541
--- /dev/null
+++ b/src/hooks/useStorage.js
@@ -0,0 +1,35 @@
+import { useCallback, useState, useEffect } from "preact/hooks"
+
+const hasWindow = typeof window !== "undefined"
+
+export function useLocalStorage(key, defaultValue) {
+ return useStorage(key, defaultValue, hasWindow ? window.localStorage : null)
+}
+
+export function useSessionStorage(key, defaultValue) {
+ return useStorage(key, defaultValue, hasWindow ? window.sessionStorage : null)
+}
+
+function useStorage(key, defaultValue, storageObject) {
+ const [value, setValue] = useState(() => {
+ const jsonValue = storageObject?.getItem(key)
+ if (jsonValue != null) return JSON.parse(jsonValue)
+
+ if (typeof defaultValue === "function") {
+ return defaultValue()
+ } else {
+ return defaultValue
+ }
+ })
+
+ useEffect(() => {
+ if (value === undefined) return storageObject.removeItem(key)
+ storageObject.setItem(key, JSON.stringify(value))
+ }, [key, value, storageObject])
+
+ const remove = useCallback(() => {
+ setValue(undefined)
+ }, [])
+
+ return [value, setValue, remove]
+}
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
deleted file mode 100644
index 4f664fd..0000000
--- a/src/layouts/BlogPost.astro
+++ /dev/null
@@ -1,33 +0,0 @@
----
-import BaseHead from '../components/BaseHead.astro';
-import BlogHeader from '../components/BlogHeader.astro';
-import BlogPost from '../components/BlogPost.astro';
-import "prismjs/themes/prism-okaidia.css"
-import "prismjs/plugins/line-highlight/prism-line-highlight.css"
-import ConvertkitForm from '../components/ConvertkitForm.astro'
-import UserSettingsLoad from '../components/UserSettingsLoad.astro'
-import '../styles/theme.css'
-import '../styles/blog.css'
-import '../styles/prism-highlight.css'
-
-const { content } = Astro.props;
-const { title, description, date, author = "Kyle Cook", permalink, tags } = content;
-const url = Astro.request.url
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/[blog].astro b/src/pages/[blog].astro
deleted file mode 100644
index 50074d2..0000000
--- a/src/pages/[blog].astro
+++ /dev/null
@@ -1,24 +0,0 @@
----
-import BlogPost from '../layouts/BlogPost.astro'
-
-export async function getStaticPaths({rss}) {
- const allPosts = await Astro.glob('../**/*.md');
- const sortedPosts = allPosts.sort((a, b) => b.frontmatter.date.valueOf() - a.frontmatter.date.valueOf())
-
- rss({
- title: 'Web Dev Simplified Blog',
- description: 'Web Dev Simplified Blog',
- customData: `en-us`,
- items: sortedPosts.map(item => ({
- title: item.frontmatter.title,
- description: item.frontmatter.description,
- link: item.url,
- pubDate: item.frontmatter.date,
- }))
- })
-
- return []
-}
----
-
-
\ No newline at end of file
diff --git a/src/pages/[date]/[blog].astro b/src/pages/[date]/[blog].astro
new file mode 100644
index 0000000..0248a1e
--- /dev/null
+++ b/src/pages/[date]/[blog].astro
@@ -0,0 +1,84 @@
+---
+import BaseHead from '../../components/BaseHead.astro'
+import BlogHeader from '../../components/BlogHeader.astro'
+import BlogPost from '../../components/BlogPost.astro'
+import "prismjs/themes/prism-okaidia.css"
+import "prismjs/plugins/line-highlight/prism-line-highlight.css"
+import ConvertkitForm from '../../components/ConvertkitForm.astro'
+import UserSettingsLoad from '../../components/UserSettingsLoad.astro'
+import '../../styles/theme.css'
+import '../../styles/blog.css'
+import '../../styles/prism-highlight.css'
+
+export async function getStaticPaths({rss}) {
+ const allPosts = await Astro.glob('../../posts/**/*.md')
+ const sortedPosts = allPosts
+ .map(post => {
+ const [_file, blogSlug, dateSlug] = post.file.split("/").reverse()
+ return {
+ Content: post.Content,
+ dateSlug,
+ blogSlug,
+ title: post.frontmatter.title,
+ description: post.frontmatter.description,
+ author: post.frontmatter.author,
+ date: new Date(post.frontmatter.date),
+ tags: post.frontmatter.tags,
+ url: `/${dateSlug}/${blogSlug}`,
+ }
+ })
+ .sort((a, b) => b.date.valueOf() - a.date.valueOf())
+
+ rss({
+ title: 'Web Dev Simplified Blog',
+ description: 'Web Dev Simplified Blog',
+ customData: `en-us`,
+ items: sortedPosts.map(item => ({
+ title: item.title,
+ description: item.description,
+ link: item.url,
+ pubDate: item.date,
+ }))
+ })
+
+ return sortedPosts.map((post, i) => {
+ return {
+ params: { date: post.dateSlug, blog: post.blogSlug },
+ props: {
+ ...post,
+ prevPost: formatAdjacentPost(sortedPosts[i + 1]),
+ nextPost: formatAdjacentPost(sortedPosts[i - 1])
+ }
+ }
+ })
+
+ function formatAdjacentPost(post) {
+ if (post == null) return
+
+ return {
+ url: post.url,
+ title: post.title
+ }
+ }
+}
+
+const { Content, title, description, author = "Kyle Cook", date, tags, url, permalink, nextPost, prevPost } = Astro.props
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ecdd31b..bc6e44c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,8 @@
---
// Component Imports
-import BaseHead from '../components/BaseHead.astro';
-import BlogHeader from '../components/BlogHeader.astro';
-import BlogList from '/src/components/BlogList.jsx';
+import BaseHead from '../components/BaseHead.astro'
+import BlogHeader from '../components/BlogHeader.astro'
+import BlogList from '../components/BlogList.jsx'
import ConvertkitForm from '../components/ConvertkitForm.astro'
import UserSettingsLoad from '../components/UserSettingsLoad.astro'
import '../styles/theme.css'
@@ -15,23 +15,22 @@ interface MarkdownFrontmatter {
tags: string[]
}
-// Component Script:
-// You can write any JavaScript/TypeScript that you'd like here.
-// It will run during the build, but never in the browser.
-// All variables are available to use in the HTML template below.
-let title = 'Web Dev Simplified Blog';
-let description = 'Web Dev Simplified Blog';
-let permalink = 'https://blog.webdevsimplified.com';
+const title = 'Web Dev Simplified Blog';
+const description = 'Web Dev Simplified Blog';
+const permalink = 'https://blog.webdevsimplified.com';
-// Data Fetching: List all Markdown posts in the repo.
-
-let allMarkdownPosts = await Astro.glob('./**/*.md');
+const allMarkdownPosts = await Astro.glob('../posts/**/*.md')
const allPosts = allMarkdownPosts
- .map(post => ({ title: post.frontmatter.title, description: post.frontmatter.description, tags: post.frontmatter.tags, date: new Date(post.frontmatter.date), url: post.url }))
- .sort((a, b) => b.date.valueOf() - a.date.valueOf())
-
-// Full Astro Component Syntax:
-// https://docs.astro.build/core-concepts/astro-components/
+ .map(post => {
+ const [_file, blog, date] = post.file.split("/").reverse()
+ return {
+ title: post.frontmatter.title,
+ description: post.frontmatter.description,
+ tags: post.frontmatter.tags,
+ date: new Date(post.frontmatter.date),
+ url: `/${date}/${blog}`
+ }
+ }).sort((a, b) => b.date.valueOf() - a.date.valueOf())
---
diff --git a/src/pages/2019-09/colorblind-accessibility-testing/index.md b/src/posts/2019-09/colorblind-accessibility-testing/index.md
similarity index 98%
rename from src/pages/2019-09/colorblind-accessibility-testing/index.md
rename to src/posts/2019-09/colorblind-accessibility-testing/index.md
index 041cc9d..a761fe8 100644
--- a/src/pages/2019-09/colorblind-accessibility-testing/index.md
+++ b/src/posts/2019-09/colorblind-accessibility-testing/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: How To Effectively Test For Colorblind Accessibility
date: "2019-09-23"
description: "A quick tip on how to easily test any site for colorblind accessibility."
diff --git a/src/pages/2019-09/es6-modules-in-nodejs/index.md b/src/posts/2019-09/es6-modules-in-nodejs/index.md
similarity index 98%
rename from src/pages/2019-09/es6-modules-in-nodejs/index.md
rename to src/posts/2019-09/es6-modules-in-nodejs/index.md
index e6699b4..6951898 100644
--- a/src/pages/2019-09/es6-modules-in-nodejs/index.md
+++ b/src/posts/2019-09/es6-modules-in-nodejs/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: How To Use ES6 Modules With Node.js
date: "2019-09-30"
description: "Two simple ways to use ES6 modules with Node.js."
diff --git a/src/pages/2019-10/do-not-use-class-selectors-in-javascript/index.md b/src/posts/2019-10/do-not-use-class-selectors-in-javascript/index.md
similarity index 99%
rename from src/pages/2019-10/do-not-use-class-selectors-in-javascript/index.md
rename to src/posts/2019-10/do-not-use-class-selectors-in-javascript/index.md
index 1e1b492..b6d666e 100644
--- a/src/pages/2019-10/do-not-use-class-selectors-in-javascript/index.md
+++ b/src/posts/2019-10/do-not-use-class-selectors-in-javascript/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: Why You Shouldn't Use Class Selectors In JavaScript
date: "2019-10-14"
description: "A breakdown of why the common practice of using class selectors in JavaScript makes code impossible to refactor, and what you should do instead."
diff --git a/src/pages/2019-10/how-to-code-review-effectively/index.md b/src/posts/2019-10/how-to-code-review-effectively/index.md
similarity index 99%
rename from src/pages/2019-10/how-to-code-review-effectively/index.md
rename to src/posts/2019-10/how-to-code-review-effectively/index.md
index f27ee13..fc930da 100644
--- a/src/pages/2019-10/how-to-code-review-effectively/index.md
+++ b/src/posts/2019-10/how-to-code-review-effectively/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: Why You Should Review Your Own Code And How To Review It Effectively
date: "2019-10-28"
description: "A detailed description of the steps needed to deliver an effective code review, even if it is just for your own code."
diff --git a/src/pages/2019-10/use-data-attributes-in-css/index.md b/src/posts/2019-10/use-data-attributes-in-css/index.md
similarity index 99%
rename from src/pages/2019-10/use-data-attributes-in-css/index.md
rename to src/posts/2019-10/use-data-attributes-in-css/index.md
index ea05941..d4cb36f 100644
--- a/src/pages/2019-10/use-data-attributes-in-css/index.md
+++ b/src/posts/2019-10/use-data-attributes-in-css/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: Why You Should Use Data Attributes In CSS
date: "2019-10-21"
description: "A quick breakdown of exactly how to use data attributes with CSS to create dynamic content."
diff --git a/src/pages/2019-10/what-is-short-circuiting/index.md b/src/posts/2019-10/what-is-short-circuiting/index.md
similarity index 98%
rename from src/pages/2019-10/what-is-short-circuiting/index.md
rename to src/posts/2019-10/what-is-short-circuiting/index.md
index 9b8bb5f..512a7ba 100644
--- a/src/pages/2019-10/what-is-short-circuiting/index.md
+++ b/src/posts/2019-10/what-is-short-circuiting/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: What Is Short Circuiting?
date: "2019-10-07"
description: "A detailed breakdown of what short circuiting is, how it works, and why it is important."
diff --git a/src/pages/2019-11/how-to-learn-any-topic-fast/index.md b/src/posts/2019-11/how-to-learn-any-topic-fast/index.md
similarity index 99%
rename from src/pages/2019-11/how-to-learn-any-topic-fast/index.md
rename to src/posts/2019-11/how-to-learn-any-topic-fast/index.md
index a3c8743..9fd5ee8 100644
--- a/src/pages/2019-11/how-to-learn-any-topic-fast/index.md
+++ b/src/posts/2019-11/how-to-learn-any-topic-fast/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: How To Learn Any Topic Fast
date: "2019-11-18"
description: "A simple step by step guide on how to learn any new technology or topic quickly and efficiently."
diff --git a/src/pages/2019-11/how-to-write-custom-hooks/index.md b/src/posts/2019-11/how-to-write-custom-hooks/index.md
similarity index 98%
rename from src/pages/2019-11/how-to-write-custom-hooks/index.md
rename to src/posts/2019-11/how-to-write-custom-hooks/index.md
index 6bbc75b..e651dd6 100644
--- a/src/pages/2019-11/how-to-write-custom-hooks/index.md
+++ b/src/posts/2019-11/how-to-write-custom-hooks/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: The Power Of Custom Hooks
date: "2019-11-11"
description: "A quick explanation of how to write custom hooks and why they are so useful."
diff --git a/src/pages/2019-11/never-store-derived-state/index.md b/src/posts/2019-11/never-store-derived-state/index.md
similarity index 99%
rename from src/pages/2019-11/never-store-derived-state/index.md
rename to src/posts/2019-11/never-store-derived-state/index.md
index eefe091..439a588 100644
--- a/src/pages/2019-11/never-store-derived-state/index.md
+++ b/src/posts/2019-11/never-store-derived-state/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: Why You Should Never Store Derived State
date: "2019-11-04"
description: "The quickest way to have corrupt out of sync state is by storing derived state."
diff --git a/src/pages/2019-11/the-importance-of-fitness/index.md b/src/posts/2019-11/the-importance-of-fitness/index.md
similarity index 98%
rename from src/pages/2019-11/the-importance-of-fitness/index.md
rename to src/posts/2019-11/the-importance-of-fitness/index.md
index 6997798..8c2ac98 100644
--- a/src/pages/2019-11/the-importance-of-fitness/index.md
+++ b/src/posts/2019-11/the-importance-of-fitness/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: How Physical Activity Will Make You A Better Developer
date: "2019-11-25"
description: "A brief explanation of why fitness and physical health is so important, especially for programmers."
diff --git a/src/pages/2019-12/always-prefer-local-state/index.md b/src/posts/2019-12/always-prefer-local-state/index.md
similarity index 99%
rename from src/pages/2019-12/always-prefer-local-state/index.md
rename to src/posts/2019-12/always-prefer-local-state/index.md
index ecec83d..e30575b 100644
--- a/src/pages/2019-12/always-prefer-local-state/index.md
+++ b/src/posts/2019-12/always-prefer-local-state/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: Local State Is The Best State
date: "2019-12-02"
description: "Storing state in React is difficult to do right, but by storing state as locally as possible it can be a lot easier."
diff --git a/src/pages/2019-12/css-supports-property/index.md b/src/posts/2019-12/css-supports-property/index.md
similarity index 98%
rename from src/pages/2019-12/css-supports-property/index.md
rename to src/posts/2019-12/css-supports-property/index.md
index 2f37daa..aa8cc42 100644
--- a/src/pages/2019-12/css-supports-property/index.md
+++ b/src/posts/2019-12/css-supports-property/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: How To Use Modern CSS Without Breaking Old Browsers
date: "2019-12-30"
description: "An in depth tutorial on the @supports CSS at-rule, and how it can be used to write modern CSS without breaking older browser support."
diff --git a/src/pages/2019-12/express-middleware-in-depth/index.md b/src/posts/2019-12/express-middleware-in-depth/index.md
similarity index 99%
rename from src/pages/2019-12/express-middleware-in-depth/index.md
rename to src/posts/2019-12/express-middleware-in-depth/index.md
index ab4c2f3..dc67cb9 100644
--- a/src/pages/2019-12/express-middleware-in-depth/index.md
+++ b/src/posts/2019-12/express-middleware-in-depth/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: How To Use And Write Express Middleware
date: "2019-12-09"
description: "Middleware in Express is one of the easiest ways to create DRY and well written code which is why it is crucial to know how to use and write good middleware."
diff --git a/src/pages/2019-12/how-to-use-react-portal/index.md b/src/posts/2019-12/how-to-use-react-portal/index.md
similarity index 99%
rename from src/pages/2019-12/how-to-use-react-portal/index.md
rename to src/posts/2019-12/how-to-use-react-portal/index.md
index 50f2ba4..fdb346c 100644
--- a/src/pages/2019-12/how-to-use-react-portal/index.md
+++ b/src/posts/2019-12/how-to-use-react-portal/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: The Forgotten React Renderer - React Portal
date: "2019-12-16"
description: "React portal lets components be rendered outside their parent component which is incredibly useful in specific scenarios explained in depth in this article."
diff --git a/src/pages/2019-12/javascript-loading-attributes-explained/index.md b/src/posts/2019-12/javascript-loading-attributes-explained/index.md
similarity index 99%
rename from src/pages/2019-12/javascript-loading-attributes-explained/index.md
rename to src/posts/2019-12/javascript-loading-attributes-explained/index.md
index 6cb391d..766ef0f 100644
--- a/src/pages/2019-12/javascript-loading-attributes-explained/index.md
+++ b/src/posts/2019-12/javascript-loading-attributes-explained/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: Async Vs Defer - JavaScript Loading Explanation
date: "2019-12-23"
description: "An explanation of the difference between standard, async, and defer script tag loading, and which is the best to use."
diff --git a/src/pages/2020-01/dynamic-expandable-content/index.md b/src/posts/2020-01/dynamic-expandable-content/index.md
similarity index 98%
rename from src/pages/2020-01/dynamic-expandable-content/index.md
rename to src/posts/2020-01/dynamic-expandable-content/index.md
index 14e181d..2052eb0 100644
--- a/src/pages/2020-01/dynamic-expandable-content/index.md
+++ b/src/posts/2020-01/dynamic-expandable-content/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import DynamicReadMoreButton from "/src/blogComponents/dynamicReadMoreButton/DynamicReadMoreButton"
+setup: import DynamicReadMoreButton from "/src/blogComponents/dynamicReadMoreButton/DynamicReadMoreButton"
title: Dynamic Expandable Content (Read More Buttons)
date: "2020-01-27"
description: "Multiline text overflow fading and dynamic expand/collapse buttons are difficult to create so in this article I show you a simple way to do both."
diff --git a/src/pages/2020-01/guard-clauses/index.md b/src/posts/2020-01/guard-clauses/index.md
similarity index 98%
rename from src/pages/2020-01/guard-clauses/index.md
rename to src/posts/2020-01/guard-clauses/index.md
index df0b596..7d059bc 100644
--- a/src/pages/2020-01/guard-clauses/index.md
+++ b/src/posts/2020-01/guard-clauses/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: Guard Clauses - The Best Way To Write Complex Conditional Logic
date: "2020-01-06"
description: "An explanation of guard clauses and how they can be used to clean up complex nested conditional logic."
diff --git a/src/pages/2020-01/semantic-versioning/index.md b/src/posts/2020-01/semantic-versioning/index.md
similarity index 99%
rename from src/pages/2020-01/semantic-versioning/index.md
rename to src/posts/2020-01/semantic-versioning/index.md
index 2c55f66..8d0752c 100644
--- a/src/pages/2020-01/semantic-versioning/index.md
+++ b/src/posts/2020-01/semantic-versioning/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: Semantic Versioning Explained
date: "2020-01-13"
description: "An explanation of what semantic versioning is and why it is important."
diff --git a/src/pages/2020-01/var-vs-let-vs-const/index.md b/src/posts/2020-01/var-vs-let-vs-const/index.md
similarity index 99%
rename from src/pages/2020-01/var-vs-let-vs-const/index.md
rename to src/posts/2020-01/var-vs-let-vs-const/index.md
index 96d17c9..b916fdd 100644
--- a/src/pages/2020-01/var-vs-let-vs-const/index.md
+++ b/src/posts/2020-01/var-vs-let-vs-const/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: JavaScript Var vs Let vs Const
date: "2020-01-20"
description: "A quick explanation of the differences between var, let, and const."
diff --git a/src/pages/2020-02/css-custom-properties/index.md b/src/posts/2020-02/css-custom-properties/index.md
similarity index 99%
rename from src/pages/2020-02/css-custom-properties/index.md
rename to src/posts/2020-02/css-custom-properties/index.md
index d6a34f4..85a2b32 100644
--- a/src/pages/2020-02/css-custom-properties/index.md
+++ b/src/posts/2020-02/css-custom-properties/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: CSS Custom Properties
date: "2020-02-17"
description: "Everything you need to know about CSS custom properties."
diff --git a/src/pages/2020-02/css-specificity/index.md b/src/posts/2020-02/css-specificity/index.md
similarity index 97%
rename from src/pages/2020-02/css-specificity/index.md
rename to src/posts/2020-02/css-specificity/index.md
index 1ee1f98..06144c6 100644
--- a/src/pages/2020-02/css-specificity/index.md
+++ b/src/posts/2020-02/css-specificity/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import CssSpecificityDisplay from '/src/blogComponents/cssSpecificityDisplay/CssSpecificityDisplay.jsx'
-layout: '/src/layouts/BlogPost.astro'
+setup: import CssSpecificityDisplay from '/src/blogComponents/cssSpecificityDisplay/CssSpecificityDisplay.jsx'
title: CSS Specificity Demystified
date: "2020-02-03"
description: "An in depth breakdown of how CSS specificity works."
diff --git a/src/pages/2020-02/magic-numbers/index.md b/src/posts/2020-02/magic-numbers/index.md
similarity index 98%
rename from src/pages/2020-02/magic-numbers/index.md
rename to src/posts/2020-02/magic-numbers/index.md
index 957d832..008645a 100644
--- a/src/pages/2020-02/magic-numbers/index.md
+++ b/src/posts/2020-02/magic-numbers/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: What Are Magic Numbers And Why Are They Bad
date: "2020-02-10"
description: "A brief explanation of magic numbers in code and why they are bad."
diff --git a/src/pages/2020-02/n-plus-one-query/index.md b/src/posts/2020-02/n-plus-one-query/index.md
similarity index 98%
rename from src/pages/2020-02/n-plus-one-query/index.md
rename to src/posts/2020-02/n-plus-one-query/index.md
index da97ca9..79bfae8 100644
--- a/src/pages/2020-02/n-plus-one-query/index.md
+++ b/src/posts/2020-02/n-plus-one-query/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "N + 1 Queries: The Easiest Way To Improve Performance"
date: "2020-02-24"
description: "A brief explanation of N + 1 queries and how to avoid them."
diff --git a/src/pages/2020-03/animation-fill-mode/index.md b/src/posts/2020-03/animation-fill-mode/index.md
similarity index 97%
rename from src/pages/2020-03/animation-fill-mode/index.md
rename to src/posts/2020-03/animation-fill-mode/index.md
index 7b78337..9e21b31 100644
--- a/src/pages/2020-03/animation-fill-mode/index.md
+++ b/src/posts/2020-03/animation-fill-mode/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import AnimationFillModeExample from "/src/blogComponents/animationFillModeExample/AnimationFillModeExample.astro"
+setup: import AnimationFillModeExample from "/src/blogComponents/animationFillModeExample/AnimationFillModeExample.astro"
title: "Animation Fill Mode"
date: "2020-03-23"
description: "Animation fill mode is the single most important property of CSS animations to understand so in this article I will be breaking down exactly how to use animation fill mode and what it does."
diff --git a/src/pages/2020-03/css-triangles/index.md b/src/posts/2020-03/css-triangles/index.md
similarity index 98%
rename from src/pages/2020-03/css-triangles/index.md
rename to src/posts/2020-03/css-triangles/index.md
index f3ef60b..08563a1 100644
--- a/src/pages/2020-03/css-triangles/index.md
+++ b/src/posts/2020-03/css-triangles/index.md
@@ -1,6 +1,5 @@
---
setup: |
- import Layout from '/src/layouts/BlogPost.astro'
import TriangleRotated from "/src/blogComponents/cssTriangles/TriangleRotated.astro"
import TriangleBorder from "/src/blogComponents/cssTriangles/TriangleBorder.astro"
title: "CSS Triangles"
diff --git a/src/pages/2020-03/javascript-null-coalesce/index.md b/src/posts/2020-03/javascript-null-coalesce/index.md
similarity index 98%
rename from src/pages/2020-03/javascript-null-coalesce/index.md
rename to src/posts/2020-03/javascript-null-coalesce/index.md
index 3d03ac7..a40a5bd 100644
--- a/src/pages/2020-03/javascript-null-coalesce/index.md
+++ b/src/posts/2020-03/javascript-null-coalesce/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "JavaScript Null Coalesce"
date: "2020-03-16"
description: "Null coalesce is a new JavaScript language feature which makes assigning default values for null/undefined incredibly easy."
diff --git a/src/pages/2020-03/javascript-optional-chaining/index.md b/src/posts/2020-03/javascript-optional-chaining/index.md
similarity index 99%
rename from src/pages/2020-03/javascript-optional-chaining/index.md
rename to src/posts/2020-03/javascript-optional-chaining/index.md
index a0afab0..9269c42 100644
--- a/src/pages/2020-03/javascript-optional-chaining/index.md
+++ b/src/posts/2020-03/javascript-optional-chaining/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "JavaScript Optional Chaining"
date: "2020-03-09"
description: "Optional chaining is a new JavaScript language feature which will revolutionize how null and undefined are handled."
diff --git a/src/pages/2020-03/tagged-template-literals/index.md b/src/posts/2020-03/tagged-template-literals/index.md
similarity index 99%
rename from src/pages/2020-03/tagged-template-literals/index.md
rename to src/posts/2020-03/tagged-template-literals/index.md
index f785495..174a534 100644
--- a/src/pages/2020-03/tagged-template-literals/index.md
+++ b/src/posts/2020-03/tagged-template-literals/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Tagged Template Literals"
date: "2020-03-02"
description: "Exploring the power of tagged template literals."
diff --git a/src/pages/2020-04/trade-money-for-time/index.md b/src/posts/2020-04/trade-money-for-time/index.md
similarity index 99%
rename from src/pages/2020-04/trade-money-for-time/index.md
rename to src/posts/2020-04/trade-money-for-time/index.md
index 828c283..f512b74 100644
--- a/src/pages/2020-04/trade-money-for-time/index.md
+++ b/src/posts/2020-04/trade-money-for-time/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Why You Should Trade Money For Time"
date: "2020-04-13"
description: "You are used to trading time for money at your job, but trading your money for time is just as important if not more important."
diff --git a/src/pages/2020-04/use-effect/index.md b/src/posts/2020-04/use-effect/index.md
similarity index 99%
rename from src/pages/2020-04/use-effect/index.md
rename to src/posts/2020-04/use-effect/index.md
index c9dc7b1..9227a4a 100644
--- a/src/pages/2020-04/use-effect/index.md
+++ b/src/posts/2020-04/use-effect/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Everything You Need To Know About useEffect"
date: "2020-04-27"
description: "An in depth look at every aspect of the useEffect React hook."
diff --git a/src/pages/2020-04/use-state/index.md b/src/posts/2020-04/use-state/index.md
similarity index 99%
rename from src/pages/2020-04/use-state/index.md
rename to src/posts/2020-04/use-state/index.md
index 3907c86..bf4d80a 100644
--- a/src/pages/2020-04/use-state/index.md
+++ b/src/posts/2020-04/use-state/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Everything You Need To Know About useState"
date: "2020-04-20"
description: "An in depth look at every aspect of the useState React hook."
diff --git a/src/pages/2020-04/why-everyone-should-learn-programming/index.md b/src/posts/2020-04/why-everyone-should-learn-programming/index.md
similarity index 99%
rename from src/pages/2020-04/why-everyone-should-learn-programming/index.md
rename to src/posts/2020-04/why-everyone-should-learn-programming/index.md
index cc545cd..ba94a9e 100644
--- a/src/pages/2020-04/why-everyone-should-learn-programming/index.md
+++ b/src/posts/2020-04/why-everyone-should-learn-programming/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Why Everyone Should Learn Programming"
date: "2020-04-06"
description: "While not everyone should be a programmer I think it is crucial that everyone learns at least the basics of programming."
diff --git a/src/pages/2020-05/bem/index.md b/src/posts/2020-05/bem/index.md
similarity index 99%
rename from src/pages/2020-05/bem/index.md
rename to src/posts/2020-05/bem/index.md
index ef64f64..7fa11f9 100644
--- a/src/pages/2020-05/bem/index.md
+++ b/src/posts/2020-05/bem/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Write Cleaner CSS With BEM"
date: "2020-05-25"
description: "This article covers everything you need to know about BEM in order to start using BEM to clean up and organize your CSS styles."
diff --git a/src/pages/2020-05/memoization-in-react/index.md b/src/posts/2020-05/memoization-in-react/index.md
similarity index 99%
rename from src/pages/2020-05/memoization-in-react/index.md
rename to src/posts/2020-05/memoization-in-react/index.md
index b9a2911..3d05bed 100644
--- a/src/pages/2020-05/memoization-in-react/index.md
+++ b/src/posts/2020-05/memoization-in-react/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Use Memoization To Drastically Increase React Performance"
date: "2020-05-04"
description: "An in depth look at every aspect of the useMemo and useCallback React hooks."
diff --git a/src/pages/2020-05/ternary-operator/index.md b/src/posts/2020-05/ternary-operator/index.md
similarity index 98%
rename from src/pages/2020-05/ternary-operator/index.md
rename to src/posts/2020-05/ternary-operator/index.md
index b323b09..11ec735 100644
--- a/src/pages/2020-05/ternary-operator/index.md
+++ b/src/posts/2020-05/ternary-operator/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "JavaScript Ternary Operator In Depth"
date: "2020-05-18"
description: "Everything You Need To Know About The Ternary Operator In JavaScript."
diff --git a/src/pages/2020-05/use-ref/index.md b/src/posts/2020-05/use-ref/index.md
similarity index 98%
rename from src/pages/2020-05/use-ref/index.md
rename to src/posts/2020-05/use-ref/index.md
index 45a676f..3d8f4c1 100644
--- a/src/pages/2020-05/use-ref/index.md
+++ b/src/posts/2020-05/use-ref/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Use Refs In React With Hooks"
date: "2020-05-11"
description: "An in depth look at every aspect of refs and the useRef hook in React."
diff --git a/src/pages/2020-06/centering-with-css/index.md b/src/posts/2020-06/centering-with-css/index.md
similarity index 99%
rename from src/pages/2020-06/centering-with-css/index.md
rename to src/posts/2020-06/centering-with-css/index.md
index 5d4ab25..dbcb8e1 100644
--- a/src/pages/2020-06/centering-with-css/index.md
+++ b/src/posts/2020-06/centering-with-css/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Center Vertically In CSS"
date: "2020-06-29"
description: "Every method you need to know to center elements in CSS."
diff --git a/src/pages/2020-06/dynamic-module-import/index.md b/src/posts/2020-06/dynamic-module-import/index.md
similarity index 99%
rename from src/pages/2020-06/dynamic-module-import/index.md
rename to src/posts/2020-06/dynamic-module-import/index.md
index ae639a0..1ac4912 100644
--- a/src/pages/2020-06/dynamic-module-import/index.md
+++ b/src/posts/2020-06/dynamic-module-import/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Code Splitting With Dynamic Module Imports"
date: "2020-06-22"
description: "A simple explanation of how to take advantage of dynamic imports to make your site load faster."
diff --git a/src/pages/2020-06/template-tag/index.md b/src/posts/2020-06/template-tag/index.md
similarity index 98%
rename from src/pages/2020-06/template-tag/index.md
rename to src/posts/2020-06/template-tag/index.md
index 9e13943..8cff51f 100644
--- a/src/pages/2020-06/template-tag/index.md
+++ b/src/posts/2020-06/template-tag/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Why Use The HTML Template Tag?"
date: "2020-06-15"
description: "An in depth explanation of why you should be using the template tag."
diff --git a/src/pages/2020-06/use-context/index.md b/src/posts/2020-06/use-context/index.md
similarity index 98%
rename from src/pages/2020-06/use-context/index.md
rename to src/posts/2020-06/use-context/index.md
index 04804e6..b0cc90a 100644
--- a/src/pages/2020-06/use-context/index.md
+++ b/src/posts/2020-06/use-context/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Use Context In React With Hooks"
date: "2020-06-01"
description: "An in depth look at every aspect of the the context API and the useContext hook in React."
diff --git a/src/pages/2020-06/use-reducer/index.md b/src/posts/2020-06/use-reducer/index.md
similarity index 99%
rename from src/pages/2020-06/use-reducer/index.md
rename to src/posts/2020-06/use-reducer/index.md
index 2c1cfee..42a6299 100644
--- a/src/pages/2020-06/use-reducer/index.md
+++ b/src/posts/2020-06/use-reducer/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Manage Complex State In React With useReducer"
date: "2020-06-08"
description: "An in depth look at every aspect of the the useReducer hook in React."
diff --git a/src/pages/2020-07/css-calc/index.md b/src/posts/2020-07/css-calc/index.md
similarity index 98%
rename from src/pages/2020-07/css-calc/index.md
rename to src/posts/2020-07/css-calc/index.md
index f0e1580..c877a8c 100644
--- a/src/pages/2020-07/css-calc/index.md
+++ b/src/posts/2020-07/css-calc/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Everything You Need To Know About CSS Calc"
date: "2020-07-27"
description: "This article breaks down everything you need to know about CSS calc to take your CSS skills to the next level."
diff --git a/src/pages/2020-07/javascript-hoisting/index.md b/src/posts/2020-07/javascript-hoisting/index.md
similarity index 98%
rename from src/pages/2020-07/javascript-hoisting/index.md
rename to src/posts/2020-07/javascript-hoisting/index.md
index cd06dee..d0634db 100644
--- a/src/pages/2020-07/javascript-hoisting/index.md
+++ b/src/posts/2020-07/javascript-hoisting/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "What The Heck Is Hoisting?"
date: "2020-07-13"
description: "You have probably heard of hoisting but what exactly is it and how does it work."
diff --git a/src/pages/2020-07/relative-time-format/index.md b/src/posts/2020-07/relative-time-format/index.md
similarity index 99%
rename from src/pages/2020-07/relative-time-format/index.md
rename to src/posts/2020-07/relative-time-format/index.md
index 8a2194e..6b9002b 100644
--- a/src/pages/2020-07/relative-time-format/index.md
+++ b/src/posts/2020-07/relative-time-format/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Relative Date Internationalization In JavaScript"
date: "2020-07-06"
description: "Do you wish you could format dates like this: '2 days ago', 'yesterday'. Well with JavaScript internationalization it is incredibly easy."
diff --git a/src/pages/2020-07/use-layout-effect/index.md b/src/posts/2020-07/use-layout-effect/index.md
similarity index 97%
rename from src/pages/2020-07/use-layout-effect/index.md
rename to src/posts/2020-07/use-layout-effect/index.md
index 6e5462d..0293ffc 100644
--- a/src/pages/2020-07/use-layout-effect/index.md
+++ b/src/posts/2020-07/use-layout-effect/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Why Do We Need useLayoutEffect?"
date: "2020-07-20"
description: "An in depth look at every aspect of the useLayoutEffect React hook."
diff --git a/src/pages/2020-08/10-best-keyboard-shortcuts/index.md b/src/posts/2020-08/10-best-keyboard-shortcuts/index.md
similarity index 99%
rename from src/pages/2020-08/10-best-keyboard-shortcuts/index.md
rename to src/posts/2020-08/10-best-keyboard-shortcuts/index.md
index 15a4a9d..141234b 100644
--- a/src/pages/2020-08/10-best-keyboard-shortcuts/index.md
+++ b/src/posts/2020-08/10-best-keyboard-shortcuts/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "10 Essential Keyboard Shortcuts For Programmers"
date: "2020-08-10"
description: "These are my 10 favorite keyboard shortcuts that I use everyday as a programmer."
diff --git a/src/pages/2020-08/==-vs-===/index.md b/src/posts/2020-08/==-vs-===/index.md
similarity index 98%
rename from src/pages/2020-08/==-vs-===/index.md
rename to src/posts/2020-08/==-vs-===/index.md
index f3f1a37..eaed97c 100644
--- a/src/pages/2020-08/==-vs-===/index.md
+++ b/src/posts/2020-08/==-vs-===/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Stop Using Double Equals In JavaScript"
date: "2020-08-03"
description: "Everything you need to know about the difference between double and triple equals in JavaScript."
diff --git a/src/pages/2020-08/cookies-localStorage-sessionStorage/index.md b/src/posts/2020-08/cookies-localStorage-sessionStorage/index.md
similarity index 99%
rename from src/pages/2020-08/cookies-localStorage-sessionStorage/index.md
rename to src/posts/2020-08/cookies-localStorage-sessionStorage/index.md
index f02e102..245f2ab 100644
--- a/src/pages/2020-08/cookies-localStorage-sessionStorage/index.md
+++ b/src/posts/2020-08/cookies-localStorage-sessionStorage/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "JavaScript Cookies vs Local Storage vs Session Storage"
date: "2020-08-17"
description: "An in depth analysis of all the differences between cookies, localStorage, and sessionStorage."
diff --git a/src/pages/2020-08/destructuring-and-spread/index.md b/src/posts/2020-08/destructuring-and-spread/index.md
similarity index 99%
rename from src/pages/2020-08/destructuring-and-spread/index.md
rename to src/posts/2020-08/destructuring-and-spread/index.md
index 8201265..900f14a 100644
--- a/src/pages/2020-08/destructuring-and-spread/index.md
+++ b/src/posts/2020-08/destructuring-and-spread/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Use Destructuring And The Spread Operator? (One Of The Best JS Features)"
date: "2020-08-24"
description: "An in depth analysis of how to use destructuring and the spread operator with objects and arrays."
diff --git a/src/pages/2020-08/javascript-iife/index.md b/src/posts/2020-08/javascript-iife/index.md
similarity index 98%
rename from src/pages/2020-08/javascript-iife/index.md
rename to src/posts/2020-08/javascript-iife/index.md
index 605aeb3..bf6d074 100644
--- a/src/pages/2020-08/javascript-iife/index.md
+++ b/src/posts/2020-08/javascript-iife/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Stop Using IIFEs"
date: "2020-08-31"
description: "Due to modern JavaScript features we no longer need to use immediately invoked function expressions."
diff --git a/src/pages/2020-09/5-ways-to-become-a-better-developer/index.md b/src/posts/2020-09/5-ways-to-become-a-better-developer/index.md
similarity index 99%
rename from src/pages/2020-09/5-ways-to-become-a-better-developer/index.md
rename to src/posts/2020-09/5-ways-to-become-a-better-developer/index.md
index 06b049f..d16aec7 100644
--- a/src/pages/2020-09/5-ways-to-become-a-better-developer/index.md
+++ b/src/posts/2020-09/5-ways-to-become-a-better-developer/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "5 Ways To Become A Better Developer"
date: "2020-09-21"
description: "Here are some quick tips you can use to improve your development skills."
diff --git a/src/pages/2020-09/arrow-functions/index.md b/src/posts/2020-09/arrow-functions/index.md
similarity index 98%
rename from src/pages/2020-09/arrow-functions/index.md
rename to src/posts/2020-09/arrow-functions/index.md
index 9283cbf..f8020fe 100644
--- a/src/pages/2020-09/arrow-functions/index.md
+++ b/src/posts/2020-09/arrow-functions/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "(Arrow Functions) => Explained"
date: "2020-09-14"
description: "Arrow functions are one of the best features added to JavaScript and in this article I will explain everything you need to know about them."
diff --git a/src/pages/2020-09/javascript-xss/index.md b/src/posts/2020-09/javascript-xss/index.md
similarity index 97%
rename from src/pages/2020-09/javascript-xss/index.md
rename to src/posts/2020-09/javascript-xss/index.md
index 934c06f..3e34010 100644
--- a/src/pages/2020-09/javascript-xss/index.md
+++ b/src/posts/2020-09/javascript-xss/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import XSS from "/src/blogComponents/xss/XSS.jsx"
+setup: import XSS from "/src/blogComponents/xss/XSS.jsx"
title: "How To Prevent The Most Common Cross Site Scripting Attack"
date: "2020-09-07"
description: "A quick guide on how cross site scripting works and how to ensure your site is not vulnerable."
diff --git a/src/pages/2020-09/pure-functions/index.md b/src/posts/2020-09/pure-functions/index.md
similarity index 99%
rename from src/pages/2020-09/pure-functions/index.md
rename to src/posts/2020-09/pure-functions/index.md
index 710174a..8116720 100644
--- a/src/pages/2020-09/pure-functions/index.md
+++ b/src/posts/2020-09/pure-functions/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "What Are Pure Functions?"
date: "2020-09-28"
description: "A quick explanation on what pure functions are and how to use them."
diff --git a/src/pages/2020-10/javascript-data-attributes/index.md b/src/posts/2020-10/javascript-data-attributes/index.md
similarity index 99%
rename from src/pages/2020-10/javascript-data-attributes/index.md
rename to src/posts/2020-10/javascript-data-attributes/index.md
index 5b6efa9..9cd0454 100644
--- a/src/pages/2020-10/javascript-data-attributes/index.md
+++ b/src/posts/2020-10/javascript-data-attributes/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Data Attributes In JavaScript"
date: "2020-10-19"
description: "How to use data attributes in JavaScript."
diff --git a/src/pages/2020-10/javascript-functions-as-arguments/index.md b/src/posts/2020-10/javascript-functions-as-arguments/index.md
similarity index 99%
rename from src/pages/2020-10/javascript-functions-as-arguments/index.md
rename to src/posts/2020-10/javascript-functions-as-arguments/index.md
index a0cec43..02cde09 100644
--- a/src/pages/2020-10/javascript-functions-as-arguments/index.md
+++ b/src/posts/2020-10/javascript-functions-as-arguments/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Every Beginner Is Confused By This"
date: "2020-10-26"
description: "How passing functions to other functions works in JavaScript."
diff --git a/src/pages/2020-10/javascript-nan/index.md b/src/posts/2020-10/javascript-nan/index.md
similarity index 98%
rename from src/pages/2020-10/javascript-nan/index.md
rename to src/posts/2020-10/javascript-nan/index.md
index 2784b3a..00ef388 100644
--- a/src/pages/2020-10/javascript-nan/index.md
+++ b/src/posts/2020-10/javascript-nan/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "NaN - Not A Problem"
date: "2020-10-05"
description: "Everything you need to know about NaN in JavaScript."
diff --git a/src/pages/2020-10/react-debounce/index.md b/src/posts/2020-10/react-debounce/index.md
similarity index 99%
rename from src/pages/2020-10/react-debounce/index.md
rename to src/posts/2020-10/react-debounce/index.md
index 6d97461..4602d4c 100644
--- a/src/pages/2020-10/react-debounce/index.md
+++ b/src/posts/2020-10/react-debounce/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Instant Easy React Performance With Debounce"
date: "2020-10-12"
description: "Get easy and quick React performance with a custom debounce hook."
diff --git a/src/pages/2020-11/class-list/index.md b/src/posts/2020-11/class-list/index.md
similarity index 98%
rename from src/pages/2020-11/class-list/index.md
rename to src/posts/2020-11/class-list/index.md
index 588bd23..39a8a6b 100644
--- a/src/pages/2020-11/class-list/index.md
+++ b/src/posts/2020-11/class-list/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Literally Everything You Need To Know About classList"
date: "2020-11-30"
description: "JavaScript classList seems straightforward, but there are actually multiple unique methods you probably don't know."
diff --git a/src/pages/2020-11/css-clamp/index.md b/src/posts/2020-11/css-clamp/index.md
similarity index 96%
rename from src/pages/2020-11/css-clamp/index.md
rename to src/posts/2020-11/css-clamp/index.md
index 1569b92..f6f57d1 100644
--- a/src/pages/2020-11/css-clamp/index.md
+++ b/src/posts/2020-11/css-clamp/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "CSS Clamp Is Amazing"
date: "2020-11-02"
description: "A short explanation of how to use clamp in CSS."
diff --git a/src/pages/2020-11/css-floats/index.md b/src/posts/2020-11/css-floats/index.md
similarity index 99%
rename from src/pages/2020-11/css-floats/index.md
rename to src/posts/2020-11/css-floats/index.md
index b5ded8d..25f3f47 100644
--- a/src/pages/2020-11/css-floats/index.md
+++ b/src/posts/2020-11/css-floats/index.md
@@ -1,6 +1,5 @@
---
setup: |
- import Layout from '/src/layouts/BlogPost.astro'
import CSSFloat from "/src/blogComponents/cssFloat/CSSFloat.astro"
import CSSClear from "/src/blogComponents/cssFloat/CSSClear.astro"
title: "CSS Floats Are Still Useful"
diff --git a/src/pages/2020-12/javascript-array-flat/index.md b/src/posts/2020-12/javascript-array-flat/index.md
similarity index 98%
rename from src/pages/2020-12/javascript-array-flat/index.md
rename to src/posts/2020-12/javascript-array-flat/index.md
index 249dc94..47d9ed1 100644
--- a/src/pages/2020-12/javascript-array-flat/index.md
+++ b/src/posts/2020-12/javascript-array-flat/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Complete Array#flat Guide"
date: "2020-12-28"
description: "If you are dealing with nested arrays then you need to know about the Array#flat method."
diff --git a/src/pages/2020-12/javascript-maps/index.md b/src/posts/2020-12/javascript-maps/index.md
similarity index 99%
rename from src/pages/2020-12/javascript-maps/index.md
rename to src/posts/2020-12/javascript-maps/index.md
index 81cc533..381b2f6 100644
--- a/src/pages/2020-12/javascript-maps/index.md
+++ b/src/posts/2020-12/javascript-maps/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Start Using JavaScript Maps Now"
date: "2020-12-07"
description: "Maps in JavaScript are more performant, easier to use, and better equipped than JavaScript objects."
diff --git a/src/pages/2020-12/react-prop-types/index.md b/src/posts/2020-12/react-prop-types/index.md
similarity index 99%
rename from src/pages/2020-12/react-prop-types/index.md
rename to src/posts/2020-12/react-prop-types/index.md
index 4fd0407..373a070 100644
--- a/src/pages/2020-12/react-prop-types/index.md
+++ b/src/posts/2020-12/react-prop-types/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Use PropTypes In React"
date: "2020-12-21"
description: "PropTypes are perfect for adding basic type safety to your React project."
diff --git a/src/pages/2020-12/responsive-css-video/index.md b/src/posts/2020-12/responsive-css-video/index.md
similarity index 95%
rename from src/pages/2020-12/responsive-css-video/index.md
rename to src/posts/2020-12/responsive-css-video/index.md
index 07d7870..4c0cd16 100644
--- a/src/pages/2020-12/responsive-css-video/index.md
+++ b/src/posts/2020-12/responsive-css-video/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import ResponsiveIframeEmbed from "/src/blogComponents/responsiveIframeEmbed/ResponsiveIframeEmbed.astro"
+setup: import ResponsiveIframeEmbed from "/src/blogComponents/responsiveIframeEmbed/ResponsiveIframeEmbed.astro"
title: "Responsive CSS Aspect Ratio"
date: "2020-12-14"
description: "Creating a responsive video or iframe that maintains its aspect ratio in CSS is much trickier than you may think."
diff --git a/src/pages/2021-01/css-transform/index.md b/src/posts/2021-01/css-transform/index.md
similarity index 98%
rename from src/pages/2021-01/css-transform/index.md
rename to src/posts/2021-01/css-transform/index.md
index 47ec8e6..db7b409 100644
--- a/src/pages/2021-01/css-transform/index.md
+++ b/src/posts/2021-01/css-transform/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import CSSTransform from "/src/blogComponents/cssTransform/CSSTransform.astro"
+setup: import CSSTransform from "/src/blogComponents/cssTransform/CSSTransform.astro"
title: "CSS Transform"
date: "2021-01-25"
description: "This article covers everything you need to know about the CSS transform property and the various transform functions."
diff --git a/src/pages/2021-01/javascript-generators/index.md b/src/posts/2021-01/javascript-generators/index.md
similarity index 99%
rename from src/pages/2021-01/javascript-generators/index.md
rename to src/posts/2021-01/javascript-generators/index.md
index 023fe2a..66eb08a 100644
--- a/src/pages/2021-01/javascript-generators/index.md
+++ b/src/posts/2021-01/javascript-generators/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Generators Are Awesome!"
date: "2021-01-18"
description: "Generators are incredibly useful for specific tasks and much easier to use than they appear."
diff --git a/src/pages/2021-01/javascript-sets/index.md b/src/posts/2021-01/javascript-sets/index.md
similarity index 98%
rename from src/pages/2021-01/javascript-sets/index.md
rename to src/posts/2021-01/javascript-sets/index.md
index 6ab16cd..91bc510 100644
--- a/src/pages/2021-01/javascript-sets/index.md
+++ b/src/posts/2021-01/javascript-sets/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Start Using JavaScript Sets Now"
date: "2021-01-04"
description: "Sets in JavaScript are a specialized type of array that is perfect for unique lists."
diff --git a/src/pages/2021-01/null-vs-undefined/index.md b/src/posts/2021-01/null-vs-undefined/index.md
similarity index 98%
rename from src/pages/2021-01/null-vs-undefined/index.md
rename to src/posts/2021-01/null-vs-undefined/index.md
index b6b6111..568e345 100644
--- a/src/pages/2021-01/null-vs-undefined/index.md
+++ b/src/posts/2021-01/null-vs-undefined/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Null Vs Undefined"
date: "2021-01-11"
description: "This article explains the difference between null and undefined in depth."
diff --git a/src/pages/2021-02/javascript-enhanced-object-literals/index.md b/src/posts/2021-02/javascript-enhanced-object-literals/index.md
similarity index 98%
rename from src/pages/2021-02/javascript-enhanced-object-literals/index.md
rename to src/posts/2021-02/javascript-enhanced-object-literals/index.md
index 3d10b65..ffa4812 100644
--- a/src/pages/2021-02/javascript-enhanced-object-literals/index.md
+++ b/src/posts/2021-02/javascript-enhanced-object-literals/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Enhanced Object Literals"
date: "2021-02-08"
description: "Creating objects in JavaScript is something you do all the time so you should know about these enhancements that make creating objects even easier."
diff --git a/src/pages/2021-03/dynamic-module-imports/index.md b/src/posts/2021-03/dynamic-module-imports/index.md
similarity index 98%
rename from src/pages/2021-03/dynamic-module-imports/index.md
rename to src/posts/2021-03/dynamic-module-imports/index.md
index e85fc59..40f205a 100644
--- a/src/pages/2021-03/dynamic-module-imports/index.md
+++ b/src/posts/2021-03/dynamic-module-imports/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Dynamic Module Imports"
date: "2021-03-08"
description: "By using dynamic module imports you can speed up your applications while making the user experience better."
diff --git a/src/pages/2021-03/js-reference-vs-value/index.md b/src/posts/2021-03/js-reference-vs-value/index.md
similarity index 97%
rename from src/pages/2021-03/js-reference-vs-value/index.md
rename to src/posts/2021-03/js-reference-vs-value/index.md
index 086d5ef..1292f1f 100644
--- a/src/pages/2021-03/js-reference-vs-value/index.md
+++ b/src/posts/2021-03/js-reference-vs-value/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import ValueChart from '/src/blogComponents/referenceVsValue/ValueChart.astro'
+setup: import ValueChart from '/src/blogComponents/referenceVsValue/ValueChart.astro'
title: "Reference Vs Value - Most People Don't Understand This"
date: "2021-03-29"
description: "Reference vs value is one of the most complicated topics beginner developers face, but it is much easier than it appears."
diff --git a/src/pages/2021-03/why-programming-needs-to-be-fun/index.md b/src/posts/2021-03/why-programming-needs-to-be-fun/index.md
similarity index 98%
rename from src/pages/2021-03/why-programming-needs-to-be-fun/index.md
rename to src/posts/2021-03/why-programming-needs-to-be-fun/index.md
index 4359490..d18ab02 100644
--- a/src/pages/2021-03/why-programming-needs-to-be-fun/index.md
+++ b/src/posts/2021-03/why-programming-needs-to-be-fun/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Why Programming Needs To Be Fun"
date: "2021-03-01"
description: "If you are unable to make programming fun you will never be able to become a programmer."
diff --git a/src/pages/2021-04/math-as-a-programmer/index.md b/src/posts/2021-04/math-as-a-programmer/index.md
similarity index 98%
rename from src/pages/2021-04/math-as-a-programmer/index.md
rename to src/posts/2021-04/math-as-a-programmer/index.md
index 21456aa..ba5c14d 100644
--- a/src/pages/2021-04/math-as-a-programmer/index.md
+++ b/src/posts/2021-04/math-as-a-programmer/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Do You Need To Know Math?"
date: "2021-04-19"
description: "Programmers learn a ton of math in school, but do you really need to know math to be a programmer?"
diff --git a/src/pages/2021-04/recursion/index.md b/src/posts/2021-04/recursion/index.md
similarity index 99%
rename from src/pages/2021-04/recursion/index.md
rename to src/posts/2021-04/recursion/index.md
index 58efaab..444e9d2 100644
--- a/src/pages/2021-04/recursion/index.md
+++ b/src/posts/2021-04/recursion/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "What Is Recursion?"
date: "2021-04-26"
description: "Recursion is one of the hardest topics to learn as a new developer, but this is mostly due to confusing explanations and examples. This article will break down recursion in an easy to understand way with concrete and simple examples."
diff --git a/src/pages/2021-05/cors/index.md b/src/posts/2021-05/cors/index.md
similarity index 99%
rename from src/pages/2021-05/cors/index.md
rename to src/posts/2021-05/cors/index.md
index 031d512..37debaf 100644
--- a/src/pages/2021-05/cors/index.md
+++ b/src/posts/2021-05/cors/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "CORS (Cross-Origin Resource Sharing)"
date: "2021-05-03"
description: "What is CORS and how to fix CORS errors."
diff --git a/src/pages/2021-05/css-logical-properties/index.md b/src/posts/2021-05/css-logical-properties/index.md
similarity index 98%
rename from src/pages/2021-05/css-logical-properties/index.md
rename to src/posts/2021-05/css-logical-properties/index.md
index 6f168fe..641e7d6 100644
--- a/src/pages/2021-05/css-logical-properties/index.md
+++ b/src/posts/2021-05/css-logical-properties/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import Flexbox from "/src/blogComponents/flexbox/Flexbox.astro"
+setup: import Flexbox from "/src/blogComponents/flexbox/Flexbox.astro"
title: "CSS Logical Properties"
date: "2021-05-24"
description: "CSS logical properties are the new way to write padding, margin, border, and so much more. They will change CSS forever."
diff --git a/src/pages/2021-05/initial-inherit-revert-unset/index.md b/src/posts/2021-05/initial-inherit-revert-unset/index.md
similarity index 99%
rename from src/pages/2021-05/initial-inherit-revert-unset/index.md
rename to src/posts/2021-05/initial-inherit-revert-unset/index.md
index 9011816..885fa64 100644
--- a/src/pages/2021-05/initial-inherit-revert-unset/index.md
+++ b/src/posts/2021-05/initial-inherit-revert-unset/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "CSS Initial vs Inherit vs Unset vs Revert"
date: "2021-05-31"
description: "Understanding how to undo and remove styles in CSS is a skill most developers never learn, but it is incredibly useful."
diff --git a/src/pages/2021-05/node-vs-element/index.md b/src/posts/2021-05/node-vs-element/index.md
similarity index 98%
rename from src/pages/2021-05/node-vs-element/index.md
rename to src/posts/2021-05/node-vs-element/index.md
index 9638659..3ce13f9 100644
--- a/src/pages/2021-05/node-vs-element/index.md
+++ b/src/posts/2021-05/node-vs-element/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "JavaScript Node Vs Element"
date: "2021-05-17"
description: "Nodes and elements are very similar in JavaScript, but there are a few important differences to understand."
diff --git a/src/pages/2021-05/reduce/index.md b/src/posts/2021-05/reduce/index.md
similarity index 99%
rename from src/pages/2021-05/reduce/index.md
rename to src/posts/2021-05/reduce/index.md
index 8f2c057..7767bc2 100644
--- a/src/pages/2021-05/reduce/index.md
+++ b/src/posts/2021-05/reduce/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "JavaScript Array Reduce Simplified"
date: "2021-05-10"
description: "How the array reduce function works in JavaScript and how you can use it in your projects."
diff --git a/src/pages/2021-06/hsl-color-format/index.md b/src/posts/2021-06/hsl-color-format/index.md
similarity index 98%
rename from src/pages/2021-06/hsl-color-format/index.md
rename to src/posts/2021-06/hsl-color-format/index.md
index 1df2ace..7d83c4a 100644
--- a/src/pages/2021-06/hsl-color-format/index.md
+++ b/src/posts/2021-06/hsl-color-format/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import ColorWheel from '/src/blogComponents/colorWheel/ColorWheel.astro'
+setup: import ColorWheel from '/src/blogComponents/colorWheel/ColorWheel.astro'
title: "What Is HSL?"
date: "2021-06-07"
description: "HSL is the easiest and best color format to use with CSS, but why exactly is that?"
diff --git a/src/pages/2021-06/react-18-changes/index.md b/src/posts/2021-06/react-18-changes/index.md
similarity index 99%
rename from src/pages/2021-06/react-18-changes/index.md
rename to src/posts/2021-06/react-18-changes/index.md
index ef74817..fbe007b 100644
--- a/src/pages/2021-06/react-18-changes/index.md
+++ b/src/posts/2021-06/react-18-changes/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "What's New In React 18?"
date: "2021-06-14"
description: "React 18 introduces a ton of new features related to performance and loading which you should be excited about."
diff --git a/src/pages/2021-07/stripe-checkout/index.md b/src/posts/2021-07/stripe-checkout/index.md
similarity index 99%
rename from src/pages/2021-07/stripe-checkout/index.md
rename to src/posts/2021-07/stripe-checkout/index.md
index 1c87447..8fcabfc 100644
--- a/src/pages/2021-07/stripe-checkout/index.md
+++ b/src/posts/2021-07/stripe-checkout/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Accept Payments With Stripe"
date: "2021-07-26"
description: "Almost every application needs some way to accept payments so in this article I will show you how to easily configure Stripe in just a few lines of code."
diff --git a/src/pages/2021-07/technical-debt/index.md b/src/posts/2021-07/technical-debt/index.md
similarity index 99%
rename from src/pages/2021-07/technical-debt/index.md
rename to src/posts/2021-07/technical-debt/index.md
index 16d40e9..a87058b 100644
--- a/src/pages/2021-07/technical-debt/index.md
+++ b/src/posts/2021-07/technical-debt/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Manage Technical Debt?"
date: "2021-07-05"
description: "Technical debt may seem inevitable, but there are many techniques you can use to manage technical debt."
diff --git a/src/pages/2021-08/are-online-courses-worth-it/index.md b/src/posts/2021-08/are-online-courses-worth-it/index.md
similarity index 99%
rename from src/pages/2021-08/are-online-courses-worth-it/index.md
rename to src/posts/2021-08/are-online-courses-worth-it/index.md
index 23ea8d2..19eadac 100644
--- a/src/pages/2021-08/are-online-courses-worth-it/index.md
+++ b/src/posts/2021-08/are-online-courses-worth-it/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Are Online Courses Worth It?"
date: "2021-08-02"
description: "Online courses claim to make you a developer quicker and easier, but are they worth the sometimes astronomical cost?"
diff --git a/src/pages/2021-08/how-to-learn-to-code-with-comments/index.md b/src/posts/2021-08/how-to-learn-to-code-with-comments/index.md
similarity index 99%
rename from src/pages/2021-08/how-to-learn-to-code-with-comments/index.md
rename to src/posts/2021-08/how-to-learn-to-code-with-comments/index.md
index 07830c1..6581681 100644
--- a/src/pages/2021-08/how-to-learn-to-code-with-comments/index.md
+++ b/src/posts/2021-08/how-to-learn-to-code-with-comments/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Learn To Code Faster With Comments"
date: "2021-08-16"
description: "Building projects from scratch is hard, but if you utilize comments correctly you can make writing projects from scratching trivial."
diff --git a/src/pages/2021-09/javascript-promises/index.md b/src/posts/2021-09/javascript-promises/index.md
similarity index 99%
rename from src/pages/2021-09/javascript-promises/index.md
rename to src/posts/2021-09/javascript-promises/index.md
index 9fe0b0a..cc4adb3 100644
--- a/src/pages/2021-09/javascript-promises/index.md
+++ b/src/posts/2021-09/javascript-promises/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "The Complete JavaScript Promise Guide"
date: "2021-09-13"
description: "I promise this will be the best guide on promises you ever read."
diff --git a/src/pages/2021-10/advanced-git-commands/index.md b/src/posts/2021-10/advanced-git-commands/index.md
similarity index 99%
rename from src/pages/2021-10/advanced-git-commands/index.md
rename to src/posts/2021-10/advanced-git-commands/index.md
index 9e7aade..ad97c22 100644
--- a/src/pages/2021-10/advanced-git-commands/index.md
+++ b/src/posts/2021-10/advanced-git-commands/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "10 Must Know Git Commands That Almost Nobody Knows"
date: "2021-10-11"
description: "Everyone knows how to add and commit changes, but that is only the start of Git. The Git commands in this article will supercharge your Git skills and save you time."
diff --git a/src/pages/2021-11/async-await/index.md b/src/posts/2021-11/async-await/index.md
similarity index 99%
rename from src/pages/2021-11/async-await/index.md
rename to src/posts/2021-11/async-await/index.md
index cb798a7..50dcaa9 100644
--- a/src/pages/2021-11/async-await/index.md
+++ b/src/posts/2021-11/async-await/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Better Than Promises - JavaScript Async/Await"
date: "2021-11-08"
description: "Async/Await is syntactical sugar that makes working with promises and async code so much easier."
diff --git a/src/pages/2021-11/es6-modules/index.md b/src/posts/2021-11/es6-modules/index.md
similarity index 99%
rename from src/pages/2021-11/es6-modules/index.md
rename to src/posts/2021-11/es6-modules/index.md
index 04a7c9d..4878d06 100644
--- a/src/pages/2021-11/es6-modules/index.md
+++ b/src/posts/2021-11/es6-modules/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "ES6 JavaScript Modules"
date: "2021-11-15"
description: "ES6 modules are one of the best features added to JavaScript since it makes writing clean code exponentially easier."
diff --git a/src/pages/2021-11/flexbox/index.md b/src/posts/2021-11/flexbox/index.md
similarity index 99%
rename from src/pages/2021-11/flexbox/index.md
rename to src/posts/2021-11/flexbox/index.md
index ac96e55..6d0812f 100644
--- a/src/pages/2021-11/flexbox/index.md
+++ b/src/posts/2021-11/flexbox/index.md
@@ -1,6 +1,5 @@
---
setup: |
- import Layout from '/src/layouts/BlogPost.astro'
import FlexboxGeneric from "/src/blogComponents/flexbox/FlexboxGeneric.astro"
import FlexboxAxes from "/src/blogComponents/flexbox/FlexboxAxes.astro"
title: "CSS Flexbox Ultimate Guide"
diff --git a/src/pages/2021-11/js-array-map/index.md b/src/posts/2021-11/js-array-map/index.md
similarity index 99%
rename from src/pages/2021-11/js-array-map/index.md
rename to src/posts/2021-11/js-array-map/index.md
index 03ad342..c54dcd4 100644
--- a/src/pages/2021-11/js-array-map/index.md
+++ b/src/posts/2021-11/js-array-map/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Use The Most Used Array Method - Map"
date: "2021-11-29"
description: "Map is by far the most used array method and in this article I will explain exactly what it does and why it is so useful."
diff --git a/src/pages/2021-11/use-debug-value/index.md b/src/posts/2021-11/use-debug-value/index.md
similarity index 98%
rename from src/pages/2021-11/use-debug-value/index.md
rename to src/posts/2021-11/use-debug-value/index.md
index 8894975..2ca63e7 100644
--- a/src/pages/2021-11/use-debug-value/index.md
+++ b/src/posts/2021-11/use-debug-value/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "useDebugValue React Hook Explained"
date: "2021-11-01"
description: "You have probably never used the useDebugValue hook, but this hook is incredible at helping you debug your custom hooks."
diff --git a/src/pages/2021-12/box-model/index.md b/src/posts/2021-12/box-model/index.md
similarity index 99%
rename from src/pages/2021-12/box-model/index.md
rename to src/posts/2021-12/box-model/index.md
index 740cfec..95ecf47 100644
--- a/src/pages/2021-12/box-model/index.md
+++ b/src/posts/2021-12/box-model/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "CSS Box Model"
date: "2021-12-20"
description: "There are countless ways to size and space out elements in CSS, but all those techniques involve the box model which is why learning the box model is crucial to learning CSS."
diff --git a/src/pages/2021-12/css-pseudo-elements/index.md b/src/posts/2021-12/css-pseudo-elements/index.md
similarity index 99%
rename from src/pages/2021-12/css-pseudo-elements/index.md
rename to src/posts/2021-12/css-pseudo-elements/index.md
index 5133e6e..03f504a 100644
--- a/src/pages/2021-12/css-pseudo-elements/index.md
+++ b/src/posts/2021-12/css-pseudo-elements/index.md
@@ -1,6 +1,5 @@
---
setup: |
- import Layout from '/src/layouts/BlogPost.astro'
import Selection from "/src/blogComponents/cssPseudoElements/Selection.astro"
import Tooltip from "/src/blogComponents/cssPseudoElements/Tooltip.astro"
import FirstLetter from "/src/blogComponents/cssPseudoElements/FirstLetter.astro"
diff --git a/src/pages/2021-12/css-selectors/index.md b/src/posts/2021-12/css-selectors/index.md
similarity index 99%
rename from src/pages/2021-12/css-selectors/index.md
rename to src/posts/2021-12/css-selectors/index.md
index 7588d9c..4d47595 100644
--- a/src/pages/2021-12/css-selectors/index.md
+++ b/src/posts/2021-12/css-selectors/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "CSS Selector Ultimate Guide"
date: "2021-12-06"
description: "CSS selectors are easy to get started with but hard to master since there are so many options which is why I created this ultimate guide to teach you not only the basics, but also the more advanced CSS selectors you need to know."
diff --git a/src/pages/2021-12/request-animation-frame/index.md b/src/posts/2021-12/request-animation-frame/index.md
similarity index 97%
rename from src/pages/2021-12/request-animation-frame/index.md
rename to src/posts/2021-12/request-animation-frame/index.md
index 7b16a71..120ef8c 100644
--- a/src/pages/2021-12/request-animation-frame/index.md
+++ b/src/posts/2021-12/request-animation-frame/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import LeftBox from "/src/blogComponents/requestAnimationFrame/LeftBox.jsx"
+setup: import LeftBox from "/src/blogComponents/requestAnimationFrame/LeftBox.jsx"
title: "Stop Using setInterval. Use requestAnimationFrame"
date: "2021-12-13"
description: "requestAnimationFrame is the best way in JavaScript to play smooth and efficient animations and in this article I will show you exactly how to use requestAnimationFrame."
diff --git a/src/pages/2022-01/css-position/index.md b/src/posts/2022-01/css-position/index.md
similarity index 98%
rename from src/pages/2022-01/css-position/index.md
rename to src/posts/2022-01/css-position/index.md
index 6b13cff..329ef8f 100644
--- a/src/pages/2022-01/css-position/index.md
+++ b/src/posts/2022-01/css-position/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import CssPosition from '/src/blogComponents/cssPosition/CssPosition.astro'
+setup: import CssPosition from '/src/blogComponents/cssPosition/CssPosition.astro'
title: "CSS Position Ultimate Guide"
date: "2022-01-17"
description: "Understanding how CSS position works seems straightforward, but there are quite a few nuances you need to understand in order to truly master CSS."
diff --git a/src/pages/2022-01/event-listeners/index.md b/src/posts/2022-01/event-listeners/index.md
similarity index 99%
rename from src/pages/2022-01/event-listeners/index.md
rename to src/posts/2022-01/event-listeners/index.md
index a9c9faf..32b1923 100644
--- a/src/pages/2022-01/event-listeners/index.md
+++ b/src/posts/2022-01/event-listeners/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "JavaScript Event Listeners Ultimate Guide"
date: "2022-01-03"
description: "Event listeners appear simple at first, but they have an incredible level of depth that most people completely ignore. This article will cover everything you need to know about event listeners so you can avoid bugs and write better code for your projects."
diff --git a/src/pages/2022-01/intersection-observer/index.md b/src/posts/2022-01/intersection-observer/index.md
similarity index 98%
rename from src/pages/2022-01/intersection-observer/index.md
rename to src/posts/2022-01/intersection-observer/index.md
index b762572..8761678 100644
--- a/src/pages/2022-01/intersection-observer/index.md
+++ b/src/posts/2022-01/intersection-observer/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import IntersectionObserverComponent from '/src/blogComponents/intersectionObserver/IntersectionObserver.astro'
+setup: import IntersectionObserverComponent from '/src/blogComponents/intersectionObserver/IntersectionObserver.astro'
title: "JavaScript Intersection Observer Ultimate Guide"
date: "2022-01-10"
description: "Lazy loading, infinite scrolling, scroll based animations, and performant scroll events are all perfect examples of Intersection Observer in action."
diff --git a/src/pages/2022-01/js-fetch-api/index.md b/src/posts/2022-01/js-fetch-api/index.md
similarity index 99%
rename from src/pages/2022-01/js-fetch-api/index.md
rename to src/posts/2022-01/js-fetch-api/index.md
index 47b4c06..6389f3d 100644
--- a/src/pages/2022-01/js-fetch-api/index.md
+++ b/src/posts/2022-01/js-fetch-api/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "JavaScript Fetch API Ultimate Guide"
date: "2022-01-24"
description: "The fetch API looks straightforward, but there are a lot of edge cases that this blog article will address for you."
diff --git a/src/pages/2022-01/resize-observer/index.md b/src/posts/2022-01/resize-observer/index.md
similarity index 99%
rename from src/pages/2022-01/resize-observer/index.md
rename to src/posts/2022-01/resize-observer/index.md
index e69e858..4b034c4 100644
--- a/src/pages/2022-01/resize-observer/index.md
+++ b/src/posts/2022-01/resize-observer/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "JavaScript Resize Observer Ultimate Guide"
date: "2022-01-31"
description: "Detecting element size changes is something that is normally difficult to do, but with resize observer it is incredibly easy."
diff --git a/src/pages/2022-02/mongo-db/index.md b/src/posts/2022-02/mongo-db/index.md
similarity index 99%
rename from src/pages/2022-02/mongo-db/index.md
rename to src/posts/2022-02/mongo-db/index.md
index a9b1c0c..5b9d3b9 100644
--- a/src/pages/2022-02/mongo-db/index.md
+++ b/src/posts/2022-02/mongo-db/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "MongoDB Ultimate Guide"
date: "2022-02-07"
description: "This ultimate guide will break down everything you need to know about MongoDB to build your next project."
diff --git a/src/pages/2022-02/temporal-date-api/index.md b/src/posts/2022-02/temporal-date-api/index.md
similarity index 99%
rename from src/pages/2022-02/temporal-date-api/index.md
rename to src/posts/2022-02/temporal-date-api/index.md
index 92d641c..5813e47 100644
--- a/src/pages/2022-02/temporal-date-api/index.md
+++ b/src/posts/2022-02/temporal-date-api/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "Temporal Date API Ultimate Guide"
date: "2022-02-21"
description: "This ultimate guide will break down everything you need to know about the new temporal date API in JavaScript."
diff --git a/src/pages/2022-03/console-methods/index.md b/src/posts/2022-03/console-methods/index.md
similarity index 99%
rename from src/pages/2022-03/console-methods/index.md
rename to src/posts/2022-03/console-methods/index.md
index 1fe99d7..83ce58a 100644
--- a/src/pages/2022-03/console-methods/index.md
+++ b/src/posts/2022-03/console-methods/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "20+ Console Methods That Will Revolutionize Debugging For You"
date: "2022-03-21"
description: "You probably know console.log and a few other console methods, but did you know there are over 20 amazing console methods that make debugging easier and more enjoyable."
diff --git a/src/pages/2022-03/debounce-vs-throttle/index.md b/src/posts/2022-03/debounce-vs-throttle/index.md
similarity index 99%
rename from src/pages/2022-03/debounce-vs-throttle/index.md
rename to src/posts/2022-03/debounce-vs-throttle/index.md
index 71c52bd..19fe640 100644
--- a/src/pages/2022-03/debounce-vs-throttle/index.md
+++ b/src/posts/2022-03/debounce-vs-throttle/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Implement Debounce And Throttle In JavaScript"
date: "2022-03-28"
description: "Debounce and throttle are two of the best ways to improve the performance of your site and in this article I talk all about how to implement both options and what they do."
diff --git a/src/pages/2022-03/vscode-snippet/index.md b/src/posts/2022-03/vscode-snippet/index.md
similarity index 99%
rename from src/pages/2022-03/vscode-snippet/index.md
rename to src/posts/2022-03/vscode-snippet/index.md
index 492c77a..3e6683c 100644
--- a/src/pages/2022-03/vscode-snippet/index.md
+++ b/src/posts/2022-03/vscode-snippet/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Create A VSCode Snippet"
date: "2022-03-07"
description: "Snippets are one of the easiest ways to customize your VSCode experience and in this article I will explain everything you need to know about creating your first snippet."
diff --git a/src/pages/2022-04/css-cascade-layers/index.md b/src/posts/2022-04/css-cascade-layers/index.md
similarity index 99%
rename from src/pages/2022-04/css-cascade-layers/index.md
rename to src/posts/2022-04/css-cascade-layers/index.md
index 2e75091..df94ece 100644
--- a/src/pages/2022-04/css-cascade-layers/index.md
+++ b/src/posts/2022-04/css-cascade-layers/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Use CSS Layers"
date: "2022-04-18"
description: "CSS layers change how the cascade works and it makes writing clean CSS code so much easier."
diff --git a/src/pages/2022-04/js-custom-events/index.md b/src/posts/2022-04/js-custom-events/index.md
similarity index 99%
rename from src/pages/2022-04/js-custom-events/index.md
rename to src/posts/2022-04/js-custom-events/index.md
index 7f1068a..de70265 100644
--- a/src/pages/2022-04/js-custom-events/index.md
+++ b/src/posts/2022-04/js-custom-events/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: "How To Create Custom JavaScript Events"
date: "2022-04-11"
description: "Custom events in JavaScript make handling things like double click, long press, and touch gestures much easier, but they can also be used for cross app communication."
diff --git a/src/pages/2022-04/stop-using-bang-operator/index.md b/src/posts/2022-04/stop-using-bang-operator/index.md
similarity index 98%
rename from src/pages/2022-04/stop-using-bang-operator/index.md
rename to src/posts/2022-04/stop-using-bang-operator/index.md
index 8556237..6b4c8c3 100644
--- a/src/pages/2022-04/stop-using-bang-operator/index.md
+++ b/src/posts/2022-04/stop-using-bang-operator/index.md
@@ -1,5 +1,4 @@
---
-setup: import Layout from '/src/layouts/BlogPost.astro'
title: 'Stop Using The "!" Bang Operator In JavaScript'
date: "2022-04-04"
description: "You may think you are writing cleaner code using the bang operator, but in reality you are just opening yourself up to a plethora of bugs."
diff --git a/src/pages/2022-04/use-transition/index.md b/src/posts/2022-04/use-transition/index.md
similarity index 98%
rename from src/pages/2022-04/use-transition/index.md
rename to src/posts/2022-04/use-transition/index.md
index 43b1555..f2f4d6f 100644
--- a/src/pages/2022-04/use-transition/index.md
+++ b/src/posts/2022-04/use-transition/index.md
@@ -1,7 +1,5 @@
---
-setup: |
- import Layout from '/src/layouts/BlogPost.astro'
- import UseTransition from "/src/blogComponents/useTransition/UseTransition.jsx"
+setup: import UseTransition from "/src/blogComponents/useTransition/UseTransition.jsx"
title: "useTransition Hook Explained"
date: "2022-04-25"
description: "React 18 introduced many new hooks and in this article I will be talking about useTransition which is the most useful of those hooks."