feat: add narrative, pull quote, and side note components with terminal styling

astro.config.mjs

@@ -28,7 +28,10 @@ export default defineConfig({
         './src/components/content/GitCommand.astro',
         './src/components/content/Image.astro',
         './src/components/content/InfoBox.astro',
+        './src/components/content/NarrativeSection.astro',
         './src/components/content/ProsCons.astro',
+        './src/components/content/PullQuote.astro',
+        './src/components/content/SideNote.astro',
         './src/components/content/Table.astro',
         './src/components/content/YouTube.astro',
 

src/components/content/NarrativeSection.astro

@@ -0,0 +1,90 @@
+---
+/**
+ * NarrativeSection - Wrapper for flowing prose content
+ * Enhanced typography for comfortable reading experience
+ */
+---
+
+<section class="narrative-section">
+  <slot />
+</section>
+
+<style>
+  .narrative-section {
+    /* Typography for comfortable reading */
+    font-size: 1.1rem;
+    line-height: 1.95;
+    color: var(--font-color);
+
+    /* Optimal reading width */
+    max-width: 680px;
+    margin: 0 auto;
+
+    /* Spacing between sections */
+    padding: 1.5rem 0;
+  }
+
+  /* Paragraph styling */
+  .narrative-section :global(p) {
+    margin-bottom: 1.5rem;
+    text-align: left; /* Thai text doesn't justify well without specific tools */
+    line-height: 1.8; /* Adjusted for better readability */
+  }
+
+  .narrative-section :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  /* Drop cap removed for Thai compatibility */
+
+  /* Strong/emphasis styling */
+  .narrative-section :global(strong) {
+    font-weight: 600;
+    color: var(--font-color);
+  }
+
+  .narrative-section :global(em) {
+    font-style: italic;
+    color: var(--brand-color);
+  }
+
+  /* Inline code in narrative */
+  .narrative-section :global(:not(pre) > code) {
+    background-color: var(--card-border-color);
+    color: var(--brand-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-size: 0.85em;
+  }
+
+  /* Links in narrative */
+  .narrative-section :global(a) {
+    color: var(--brand-color);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+    transition: all 0.2s ease;
+  }
+
+  .narrative-section :global(a:hover) {
+    color: var(--accent-color);
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .narrative-section {
+      font-size: 1rem; /* Match global p size */
+      line-height: 1.75;
+      padding: 0; /* Let container handle padding */
+    }
+
+    .narrative-section :global(*) {
+      overflow-wrap: break-word;
+      word-break: break-word; /* Prevent overflow on mobile */
+    }
+
+    .narrative-section :global(p) {
+      text-align: left;
+    }
+  }
+</style>

src/components/content/PullQuote.astro

@@ -0,0 +1,96 @@
+---
+/**
+ * PullQuote - Highlights key statements or memorable quotes
+ * Centered, prominent typography for emphasis
+ */
+---
+
+<blockquote class="pull-quote">
+  <slot />
+</blockquote>
+
+<style>
+  .pull-quote {
+    /* Layout */
+    margin: 3rem auto;
+    padding: 2rem 2.5rem;
+    max-width: 600px;
+    text-align: center;
+
+    /* Typography */
+    font-size: 1.35rem;
+    font-weight: 500;
+    line-height: 1.7;
+    font-style: italic;
+    color: var(--font-color);
+
+    /* Visual accent */
+    position: relative;
+    border: none;
+  }
+
+  /* Quote marks - opening */
+  .pull-quote::before {
+    content: "“";
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    font-size: 3rem;
+    font-family: Georgia, serif;
+    font-style: normal;
+    color: var(--brand-color);
+    opacity: 0.25;
+    line-height: 1;
+  }
+
+  /* Quote marks - closing */
+  .pull-quote::after {
+    content: "”";
+    position: absolute;
+    bottom: -1rem;
+    right: 1.5rem;
+    font-size: 3rem;
+    font-family: Georgia, serif;
+    font-style: normal;
+    color: var(--brand-color);
+    opacity: 0.25;
+    line-height: 1;
+  }
+
+  /* Clean up nested elements */
+  .pull-quote :global(p) {
+    margin: 0;
+    display: inline;
+  }
+
+  .pull-quote :global(strong) {
+    color: var(--brand-color);
+    font-weight: 600;
+  }
+
+  .pull-quote :global(code) {
+    font-family: var(--font-mono);
+    font-style: normal;
+    font-size: 0.9em;
+    background-color: var(--card-border-color);
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .pull-quote {
+      font-size: 1.15rem;
+      padding: 1.5rem 1.5rem 1.5rem 2rem;
+      margin: 2rem 0;
+      border-left: 4px solid var(--brand-color);
+      text-align: left;
+      font-style: italic;
+    }
+
+    .pull-quote::before,
+    .pull-quote::after {
+      display: none;
+    }
+  }
+</style>

src/components/content/SideNote.astro

@@ -0,0 +1,117 @@
+---
+/**
+ * SideNote - Insight Block (Redesigned Iteration 2)
+ * Style: "Insight Block" - Minimalist, Inline, Premium
+ * No floats, no heavy boxes. Focus on typography and clean separation.
+ */
+import { Icon } from 'astro-icon/components';
+
+type Props = {
+  type?: 'note' | 'tip' | 'warning';
+};
+
+const { type = 'note' } = Astro.props;
+
+const icons = {
+  note: 'heroicons:information-circle',
+  tip: 'heroicons:light-bulb',
+  warning: 'heroicons:exclamation-triangle',
+};
+---
+
+<aside class={`side-note ${type}`}>
+  <div class="note-marker">
+    <Icon name={icons[type]} class="note-icon" />
+  </div>
+  <div class="note-content">
+    <slot />
+  </div>
+</aside>
+
+<style>
+  .side-note {
+    /* Layout: Inline Block (Stable) */
+    position: relative;
+    display: flex;
+    gap: 1.25rem;
+    margin: 2.5rem 0;
+
+    /* Decoration: Minimalist left border */
+    padding-left: 1.5rem;
+    border-left: 3px solid var(--card-border-color);
+
+    /* Typography */
+    font-size: 0.95rem;
+    line-height: 1.7;
+    color: var(--font-color-light);
+    font-family: var(--font-sans);
+  }
+
+  .note-marker {
+    flex-shrink: 0;
+    padding-top: 0.2rem;
+  }
+
+  .note-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    opacity: 0.8;
+  }
+
+  .note-content {
+    flex: 1;
+    /* Clean up internal spacing */
+  }
+
+  .note-content :global(p) {
+    margin: 0;
+  }
+
+  .note-content :global(p + p) {
+    margin-top: 0.75rem;
+  }
+
+  .note-content :global(strong) {
+    font-weight: 600;
+  }
+
+  /* Type Variants - Color Accents on Border & Icon Only */
+
+  /* Note: Standard */
+  .side-note.note {
+    border-left-color: var(--accent-color);
+  }
+  .side-note.note .note-icon,
+  .side-note.note :global(strong) {
+    color: var(--accent-color);
+  }
+
+  /* Tip: Success color */
+  .side-note.tip {
+    border-left-color: var(--success-color);
+  }
+  .side-note.tip .note-icon,
+  .side-note.tip :global(strong) {
+    color: var(--success-color);
+  }
+
+  /* Warning: Warning color */
+  .side-note.warning {
+    border-left-color: var(--warning-color);
+  }
+  .side-note.warning .note-icon,
+  .side-note.warning :global(strong) {
+    color: var(--warning-color);
+  }
+
+  /* Responsive tweaks */
+  @media (max-width: 768px) {
+    .side-note {
+      width: 100%; /* Full width for mobile */
+      margin: 1.5rem 0;
+      gap: 1rem;
+      padding-left: 1rem;
+      font-size: 0.9rem;
+    }
+  }
+</style>