handle vertical margins in Post

Author: nemanjam

docs/working-notes/todo3.md

@@ -414,5 +414,8 @@ fix content width
 migrate scroll to top and toast to react
 fix footer
 fix share, just small gray icons
+use vertical margins and margin collapsing for all vertical spacings, no paddings, when in same parent
+remove tag-lg, fix button size on mobile
+alert component style
 ```
 

src/components/Giscus.astro

@@ -1,23 +1,31 @@
 ---
+import { cn } from '@/utils/styles';
 
+import type { HTMLAttributes } from 'astro/types';
+
+export interface Props extends HTMLAttributes<'div'> {}
+
+const { class: className } = Astro.props;
 ---
 
-<giscus-widget
-  id="giscus-comments"
-  repo="nemanjam/nemanjam.github.io"
-  repoid="R_kgDOKc-LeA"
-  category="General"
-  categoryid="DIC_kwDOKc-LeM4CZ7UL"
-  mapping="pathname"
-  term="Comments are welcome"
-  strict="0"
-  reactionsenabled="1"
-  emitmetadata="0"
-  inputposition="bottom"
-  theme="light"
-  lang="en"
-  crossorigin="anonymous"
-  loading="lazy"></giscus-widget>
+<div class={cn('giscus', className)}>
+  <giscus-widget
+    id="giscus-comments"
+    repo="nemanjam/nemanjam.github.io"
+    repoid="R_kgDOKc-LeA"
+    category="General"
+    categoryid="DIC_kwDOKc-LeM4CZ7UL"
+    mapping="pathname"
+    term="Comments are welcome"
+    strict="0"
+    reactionsenabled="1"
+    emitmetadata="0"
+    inputposition="bottom"
+    theme="light"
+    lang="en"
+    crossorigin="anonymous"
+    loading="lazy"></giscus-widget>
+</div>
 
 <script>
   import 'giscus';

src/components/PostListMore.astro

@@ -1,17 +1,19 @@
 ---
-import PostCardMore from './PostCardMore.astro';
+import PostCardMore from '@/components/PostCardMore.astro';
+import { cn } from '@/utils/styles';
 
 import type { Post } from '@/types/post';
+import type { HTMLAttributes } from 'astro/types';
 
-export interface Props {
+export interface Props extends HTMLAttributes<'div'> {
   morePosts: Post[];
 }
 
-const { morePosts } = Astro.props;
+const { morePosts, class: className } = Astro.props;
 ---
 
-<div>
-  <h2 class="b-h2">More posts</h2>
+<div class={cn(className)}>
+  <h2 class="b-h2 mt-0">More posts</h2>
   <ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
     {
       morePosts.map((post) => (

src/components/PostMeta.astro

@@ -6,13 +6,15 @@ import { ROUTES } from '@/constants/routes';
 import { formatDate, formatDateIso } from '@/utils/datetime';
 import { cn } from '@/utils/styles';
 import { getCategoryProps } from '@/modules/post/category';
+import type { HTMLAttributes } from 'astro/types';
 
-interface Props {
+
+
+export interface Props extends HTMLAttributes<'p'> {
   publishDate: Date;
   category?: string;
   readingTime?: number;
   updatedDate?: Date;
-  class?: string
 }
 
 const { category, publishDate, updatedDate, readingTime, class: className } = Astro.props;

src/components/TableOfContents.astro

@@ -1,22 +1,25 @@
 ---
 import Link from '@/components/Link.astro';
+import { cn } from '@/utils/styles';
+
+import type { HTMLAttributes } from 'astro/types';
 
 export interface Heading {
   text: string;
   slug: string;
   headings: Heading[];
 }
 
-export interface Props {
+export interface Props extends HTMLAttributes<'aside'> {
   headings: Heading[];
 }
 
-const { headings } = Astro.props as Props;
+const { headings, class: className } = Astro.props as Props;
 
 const getHref = (slug: string) => `#${slug}`;
 ---
 
-<aside class="md:max-w-lg rounded-box border border-base-300 p-4 my-5 md:my-6 mx-auto">
+<aside class={cn('toc md:max-w-lg rounded-box border border-base-300 p-4 mx-auto', className)}>
   <h2 class="b-h2 mt-4">Table of contents</h2>
 
   <ol class="ol-nested-decimal my-0">

src/layouts/Centered.astro

@@ -9,7 +9,7 @@ const props = Astro.props;
 ---
 
 {/* flex here to take full height for pagination, flex-row align-stretch */}
-{/* h-full doent work without all parents h-full */}
+{/* h-full dosent work without all parents h-full */}
 
 <Base {...props}>
   <main id="main" class="flex-grow flex flex-col centered-px max-w-4xl py-4 lg:py-8">

src/layouts/Post.astro

@@ -13,14 +13,20 @@ const props = Astro.props;
     <figure class="centered max-w-4xl">
       <slot name="hero-image" />
     </figure>
-    {/* hero custom without prose */}
-    <section class="my-prose centered-px max-w-3xl pt-8 md:pt-12">
+
+    <section class="centered-px max-w-3xl b-h2-my">
       <slot name="hero-text" />
     </section>
-    <section class="my-prose centered-px max-w-3xl">
+
+    <section class="my-prose centered-px max-w-3xl b-h2-my">
       <slot name="content" />
     </section>
-    <section class="centered-px max-w-5xl">
+
+    <section class="centered-px max-w-3xl">
+      <slot name="after-content" />
+    </section>
+
+    <section class="centered-px max-w-5xl b-h2-mt">
       <slot name="more-posts" />
     </section>
   </article>

src/pages/blog/[slug].astro

@@ -88,34 +88,33 @@ const metadata: Metadata = { title, description, image };
   </Fragment>
 
   <Fragment slot="hero-text">
-    {/* title */}
-    <h1>
+    <h1 class="b-h1">
       {title}
       {draft && <sup class="text-red-500 ml-1">{draftText}</sup>}
     </h1>
 
-    {/* description */}
-    {description && <h2 class="font-normal text-xl lg:text-2xl tracking-tight">{description}</h2>}
+    {
+      description && (
+        <p class="font-normal text-captions text-xl md:text-2xl mb-6 md:mb-8">{description}</p>
+      )
+    }
 
-    {/* meta */}
-    <PostMeta {...postMetaProps} class="not-prose" />
+    <PostMeta {...postMetaProps} />
   </Fragment>
 
-  {/* section content */}
   <Fragment slot="content">
-    {/* table of contents */}
     {toc && <TableOfContents headings={headings} />}
 
     <Content />
+  </Fragment>
 
-    <div
-      class="flex justify-between items-start gap-4 flex-col md:flex-row mt-6 md:mt-8 mb-12 md:mb-16"
-    >
+  <Fragment slot="after-content">
+    <div class="flex justify-between items-start gap-6 flex-col md:flex-row b-h2-mb">
       <TagList tags={tags} size="md" />
       <Share {title} {description} url={`${ROUTES.BLOG}${slug}`} />
     </div>
 
-    <Giscus />
+    <Giscus class="b-h2-mt" />
   </Fragment>
 
   <Fragment slot="more-posts">

src/styles/base/my-prose.css

@@ -19,6 +19,13 @@
     /* image */
     @apply prose-img:rounded-button;
 
-    /* @apply outline outline-pink-500; */
+    /* my custom components bellow */
+
+    /* vertical margins */
+    .toc,
+    .expressive-code,
+    .alert {
+      @apply b-p-my;
+    }
   }
 }

src/styles/base/tags.css

@@ -42,4 +42,26 @@
     @apply text-content;
     @apply text-base sm:text-lg;
   }
+
+  /* vertical margins (my-) */
+
+  /* like p */
+  .b-p-my {
+    @apply my-5 md:my-6;
+  }
+
+  /* my- like h2 */
+  .b-h2-my {
+    @apply mt-12 md:mt-14 mb-6 md:mb-8;
+  }
+
+  /* mt- first and last child */
+  .b-h2-mt {
+    @apply mt-12 md:mt-14;
+  }
+
+  /* mb- */
+  .b-h2-mb {
+    @apply mb-6 md:mb-8;
+  }
 }