refactor(container): rename tag prop to as for consistency with Astro conventions

Author: rxtsel

src/components/Container.astro

@@ -1,10 +1,10 @@
 ---
 interface Props {
-  tag?: keyof Pick<HTMLElementTagNameMap, 'div' | 'section' | 'article' | 'header' | 'footer' | 'code'>;
+  as: keyof Pick<HTMLElementTagNameMap, 'div' | 'section' | 'article' | 'header' | 'footer' | 'code'>;
   class?: string
 }
 
-const { tag: Tag = 'div', class: className } = Astro.props;
+const { as: Tag, class: className } = Astro.props;
 ---
 
 <Tag class:list={[

src/components/partials/Footer.astro

@@ -2,7 +2,7 @@
 import Container from '@/components/Container.astro';
 ---
 
-<Container tag='footer' class='pt-24'>
+<Container as='footer' class='pt-24'>
   <p class="text-center text-muted-foreground text-sm">
     &copy; {new Date().getFullYear()}. Powered by <a href="https://astro.build" target="_blank" rel="noopener noreferrer">Astro</a> and CVfolio.
   </p>

src/components/partials/Header.astro

@@ -8,7 +8,7 @@ const isWritingPage = pathname.startsWith('/writing');
 
 ---
 
-<Container tag='header' class="w-full max-w-full flex justify-center items-center">
+<Container as='header' class="w-full max-w-full flex justify-center items-center">
   <div class="w-max fixed top-0 mt-5 bg-muted-foreground/40 backdrop-blur-md border border-border rounded-full p-1">
     <nav class="flex items-center">
       <ul class="flex items-center gap-1">

src/pages/index.astro

@@ -18,11 +18,11 @@ const talks = await getCollection('talks');
 ---
 
 <BaseLayout seo={entry.data.seo}>
-  <Container tag='section' class='py-6'>
+  <Container as='section' class='py-6'>
     <Author {...DEFAULT_CONFIGURATION.author} />
   </Container>
 
-  <Container tag='section' class='py-6'>
+  <Container as='section' class='py-6'>
     <div class="flex flex-col gap-6">
       <div class="flex items-center">
         <span class="text-headings">About</span>
@@ -34,7 +34,7 @@ const talks = await getCollection('talks');
   </Container>
   {
     links.length > 0 && (
-      <Container tag='section' class='py-8'>
+      <Container as='section' class='py-8'>
         <div class="flex flex-col gap-5">
           <span class="text-headings">Contact</span>
           <ul class="flex flex-col gap-3">
@@ -62,7 +62,7 @@ const talks = await getCollection('talks');
   }
   {
     sortedJobs.length > 0 && (
-      <Container tag='section' class='py-6'>
+      <Container as='section' class='py-6'>
         <div class="flex flex-col gap-5">
           <span class="text-headings">Work Experience</span>
           <ul class="flex flex-col gap-8">
@@ -76,7 +76,7 @@ const talks = await getCollection('talks');
   }
   {
     talks.length > 0 && (
-      <Container tag='section' class='py-6'>
+      <Container as='section' class='py-6'>
         <div class="flex flex-col gap-5">
           <span class="text-headings">Speaking</span>
           <ul class="flex flex-col gap-8">

src/pages/writing/[...slug].astro

@@ -20,7 +20,7 @@ const { Content } = await render(entry);
 ---
 
 <BaseLayout seo={entry.data.seo}>
-  <Container tag='section'>
+  <Container as='section'>
     <article class="flex flex-col gap-6">
       <div class="flex flex-col gap-2">
         <a href="/writing" class="transition-all text-muted-foreground hover:text-foreground pb-4 text-sm w-max">

src/pages/writing/index.astro

@@ -11,10 +11,10 @@ const posts = await getCollection('posts');
 ---
 
 <BaseLayout seo={entry.data.seo}>
-  <Container tag='section' class='py-6'>
+  <Container as='section' class='py-6'>
     <Author {...DEFAULT_CONFIGURATION.author} />
   </Container>
-  <Container tag='section' class='py-6'>
+  <Container as='section' class='py-6'>
     <div class="flex flex-col gap-6">
       <span class="text-headings">Latest posts</span>
       <ul class="flex flex-col gap-3">