formatting changes

src/components/DynamicIcon.tsx

@@ -4,11 +4,13 @@ import * as MdIcons from 'react-icons/md';
 import * as AiIcons from 'react-icons/ai';
 import * as GiIcons from 'react-icons/gi';
 import * as IoIcons from 'react-icons/io';
-import * as CiIcons from "react-icons/ci";
+import * as CiIcons from 'react-icons/ci';
-import * as FiIcons from "react-icons/fi";
+import * as FiIcons from 'react-icons/fi';
-import * as LuIcons from "react-icons/lu";
+import * as LuIcons from 'react-icons/lu';
 import * as SiIcons from 'react-icons/si';
 
+// DynamicIcon.tsx - Load React Icon library dynamically from attributes from Directus
+
 const iconSets = {
   fa: FaIcons,
   md: MdIcons,
@@ -21,13 +23,25 @@ const iconSets = {
   si: SiIcons,
 };
 
-const DynamicIcon = ({ name, set = 'fa', size = 20, color = 'currentColor', className = '' }: {name: string, set: string, size: number, color: string, className: string }) => {
+const DynamicIcon = ({
+  name,
+  set = 'fa',
+  size = 20,
+  color = 'currentColor',
+  className = '',
+}: {
+  name: string;
+  set: string;
+  size: number;
+  color: string;
+  className: string;
+}) => {
   let IconComponent = FaIcons.FaAlignCenter;
 
-  if (name.startsWith("Fa")) {
+  if (name.startsWith('Fa')) {
-    IconComponent = iconSets["fa"][name]
+    IconComponent = iconSets['fa'][name];
-  } else if (name.startsWith("Si")) {
+  } else if (name.startsWith('Si')) {
-    IconComponent = iconSets["si"][name]
+    IconComponent = iconSets['si'][name];
   } else {
     IconComponent = iconSets[set][name];
   }

src/components/Footer.astro

@@ -64,8 +64,9 @@ const socialLinks = [
               >
                 <span
                   class="theme-transition-all text-xl font-bold text-white transition-transform duration-300 group-hover:scale-110 dark:text-zinc-900"
-                  >{global.initals}</span
                 >
+                  {global.initals}
+                </span>
                 <div
                   class="absolute inset-0 bg-gradient-to-br from-zinc-700 to-zinc-900 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-zinc-300 dark:to-zinc-100"
                 >
@@ -73,8 +74,9 @@ const socialLinks = [
               </div>
               <span
                 class="theme-transition-color ml-3 text-xl font-bold text-zinc-900 dark:text-zinc-100"
-                >Blog</span
               >
+                Blog
+              </span>
             </div>
           </a>
 
@@ -146,8 +148,8 @@ const socialLinks = [
 
           <div class="flex items-center space-x-2">
             <span class="theme-transition-color text-xs text-zinc-500 dark:text-zinc-400"
-              >Built with</span
+              >Built with
-            >
+            </span>
             <a
               href="https://astro.build"
               target="_blank"
@@ -174,7 +176,8 @@ const socialLinks = [
                 Astro
                 <span
                   class="absolute bottom-0 left-0 h-0.5 w-0 bg-[#FF5D01] transition-all duration-300 group-hover:w-full"
-                ></span>
+                >
+                </span>
               </span>
             </a>
           </div>

src/components/ShareButtons.astro

@@ -29,10 +29,12 @@ const encodedUrl = encodeURIComponent(url);
         stroke-linecap="round"
         stroke-linejoin="round"
         class="h-4 w-4"
-        ><path
-          d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
-        ></path></svg
       >
+        <path
+          d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
+        >
+        </path>
+      </svg>
     </a>
     <a
       href={`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`}
@@ -50,8 +52,9 @@ const encodedUrl = encodeURIComponent(url);
         stroke-linecap="round"
         stroke-linejoin="round"
         class="h-4 w-4"
-        ><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg
       >
+        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"> </path>
+      </svg>
     </a>
     <a
       href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedTitle}`}
@@ -69,10 +72,12 @@ const encodedUrl = encodeURIComponent(url);
         stroke-linecap="round"
         stroke-linejoin="round"
         class="h-4 w-4"
-        ><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
-        ></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"
-        ></circle></svg
       >
+        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z">
+        </path>
+        <rect x="2" y="9" width="4" height="12"></rect>
+        <circle cx="4" cy="4" r="2"></circle>
+      </svg>
     </a>
     <button
       id="copy-link-button"
@@ -89,9 +94,10 @@ const encodedUrl = encodeURIComponent(url);
         stroke-linecap="round"
         stroke-linejoin="round"
         class="h-4 w-4"
-        ><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path
-          d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg
       >
+        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"> </path>
+        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"> </path>
+      </svg>
       <span
         id="copy-tooltip"
         class="absolute -top-8 left-1/2 -translate-x-1/2 transform rounded-sm bg-zinc-800 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-300 dark:bg-zinc-700"
@@ -163,13 +169,4 @@ const encodedUrl = encodeURIComponent(url);
   function notifyShareComplete() {
     document.dispatchEvent(new CustomEvent('share-action-complete'));
   }
-
-  // Add analytics tracking for share actions if needed
-  function trackShareAction(platform) {
-    // You can implement analytics tracking here
-    console.log(`Shared on ${platform}`);
-
-    // Notify other components that share action is complete
-    notifyShareComplete();
-  }
 </script>

src/layouts/BlogPost.astro

@@ -70,7 +70,6 @@ try {
     <div class="mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800">
       <div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
         <ShareButtons url={canonicalURL.toString()} title={post.title} />
-        <!-- Convert URL to string -->
       </div>
     </div>
 

src/pages/404.astro

@@ -48,7 +48,8 @@ import Layout from '../layouts/Layout.astro';
         >
           <span
             class="absolute inset-0 z-0 bg-gradient-to-r from-zinc-700 to-zinc-900 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-zinc-300 dark:to-zinc-100"
-          ></span>
+          >
+          </span>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -61,7 +62,8 @@ import Layout from '../layouts/Layout.astro';
               stroke-linecap="round"
               stroke-linejoin="round"
               d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-            ></path>
+            >
+            </path>
           </svg>
           <span class="relative z-10 font-medium">Return Home</span>
         </a>
@@ -81,7 +83,9 @@ import Layout from '../layouts/Layout.astro';
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
-              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
+              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+            >
+            </path>
           </svg>
           <span class="font-medium">Go Back</span>
         </button>