format code

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),
           }}
         />
       ))}