fix(astro): replace Fragment with div in Layout.astro

The Fragment component was causing a linter error when used with slots in Astro. Replaced it with a div element which is properly supported.

closes #323

Author: RonithManikonda

packages/astro/src/default/components/ContactInfo.astro

@@ -0,0 +1,9 @@
+---
+// ContactInfo.astro
+---
+
+<div class="text-sm text-tk-elements-footer-textColor">
+  <a href="mailto:[email protected]" class="hover:underline">Contact Us</a>
+  <span class="mx-2">•</span>
+  <a href="https://github.com/your-org/your-repo" class="hover:underline">GitHub</a>
+</div> 

packages/astro/src/default/components/Footer.astro

@@ -1,11 +1,29 @@
-<nav class="bg-tk-elements-footer-backgroundColor border-t border-tk-elements-app-borderColor flex justify-between p-4">
-  <div class="flex-1">
-    <slot name="terms" />
+<footer class="bg-tk-elements-footer-backgroundColor border-t border-tk-elements-app-borderColor">
+  <div class="max-w-7xl mx-auto px-4 py-6">
+    <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+      <div class="flex-1">
+        <slot name="edit-page-link" />
+      </div>
+      <div class="flex-1">
+        <slot name="lesson-links" />
+      </div>
+      <div class="flex-1">
+        <slot name="webcontainers-link" />
+      </div>
+    </div>
+    
+    <div class="mt-6 pt-6 border-t border-tk-elements-app-borderColor">
+      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+        <div class="flex-1">
+          <slot name="terms" />
+        </div>
+        <div class="flex-1">
+          <slot name="contact-info" />
+        </div>
+        <div class="flex-1 text-right">
+          <slot name="copyright" />
+        </div>
+      </div>
+    </div>
   </div>
-  <div class="flex-1">
-    <slot name="contact-info" />
-  </div>
-  <div class="flex-1">
-    <slot name="copyright" />
-  </div>
-</nav>
+</footer>

packages/astro/src/default/components/FooterWrapper.astro

@@ -1,6 +1,8 @@
 ---
 // FooterWrapper.astro
 import { Footer } from 'tutorialkit:override-components';
+import Terms from './Terms.astro';
+import ContactInfo from './ContactInfo.astro';
 
 const currentYear = new Date().getFullYear();
 ---
@@ -9,7 +11,13 @@ const currentYear = new Date().getFullYear();
   <slot name="edit-page-link" />
   <slot name="lesson-links" />
   <slot name="webcontainers-link" />
-  <Terms slot="terms" />
-  <ContactInfo slot="contact-info" />
-  <p slot="copyright">© {currentYear} Your Company. All rights reserved.</p>
+  <slot name="terms">
+    <Terms />
+  </slot>
+  <slot name="contact-info">
+    <ContactInfo />
+  </slot>
+  <slot name="copyright">
+    <p>© {currentYear} Your Company. All rights reserved.</p>
+  </slot>
 </Footer>

packages/astro/src/default/components/Terms.astro

@@ -0,0 +1,9 @@
+---
+// Terms.astro
+---
+
+<div class="text-sm text-tk-elements-footer-textColor">
+  <a href="/terms" class="hover:underline">Terms of Service</a>
+  <span class="mx-2">•</span>
+  <a href="/privacy" class="hover:underline">Privacy Policy</a>
+</div> 

packages/astro/src/default/env-default.d.ts

@@ -8,12 +8,12 @@ interface WebContainerConfig {
 }
 
 declare module 'tutorialkit:override-components' {
-  const topBar: typeof import('./src/default/components/TopBar.astro').default;
-  const headTags: typeof import('./src/default/components/HeadTags.astro').default;
-  const footer: typeof import('./src/default/components/Footer.astro').default;
+  const topBar: typeof import('./components/TopBar.astro').default;
+  const headTags: typeof import('./components/HeadTags.astro').default;
+  const footer: typeof import('./components/Footer.astro').default;
   const dialog: typeof import('@tutorialkit/react/dialog').default;
 
-  export { topBar as TopBar, dialog as Dialog, footer as Footer };
+  export { topBar as TopBar, dialog as Dialog, footer as Footer, headTags as HeadTags };
 }
 
 declare const __ENTERPRISE__: boolean;

packages/astro/src/default/layouts/Layout.astro

@@ -20,7 +20,7 @@ const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).toStri
     <HeadTags>
       <title slot="title">{title}</title>
 
-      <Fragment slot="links">
+      <div slot="links">
         {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
         {faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
         <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -30,7 +30,7 @@ const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).toStri
           rel="stylesheet"
         />
         <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
-      </Fragment>
+      </div>
 
       <MetaTags slot="meta" meta={meta} />
     </HeadTags>