add responsive header; update README

README.md

@@ -1,15 +1,19 @@
-# 🚀 Project Structure
+# 🛠️ Project Structure
 
 Inside of your Astro project, you'll see the following folders and files:
 
 ```text
 ├── public/
+│   ├── assets/
+│   ├── fonts/
+│   ├── posts/
 ├── src/
 │   ├── components/
 │   ├── content/
 │   ├── layouts/
 │   ├── pages/
-│   └── styles/
+│   ├── styles/
+│   └── utils/
 ├── astro.config.mjs
 ├── README.md
 ├── package.json
@@ -21,9 +25,9 @@ Astro looks for `.astro` or `.md|.mdx` files in the `src/pages/` directory. Each
 
 There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
 
-The `src/content/` directory contains "collections" of related Markdown and MDX documents. Use `getCollection()` to retrieve posts from `src/content/blog/`, and type-check your frontmatter using an optional schema. See [Astro's Content Collections docs](https://docs.astro.build/en/guides/content-collections/) to learn more.
+The `src/content/` directory contains "collections" of related Markdown and MDX documents. Use `getCollection()` to retrieve posts from `src/content/blog/`, and type-check your frontmatter using an optional schema (defined in `src/content/config.ts`). See [Astro's Content Collections docs](https://docs.astro.build/en/guides/content-collections/) to learn more.
 
-Any static assets, like images, can be placed in the `public/` directory.
+Any static assets, like images, can be placed in the `/public/assets` directory.
 
 ## 🧞 Commands
 
@@ -37,3 +41,48 @@ All commands are run from the root of the project, from a terminal:
 | `npm run preview`         | Preview your build locally, before deploying     |
 | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 🚀 How to add a new post
+
+Follow these `supa-easy` steps to add a brand new post!
+
+First of all, clone this repo in your local machine and create a new branch from `main`.
+
+We can follow this convention to call our brand new branches: `post/my-new-post`, where `my-new-post` should be a sort of an **unique** "id".
+
+1. Create a new `.md|.mdx` file inside `src/content/blog` directory. In our case: `my-new-post.md`
+2. As a convention, create a folder inside `/public/posts` called the same as the `.md|mdx` file you've just created. In our example, we'll create `/public/posts/my-new-post` folder. Here we can paste all the images that we need to put in our new blog post. Is important to follow this step in order to keep the files structure clean ✨
+3. Now you can start writing your post, but first, let's build our frontmatter attributes in order to specify some info about the new post. Here is an example to follow, these are the first lines of your blog post:
+
+```js
+---
+title: 'My New Post!'
+description: 'a description of your post...'
+author: 'Rick Sanchez Prime'
+pubDate: '04-12-2024 10:00' // MM-DD-YYYY HH:MM
+updatedDate: '04-05-2024 12:00' // MM-DD-YYYY HH:MM (optional)
+heroImage: 'my-new-post/hero.jpg' // (optional)
+timeRead: '3' // minutes (optional)
+---
+```
+
+4. You are ready to start writing your post using `md|mdx` language under these lines 🤙🏻
+5. When you have done, you should have some changes to commit:
+
+    - a new `.md|mdx` file inside `src/content/blog`
+    - a new folder ( called the same as your new `.md` file ) inside `/public/posts` containing all the images that you've put in your post.
+
+6. Commit your changes, leave a *wonderful* message like `post: my-new-post added to the blog`
+7. Push your commit and open a new **Pull Request** to the `main` branch. Please add [abjunior92](https://github.com/abjunior92) as a reviewer and waiting his approval for merging.
+
+## ✏️ Markdown Extension for VSCode
+
+In order to write markdown at the best, I suggest to install in your vscode this extension:
+
+Name: markdownlint
+
+Description: Markdown linting and style checking for Visual Studio Code
+
+Publisher: David Anson
+
+VS Marketplace Link: <https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint>

src/components/BaseHead.astro

@@ -1,6 +1,7 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
+import { ViewTransitions } from "astro:transitions";
 import "../styles/global.css";
 
 interface Props {
@@ -18,6 +19,12 @@ const { title, description, image = "/assets/logo.png" } = Astro.props;
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap"
+  rel="stylesheet"
+/>
 <meta name="generator" content={Astro.generator} />
 
 <!-- Canonical URL -->
@@ -41,3 +48,5 @@ const { title, description, image = "/assets/logo.png" } = Astro.props;
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
+
+<ViewTransitions />

src/components/DarkModeToggle/DarkModeToggle.tsx

@@ -35,13 +35,17 @@ const DarkModeToggle = () => {
   }
 
   return (
-    <div className="absolute right-10">
+    <div id="theme-toggle">
       <button
         className="transition duration-300 hover:scale-110"
         aria-label={`Switch to ${darkMode ? "light" : "dark"} mode`}
         onClick={handleClick}
       >
-        {darkMode ? <SunIcon /> : <MoonIcon />}
+        {darkMode ? (
+          <SunIcon customClassName="fill-coders51dark" />
+        ) : (
+          <MoonIcon customClassName="fill-coders51dark" />
+        )}
       </button>
     </div>
   );

src/components/Footer.astro

@@ -13,18 +13,19 @@ import { XIcon } from "./icons/XIcon";
         <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">
+          <a href="https://www.coders51.com" class="inline-block">
             <img
               id="footer-logo"
               src="/assets/logo.png"
               alt="Coders51 Logo"
               class="w-28"
+              transition:persist
             />
           </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">
+        <div class="lg:w-1/2 w-full flex justify-center lg:justify-start">
           <span
             class="text-xs text-center lg:text-start sm:text-sm dark:text-white"
           >
@@ -47,13 +48,12 @@ import { XIcon } from "./icons/XIcon";
 </footer>
 
 <script is:inline>
-  const footerLogo = document.getElementById("footer-logo");
-
   function updateTheme() {
+    const footerLogo = document.getElementById("footer-logo");
     const theme = localStorage.getItem("theme");
 
     if (theme === "dark") {
-      footerLogo.src = "/assets/logo-alt.png";
+      footerLogo.src = "/assets/logo_white_big.png";
     } else {
       footerLogo.src = "/assets/logo.png";
     }

src/components/Header.astro

@@ -0,0 +1,76 @@
+---
+import DarkModeToggle from "src/components/DarkModeToggle";
+---
+
+<header
+  id="header"
+  class="fixed h-20 flex w-full items-center justify-center bg-gradientHeader backdrop-blur-xl"
+>
+  <div class="flex w-full justify-between items-center xl:w-4/5">
+    <a href="https://www.coders51.com" class="ml-4">
+      <img
+        id="header-logo"
+        src="/assets/logo_white_big.png"
+        alt="Coders51 Logo"
+        class="xl:w-40 w-32"
+      />
+    </a>
+    <div class="flex items-center gap-x-8">
+      <nav id="nav">
+        <ul class="flex text-white nav items-center gap-x-8 m-0">
+          <li><a href="https://www.coders51.com/#whoweare">Who we are</a></li>
+          <li><a href="https://www.coders51.com/#whatwedo">What we do</a></li>
+          <li>
+            <a href="https://www.coders51.com/#customers">Success Stories</a>
+          </li>
+          <li><a href="https://www.coders51.com/#community">Community</a></li>
+          <li><a class="active-link" href="/">Blog</a></li>
+          <li>
+            <a
+              href="https://coders51.typeform.com/to/BpB9pe"
+              data-mode="popup"
+              class="typeform-share">Contact Us</a
+            >
+          </li>
+        </ul>
+      </nav>
+      <div class="flex items-center gap-x-4">
+        <DarkModeToggle client:only />
+        <button class="navbar-toggle" transition:persist>
+          <span></span>
+        </button>
+      </div>
+    </div>
+  </div>
+</header>
+
+<script is:inline>
+  (function () {
+    var qs,
+      js,
+      q,
+      s,
+      d = document,
+      gi = d.getElementById,
+      ce = d.createElement,
+      gt = d.getElementsByTagName,
+      id = "typef_orm_share",
+      b = "https://embed.typeform.com/";
+    if (!gi.call(d, id)) {
+      js = ce.call(d, "script");
+      js.id = id;
+      js.src = b + "embed.js";
+      q = gt.call(d, "script")[0];
+      q.parentNode.insertBefore(js, q);
+    }
+  })();
+
+  const navbarToggle = document.getElementsByClassName("navbar-toggle")[0];
+
+  navbarToggle?.addEventListener("click", () => {
+    const header = document.querySelector("header");
+    if (header) {
+      header.classList.toggle("nav-collapse");
+    }
+  });
+</script>

src/components/TableOfContents.astro

@@ -16,7 +16,7 @@ const { headings } = Astro.props;
 const toc = generateTableOfContents(headings);
 ---
 
-<aside class="sticky top-28 order-2 ml-4 -me-44 hidden lg:block">
+<aside class="sticky top-28 order-2 ml-4 -me-32 hidden xl:block">
   <div
     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"
   >

src/layouts/BaseLayout.astro

@@ -6,7 +6,7 @@ const { title, description } = Astro.props;
 
 <Layout title={title} description={description}>
   <div class="px-10 pb-10">
-    <h1>{title}</h1>
+    <h1 class="main-heading">{title}</h1>
     <slot />
   </div>
 </Layout>

src/layouts/BlogPost.astro

@@ -34,11 +34,11 @@ const { headings } = await post.render();
       <BackIcon />
       <span>Blog</span>
     </a>
-    <h1>{title}</h1>
+    <h1 class="">{title}</h1>
     {
       heroImage && (
         <img
-          src={`/${heroImage}`}
+          src={`/posts/${heroImage}`}
           alt={title}
           class="w-full rounded object-cover max-h-96"
         />

src/layouts/Layout.astro

@@ -1,8 +1,8 @@
 ---
 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";
+import Header from "src/components/Header.astro";
 
 const { title, description, headings } = Astro.props;
 ---
@@ -16,14 +16,14 @@ const { title, description, headings } = Astro.props;
   </head>
   <body>
     <div class="min-h-screen flex flex-col justify-between">
-      <main class="mb-auto">
+      <Header />
+      <main class="mb-auto mt-20">
         <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"
+              class="prose prose-sky w-full pt-10 xl: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>

src/pages/index.astro

@@ -9,17 +9,17 @@ const posts = (await getCollection("blog")).sort(
 );
 ---
 
-<BaseLayout title="C51 👽 Blog" description="blog page list">
+<BaseLayout title="👽 Blog" description="blog page list">
   <main>
     <section class="flex flex-col gap-4">
       {
         posts.map(post => (
           <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/80 bg-lightBg/30">
+              <div class="flex 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}`}
+                  src={`/posts/${post.data.heroImage}`}
                   alt={post.data.title}
                 />
                 <div class="px-4 pb-4 pt-2">