feat: enhance design and blog page

Author: LeadcodeDev

apps/blog/astro.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
   ],
   vite: {
     plugins: [tailwindcss()],
+    envDir: '../../',
   },
   markdown: {
     shikiConfig,

apps/blog/public/logo.svg

@@ -114,4 +114,5 @@ const { title, description, date, tags, cover, slug, readingTime, author, class:
   initPostCards()
   window.addEventListener('resize', initPostCards)
   document.addEventListener('astro:after-swap', initPostCards)
+  document.addEventListener('tags:filter', initPostCards)
 </script>

apps/blog/src/components/PostCard.astro

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import { cn } from '@explainer/ui'
+
+interface ShareButtonsProps {
+  url: string
+  title: string
+  horizontal?: boolean
+}
+
+function LinkedInIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="size-4">
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+    </svg>
+  )
+}
+
+function TwitterIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="size-4">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  )
+}
+
+function FacebookIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="size-4">
+      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+    </svg>
+  )
+}
+
+function LinkIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-4">
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  )
+}
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-4">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  )
+}
+
+export function ShareButtons({ url, title, horizontal }: ShareButtonsProps) {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(url)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`
+  const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`
+  const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`
+
+  const buttonClass = cn(
+    'flex items-center justify-center rounded-full size-10 border text-muted-foreground transition-colors',
+    'hover:bg-primary/10 hover:text-primary hover:border-primary/30',
+  )
+
+  const buttons = (
+    <>
+      <a href={linkedinUrl} target="_blank" rel="noopener noreferrer" className={buttonClass} aria-label="Share on LinkedIn">
+        <LinkedInIcon />
+      </a>
+      <a href={twitterUrl} target="_blank" rel="noopener noreferrer" className={buttonClass} aria-label="Share on Twitter">
+        <TwitterIcon />
+      </a>
+      <a href={facebookUrl} target="_blank" rel="noopener noreferrer" className={buttonClass} aria-label="Share on Facebook">
+        <FacebookIcon />
+      </a>
+      <button onClick={handleCopy} className={buttonClass} aria-label="Copy link">
+        {copied ? <CheckIcon /> : <LinkIcon />}
+      </button>
+    </>
+  )
+
+  if (horizontal) {
+    return <div className="flex gap-3 justify-center">{buttons}</div>
+  }
+
+  return (
+    <div className="sticky top-24 flex flex-col gap-3">
+      {buttons}
+    </div>
+  )
+}

apps/blog/src/components/ShareButtons.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cn } from '@explainer/ui'
+
+export interface TocHeading {
+  depth: number
+  slug: string
+  text: string
+}
+
+interface TableOfContentsProps {
+  headings: TocHeading[]
+}
+
+export function TableOfContents({ headings }: TableOfContentsProps) {
+  const filtered = headings.filter((h) => h.depth >= 2 && h.depth <= 3)
+  const [activeId, setActiveId] = React.useState<string>('')
+
+  React.useEffect(() => {
+    const elements = filtered.map((h) => document.getElementById(h.slug)).filter(Boolean) as HTMLElement[]
+    if (elements.length === 0) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+            break
+          }
+        }
+      },
+      { rootMargin: '-80px 0px -75% 0px' },
+    )
+
+    for (const el of elements) {
+      observer.observe(el)
+    }
+
+    return () => observer.disconnect()
+  }, [filtered.map((h) => h.slug).join(',')])
+
+  if (filtered.length === 0) return null
+
+  return (
+    <nav className="sticky top-24 h-fit">
+      <p className="text-sm font-medium mb-3">On this page</p>
+      <ul className="border-l border-border space-y-0.5">
+        {filtered.map((heading) => (
+          <li key={heading.slug}>
+            <a
+              href={`#${heading.slug}`}
+              className={cn(
+                'block -ml-px border-l-2 py-1 text-sm transition-colors focus-visible:outline-none focus-visible:text-foreground',
+                heading.depth === 3 ? 'pl-6' : 'pl-3',
+                activeId === heading.slug
+                  ? 'border-primary text-primary font-medium'
+                  : 'border-transparent text-muted-foreground hover:text-foreground',
+              )}
+            >
+              {heading.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

apps/blog/src/components/TableOfContents.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+
+interface TagFilterProps {
+  tags: { name: string; count: number }[]
+  initialTags?: string[]
+}
+
+function TagIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" />
+      <circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />
+    </svg>
+  )
+}
+
+function SearchIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.3-4.3" />
+    </svg>
+  )
+}
+
+function readURL() {
+  const params = new URLSearchParams(window.location.search)
+  const tags = params.get('tags')?.split(',').filter(Boolean) ?? []
+  const q = params.get('q') ?? ''
+  return { tags, q }
+}
+
+function writeURL(selectedTags: string[], query: string) {
+  const params = new URLSearchParams()
+  if (selectedTags.length > 0) params.set('tags', selectedTags.join(','))
+  if (query) params.set('q', query)
+  const search = params.toString()
+  const url = `${window.location.pathname}${search ? `?${search}` : ''}`
+  window.history.replaceState(null, '', url)
+}
+
+export function TagFilter({ tags, initialTags = [] }: TagFilterProps) {
+  const [selectedTags, setSelectedTags] = useState<string[]>(initialTags)
+  const [query, setQuery] = useState<string>('')
+
+  useEffect(() => {
+    const { tags: urlTags, q } = readURL()
+    if (urlTags.length > 0) setSelectedTags(urlTags)
+    if (q) setQuery(q)
+  }, [])
+
+  function toggleTag(tag: string) {
+    setSelectedTags((prev) =>
+      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    )
+  }
+
+  useEffect(() => {
+    const cards = document.querySelectorAll<HTMLElement>('[data-tags]')
+    const normalizedQuery = query.toLowerCase().trim()
+
+    cards.forEach((card) => {
+      const cardTags: string[] = JSON.parse(card.dataset.tags ?? '[]')
+      const matchesTags =
+        selectedTags.length === 0 || cardTags.some((t) => selectedTags.includes(t))
+
+      const matchesQuery =
+        !normalizedQuery ||
+        (card.dataset.title ?? '').toLowerCase().includes(normalizedQuery) ||
+        (card.dataset.description ?? '').toLowerCase().includes(normalizedQuery)
+
+      card.hidden = !matchesTags || !matchesQuery
+    })
+
+    writeURL(selectedTags, query)
+    window.dispatchEvent(new Event('tags:filter'))
+  }, [selectedTags, query])
+
+  return (
+    <div className="mb-10 space-y-4">
+      <div className="relative">
+        <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Rechercher un article..."
+          className="w-full rounded-md border border-border bg-transparent pl-10 pr-4 py-2 max-w-sm text-sm text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:border-primary/50"
+        />
+      </div>
+
+      <div className="flex items-center gap-3 overflow-x-auto scrollbar-hide">
+        {tags.map((tag) => {
+          const active = selectedTags.includes(tag.name)
+          return (
+            <button
+              key={tag.name}
+              type="button"
+              onClick={() => toggleTag(tag.name)}
+              className={`flex items-center gap-1.5 rounded-md border px-4 py-1.5 text-sm shrink-0 transition-colors cursor-pointer border-dashed ${
+                active
+                  ? 'border-primary/50 bg-primary/5 text-primary font-medium'
+                  : 'border-border text-muted-foreground hover:border-foreground/30 hover:text-foreground'
+              }`}
+            >
+              <TagIcon className="size-3.5" />
+              {tag.name}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

apps/blog/src/components/TagFilter.astro

@@ -0,0 +1,39 @@
+import { Navbar, MobileMenu, MobileNavLinks, LocaleSwitcher, getAppLinks } from '@explainer/ui'
+import type { NavbarLink } from '@explainer/ui'
+
+const blogLinks: NavbarLink[] = [
+  { label: 'Tous les articles', href: '/', icon: 'lucide:newspaper' },
+  { label: 'Catégories', href: '/tags', icon: 'lucide:folder' },
+  { label: 'RSS', href: '/rss.xml', icon: 'lucide:rss' },
+]
+
+interface BlogNavbarProps {
+  activePath: string
+  appUrlOverrides?: Partial<Record<string, string>>
+}
+
+export function BlogNavbar({ activePath, appUrlOverrides }: BlogNavbarProps) {
+  const appLinks = getAppLinks('blog', appUrlOverrides)
+
+  return (
+    <Navbar
+      currentApp="blog"
+      appUrlOverrides={appUrlOverrides}
+      brandHref={appUrlOverrides?.website ?? '/'}
+      links={blogLinks}
+      activePath={activePath}
+      leftSlot={
+        <MobileMenu>
+          <MobileNavLinks
+            links={blogLinks}
+            appLinks={appLinks}
+            activePath={activePath}
+          />
+        </MobileMenu>
+      }
+      rightSlot={
+        <LocaleSwitcher locales={['en']} currentLocale="en" switchUrls={{}} />
+      }
+    />
+  )
+}