Add Freebie Sidebar

Author: WebDevSimplified

public/articleAssets/2025-10/typescript-utility-types/cheat-sheet-preview.png

@@ -1,11 +1,9 @@
 ---
 import BlogHeader from "./BlogHeader.astro"
-import ConvertkitForm from "./ConvertkitForm.astro"
 import PageAnalytics from "./PageAnalytics.astro"
 import UserSettingsLoad from "./UserSettingsLoad.astro"
 ---
 
 <UserSettingsLoad />
-<ConvertkitForm />
 <PageAnalytics />
 <BlogHeader />

public/freebies/accessibility-checklist.avif

@@ -2,7 +2,7 @@
 import UserSettings from "../components/UserSettings.jsx"
 ---
 
-<header class="wrapper">
+<header>
   <h1>
     <a href="/">
       <span>Web Dev Simplified Blog</span>

public/freebies/ts-util-cheat-sheet.avif

@@ -10,7 +10,7 @@ export default function BlogList({ allPosts }) {
       return post.tags.reduce((tagTotals, tag) => {
         return { ...tagTotals, [tag]: (tagTotals[tag] || 0) + 1 }
       }, totals)
-    }, {})
+    }, {}),
   )
     .map(([name, count]) => ({ name, count }))
     .sort((a, b) => {
@@ -45,7 +45,7 @@ export default function BlogList({ allPosts }) {
   }
 
   return (
-    <div className="wrapper">
+    <>
       <SearchBar query={searchQuery} onChange={handleSearchChange} />
       <TagBar tags={tags} onTagSelect={handleTagSelect} />
       <main className="content">
@@ -55,6 +55,6 @@ export default function BlogList({ allPosts }) {
           ))}
         </section>
       </main>
-    </div>
+    </>
   )
 }

public/freebies/web-dev-roadmap.avif

@@ -2,16 +2,19 @@
 import dateFormatter from "../utils/dateFormatter.js"
 import TagBar from "./TagBar.jsx"
 import ShareButtons from "./ShareButtons.jsx"
+import FreebieSidebar from "./FreebieSidebar.astro"
+import type { Freebie } from "../data/freebies"
 
 export interface Props {
   title: string
   date: string
   updatedDate: string
   url: string
   tags: string[]
+  freebie: Freebie
 }
 
-const { title, date, updatedDate, tags, url } = Astro.props
+const { title, date, updatedDate, tags, url, freebie } = Astro.props
 const siteUrl = Astro.site.href
 ---
 
@@ -57,11 +60,20 @@ const siteUrl = Astro.site.href
       <!-- TODO: Add Pagination -->
     </div>
   </article>
+  <FreebieSidebar freebie={freebie} />
 </div>
 
 <style>
+  .layout {
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    gap: 2rem;
+    align-items: start;
+  }
+
   .content {
     margin-bottom: 8rem;
+    min-width: 0;
   }
 
   .content :global(main > * + :not(h2):not(h3)) {
@@ -95,6 +107,12 @@ const siteUrl = Astro.site.href
     font-weight: 700;
   }
 
+  @media (max-width: 1100px) {
+    .layout {
+      grid-template-columns: 1fr;
+    }
+  }
+
   @media (max-width: 50em) {
     .title {
       font-size: 1.75rem;