Add back to Blog button.

Fix responsive markup

Author: roxblnfk

.gitignore

@@ -16,6 +16,9 @@
 # Generated thumbnails
 *.thumb.jpg
 
+# Vite SSR temp files
+*.timestamp-*
+
 # Logs
 npm-debug.log*
 yarn-debug.log*

.vitepress/config.mts

@@ -1,3 +1,4 @@
+import { fileURLToPath } from 'url'
 import { defineConfig, HeadConfig } from 'vitepress'
 import { generateRss, rssPlugin } from './rss'
 import { generateLlms, llmsPlugin } from './llms'
@@ -16,6 +17,14 @@ export default defineConfig({
 
   vite: {
     plugins: [rssPlugin(), llmsPlugin()],
+    resolve: {
+      alias: [
+        {
+          find: /.*\/VPLocalNav\.vue$/,
+          replacement: fileURLToPath(new URL('./theme/VPLocalNav.vue', import.meta.url)),
+        },
+      ],
+    },
   },
 
   head: [

.vitepress/locales.ts

@@ -1,8 +1,18 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export interface LocalNavBack {
+  url: string
+  label: string
+}
+
+export const localNavBackKey: InjectionKey<ComputedRef<LocalNavBack | null>> = Symbol('local-nav-back')
+
 export interface LocaleConfig {
   code: string        // 'en', 'ru', 'de', etc.
   prefix: string      // '' for root, 'ru', 'de', etc.
   blogTitle: string
   blogDescription: string
+  blogLabel: string   // Back button label: 'Blog', 'Блог', etc.
 }
 
 export const locales: LocaleConfig[] = [
@@ -11,12 +21,14 @@ export const locales: LocaleConfig[] = [
     prefix: '',
     blogTitle: 'Testo Blog',
     blogDescription: 'Updates from Testo - Modern PHP Testing Framework',
+    blogLabel: 'Blog',
   },
   {
     code: 'ru',
     prefix: 'ru',
     blogTitle: 'Блог Testo',
     blogDescription: 'Новости Testo - современного PHP фреймворка для тестирования',
+    blogLabel: 'Блог',
   },
 ]
 
@@ -33,6 +45,16 @@ export function getFeedFilename(locale: LocaleConfig): string {
   return locale.prefix ? `${locale.prefix}/feed.xml` : 'feed.xml'
 }
 
+export function getLocaleByPath(path: string): LocaleConfig {
+  return locales.find(l => l.prefix && path.startsWith(`/${l.prefix}/`)) ?? locales[0]
+}
+
+export function getBlogBackLink(path: string): LocalNavBack | null {
+  if (!isBlogPath(path)) return null
+  const locale = getLocaleByPath(path)
+  return { url: getBlogUrl(locale), label: locale.blogLabel }
+}
+
 export function isBlogPath(path: string): boolean {
   return locales.some(locale => {
     const blogUrl = getBlogUrl(locale)

.vitepress/theme/BlogPostHeader.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { useData, useRoute } from 'vitepress'
 
 const { frontmatter } = useData()
+const route = useRoute()
+
+const isRu = route.path.startsWith('/ru/')
+const blogUrl = isRu ? '/ru/blog/' : '/blog/'
+const backTitle = isRu ? 'Назад в блог' : 'Back to blog'
 
 function formatDate(date: string | Date): string {
   const d = new Date(date)
@@ -11,12 +16,18 @@ function formatDate(date: string | Date): string {
 
 <template>
   <div class="blog-post-header" v-if="frontmatter.image || frontmatter.date || frontmatter.author">
-    <img
-      v-if="frontmatter.image"
-      :src="frontmatter.image"
-      :alt="frontmatter.title"
-      class="post-hero-image"
-    />
+    <div class="post-image-wrap" v-if="frontmatter.image">
+      <a :href="blogUrl" class="back-to-blog" :title="backTitle">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M11 4L6 9L11 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </a>
+      <img
+        :src="frontmatter.image"
+        :alt="frontmatter.title"
+        class="post-hero-image"
+      />
+    </div>
     <div class="post-meta" v-if="frontmatter.date || frontmatter.author">
       <span v-if="frontmatter.date" class="post-date">{{ formatDate(frontmatter.date) }}</span>
       <span v-if="frontmatter.author" class="post-author">{{ frontmatter.author }}</span>
@@ -29,6 +40,38 @@ function formatDate(date: string | Date): string {
   margin-bottom: 1.5rem;
 }
 
+.post-image-wrap {
+  position: relative;
+}
+
+.back-to-blog {
+  position: absolute;
+  top: 12px;
+  left: -48px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-2);
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.back-to-blog:hover {
+  color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
+}
+
+@media (min-width: 1280px) {
+  .back-to-blog {
+    display: flex;
+  }
+}
+
 .post-hero-image {
   width: 100%;
   height: auto;

.vitepress/theme/GitHubStars.vue

@@ -98,6 +98,9 @@ const formatStars = (count: number | null) => {
   .github-text {
     display: none;
   }
+  .github-count {
+    display: none;
+  }
 
   .github-stars-button {
     padding: 4px 8px;