blog app issue

.storybook/main.js

-/** @type { import('@storybook/nextjs').StorybookConfig } */
-const config = {
+// // .storybook/main.js or .storybook/main.ts
+// module.exports = {
+//   stories: [
+//     "../components/**/*.mdx",
+//     "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+//   ],
+
+//   addons: [
+//     "@storybook/addon-links",
+//     "@storybook/addon-essentials",
+//     "@storybook/addon-onboarding",
+//     "@storybook/addon-interactions",
+//     "storybook-dark-mode",
+//   ],
+
+//   frameworks: {
+//     "@storybook/nextjs": {
+//       options: {},
+//     },
+//   },
+
+//   docs: {
+//     autodocs: "tag",
+//   },
+
+//   framework: {
+//     name: "@storybook/nextjs",
+//     options: {},
+//   },
+// };
+
+import path from "path";
+
+module.exports = {
   stories: [
     "../components/**/*.mdx",
     "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
@@ -11,12 +43,24 @@ const config = {
     "@storybook/addon-interactions",
     "storybook-dark-mode",
   ],
+  webpackFinal: (config) => {
+    config.resolve = {
+      ...config.resolve,
+      fallback: {
+        fs: false,
+        path: false,
+        os: false,
+      },
+      alias: {
+        ...config.resolve.alias,
+        "@components": path.resolve(__dirname, "../components"),
+        "@img": path.resolve(__dirname, "../public/images"),
+      },
+    };
+    return config;
+  },
   framework: {
     name: "@storybook/nextjs",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
 };
-export default config;

.storybook/preview.js

 /** @type { import('@storybook/react').Preview } */
 import "../app/globals.css";
 import { useDarkMode } from "storybook-dark-mode";
+import { themes } from "@storybook/theming";
 import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
 
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    docs: {
+      theme: themes.dark,
+    },
+    actions: {
+      argTypesRegex: "^on[A-Z].*",
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/i,
+        date: /Date$/,
       },
     },
     darkMode: {
@@ -23,7 +29,6 @@ const preview = {
 
 export const decorators = [
   (Story) => {
-
     const currentTheme = useDarkMode() ? "light" : "dark";
     return <Story theme={currentTheme} />;
   },

app/_app.js

 import "@styles/global.css";
 
-// import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
-// import { library } from "@fortawesome/fontawesome-svg-core";
-// import { faNewspaper } from "@fortawesome/free-solid-svg-icons";
-
-// library.add(faNewspaper);
-
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />;
 }

app/context/index.js

-import React, { createContext, useState, useContext, useEffect } from "react";
-import { useDarkMode } from "storybook-dark-mode";
+"use client";
 
-const ThemeContext = createContext();
+import { createContext, useContext, useState, useEffect } from "react";
 
-export const ThemeProvider = ({ children }) => {
-  const isDarkMode = useDarkMode();
+export const ThemeContext = createContext();
+export const useAppContext = () => useContext(ThemeContext);
+
+export default function ThemeProvider({ children, ...props }) {
+  // State for theme
   const [theme, setTheme] = useState("light");
 
-  const toggleTheme = () => {
-    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  useEffect(() => {
+    handleThemeChange();
+  }, [theme]);
+
+  // Function to handle theme changes
+  const handleThemeChange = () => {
+    const storedTheme = localStorage.getItem("theme");
+
+    if (!storedTheme) {
+      // Set default theme to light if not stored
+      setDefaultTheme();
+    } else {
+      // Set theme from storage
+      setThemeFromStorage(storedTheme);
+    }
   };
 
-  useEffect(() => {
-    // You can use localStorage to persist the theme preference
-    const savedTheme = localStorage.getItem("theme");
-    setTheme((isDarkMode ? "dark" : "light") || savedTheme);
-  }, [isDarkMode]);
+  // Function to set default theme to light
+  const setDefaultTheme = () => {
+    const defaultTheme = "light";
+    localStorage.setItem("theme", defaultTheme);
+    setThemeAndApplyClass(defaultTheme);
+  };
 
-  useEffect(() => {
-    document.documentElement.setAttribute("data-theme", theme);
-    localStorage.setItem("theme", theme);
-  }, [theme]);
+  // Function to set theme from storage
+  const setThemeFromStorage = (storedTheme) => {
+    setThemeAndApplyClass(storedTheme);
+  };
+
+  // Function to set theme and apply class to document element
+  const setThemeAndApplyClass = (newTheme) => {
+    localStorage.setItem("theme", newTheme);
+    setTheme(newTheme);
+    document.documentElement.setAttribute("class", newTheme);
+  };
+
+  const contextValue = {
+    theme,
+    setTheme,
+    ...props,
+  };
 
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+    <ThemeContext.Provider value={contextValue}>
       {children}
     </ThemeContext.Provider>
   );
-};
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-};
-
-export const decorators = [
-  (renderStory) => <ThemeProvider>{renderStory()}</ThemeProvider>,
-];
+}

app/globals.css

@@ -56,7 +56,7 @@ html {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-  background-color: var(--bg-color);
+  background: var(--bg-color);
   min-height: 100dvh;
   max-width: 1920px;
   margin: 0 auto;
@@ -70,9 +70,11 @@ h1 {
 }
 h2 {
   font-size: var(--heading2);
+  color: var(--font-color-900);
 }
 h3 {
   font-size: var(--heading3);
+  color: var(--font-color-900);
 }
 h4 {
   font-size: var(--heading4);
@@ -103,8 +105,8 @@ p {
   display: flex;
   gap: 1em;
 }
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   html {
     background-color: var(--bg-color);
   }
-}
+} */

app/layout.js

-import { Inter } from "next/font/google";
+import ThemeProvider from "./context";
 import "./globals.css";
-import { useTheme, ThemeProvider } from "./context";
-import { useEffect } from "react";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata = {
-  title: "Home",
-  description: "Next Blog",
-};
 
 export default function RootLayout({ children }) {
-  const { theme } = useTheme();
-  useEffect(() => {
-    console.log("Theme in RootLayout:", theme);
-  }, [theme]);
   return (
     <ThemeProvider>
-      <html lang="en" className={theme}>
+      <html lang="en">
         <body>{children}</body>
       </html>
     </ThemeProvider>

app/loading.js

+import React from "react";
+
+const loading = () => {
+  return <div>Loading ...</div>;
+};
+
+export default loading;

app/not-found.js

+import React from "react";
+
+const PageNotFound = () => {
+  return (
+    <div>
+      <h1>404 Not Found</h1>
+    </div>
+  );
+};
+
+export default PageNotFound;

app/page.js

-import React from "react";
+import BlogLists from "@components/top-level/blog-lists";
+import Header from "@components/base/header";
+import { getAllPosts } from "@lib/posts";
+import { useAppContext } from "./context";
 
 const Home = () => {
+  const { theme, setTheme } = useAppContext();
+
+  let blogs;
+  const fetchAllBlogs = () => {
+    blogs = getAllPosts("posts");
+  };
+  fetchAllBlogs();
+
   return (
     <div>
-      <h1>Home</h1>
+      <Header name="NewsBlog" currentTheme={theme} onThemeChange={setTheme} />
+      <BlogLists
+        title={blogs?.title}
+        description={blogs?.description}
+        blogs={blogs}
+      />
     </div>
   );
 };

components/base/button/button.stories.js

-import Button from ".";
+import Button from "@components/base/button/index";
 
 export default {
   title: "Base/Button",

components/base/button/index.js

@@ -3,14 +3,14 @@ import cn from "classnames";
 import styles from "./styles.module.css";
 
 const Button = ({ children, isDisabled, variant, className, ...props }) => {
-  const classNames = cn({
+  const classNames = cn(styles["btn"], {
     [styles[variant]]: variant,
     [styles[className]]: className,
     [styles.disabled]: isDisabled === true,
   });
 
   return (
-    <button className={`${classNames}`} {...props}>
+    <button className={`${classNames}`} {...props} disabled={isDisabled}>
       {children}
     </button>
   );
@@ -18,7 +18,7 @@ const Button = ({ children, isDisabled, variant, className, ...props }) => {
 
 Button.propTypes = {
   variant: PropTypes.oneOf(["primary", "secondary"]),
-  children: PropTypes.element,
+  children: PropTypes.any,
   isDisabled: PropTypes.bool,
 };
 

components/base/button/styles.module.css

-button {
+.btn {
   padding: 0.8rem 1.5rem;
   outline: none;
   border: none;
@@ -17,5 +17,4 @@ button {
 }
 .disabled {
   opacity: 0.7;
-  /* background-color: var(--secondary-bgcolor); */
 }

components/base/card/card.stories.js

-import React from "react";
-import Card from ".";
+import Card from "@components/base/card/index";
 
 export default {
   title: "Base/Card",
@@ -26,4 +25,7 @@ export const card = {
     },
     readingTime: "1 min",
   },
+  render: (args) => {
+    return <Card {...args} />;
+  },
 };

components/base/card/index.js

@@ -54,16 +54,18 @@ Card.propTypes = {
   description: PropTypes.string,
   image: PropTypes.shape({
     url: PropTypes.string,
+    height: PropTypes.number,
+    width: PropTypes.number,
   }),
   publishedDate: PropTypes.string,
-  author: {
+  author: PropTypes.shape({
     name: PropTypes.string,
     image: PropTypes.shape({
       url: PropTypes.string,
       height: PropTypes.number,
       width: PropTypes.number, // Use PropTypes.string for images
     }),
-  },
+  }),
 
   readingTime: PropTypes.string,
 };

components/base/card/styles.module.css

@@ -5,62 +5,58 @@
   flex-direction: column;
   transition: all 0.3s ease-in-out;
   word-wrap: break-word;
-  &:hover {
-    transform: translateY(-10px);
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px -1px,
-      rgba(0, 0, 0, 0.06) 0px 2px 8px -1px;
-  }
-  .img {
-    max-width: 100%;
-    height: auto;
-
-    border-top-right-radius: 20px;
-    border-top-left-radius: 20px;
-  }
 }
-
+.card:hover {
+  transform: translateY(-10px);
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0px 3px 8px -1px,
+    rgba(0, 0, 0, 0.06) 0px 2px 8px -1px;
+}
+.card .img {
+  max-width: 100%;
+  height: auto;
+  border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
+}
 .authorcontainer {
   padding: 1.5rem;
   padding-top: 0rem;
   margin-top: -20px;
-  & .description {
-    color: var(--font-color-300);
-    line-height: 1.5em;
-    font-weight: 600px;
-    word-wrap: break-word;
-  }
-  .cardbottom {
-    display: grid;
-    grid-template-columns: 0.5fr 2fr;
-    line-height: 0;
-    align-items: center;
-    grid-gap: 16px;
-    color: var(--font-color-900);
-    .img {
-      border-radius: 50%;
-      height: auto;
-      max-width: 100%;
-    }
-    .authordescription {
-      .authorName {
-        font-size: 18px;
-        font-weight: 500;
-      }
-      .author-desc {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        color: var(--font-color-300);
-        line-height: 0.5em;
-        & span {
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-  }
 }
-
+.authorcontainer .description {
+  color: var(--font-color-300);
+  line-height: 1.5em;
+  font-weight: 600px;
+  word-wrap: break-word;
+}
+.authorcontainer .cardbottom {
+  display: grid;
+  grid-template-columns: 0.5fr 2fr;
+  line-height: 0;
+  align-items: center;
+  grid-gap: 16px;
+  color: var(--font-color-900);
+}
+.authorcontainer .cardbottom .img {
+  border-radius: 50%;
+  height: auto;
+  max-width: 100%;
+}
+.authorcontainer .cardbottom .authordescription .authorName {
+  font-size: 18px;
+  font-weight: 500;
+}
+.authorcontainer .cardbottom .authordescription .author-desc {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: var(--font-color-300);
+  line-height: 0.5em;
+}
+.authorcontainer .cardbottom .authordescription .author-desc span {
+  display: flex;
+  align-items: center;
+}
 .title {
   color: var(--font-color-900);
   font-size: 22px;
@@ -68,9 +64,9 @@
   font-weight: 600;
   padding: 1.5rem;
   padding-bottom: 0rem;
-  &:hover {
-    color: #5a67d8;
-  }
+}
+.title:hover {
+  color: #5a67d8;
 }
 
 @media screen and (min-width: 768px) {

components/base/header/header.stories.js

-import Header from ".";
+import Header from "@components/base/header/index";
 export default {
   title: "Base/Header",
   component: Header,

components/base/header/index.js

@@ -4,16 +4,16 @@ import Icons from "@components/base/icons";
 import styles from "./styles.module.css";
 import PropTypes from "prop-types";
 
-function Header({ name, currentTheme, onThemeChange, onSearch, onClose }) {
+function Header({ name, currentTheme, onThemeChange }) {
   const handleTheme = () => {
     onThemeChange(currentTheme);
   };
-  const handleSearch = (value) => {
-    onSearch(value);
-  };
-  const handleClose = () => {
-    onClose("");
-  };
+  // const handleSearch = (value) => {
+  //   onSearch(value);
+  // };
+  // const handleClose = () => {
+  //   onClose("");
+  // };
   return (
     <header className={styles.header}>
       <div className={styles.container}>
@@ -24,7 +24,7 @@ function Header({ name, currentTheme, onThemeChange, onSearch, onClose }) {
           </Link>
 
           <div className={styles.search}>
-            <Search onSearch={handleSearch} onClose={handleClose} />
+            <Search />
           </div>
 
           <div onClick={handleTheme} className={styles.themelight}>
@@ -40,6 +40,7 @@ function Header({ name, currentTheme, onThemeChange, onSearch, onClose }) {
 }
 Header.propTypes = {
   name: PropTypes.string,
+  currentTheme: PropTypes.string,
   onThemeChange: PropTypes.func,
 };
 

components/base/header/styles.module.css

@@ -2,35 +2,34 @@
   position: sticky;
   top: 57px;
   height: 179px;
-  .container {
-    background-color: var(--card-bg);
-    width: 100%;
-    .navbar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0.7em 10%;
-      .navbar-brand {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        gap: 1rem;
-        align-items: center;
-        text-decoration: none;
-        h2 {
-          color: var(--title-color);
-        }
-        .themelight {
-          display: flex;
-          gap: 1rem;
-        }
-        .search {
-          display: none;
-        }
-      }
-    }
-  }
 }
-
+.header .container {
+  background-color: var(--card-bg);
+  width: 100%;
+}
+.header .container .navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.7em 10%;
+}
+.header .container .navbar .navbar-brand {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  align-items: center;
+  text-decoration: none;
+}
+.header .container .navbar .navbar-brand h2 {
+  color: var(--title-color);
+}
+.header .container .navbar .navbar-brand .themelight {
+  display: flex;
+  gap: 1rem;
+}
+.header .container .navbar .navbar-brand .search {
+  display: none;
+}
 @media screen and (min-width: 991px) {
   .search {
     display: block;

components/base/icons/icons.stories.js

-import Icons from ".";
+import Icons from "@components/base/icons/index";
 
 export default {
   title: "Base/Icons",

components/base/icons/styles.module.css

@@ -8,18 +8,6 @@
   width: 38px;
   color: var(--font-color-300);
 }
-
-/* .search svg,
-.clock svg,
-.close svg {
-  height: 18px;
-  width: 18px;
-  vertical-align: sub;
-}
-
-
-
-
 .moon svg,
 .sun svg {
   height: 35px;
@@ -27,8 +15,6 @@
   color: var(--font-color-300);
   vertical-align: sub;
 }
-*/
-
 .menu-icon svg {
   background: #5a67d8;
   color: white;

components/base/search/index.js

+"use client";
 import { useState, useEffect } from "react";
 import Icons from "@components/base/icons";
 import styles from "./styles.module.css";

components/base/search/search.stories.js

-import Search from ".";
+import Search from "@components/base/search/index";
 export default {
   title: "Base/Search",
   component: Search,

components/base/search/styles.module.css

-
-.search{
+.search {
   position: relative;
   display: inline-block;
   border-radius: 3px;
-
-  .search-input {
+}
+.search .search-input {
   height: 48px;
   width: 30vw;
   background: var(--input-bg);
   border-radius: 5px;
-  border: .5px solid var(--border-color);
-  outline:none;
+  border: 0.5px solid var(--border-color);
+  outline: none;
   padding-left: 3rem;
   font-size: 16px;
-  &::placeholder{
-    color: #718096;
-    font-weight: 600;
-    color: var(--font-color-300);
-  }
 }
-.search-icon {
+.search .search-input::placeholder {
+  color: #718096;
+  font-weight: 600;
+  color: var(--font-color-300);
+}
+.search .search-icon {
   position: absolute;
   top: 14px;
-
   padding-left: 17px;
-     color: var(--font-color-300);
+  color: var(--font-color-300);
 }
-
-.close-icon {
+.search .close-icon {
   cursor: pointer;
   position: absolute;
   color: #2b4c82;
   top: 15px;
   right: 15px;
 }
-}
-

components/top-level/blog-lists/blog-lists.stories.js

-import BlogLists from ".";
+import BlogLists from "@components/top-level/blog-lists/index";
 export default {
   title: "Top-Level/Blog-Lists",
   component: BlogLists,

components/top-level/blog-lists/index.js

+"use client";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import Card from "@/components/base/card";
+import Card from "@components/base/card";
 import Pagination from "@components/top-level/pagination";
 import styles from "./styles.module.css";
 

components/top-level/blog-lists/styles.module.css

 .blog-container {
   max-width: 1200px;
   margin: 0 auto;
-  .title {
+}
+.blog-container .title {
   font-size: 38px;
   line-height: 25px;
   font-weight: 600;
   padding-inline: 1.5rem;
   color: var(--title-color);
 }
-.description {
+.blog-container .description {
   color: var(--font-color-300);
   padding-inline: 1.5rem;
   margin-bottom: 2em;
 }
-.row {
+.blog-container .row {
   display: grid;
-
   grid-row-gap: 3rem;
-  .col {
+}
+.blog-container .row .col {
   display: flex;
   align-self: normal;
   flex: 1 0 auto;
 }
-}
-}
-
-.pagination{
+.pagination {
   margin-top: 3rem;
 }
-
-
 @media screen and (min-width: 768px) {
   .row {
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
@@ -37,12 +33,11 @@
   }
 }
 @media screen and (min-width: 1440px) {
-
   .bloglist-container {
     padding: 0 100px;
-      .row {
+  }
+  .bloglist-container .row {
     grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
     justify-items: center;
   }
-  }
 }

components/top-level/pagination/index.js

 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import Button from "@/components/base/button";
+import Button from "@components/base/button";
 import styles from "./styles.module.css";
 
 function Pagination({ total, currentPage, onPageChange, perPage }) {

components/top-level/pagination/pagination.stories.js

-import Pagination from ".";
+import Pagination from "@components/top-level/pagination/index";
 export default {
   title: "Top-Level/Pagination",
   component: Pagination,

components/top-level/pagination/styles.module.css

@@ -2,29 +2,23 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  /* background: rgba(216, 73, 73, 0.2); */
   width: 100%;
   font-weight: 500;
   font-size: 15px;
-  > span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 0.2em;
-    padding-inline: 4px;
-    border-radius: 10px;
-    height: 40px;
-    text-decoration: none;
-    transition: background-color 0.2s;
-    cursor: pointer;
-  }
 }
-/* .previous button:active,
-.next button:active {
-  background-color: var(--primary-bgcolor);
-  color: var(--primary-color);
-} */
-:is(.previous, .next) button:active {
+.pagination-container > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 0.2em;
+  padding-inline: 4px;
+  border-radius: 10px;
+  height: 40px;
+  text-decoration: none;
+  transition: background-color 0.2s;
+  cursor: pointer;
+}
+:is(.previous, .next)button:active {
   background-color: var(--primary-bgcolor);
   color: var(--primary-color);
 }

components/top-level/single-blog/single-blog.stories.js

-import SingleBlog from ".";
+import SingleBlog from "@components/top-level/single-blog/index";
 export default {
   title: "Top-Level/Single-Blog",
   component: SingleBlog,
@@ -10,7 +10,7 @@ export const singleBlog = {
     author: {
       name: "Charlotte mia",
       image: {
-        url: require("@/public/images/blogsingle.jpg").default.src,
+        url: require("@img/blogsingle.jpg").default.src,
         width: 1920,
         height: 500,
       },

components/top-level/single-blog/styles.module.css

@@ -7,7 +7,7 @@
 }
 .blog-content p,
 ol li {
-  font-size: clamp(0.8rem, 1rem + 1vw, 1.1rem);
+  font-size: clamp(0.8rem, 2rem, 1.1rem);
 }
 .blogimage {
   overflow: hidden;
@@ -21,7 +21,6 @@ ol li {
   object-fit: cover;
   display: block;
 }
-
 blockquote p {
   font-size: 20px;
 }
@@ -39,31 +38,26 @@ blockquote p {
   text-decoration: none;
   color: var(--font-color-300);
 }
-/* .blog-list ul li a:hover {
-  color: var(--font-color-700);
-} */
-
 .blog-container {
-  width: min(90%, 100% - 2rem);
+  width: 90%;
   margin: 0 auto;
 }
 .tag {
   display: flex;
   align-items: center;
   gap: 0.2rem;
-  > p {
-    background: #e2e8f0;
-    padding: 0.3em 1em;
-    border-radius: 40px;
-    color: #718096;
-    font-weight: 400;
-  }
-  > span {
-    font-weight: bold;
-    font-size: 20px;
-  }
 }
-
+.tag > p {
+  background: #e2e8f0;
+  padding: 0.3em 1em;
+  border-radius: 40px;
+  color: #718096;
+  font-weight: 400;
+}
+.tag > span {
+  font-weight: bold;
+  font-size: 20px;
+}
 .tag p:hover {
   background: #5a67d8;
   color: white;
@@ -77,10 +71,9 @@ blockquote p::before {
   content: "\2014\00A0";
 }
 .head-container {
-  width: min(100% - 2rem, 90%);
+  width: 90%;
   margin-inline: auto;
 }
-
 .title {
   margin: 0;
   font-weight: 600;
@@ -89,16 +82,11 @@ blockquote p::before {
 .list-bold {
   font-weight: bold;
 }
-h2,
-h3 {
-  color: var(--font-color-900);
-}
 
-@media (min-width: 768px) {
+@media screen and (min-width: 768px) {
   .blog-content {
     padding: 3rem;
   }
-
   .tag {
     gap: 1rem;
   }

jsconfig.json

 {
   "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "./",
     "paths": {
-      "@/*": ["./*"],
-       "@components/*": ["components/*"],
-       "@img/*": ["public/images/*"],
-       "@context/*": ["app/context/*"],
-    }
+      "@components/*": ["components/*"],
+      "@img/*": ["public/images/*"],
+      "@posts/*": ["posts/*"],
+      "@context/*": ["app/context/*"],
+      "@lib/*": ["lib/*"]
+    },
+    "experimentalDecorators": true
   }
 }

lib/posts.js

+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+import { remark } from "remark";
+import html from "remark-html";
+
+export const dbDirectory = (filePaths) => {
+  return path.join(process.cwd(), filePaths);
+};
+
+export function getAllPosts(fileDirectory) {
+  const directory = path.join(process.cwd(), fileDirectory);
+  const fileNames = fs.readdirSync(directory);
+  const data = fileNames.map((fileName) => {
+    const id = fileName.replace(/\.md$/, "");
+    const fullPath = path.join(fileDirectory, fileName);
+    const fileContents = fs.readFileSync(fullPath, "utf8");
+    const matterResult = matter(fileContents);
+
+    return {
+      id,
+      ...matterResult.data,
+    };
+  });
+  return data;
+}

next.config.js

 /** @type {import('next').NextConfig} */
 
-module.exports = {
-  experimental: {
-    prefetch: false,
-  },
-};
+module.exports = {};

package.json

@@ -16,15 +16,18 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "classnames": "^2.3.2",
     "gray-matter": "^4.0.3",
-    "next": "14.0.2",
+    "next": "^14.0.3",
     "next-themes": "^0.2.1",
+    "path": "^0.12.7",
     "prettier": "^3.1.0",
+    "qs": "^6.11.2",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^4.12.0",
     "react-markdown": "^9.0.1",
+    "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
-    "storybook-dark-mode": "^3.0.1"
+    "remark-html": "^16.0.1"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.5.3",
@@ -38,6 +41,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.0.2",
     "eslint-plugin-storybook": "^0.6.15",
-    "storybook": "^7.5.3"
+    "storybook": "^7.5.3",
+    "storybook-dark-mode": "^3.0.3"
   }
 }

posts/blog1.md

+---
+id: 1
+image: { url: "/images/lifestyle1.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a1.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2020-07-16"
+readingTime: "1 min read"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+---

posts/blog2.md

+---
+id: 2
+image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a2.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2020-07-16"
+readingTime: "1 min read"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+---

posts/blog3.md

+---
+id: 3
+image: { url: "/images/lifestyle3.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a3.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2020-07-16"
+readingTime: "1 min read"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+---

posts/blog4.md

+---
+id: 4
+image: { url: "/images/lifestyle4.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a2.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2020-07-16"
+readingTime: "1 min read"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+---

posts/blog5.md

+---
+id: 5
+image: { url: "/images/lifestyle5.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a1.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2020-07-16"
+readingTime: "1 min read"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+---

posts/blog6.md

+---
+id: 6
+image: { url: "/images/lifestyle6.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a3.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2020-07-16"
+readingTime: "1 min read"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+---

posts/blog7.md

+---
+id: 7
+image: { url: "/images/lifestyle7.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a1.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2020-07-16"
+readingTime: "1 min read"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+---

posts/blog8.md

+---
+id: 8
+image: { url: "/images/lifestyle8.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a2.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2020-07-16"
+readingTime: "1 min read"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+---

posts/blog9.md

+---
+id: 9
+image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a1.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2020-07-16"
+readingTime: "1 min read"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+---