refactor(layout): generalize LayoutPage

LR-Tech-Blog · Apr 13, 2024 · b3d42c2 · b3d42c2
1 parent b653e08
commit b3d42c2
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 50 deletions.
diff --git a/src/layouts/LayoutBase.astro b/src/layouts/LayoutBase.astro
@@ -7,15 +7,16 @@ import "@fontsource/jetbrains-mono";
 import { ViewTransitions } from "astro:transitions";
 import BackToTopButton from "../components/BackToTopButton.astro";
 
-import '@/styles/global.css'
+import "@/styles/global.css";
 
 interface Props {
   title: string;
-  bttEnable: boolean;
-  metaDescription?: string;
+  bttEnable?: boolean | undefined;
+  metaDescription?: string | undefined;
+  className?: string | undefined;
 }
 
-const { title, bttEnable, metaDescription } = Astro.props;
+const { title, bttEnable = false, metaDescription, className } = Astro.props;
 ---
 
 <html lang="pt-BR">
@@ -24,48 +25,74 @@ const { title, bttEnable, metaDescription } = Astro.props;
     <link rel="icon" href="/favicon/favicon.ico" />
     <link rel="icon" type="image/x-icon" href="/favicon/favicon.ico" />
     <link rel="shortcut icon" href="/favicon/favicon.ico" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon16.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon32.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon32.png" />
-    <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-chrome192.png" />
-    <link rel="icon" type="image/png" sizes="512x512" href="/favicon/android-chrome512.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon/favicon16.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon/favicon32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon/favicon32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/favicon/android-chrome192.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="512x512"
+      href="/favicon/android-chrome512.png"
+    />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
-    <meta name="description" content={metaDescription ?? 
-    "Blog de tecnologia com conteúdo técnico sobre programação e software."} />
+    <meta
+      name="description"
+      content={metaDescription ??
+        "Blog de tecnologia com conteúdo técnico sobre programação e software."}
+    />
     <title>{title}</title>
-    <ViewTransitions/>
+    <ViewTransitions />
   </head>
   <body>
     <div class="p-7">
       <TopBar />
       <NavBar />
-      <main>
+      <main class={className}>
         <slot />
-        <BackToTopButton enable={bttEnable}/>
       </main>
+      <BackToTopButton enable={bttEnable} />
     </div>
     <Footer />
-  </body>
-</html>
-
-<script>
-  import { getCurrentThemeMode } from "../scripts/theme";
+  </body><script>
+    import { getCurrentThemeMode } from "../scripts/theme";
 
-  document.addEventListener("astro:after-swap", () => {
-    const currentTheme = getCurrentThemeMode();
-    if (currentTheme === "dark") {
-      document.documentElement.classList.add("dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
-  })
-  document.addEventListener("astro:page-load", () => {
-    const currentTheme = getCurrentThemeMode();
-    if (currentTheme === "dark") {
-      document.documentElement.classList.add("dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
-  })
-</script>
+    document.addEventListener("astro:after-swap", () => {
+      const currentTheme = getCurrentThemeMode();
+      if (currentTheme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    });
+    document.addEventListener("astro:page-load", () => {
+      const currentTheme = getCurrentThemeMode();
+      if (currentTheme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    });
+  </script>
+</html>
diff --git a/src/layouts/LayoutPage.astro b/src/layouts/LayoutPage.astro
@@ -2,17 +2,20 @@
 import LayoutBase from "./LayoutBase.astro";
 
 interface Props {
-    title?: string
+  title?: string | undefined;
+  bttEnabled?: boolean | undefined;
+  metaDescription?: string | undefined;
 }
 
-const { title } = Astro.props
-const defaultTitle = "LR Tech Blog"
+const { title, bttEnabled, metaDescription } = Astro.props;
+const defaultTitle = "LR Tech Blog";
 ---
 
-<LayoutBase title={title ?? defaultTitle} bttEnable={false} >
-        <div class="mx-10">
-            <main>
-                <slot/>
-            </main>
-        </div>
-</LayoutBase>
+<LayoutBase
+  title={title ?? defaultTitle}
+  bttEnable={bttEnabled}
+  metaDescription={metaDescription}
+  className="px-10"
+>
+  <slot />
+</LayoutBase>
diff --git a/src/layouts/PostLayout.astro → src/layouts/LayoutPost.astro b/src/layouts/PostLayout.astro → src/layouts/LayoutPost.astro
@@ -1,5 +1,5 @@
 ---
-import LayoutBase from "./LayoutBase.astro";
+import LayoutPage from "./LayoutPage.astro";
 import Prose from "../components/Prose.astro";
 import type { AuthorProfile, PostData } from "../scripts/types/post_types";
 import PostSideBarLeft from "../components/PostShareSection.astro";
@@ -22,7 +22,7 @@ const { minutesRead } = remark;
 const formatedDate = date.toLocaleDateString("pt-br");
 ---
 
-<LayoutBase title={title} bttEnable metaDescription={description}>
+<LayoutPage title={title} bttEnabled={true} metaDescription={description}>
   <div class="flex flex-col gap-5 mb-5">
     <PostSideBarLeft />
     <header class="flex flex-col">
@@ -48,4 +48,4 @@ const formatedDate = date.toLocaleDateString("pt-br");
       <slot />
     </Prose>
   </article>
-</LayoutBase>
+</LayoutPage>
diff --git a/src/pages/post/[slug].astro b/src/pages/post/[slug].astro
@@ -1,5 +1,5 @@
 ---
-import PostLayout from "../../layouts/PostLayout.astro";
+import PostLayout from "../../layouts/LayoutPost.astro";
 import { type CollectionEntry, getEntry } from "astro:content"
 import type { AuthorProfile, PostData } from "../../scripts/types/post_types";
 import { getPosts } from "../../scripts/content_fetcher";