Добавил ридинг прогресс

EldarMuhamethanov · EldarMuhamethanov · commit cc3903cc0872 · 2026-03-09T12:02:13.000+03:00
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -6,9 +6,10 @@ import Header from './Header.astro'
 interface Props {
   title?: string | undefined
   description?: string | undefined
+  showReadingProgress?: boolean
 }
 
-const { title, description } = Astro.props
+const { title, description, showReadingProgress = false } = Astro.props
 ---
 
 <html lang="en">
@@ -20,6 +21,15 @@ const { title, description } = Astro.props
     class="flex flex-col overflow-hidden bg-background font-sans antialiased"
     style="height: 100dvh"
   >
+    {showReadingProgress && (
+      <div class="fixed inset-x-0 top-0 z-[60] h-[3px] bg-transparent">
+        <div
+          id="reading-progress"
+          class="h-full w-0 bg-primary transition-[width] duration-150 ease-out"
+        >
+        </div>
+      </div>
+    )}
     <div class="pointer-events-none fixed inset-0 -z-50">
       <div
         class="bg-grid-pattern absolute inset-0 opacity-[0.03] dark:opacity-[0.04]"
@@ -33,7 +43,7 @@ const { title, description } = Astro.props
     </div>
 
     <Header />
-    <div class="min-h-0 w-full flex-1 overflow-y-auto">
+    <div class="min-h-0 w-full flex-1 overflow-y-auto" id="content-scroll-container">
       <slot />
     </div>
 
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -16,11 +16,27 @@ type Props = { entry: CollectionEntry<'blog'> }
 const { entry } = Astro.props as Props
 const { Content, headings } = await entry.render()
 const { title, description, pubDate, tags } = entry.data
+
+const AVERAGE_READING_WPM = 220
+const wordCount = entry.body?.split(/\s+/).length ?? 0
+const readingTimeMinutes =
+  wordCount > 0 ? Math.max(1, Math.ceil(wordCount / AVERAGE_READING_WPM)) : 1
+
+const allPosts = await getCollection('blog')
+const relatedPosts = allPosts
+  .filter((post) => post.id !== entry.id)
+  .filter((post) => {
+    if (!tags || !post.data.tags) return false
+    return post.data.tags.some((tag) => tags.includes(tag))
+  })
+  .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
+  .slice(0, 3)
 ---
 
 <BaseLayout
   title={`${title} — Блог | Eldar Muhamethanov`}
   description={description}
+  showReadingProgress={true}
 >
   <main
     class="relative flex min-h-[80vh] flex-auto flex-col"
@@ -44,18 +60,19 @@ const { title, description, pubDate, tags } = entry.data
               {title}
             </h1>
             <div class="mt-2 flex flex-wrap items-center gap-3">
-              <time
-                datetime={pubDate.toISOString()}
-                class="block text-sm text-muted-foreground"
-              >
-                {
-                  pubDate.toLocaleDateString('ru-RU', {
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric',
-                  })
-                }
-              </time>
+              <div class="flex items-center gap-2 text-sm text-muted-foreground">
+                <time datetime={pubDate.toISOString()}>
+                  {
+                    pubDate.toLocaleDateString('ru-RU', {
+                      day: 'numeric',
+                      month: 'long',
+                      year: 'numeric',
+                    })
+                  }
+                </time>
+                <span aria-hidden="true">•</span>
+                <span>{readingTimeMinutes} мин чтения</span>
+              </div>
               {tags && tags.length > 0 && (
                 <ul class="flex flex-wrap gap-1.5">
                   {tags.map((tag) => (
@@ -70,20 +87,55 @@ const { title, description, pubDate, tags } = entry.data
           </header>
           <div
             class="prose prose-neutral dark:prose-invert prose-headings:font-bold prose-pre:rounded-xl prose-code:rounded prose-code:px-1 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none max-w-none"
+            data-article-content
           >
             <Content />
           </div>
         </BlogArticleLayout>
       </div>
     </div>
     <BottomLayout size="lg">
-      <div class="border-t border-border pt-8">
-        <a
-          href="/blog"
-          class="text-sm font-medium text-primary hover:underline"
-        >
-          ← Все статьи
-        </a>
+      <div class="border-t border-border pt-8 space-y-8">
+        {relatedPosts.length > 0 && (
+          <section aria-labelledby="related-posts-heading">
+            <h2
+              id="related-posts-heading"
+              class="text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3"
+            >
+              Похожие статьи
+            </h2>
+            <ul class="grid gap-4 md:grid-cols-3">
+              {relatedPosts.map((post) => (
+                <li>
+                  <a
+                    href={`/blog/${post.id.replace(/\.(mdx?|md)$/, '')}`}
+                    class="block rounded-xl border border-border/80 bg-card/40 px-3 py-3 text-sm hover:border-primary/30 hover:bg-card/70 transition-colors"
+                  >
+                    <div class="text-[11px] uppercase tracking-wide text-muted-foreground mb-1">
+                      {post.data.pubDate.toLocaleDateString('ru-RU', {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric',
+                      })}
+                    </div>
+                    <div class="font-medium text-foreground line-clamp-2">
+                      {post.data.title}
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        <div>
+          <a
+            href="/blog"
+            class="text-sm font-medium text-primary hover:underline"
+          >
+            ← Все статьи
+          </a>
+        </div>
       </div>
     </BottomLayout>
   </main>
@@ -95,4 +147,52 @@ const { title, description, pubDate, tags } = entry.data
     overflow-y: hidden;
     max-width: 85vw;
   }
+
+  #reading-progress {
+    transform-origin: left center;
+    border-radius: 0;
+  }
 </style>
+
+<script is:inline>
+  ;(function () {
+    function attachReadingProgress() {
+      const progressBar = document.getElementById('reading-progress')
+      const contentScrollContainer = document.getElementById('content-scroll-container')
+
+      if (!progressBar || !contentScrollContainer) {
+        return
+      }
+
+      if (window.__readingProgressDetach) {
+        window.__readingProgressDetach()
+      }
+
+      const updateProgress = () => {
+        const maxScroll =
+          contentScrollContainer.scrollHeight - contentScrollContainer.clientHeight
+
+        if (maxScroll <= 0) {
+          progressBar.style.width = '0%'
+          return
+        }
+
+        const current = contentScrollContainer.scrollTop
+        const progress = Math.min(1, Math.max(0, current / maxScroll))
+        progressBar.style.width = `${progress * 100}%`
+      }
+
+      contentScrollContainer.addEventListener('scroll', updateProgress, { passive: true })
+      window.addEventListener('resize', updateProgress)
+      updateProgress()
+
+      window.__readingProgressDetach = () => {
+        contentScrollContainer.removeEventListener('scroll', updateProgress)
+        window.removeEventListener('resize', updateProgress)
+      }
+    }
+
+    attachReadingProgress()
+    document.addEventListener('astro:after-swap', attachReadingProgress)
+  })()
+</script>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -7,10 +7,20 @@ import PageTitle from '../../components/common/PageTitle.astro'
 
 const BLOG_TITLE = 'Блог'
 const BLOG_DESCRIPTION = 'Заметки о разработке, инструментах и опыте'
+const AVERAGE_READING_WPM = 220
 
-const posts = (await getCollection('blog')).sort(
-  (a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()
-)
+const posts = (await getCollection('blog'))
+  .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
+  .map((entry) => {
+    const words = entry.body?.split(/\s+/).length ?? 0
+    const readingTimeMinutes =
+      words > 0 ? Math.max(1, Math.ceil(words / AVERAGE_READING_WPM)) : 1
+
+    return {
+      ...entry,
+      readingTimeMinutes,
+    }
+  })
 ---
 
 <BaseLayout title={`${BLOG_TITLE} — Eldar Muhamethanov`} description={BLOG_DESCRIPTION}>
@@ -28,16 +38,17 @@ const posts = (await getCollection('blog')).sort(
                 href={`/blog/${entry.id.replace(/\.(mdx?|md)$/, '')}`}
                 class="group block rounded-2xl border border-border/80 bg-card/50 p-6 transition-all duration-300 hover:border-primary/20 hover:shadow-glow-sm"
               >
-                <time
-                  datetime={entry.data.pubDate.toISOString()}
-                  class="text-sm font-medium text-muted-foreground"
-                >
-                  {entry.data.pubDate.toLocaleDateString('ru-RU', {
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric',
-                  })}
-                </time>
+                <div class="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                  <time datetime={entry.data.pubDate.toISOString()}>
+                    {entry.data.pubDate.toLocaleDateString('ru-RU', {
+                      day: 'numeric',
+                      month: 'long',
+                      year: 'numeric',
+                    })}
+                  </time>
+                  <span aria-hidden="true">•</span>
+                  <span>{entry.readingTimeMinutes} мин чтения</span>
+                </div>
                 <h2 class="mt-2 text-xl font-semibold tracking-tight text-foreground group-hover:text-primary transition-colors">
                   {entry.data.title}
                 </h2>
