add footer; other layout/style fixes

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "asto-blog",
+  "name": "coders51-blog",
   "type": "module",
   "version": "0.0.1",
   "scripts": {

src/components/BaseHead.astro

@@ -11,7 +11,7 @@ interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
+const { title, description, image = "/assets/logo.png" } = Astro.props;
 ---
 
 <!-- Global Metadata -->

src/components/DarkModeToggle/DarkModeToggle.tsx

@@ -16,7 +16,7 @@ const DarkModeToggle = () => {
     if (darkMode) {
       document.documentElement.classList.add(
         "transition-colors",
-        "duration-300"
+        "duration-100"
       );
       document.documentElement.classList.remove("dark");
       localStorage.theme = "light";
@@ -25,7 +25,7 @@ const DarkModeToggle = () => {
       document.documentElement.classList.add(
         "dark",
         "transition-colors",
-        "duration-300"
+        "duration-100"
       );
       localStorage.theme = "dark";
       setDarkMode(true);

src/components/Footer.astro

@@ -5,9 +5,38 @@ import { XIcon } from "./icons/XIcon";
 ---
 
 <footer>
-  <div class="mx-auto flex items-center justify-center gap-x-8 py-10">
-    <LinkedinIcon />
-    <XIcon />
-    <FacebookIcon />
+  <div
+    class="mx-auto lg:px-10 lg:py-8 px-8 py-4 dark:bg-coders51dark/20 bg-darkBg/20"
+  >
+    <div class="lg:w-1/2 mx-auto">
+      <div class="w-full flex items-center justify-center lg:justify-start">
+        <div
+          class="sm:w-1/2 w-full items-center flex justify-center lg:justify-start"
+        >
+          <a href="http://www.coders51.com" class="inline-block">
+            <img src="/assets/logo.png" alt="Coders51 Logo" class="w-28" />
+          </a>
+        </div>
+      </div>
+      <div class="mt-8 lg:mt-5 flex w-full lg:flex-row flex-col-reverse gap-4">
+        <div class="lg:w-1/2 w-full flex justify-center">
+          <span
+            class="text-xs text-center lg:text-start sm:text-sm dark:text-white"
+          >
+            &copy; Copyright 2022. All Rights Reserved.
+            <br />
+            coders51 SRL - Viale Angelo Masini 12/14 - 40126 Bologna (BO) - Italy
+            - VAT ID 03455241202
+          </span>
+        </div>
+        <div class="lg:w-1/2 w-full flex lg:justify-end justify-center">
+          <div class="flex items-center justify-center gap-x-8">
+            <LinkedinIcon />
+            <XIcon />
+            <FacebookIcon />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </footer>

src/components/TableOfContents.astro

@@ -16,9 +16,9 @@ const { headings } = Astro.props;
 const toc = generateTableOfContents(headings);
 ---
 
-<aside class="sticky top-28 order-2 ml-12 -me-12 hidden lg:block">
+<aside class="sticky top-28 order-2 ml-4 -me-44 hidden lg:block">
   <div
-    class="prose prose-sky dark:prose-sky dark:prose-invert marker:text-black prose-a:underline-offset-2 prose-blockquote:border-l-coders51 prose-code:text-white dark:marker:text-white prose-blockquote:dark:border-l-white"
+    class="prose prose-sky dark:prose-slate dark:prose-invert marker:text-black prose-a:underline-offset-2 prose-blockquote:border-l-coders51 prose-code:text-white dark:marker:text-white prose-blockquote:dark:border-l-white"
   >
     <h3>Table of Contents</h3>
     <ul class="text-xs list-decimal">

src/components/TableOfContentsHead.astro

@@ -14,7 +14,7 @@ const {
   <a
     aria-label={`Scroll to: ${text}`}
     class={`block line-clamp-2 hover:text-accent ${depth <= 2 ? "mt-3" : "mt-2 text-xs"}`}
-    href={`#${slug}`}><span>#</span>{text}</a
+    href={`#${slug}`}>{text}</a
   >
   {
     children.length > 0 && (

src/components/icons/FacebookIcon.tsx

@@ -1,13 +1,9 @@
 export const FacebookIcon = () => {
   return (
-    <a
-      target="_blank"
-      href="https://www.facebook.com/coders51"
-      className="transition duration-300 hover:scale-110"
-    >
+    <a target="_blank" href="https://www.facebook.com/coders51">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="h-4 w-4 text-coders51 lg:h-6 lg:w-6 dark:text-white"
+        className="h-4 transition duration-300 hover:scale-110 w-4 lg:h-6 lg:w-6 dark:text-white"
         fill="currentColor"
         viewBox="0 0 24 24"
       >

src/components/icons/LinkedinIcon.tsx

@@ -1,13 +1,9 @@
 export const LinkedinIcon = () => {
   return (
-    <a
-      target="_blank"
-      href="https://www.linkedin.com/company/coders51"
-      className="transition duration-300 hover:scale-110"
-    >
+    <a target="_blank" href="https://www.linkedin.com/company/coders51">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="h-4 w-4 text-coders51 lg:h-6 lg:w-6 dark:text-white"
+        className="h-4 transition duration-300 hover:scale-110 w-4 lg:h-6 lg:w-6 dark:text-white"
         fill="currentColor"
         viewBox="0 0 24 24"
       >

src/components/icons/XIcon.tsx

@@ -1,15 +1,11 @@
 export const XIcon = () => {
   return (
-    <a
-      target="_blank"
-      href="https://x.com/coders51"
-      className="transition duration-300 hover:scale-110"
-    >
+    <a target="_blank" href="https://x.com/coders51">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
         viewBox="0 0 24 24"
-        className="h-4 w-4 text-coders51 lg:h-6 lg:w-6 dark:text-white"
+        className="h-4 transition duration-300 hover:scale-110 w-4 lg:h-6 lg:w-6 dark:text-white"
       >
         <path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z" />
       </svg>

src/content/blog/first-post.md

@@ -4,7 +4,7 @@ description: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex fugit
 author: Andrea Junior Berselli
 pubDate: '03-25-2024 10:00'
 updatedDate: '04-05-2024 12:00'
-heroImage: 'blog-placeholder-about.jpg'
+heroImage: 'first-post/hero.jpg'
 timeRead: '3'
 ---
 

src/layouts/BaseLayout.astro

@@ -1,5 +1,4 @@
 ---
-import Footer from "../components/Footer.astro";
 import Layout from "./Layout.astro";
 
 const { title, description } = Astro.props;
@@ -10,5 +9,4 @@ const { title, description } = Astro.props;
     <h1>{title}</h1>
     <slot />
   </div>
-  <Footer />
 </Layout>

src/layouts/BlogPost.astro

@@ -1,6 +1,5 @@
 ---
 import type { CollectionEntry } from "astro:content";
-import Footer from "../components/Footer.astro";
 import Author from "../components/Author.astro";
 import FormattedDate from "../components/FormattedDate.astro";
 import { BackIcon } from "../components/icons/BackIcon";
@@ -30,9 +29,9 @@ const { headings } = await post.render();
   <div class="px-10 pb-10">
     <a
       href="/"
-      class="flex w-fit items-center self-start space-x-2 no-underline pb-10"
+      class="flex w-fit items-center self-start space-x-2 no-underline mb-10"
     >
-      <BackIcon customClassName="transition duration-300 hover:scale-110" />
+      <BackIcon />
       <span>Blog</span>
     </a>
     <h1>{title}</h1>
@@ -75,5 +74,4 @@ const { headings } = await post.render();
     <hr />
     <slot />
   </div>
-  <Footer />
 </Layout>

src/layouts/Layout.astro

@@ -2,6 +2,7 @@
 import TableOfContents from "src/components/TableOfContents.astro";
 import BaseHead from "../components/BaseHead.astro";
 import DarkModeToggle from "../components/DarkModeToggle";
+import Footer from "src/components/Footer.astro";
 
 const { title, description, headings } = Astro.props;
 ---
@@ -14,19 +15,22 @@ const { title, description, headings } = Astro.props;
     <BaseHead title={title} description={description} />
   </head>
   <body>
-    <main>
-      <article>
-        <div class="flex items-start justify-center">
-          {headings?.length > 0 && <TableOfContents headings={headings} />}
-          <div
-            class="prose prose-sky w-full pt-10 lg:prose-lg dark:prose-sky dark:prose-invert marker:text-black prose-a:underline-offset-2 prose-blockquote:border-l-coders51 prose-code:text-white dark:marker:text-white prose-blockquote:dark:border-l-white"
-          >
-            <DarkModeToggle client:only />
-            <slot />
+    <div class="min-h-screen flex flex-col justify-between">
+      <main class="mb-auto">
+        <article>
+          <div class="flex items-start justify-center">
+            {headings?.length > 0 && <TableOfContents headings={headings} />}
+            <div
+              class="prose prose-sky w-full pt-10 lg:prose-lg dark:prose-slate dark:prose-invert marker:text-black prose-a:underline-offset-2 prose-blockquote:border-l-coders51 prose-code:text-white dark:marker:text-white prose-blockquote:dark:border-l-white"
+            >
+              <DarkModeToggle client:only />
+              <slot />
+            </div>
           </div>
-        </div>
-      </article>
-    </main>
+        </article>
+      </main>
+      <Footer />
+    </div>
     <script is:inline>
       document.addEventListener("astro:after-swap", () => {
         if (

src/pages/index.astro

@@ -11,12 +11,12 @@ const posts = (await getCollection("blog")).sort(
 
 <BaseLayout title="C51 👽 Blog" description="blog page list">
   <main>
-    <section class="flex flex-col space-y-4">
+    <section class="flex flex-col gap-4">
       {
         posts.map(post => (
-          <article class="prose-img:m-0 prose-h3:mb-1 prose-h3:mt-0">
+          <div class="prose-img:m-0 prose-h3:mb-1 prose-h3:mt-0">
             <a href={`/${post.slug}/`}>
-              <div class="flex relative flex-col space-y-2 rounded-lg shadow-lg dark:bg-darkBg bg-lightBg">
+              <div class="flex relative flex-col space-y-2 rounded-lg shadow-lg dark:bg-darkBg/80 bg-lightBg/30">
                 <img
                   class="w-full h-24 rounded-t-lg object-cover"
                   src={`/${post.data.heroImage}`}
@@ -39,7 +39,7 @@ const posts = (await getCollection("blog")).sort(
                 </div>
               </div>
             </a>
-          </article>
+          </div>
         ))
       }
     </section>

src/styles/global.css

@@ -43,6 +43,10 @@ body {
     @apply rounded-md bg-gray-500/10 dark:bg-black/10;
   }
 
+  .prose a {
+    @apply hover:text-current transition-colors duration-300;
+  }
+
   .prose h1:first-of-type {
     @apply relative w-fit before:absolute before:-left-2 before:bottom-0 before:top-0 before:w-5 before:rounded-sm before:bg-sky-600/20 before:content-[""] dark:before:bg-coders51dark/20;
   }