format code

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",
@@ -9,20 +9,20 @@
     "dev": "astro dev",
     "build": "astro build",
     "json": "node scripts/jsonGenerator.js",
-    "format": "prettier -w ."
+    "format": "prettier -w ./src"
   },
   "dependencies": {
-    "@astrojs/image": "^0.16.8",
-    "@astrojs/mdx": "^0.19.1",
-    "@astrojs/react": "^2.1.3",
-    "@astrojs/rss": "^2.4.1",
+    "@astrojs/image": "^0.16.9",
+    "@astrojs/mdx": "^0.19.2",
+    "@astrojs/react": "^2.2.0",
+    "@astrojs/rss": "^2.4.2",
     "@astrojs/sitemap": "^1.3.1",
-    "@astrojs/tailwind": "^3.1.2",
+    "@astrojs/tailwind": "^3.1.3",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
-    "@types/marked": "^4.3.0",
+    "@types/marked": "^5.0.0",
     "@types/react": "^18.2.6",
-    "astro": "^2.4.5",
+    "astro": "^2.5.1",
     "astro-auto-import": "^0.3.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
@@ -33,8 +33,8 @@
     "marked": "^5.0.2",
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
-    "prettier-plugin-astro": "^0.8.1",
-    "prettier-plugin-tailwindcss": "^0.2.8",
+    "prettier-plugin-astro": "^0.9.0",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -44,7 +44,7 @@
     "remark-toc": "^8.0.1",
     "sass": "^1.62.1",
     "sharp": "^0.32.1",
-    "swiper": "^9.3.1",
+    "swiper": "^9.3.2",
     "tailwind-bootstrap-grid": "^5.0.1",
     "tailwindcss": "^3.3.2"
   }

src/content/homepage/index.md

@@ -15,12 +15,12 @@ features:
     image: "/images/service-1.png"
     content: "Astroplate is a comprehensive starter template that includes everything you need to get started with your Astro project. What's Included in Astroplate"
     bulletpoints:
-    - "10+ Pre-build pages"
-    - "95+ Google Pagespeed Score"
-    - "Build with Astro and TailwindCSS for easy and customizable styling"
-    - "Fully responsive on all devices"
-    - "SEO-optimized for better search engine rankings"
-    - "**Open-source and free** for personal and commercial use"
+      - "10+ Pre-build pages"
+      - "95+ Google Pagespeed Score"
+      - "Build with Astro and TailwindCSS for easy and customizable styling"
+      - "Fully responsive on all devices"
+      - "SEO-optimized for better search engine rankings"
+      - "**Open-source and free** for personal and commercial use"
     button:
       enable: false
       label: "Get Started Now"
@@ -30,9 +30,9 @@ features:
     image: "/images/service-2.png"
     content: "Astro is an all-in-one web framework for building fast, content-focused websites. It offers a range of exciting features for developers and website creators. Some of the key features are:"
     bulletpoints:
-    - "Zero JS, by default: No JavaScript runtime overhead to slow you down."
-    - "Customizable: Tailwind, MDX, and 100+ other integrations to choose from."
-    - "UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more."
+      - "Zero JS, by default: No JavaScript runtime overhead to slow you down."
+      - "Customizable: Tailwind, MDX, and 100+ other integrations to choose from."
+      - "UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more."
     button:
       enable: true
       label: "Get Started Now"
@@ -42,10 +42,10 @@ features:
     image: "/images/service-3.png"
     content: "With Astro, you can build modern and content-focused websites without sacrificing performance or ease of use."
     bulletpoints:
-    - "Instantly load static sites for better user experience and SEO."
-    - "Intuitive syntax and support for popular frameworks make learning and using Astro a breeze."
-    - "Use any front-end library or framework, or build custom components, for any project size."
-    - "Built on cutting-edge technology to keep your projects up-to-date with the latest web standards."
+      - "Instantly load static sites for better user experience and SEO."
+      - "Intuitive syntax and support for popular frameworks make learning and using Astro a breeze."
+      - "Use any front-end library or framework, or build custom components, for any project size."
+      - "Built on cutting-edge technology to keep your projects up-to-date with the latest web standards."
     button:
       enable: false
       label: ""

src/content/pages/elements.mdx

@@ -103,7 +103,8 @@ Some text to show that the reference links can follow later.
   <li class="nav-item">
     <a class="nav-link" href="about/">About</a>
   </li>
-</ul>`}
+</ul>
+`}
 ```
 
 ---
@@ -126,7 +127,7 @@ img {
 ```javascript
 window.addEventListener("load", (e) => {
   document.querySelector(".preloader").style.display = "none";
-})
+});
 ```
 
 ---
@@ -146,19 +147,19 @@ window.addEventListener("load", (e) => {
 ### Notice
 
 <Notice type="note">
-  This is a simple note.
+This is a simple note.
 </Notice>
 
 <Notice type="tip">
-  This is a simple note.
+This is a simple note.
 </Notice>
 
 <Notice type="info">
-  This is a simple note.
+This is a simple note.
 </Notice>
 
 <Notice type="warning">
-  This is a simple note.
+This is a simple note.
 </Notice>
 
 ---
@@ -172,6 +173,7 @@ window.addEventListener("load", (e) => {
 #### Did you come here for something in particular?
 
 Did you come here for something in particular or just general Riker-bashing? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. We have a saboteur aboard. We know you’re dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf.
+
 </Tab>
 
 <Tab name="Tab 2">
@@ -181,6 +183,7 @@ Did you come here for something in particular or just general Riker-bashing? And
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
 </Tab>
 
 <Tab name="Tab 3">
@@ -190,6 +193,7 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+
 </Tab>
 
 </Tabs>
@@ -206,7 +210,7 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 ---
 
-### Collapse
+### Accordion
 
 <Accordion client:load title="Why should you need to do this?">
 
@@ -254,4 +258,7 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 ### Custom video
 
-<Video width="100%" src="https://joy1.videvo.net/videvo_files/video/free/video0467/large_watermarked/_import_61516692993d77.04238324_preview.mp4" />
+<Video
+  width="100%"
+  src="https://joy1.videvo.net/videvo_files/video/free/video0467/large_watermarked/_import_61516692993d77.04238324_preview.mp4"
+/>

src/content/sections/call-to-action.md

@@ -7,4 +7,4 @@ button:
   enable: true
   label: "Get Started Now"
   link: "https://github.com/zeon-studio/astroplate"
----
+---

src/content/sections/testimonial.md

@@ -5,23 +5,23 @@ description: "Don't just take our word for it - hear from some of our satisfied
 
 # Testimonials
 testimonials:
-- name: "Marvin McKinney"
-  designation: "Web Designer"
-  avatar: "/images/avatar-sm.png"
-  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto illo molestias, assumenda expedita commodi inventore non itaque molestiae voluptatum dolore, facilis sapiente, repellat veniam."
+  - name: "Marvin McKinney"
+    designation: "Web Designer"
+    avatar: "/images/avatar-sm.png"
+    content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto illo molestias, assumenda expedita commodi inventore non itaque molestiae voluptatum dolore, facilis sapiente, repellat veniam."
 
-- name: "Marvin McKinney"
-  designation: "Web Designer"
-  avatar: "/images/avatar-sm.png"
-  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto illo molestias, assumenda expedita commodi inventore non itaque molestiae voluptatum dolore, facilis sapiente, repellat veniam."
+  - name: "Marvin McKinney"
+    designation: "Web Designer"
+    avatar: "/images/avatar-sm.png"
+    content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto illo molestias, assumenda expedita commodi inventore non itaque molestiae voluptatum dolore, facilis sapiente, repellat veniam."
 
-- name: "Marvin McKinney"
-  designation: "Web Designer"
-  avatar: "/images/avatar-sm.png"
-  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto illo molestias, assumenda expedita commodi inventore non itaque molestiae voluptatum dolore, facilis sapiente, repellat veniam."
-  
-- name: "Marvin McKinney"
-  designation: "Web Designer"
-  avatar: "/images/avatar-sm.png"
-  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto illo molestias, assumenda expedita commodi inventore non itaque molestiae voluptatum dolore, facilis sapiente, repellat veniam."
----
+  - name: "Marvin McKinney"
+    designation: "Web Designer"
+    avatar: "/images/avatar-sm.png"
+    content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto illo molestias, assumenda expedita commodi inventore non itaque molestiae voluptatum dolore, facilis sapiente, repellat veniam."
+
+  - name: "Marvin McKinney"
+    designation: "Web Designer"
+    avatar: "/images/avatar-sm.png"
+    content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto illo molestias, assumenda expedita commodi inventore non itaque molestiae voluptatum dolore, facilis sapiente, repellat veniam."
+---

src/hooks/useTheme.ts

@@ -1,10 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 const useTheme = (): string => {
   const [themeValue, setThemeValue] = useState("");
 
   useEffect(() => {
-    setThemeValue(document.documentElement.classList.contains('dark')? 'dark' : 'light');
+    setThemeValue(
+      document.documentElement.classList.contains("dark") ? "dark" : "light"
+    );
   }, []);
 
   return themeValue;

src/layouts/PostSingle.astro

@@ -6,12 +6,12 @@ import Disqus from "@/function-components/Disqus";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import dateFormat from "@/lib/utils/dateFormat";
 import similerItems from "@/lib/utils/similarItems";
-import { humanize,markdownify,slugify } from "@/lib/utils/textConverter";
+import { humanize, markdownify, slugify } from "@/lib/utils/textConverter";
 import { Image } from "@astrojs/image/components";
 import {
-FaRegClock,
-FaRegFolder,
-FaRegUserCircle,
+  FaRegClock,
+  FaRegFolder,
+  FaRegUserCircle,
 } from "react-icons/fa/index.js";
 
 const { blog_folder } = config.settings;

src/layouts/components/BlogCard.astro

@@ -4,7 +4,10 @@ import config from "@/config/config.json";
 import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
 import { FaRegFolder, FaRegUserCircle } from "react-icons/fa/index.js";
 
-const { summary_length, blog_folder }: {summary_length: number, blog_folder: string} = config.settings;
+const {
+  summary_length,
+  blog_folder,
+}: { summary_length: number; blog_folder: string } = config.settings;
 const { data } = Astro.props;
 const { title, image, date, author, categories } = data.data;
 ---

src/layouts/components/Breadcrumbs.astro

@@ -1,7 +1,7 @@
 ---
 import { humanize } from "@/lib/utils/textConverter";
 
-const { className }: {className?: string} = Astro.props;
+const { className }: { className?: string } = Astro.props;
 
 const paths = Astro.url.pathname.split("/").filter((x) => x);
 let parts = [

src/layouts/components/Logo.astro

@@ -2,7 +2,8 @@
 import { Image } from "@astrojs/image/components";
 import config from "@/config/config.json";
 
-const { src, srcDarkmode } : {src?: string, srcDarkmode?: string} = Astro.props;
+const { src, srcDarkmode }: { src?: string; srcDarkmode?: string } =
+  Astro.props;
 const {
   logo,
   logo_darkmode,

src/layouts/components/Pagination.astro

@@ -1,8 +1,10 @@
 ---
 type Pagination = {
-  section?: string, currentPage?: number, totalPages?: number
-}
-const { section, currentPage=1, totalPages=1 }: Pagination = Astro.props;
+  section?: string;
+  currentPage?: number;
+  totalPages?: number;
+};
+const { section, currentPage = 1, totalPages = 1 }: Pagination = Astro.props;
 
 const indexPageLink = currentPage === 2;
 const hasPrevPage = currentPage > 1;

src/layouts/components/Share.astro

@@ -7,8 +7,14 @@ import {
   IoLogoTwitter,
 } from "react-icons/io5/index.js";
 
-const { base_url }: {base_url: string} = config.site;
-const { title, description, slug, className }: {title?: string, description?: string, slug?: string, className?: string} = Astro.props;
+const { base_url }: { base_url: string } = config.site;
+const {
+  title,
+  description,
+  slug,
+  className,
+}: { title?: string; description?: string; slug?: string; className?: string } =
+  Astro.props;
 ---
 
 <ul class={`${className}`}>

src/layouts/components/Social.astro

@@ -36,38 +36,38 @@ import {
 } from "react-icons/io5/index.js";
 
 type SocialLink = {
-  facebook: string,
-  twitter: string,
-  mastodon: string,
-  instagram: string,
-  youtube: string,
-  linkedin: string,
-  github: string,
-  gitlab: string,
-  discord: string,
-  slack: string,
-  medium: string,
-  codepen: string,
-  bitbucket: string,
-  dribbble: string,
-  behance: string,
-  pinterest: string,
-  soundcloud: string,
-  tumblr: string,
-  reddit: string,
-  vk: string,
-  whatsapp: string,
-  snapchat: string,
-  vimeo: string,
-  tiktok: string,
-  foursquare: string,
-  rss: string,
-  email: string,
-  phone: string,
-  address: string,
-  skype: string,
-  website: string,
-} 
+  facebook: string;
+  twitter: string;
+  mastodon: string;
+  instagram: string;
+  youtube: string;
+  linkedin: string;
+  github: string;
+  gitlab: string;
+  discord: string;
+  slack: string;
+  medium: string;
+  codepen: string;
+  bitbucket: string;
+  dribbble: string;
+  behance: string;
+  pinterest: string;
+  soundcloud: string;
+  tumblr: string;
+  reddit: string;
+  vk: string;
+  whatsapp: string;
+  snapchat: string;
+  vimeo: string;
+  tiktok: string;
+  foursquare: string;
+  rss: string;
+  email: string;
+  phone: string;
+  address: string;
+  skype: string;
+  website: string;
+};
 const {
   facebook,
   twitter,

src/layouts/components/ThemeSwitcher.astro

@@ -1,47 +1,46 @@
 ---
 import config from "@/config/config.json";
 
-const { theme_switcher, default_theme }: { theme_switcher: boolean, default_theme: string } = config.settings;
-const {className}: {className?: string} = Astro.props;
+const {
+  theme_switcher,
+  default_theme,
+}: { theme_switcher: boolean; default_theme: string } = config.settings;
+const { className }: { className?: string } = Astro.props;
 ---
 
 {
   theme_switcher && (
-  <div class={`theme-switcher ${className}`}>
-    <input id="theme-switcher" data-theme-switcher type="checkbox" />
-    <label for="theme-switcher">
-      <span class="sr-only">theme switcher</span>
-      <span>
-        <!-- sun -->
-        <svg
-          class="absolute left-[4px] top-[4px] z-10 opacity-100 dark:opacity-0"
-          viewBox="0 0 56 56"
-          fill="#fff"
-          height="16"
-          width="16"
-        >
-          <path
-            d="M30 4.6c0-1-.9-2-2-2a2 2 0 0 0-2 2v5c0 1 .9 2 2 2s2-1 2-2Zm9.6 9a2 2 0 0 0 0 2.8c.8.8 2 .8 2.9 0L46 13a2 2 0 0 0 0-2.9 2 2 0 0 0-3 0Zm-26 2.8c.7.8 2 .8 2.8 0 .8-.7.8-2 0-2.9L13 10c-.7-.7-2-.8-2.9 0-.7.8-.7 2.1 0 3ZM28 16a12 12 0 0 0-12 12 12 12 0 0 0 12 12 12 12 0 0 0 12-12 12 12 0 0 0-12-12Zm23.3 14c1.1 0 2-.9 2-2s-.9-2-2-2h-4.9a2 2 0 0 0-2 2c0 1.1 1 2 2 2ZM4.7 26a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4.9c1 0 2-.9 2-2s-1-2-2-2Zm37.8 13.6a2 2 0 0 0-3 0 2 2 0 0 0 0 2.9l3.6 3.5a2 2 0 0 0 2.9 0c.8-.8.8-2.1 0-3ZM10 43.1a2 2 0 0 0 0 2.9c.8.7 2.1.8 3 0l3.4-3.5c.8-.8.8-2.1 0-2.9-.8-.8-2-.8-2.9 0Zm20 3.4c0-1.1-.9-2-2-2a2 2 0 0 0-2 2v4.9c0 1 .9 2 2 2s2-1 2-2Z"
-          ></path>
-        </svg>
-        <!-- moon -->
-        <svg
-          class="absolute left-[4px] top-[4px] z-10 opacity-0 dark:opacity-100"
-          viewBox="0 0 24 24"
-          fill="none"
-          height="16"
-          width="16"
-        >
-          <path
-            fill="#000"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8.2 2.2c1-.4 2 .6 1.6 1.5-1 3-.4 6.4 1.8 8.7a8.4 8.4 0 0 0 8.7 1.8c1-.3 2 .5 1.5 1.5v.1a10.3 10.3 0 0 1-9.4 6.2A10.3 10.3 0 0 1 3.2 6.7c1-2 2.9-3.5 4.9-4.4Z"
-          ></path>
-        </svg>
-      </span>
-    </label>
-  </div>
+    <div class={`theme-switcher ${className}`}>
+      <input id="theme-switcher" data-theme-switcher type="checkbox" />
+      <label for="theme-switcher">
+        <span class="sr-only">theme switcher</span>
+        <span>
+          <svg
+            class="absolute left-[4px] top-[4px] z-10 opacity-100 dark:opacity-0"
+            viewBox="0 0 56 56"
+            fill="#fff"
+            height="16"
+            width="16"
+          >
+            <path d="M30 4.6c0-1-.9-2-2-2a2 2 0 0 0-2 2v5c0 1 .9 2 2 2s2-1 2-2Zm9.6 9a2 2 0 0 0 0 2.8c.8.8 2 .8 2.9 0L46 13a2 2 0 0 0 0-2.9 2 2 0 0 0-3 0Zm-26 2.8c.7.8 2 .8 2.8 0 .8-.7.8-2 0-2.9L13 10c-.7-.7-2-.8-2.9 0-.7.8-.7 2.1 0 3ZM28 16a12 12 0 0 0-12 12 12 12 0 0 0 12 12 12 12 0 0 0 12-12 12 12 0 0 0-12-12Zm23.3 14c1.1 0 2-.9 2-2s-.9-2-2-2h-4.9a2 2 0 0 0-2 2c0 1.1 1 2 2 2ZM4.7 26a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4.9c1 0 2-.9 2-2s-1-2-2-2Zm37.8 13.6a2 2 0 0 0-3 0 2 2 0 0 0 0 2.9l3.6 3.5a2 2 0 0 0 2.9 0c.8-.8.8-2.1 0-3ZM10 43.1a2 2 0 0 0 0 2.9c.8.7 2.1.8 3 0l3.4-3.5c.8-.8.8-2.1 0-2.9-.8-.8-2-.8-2.9 0Zm20 3.4c0-1.1-.9-2-2-2a2 2 0 0 0-2 2v4.9c0 1 .9 2 2 2s2-1 2-2Z" />
+          </svg>
+          <svg
+            class="absolute left-[4px] top-[4px] z-10 opacity-0 dark:opacity-100"
+            viewBox="0 0 24 24"
+            fill="none"
+            height="16"
+            width="16"
+          >
+            <path
+              fill="#000"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M8.2 2.2c1-.4 2 .6 1.6 1.5-1 3-.4 6.4 1.8 8.7a8.4 8.4 0 0 0 8.7 1.8c1-.3 2 .5 1.5 1.5v.1a10.3 10.3 0 0 1-9.4 6.2A10.3 10.3 0 0 1 3.2 6.7c1-2 2.9-3.5 4.9-4.4Z"
+            />
+          </svg>
+        </span>
+      </label>
+    </div>
   )
 }
 

src/layouts/components/TwSizeIndicator.astro

@@ -3,7 +3,7 @@
 
 {
   process.env.NODE_ENV === "development" && (
-    <div class="fixed top-0 left-0 z-50 flex w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200">
+    <div class="fixed left-0 top-0 z-50 flex w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200">
       <span class="block sm:hidden">all</span>
       <span class="hidden sm:block md:hidden">sm</span>
       <span class="hidden md:block lg:hidden">md</span>

src/layouts/partials/Footer.astro

@@ -6,7 +6,7 @@ import menu from "@/config/menu.json";
 import social from "@/config/social.json";
 import { markdownify } from "@/lib/utils/textConverter";
 
-const {footer}: {footer: {name: string, url: string}[]} = menu;
+const { footer }: { footer: { name: string; url: string }[] } = menu;
 ---
 
 <footer class="bg-theme-light dark:bg-darkmode-theme-light">

src/layouts/partials/PageHeader.astro

@@ -2,7 +2,7 @@
 import Breadcrumbs from "@/components/Breadcrumbs.astro";
 import { humanize } from "@/lib/utils/textConverter";
 
-const { title="" }: {title?: string} = Astro.props;
+const { title = "" }: { title?: string } = Astro.props;
 ---
 
 <section>

src/layouts/shortcodes/Button.tsx

@@ -9,7 +9,7 @@ const Button = ({
   href: string;
   style: string | null;
   rel: string | null;
-  children: any;
+  children: string;
 }) => {
   return (
     <a
@@ -18,9 +18,9 @@ const Button = ({
       rel={`noopener noreferrer ${
         rel ? (rel === "follow" ? "" : rel) : "nofollow"
       }`}
-      className={`btn mb-4 me-4 ${
+      className={`btn mb-4 me-4 hover:text-white hover:no-underline ${
         style === "outline" ? "btn-outline-primary" : "btn-primary"
-      } border-primary hover:text-white hover:no-underline`}
+      }`}
     >
       {children}
     </a>

src/layouts/shortcodes/Tabs.tsx

@@ -1,7 +1,12 @@
 import { marked } from "marked";
 import React, { useEffect, useRef, useState } from "react";
 
-const Tabs = ({ children }: {children: React.ReactElement}) => {
+marked.use({
+  mangle: false,
+  headerIds: false,
+});
+
+const Tabs = ({ children }: { children: React.ReactElement }) => {
   const [active, setActive] = useState<number>(0);
   const [defaultFocus, setDefaultFocus] = useState<boolean>(false);
 
@@ -22,7 +27,10 @@ const Tabs = ({ children }: {children: React.ReactElement}) => {
     (match: RegExpMatchArray) => ({ name: match[1], children: match[0] })
   );
 
-  const handleKeyDown = (event: React.KeyboardEvent<EventTarget>, index: number) => {
+  const handleKeyDown = (
+    event: React.KeyboardEvent<EventTarget>,
+    index: number
+  ) => {
     if (event.key === "Enter" || event.key === " ") {
       setActive(index);
     } else if (event.key === "ArrowRight") {
@@ -35,26 +43,29 @@ const Tabs = ({ children }: {children: React.ReactElement}) => {
   return (
     <div className="tab">
       <ul className="tab-nav">
-        {tabLinks.map((item: {name: string, children: string}, index: number) => (
-          <li
-            key={index}
-            className={`tab-nav-item ${index === active && "active"}`}
-            role="tab"
-            tabIndex={index === active ? 0 : -1}
-            onKeyDown={(event) => handleKeyDown(event, index)}
-            onClick={() => setActive(index)}
-            //@ts-ignore
-            ref={(ref) => (tabRefs.current[index] = ref)}
-          >
-            {item.name}
-          </li>
-        ))}
+        {tabLinks.map(
+          (item: { name: string; children: string }, index: number) => (
+            <li
+              key={index}
+              className={`tab-nav-item ${index === active && "active"}`}
+              role="tab"
+              tabIndex={index === active ? 0 : -1}
+              onKeyDown={(event) => handleKeyDown(event, index)}
+              onClick={() => setActive(index)}
+              //@ts-ignore
+              ref={(ref) => (tabRefs.current[index] = ref)}
+            >
+              {item.name}
+            </li>
+          )
+        )}
       </ul>
-      {tabLinks.map((item: {name: string, children: string}, i: number) => (
+      {tabLinks.map((item: { name: string; children: string }, i: number) => (
         <div
-          className={active === i ? "tab-content block px-5" : "hidden"} key={i}
+          className={active === i ? "tab-content block px-5" : "hidden"}
+          key={i}
           dangerouslySetInnerHTML={{
-            __html: marked.parseInline(item.children),
+            __html: marked.parse(item.children),
           }}
         />
       ))}

src/lib/utils/dateFormat.ts

@@ -1,6 +1,9 @@
 import { formatInTimeZone } from "date-fns-tz";
 
-const dateFormat = (date:Date | string, format:string = "dd MMM, yyyy"): string => {
+const dateFormat = (
+  date: Date | string,
+  format: string = "dd MMM, yyyy"
+): string => {
   return formatInTimeZone(date, "America/New_York", format);
 };
 

src/lib/utils/sortFunctions.ts

@@ -1,7 +1,7 @@
 // sort by date
 export const sortByDate = (array: any[]) => {
   const sortedArray = array.sort(
-    (a:any, b:any) =>
+    (a: any, b: any) =>
       new Date(b.data.date && b.data.date).valueOf() -
       new Date(a.data.date && a.data.date).valueOf()
   );

src/lib/utils/textConverter.ts

@@ -1,4 +1,4 @@
-import { slug } from 'github-slugger';
+import { slug } from "github-slugger";
 import { marked } from "marked";
 
 marked.use({
@@ -8,18 +8,16 @@ marked.use({
 
 // slugify
 export const slugify = (content: string): string => {
-
   return slug(content);
 };
 
 // markdownify
-export const markdownify = (content: string, div?:boolean): string => {
-  return div? marked.parse(content) : marked.parseInline(content);
+export const markdownify = (content: string, div?: boolean): string => {
+  return div ? marked.parse(content) : marked.parseInline(content);
 };
 
 // humanize
 export const humanize = (content: string): string => {
-
   return content
     .replace(/^[\s_]+|[\s_]+$/g, "")
     .replace(/[_\s]+/g, " ")

src/pages/[regular].astro

@@ -3,7 +3,7 @@ import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import PageHeader from "@/partials/PageHeader.astro";
 
-export async function getStaticPaths(): Promise<{params: {regular: string}}[]> {
+export async function getStaticPaths() {
   const pages = await getSinglePage("pages");
 
   const paths = pages.map((page) => ({

src/pages/authors/[single].astro

@@ -1,14 +1,15 @@
 ---
-import { Image } from "@astrojs/image/components";
 import BlogCard from "@/components/BlogCard.astro";
 import Social from "@/components/Social.astro";
 import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { slugify } from "@/lib/utils/textConverter";
-import type { Blog_folder } from "types";
+import { Image } from "@astrojs/image/components";
 
-export async function getStaticPaths(): Promise<{params: {single: string}, props: {author: string}}[]> {
+export async function getStaticPaths(): Promise<
+  { params: { single: string }; props: { author: string } }[]
+> {
   const authors = await getSinglePage("authors");
 
   const paths = authors.map((author) => ({
@@ -20,7 +21,7 @@ export async function getStaticPaths(): Promise<{params: {single: string}, props
   return paths;
 }
 
-const { blog_folder }: Blog_folder = config.settings;
+const { blog_folder }: { blog_folder: string } = config.settings;
 const { author } = Astro.props;
 const { title, social, meta_title, description, image } = author.data;
 const { Content } = await author.render();

src/pages/categories/[category].astro

@@ -7,7 +7,9 @@ import { getTaxonomy } from "@/lib/taxonomyParser.astro";
 import taxonomyFilter from "@/lib/utils/taxonomyFilter";
 import PageHeader from "@/partials/PageHeader.astro";
 
-export async function getStaticPaths(): Promise<{params: {category: string}}[]> {
+export async function getStaticPaths(): Promise<
+  { params: { category: string } }[]
+> {
   const categories = await getTaxonomy(
     config.settings.blog_folder,
     "categories"

src/pages/categories/index.astro

@@ -4,9 +4,8 @@ import Base from "@/layouts/Base.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { humanize } from "@/lib/utils/textConverter";
 import PageHeader from "@/partials/PageHeader.astro";
-import type { Blog_folder } from "types";
 
-const { blog_folder }: Blog_folder = config.settings;
+const { blog_folder }: { blog_folder: string } = config.settings;
 const categories = await getTaxonomy(blog_folder, "categories");
 const allCategories = await getAllTaxonomy(blog_folder, "categories");
 ---

src/pages/contact.astro

@@ -5,7 +5,7 @@ import PageHeader from "@/partials/PageHeader.astro";
 import { getEntryBySlug } from "astro:content";
 
 const entry = await getEntryBySlug("pages", "contact");
-const { contact_form_action }: {contact_form_action: string} = config.params;
+const { contact_form_action }: { contact_form_action: string } = config.params;
 const { title, description, meta_title, image } = entry.data;
 ---
 

src/pages/index.astro

@@ -10,12 +10,12 @@ import type { Button, Feature } from "types";
 
 interface Homepage {
   banner: {
-    title: string
-    content: string,
-    image: string,
-    button: Button,
-  }
-  features: Feature[]
+    title: string;
+    content: string;
+    image: string;
+    button: Button;
+  };
+  features: Feature[];
 }
 
 const homepage = await getEntryBySlug("homepage", "index");
@@ -59,55 +59,43 @@ const { banner, features }: Homepage = homepage.data;
 
   <!-- Features -->
   {
-    features.map(
-      (
-        feature,
-        index: number
-      ) => (
-        <section class={`section-sm ${index % 2 === 0 && "bg-gradient"}`}>
-          <div class="container">
-            <div class="row items-center justify-between">
-              <div
-                class={`mb:md-0 mb-6 md:col-5 ${
-                  index % 2 !== 0 && "md:order-2"
-                }`}
-              >
-                <Image
-                  src={feature.image}
-                  height={480}
-                  width={520}
-                  fit="contain"
-                  background="rgba(0,0,0,0)"
-                  alt={feature.title}
-                />
-              </div>
-              <div
-                class={`md:col-7 lg:col-6 ${index % 2 !== 0 && "md:order-1"}`}
-              >
-                <h2 set:html={markdownify(feature.title)} class="mb-4" />
-                <p
-                  set:html={markdownify(feature.content)}
-                  class="mb-8 text-lg"
-                />
-                <ul>
-                  {feature.bulletpoints.map((bullet: string) => (
-                    <li class="relative mb-4 pl-6">
-                      <FaCheck className={"absolute left-0 top-1.5"} />
-                      <span set:html={markdownify(bullet)} />
-                    </li>
-                  ))}
-                </ul>
-                {feature.button.enable && (
-                  <a class="btn btn-primary mt-5" href={feature.button.link}>
-                    {feature.button.label}
-                  </a>
-                )}
-              </div>
+    features.map((feature, index: number) => (
+      <section class={`section-sm ${index % 2 === 0 && "bg-gradient"}`}>
+        <div class="container">
+          <div class="row items-center justify-between">
+            <div
+              class={`mb:md-0 mb-6 md:col-5 ${index % 2 !== 0 && "md:order-2"}`}
+            >
+              <Image
+                src={feature.image}
+                height={480}
+                width={520}
+                fit="contain"
+                background="rgba(0,0,0,0)"
+                alt={feature.title}
+              />
+            </div>
+            <div class={`md:col-7 lg:col-6 ${index % 2 !== 0 && "md:order-1"}`}>
+              <h2 set:html={markdownify(feature.title)} class="mb-4" />
+              <p set:html={markdownify(feature.content)} class="mb-8 text-lg" />
+              <ul>
+                {feature.bulletpoints.map((bullet: string) => (
+                  <li class="relative mb-4 pl-6">
+                    <FaCheck className={"absolute left-0 top-1.5"} />
+                    <span set:html={markdownify(bullet)} />
+                  </li>
+                ))}
+              </ul>
+              {feature.button.enable && (
+                <a class="btn btn-primary mt-5" href={feature.button.link}>
+                  {feature.button.label}
+                </a>
+              )}
             </div>
           </div>
-        </section>
-      )
-    )
+        </div>
+      </section>
+    ))
   }
   <!-- /Features -->
 

src/pages/posts/[single].astro

@@ -4,7 +4,9 @@ import Base from "@/layouts/Base.astro";
 import PostSingle from "@/layouts/PostSingle.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 
-export async function getStaticPaths(): Promise<{params: {single: string}, props: {post: any}}[]> {
+export async function getStaticPaths(): Promise<
+  { params: { single: string }; props: { post: any } }[]
+> {
   const posts = await getSinglePage(config.settings.blog_folder);
 
   const paths = posts.map((post) => ({

src/pages/tags/index.astro

@@ -4,9 +4,8 @@ import Base from "@/layouts/Base.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { humanize } from "@/lib/utils/textConverter";
 import PageHeader from "@/partials/PageHeader.astro";
-import type { Blog_folder } from "types";
 
-const { blog_folder }: Blog_folder = config.settings;
+const { blog_folder }: { blog_folder: string } = config.settings;
 const tags = await getTaxonomy(blog_folder, "tags");
 const allTags = await getAllTaxonomy(blog_folder, "tags");
 ---

types/index.d.ts

@@ -1,15 +1,13 @@
-export type Feature =  {
-    button: button
-    image: string
-    bulletpoints: string[]
-    content: string
-    title: string
-}
+export type Feature = {
+  button: button;
+  image: string;
+  bulletpoints: string[];
+  content: string;
+  title: string;
+};
 
 export type Button = {
-    enable: boolean
-    label: string
-    link: string
-}
-
-export type Blog_folder = {blog_folder: string};
+  enable: boolean;
+  label: string;
+  link: string;
+};