@voidzero-dev/vitepress-theme 2.0.0 → 2.1.0

package/src/vitepress/components/voidzero/blog/BlogSingleContent.vue

@@ -1,364 +0,0 @@
-<script setup lang="ts">
-import {ref, onMounted, onUnmounted, nextTick, computed} from 'vue'
-import {Content, onContentUpdated} from 'vitepress'
-
-interface OutlineItem {
-  title: string
-  link: string
-  level: number
-  children?: OutlineItem[]
-}
-
-const headers = ref<OutlineItem[]>([])
-const activeId = ref<string | null>(null)
-const activeIndex = ref<number>(0)
-const contentRef = ref<HTMLElement | null>(null)
-const markerRef = ref<HTMLElement | null>(null)
-const navRef = ref<HTMLElement | null>(null)
-
-function getHeaders() {
-  // Query headers from within the blog content
-  const headings = document.querySelectorAll('.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4')
-
-  const items: OutlineItem[] = []
-  headings.forEach((el) => {
-    if (el.id && el.textContent) {
-      items.push({
-        title: el.textContent.replace(/^#\s*/, '').trim(),
-        link: `#${el.id}`,
-        level: parseInt(el.tagName[1])
-      })
-    }
-  })
-
-  return items
-}
-
-function updateActiveHeader() {
-  const headings = document.querySelectorAll('.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4')
-  if (headings.length === 0) return
-
-  const viewportCenter = window.innerHeight / 2
-  let closestHeading: Element | null = null
-  let closestDistance = Infinity
-  let closestIndex = 0
-
-  headings.forEach((heading, index) => {
-    if (heading.id) {
-      const rect = heading.getBoundingClientRect()
-      const headingCenter = rect.top + rect.height / 2
-      const distance = Math.abs(headingCenter - viewportCenter)
-
-      // Prefer headings that are above or at the center
-      const adjustedDistance = rect.top <= viewportCenter ? distance : distance + 1000
-
-      if (adjustedDistance < closestDistance) {
-        closestDistance = adjustedDistance
-        closestHeading = heading
-        closestIndex = index
-      }
-    }
-  })
-
-  if (closestHeading) {
-    activeId.value = closestHeading.id
-    activeIndex.value = closestIndex
-    updateMarkerPosition()
-  }
-}
-
-function scrollToHeader(link: string) {
-  const id = link.slice(1)
-  const element = document.getElementById(id)
-  if (element) {
-    const top = element.getBoundingClientRect().top + window.scrollY - (window.innerHeight / 2)
-    window.scrollTo({ top, behavior: 'smooth' })
-  }
-}
-
-function updateMarkerPosition() {
-  if (!navRef.value || !markerRef.value) return
-
-  const activeLink = navRef.value.querySelector('.outline-link.active') as HTMLElement
-  if (activeLink) {
-    const navRect = navRef.value.getBoundingClientRect()
-    const linkRect = activeLink.getBoundingClientRect()
-    const reducedHeight = linkRect.height * 0.6
-    const topOffset = (linkRect.height - reducedHeight) / 2
-    markerRef.value.style.top = `${linkRect.top - navRect.top + topOffset}px`
-    markerRef.value.style.height = `${reducedHeight}px`
-    markerRef.value.style.opacity = '1'
-  } else {
-    markerRef.value.style.opacity = '0'
-  }
-}
-
-onContentUpdated(() => {
-  nextTick(() => {
-    headers.value = getHeaders()
-    // Set first header as active initially
-    if (headers.value.length > 0 && !activeId.value) {
-      activeId.value = headers.value[0].link.slice(1)
-      activeIndex.value = 0
-    }
-    nextTick(updateMarkerPosition)
-  })
-})
-
-onMounted(() => {
-  nextTick(() => {
-    headers.value = getHeaders()
-    // Set first header as active initially
-    if (headers.value.length > 0) {
-      activeId.value = headers.value[0].link.slice(1)
-      activeIndex.value = 0
-    }
-    nextTick(updateMarkerPosition)
-  })
-  window.addEventListener('scroll', updateActiveHeader, {passive: true})
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', updateActiveHeader)
-})
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t">
-    <div class="flex flex-col lg:flex-row">
-      <!-- Left: Table of Contents -->
-      <div class="hidden lg:block px-6 lg:pl-10 lg:pr-10 py-20 w-full max-w-md flex-shrink-0">
-        <div class="sticky top-24">
-          <nav v-if="headers.length > 0" ref="navRef" class="outline-nav">
-            <div ref="markerRef" class="outline-marker"></div>
-            <ul class="outline-list">
-              <li v-for="header in headers" :key="header.link">
-                <a
-                    href="javascript:void(0)"
-                    class="outline-link"
-                    :class="{
-                      active: activeId === header.link.slice(1),
-                      'pl-4': header.level === 3,
-                      'pl-8': header.level === 4
-                    }"
-                    @click="scrollToHeader(header.link)"
-                >
-                  {{ header.title }}
-                </a>
-              </li>
-            </ul>
-          </nav>
-        </div>
-      </div>
-
-      <!-- Right: Blog Content (matches image width from hero) -->
-      <div ref="contentRef" class="blog-content relative w-full lg:w-120 xl:w-200 shrink-0 px-6 lg:px-0 lg:pr-30 py-10 lg:py-16" data-theme="light">
-        <div class="prose prose-lg vp-doc max-w-none lg:-ml-10 lg:-mr-20 lg:pr-10 prose-headings:text-primary prose-headings:font-medium prose-p:text-nickel prose-strong:text-nickel prose-li:text-nickel prose-li:marker:text-ruby prose-th:text-primary prose-td:text-primary">
-          <Content />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-/* Outline styles */
-.outline-nav {
-  position: relative;
-}
-
-.outline-marker {
-  position: absolute;
-  left: -2.5rem;
-  width: 1px;
-  background-color: var(--color-primary);
-  opacity: 0;
-  transition: top 0.2s ease, height 0.2s ease, opacity 0.2s ease;
-}
-
-.outline-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.outline-link {
-  display: block;
-  padding: 0.375rem 0;
-  font-size: 1rem;
-  font-weight: 400;
-  color: var(--color-grey);
-  transition: color 0.2s;
-  font-family: var(--font-sans);
-  letter-spacing: -0.02em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100% - 5rem);
-}
-
-.outline-link:hover {
-  color: var(--color-primary);
-}
-
-.outline-link.active {
-  color: var(--color-primary);
-  font-weight: 500;
-}
-
-/* Content border - offset to the left */
-@media (min-width: 1024px) {
-  .blog-content::before {
-    content: '';
-    position: absolute;
-    left: -7.5rem;
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: var(--color-stroke);
-  }
-
-  /* Images stretch to the border edges */
-  .blog-content :deep(img) {
-    margin-left: -5rem;
-    margin-right: -5rem;
-    max-width: calc(100% + 10rem);
-    width: calc(100% + 10rem);
-  }
-
-  /* Dividers stretch to the border edges */
-  .blog-content :deep(hr) {
-    margin-left: -5rem;
-    margin-right: -5rem;
-    max-width: calc(100% + 10rem);
-    width: calc(100% + 10rem);
-    border-color: var(--color-stroke);
-  }
-
-  /* Blockquotes - stretch to edges with top/bottom borders */
-  .blog-content :deep(blockquote) {
-    margin-left: -5rem;
-    margin-right: -5rem;
-    padding: 5rem 5rem;
-    max-width: calc(100% + 10rem);
-    width: calc(100% + 10rem);
-    border-left: none;
-    border-top: 1px solid var(--color-stroke);
-    border-bottom: 1px solid var(--color-stroke);
-    font-style: normal;
-    quotes: none;
-    position: relative;
-  }
-
-  .blog-content :deep(blockquote)::before {
-    content: '/\A**\A*\A*\A*\A*\A*/';
-    white-space: pre;
-    position: absolute;
-    left: 2rem;
-    top: 50%;
-    transform: translateY(-50%);
-    font-family: var(--font-mono);
-    font-size: 1.25rem;
-    line-height: 1.4;
-    color: var(--color-stroke);
-    opacity: 0.5;
-  }
-
-  .blog-content :deep(blockquote p) {
-    font-size: 1.5rem;
-    line-height: 1.5;
-    color: var(--color-primary);
-    font-weight: 400;
-  }
-}
-
-/* Prose styles - base variables for colors */
-.prose {
-  --tw-prose-body: var(--vp-c-text-1);
-  --tw-prose-bold: var(--vp-c-text-1);
-  --tw-prose-counters: var(--vp-c-text-2);
-  --tw-prose-bullets: var(--vp-c-text-2);
-  --tw-prose-hr: var(--vp-c-divider);
-  --tw-prose-quotes: var(--vp-c-text-2);
-  --tw-prose-quote-borders: var(--vp-c-divider);
-  --tw-prose-captions: var(--vp-c-text-2);
-  --tw-prose-th-borders: var(--vp-c-divider);
-  --tw-prose-td-borders: var(--vp-c-divider);
-}
-
-/* Reset prose styles for code blocks and code groups - let VitePress handle them */
-/* Inline code (e.g., `backticks`) keeps prose styling */
-.prose :deep(div[class*='language-']),
-.prose :deep(.vp-code-group) {
-  margin: 16px -1.5rem;
-  padding: 0;
-  border-radius: 0;
-  color: inherit;
-  font-size: inherit;
-}
-
-/* Code blocks inside code groups - reset their negative margins since parent is already full-bleed */
-.prose :deep(.vp-code-group div[class*='language-']) {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-/* Add internal padding for full-bleed code blocks on mobile */
-.prose :deep(div[class*='language-'] code),
-.prose :deep(.vp-code-group div[class*='language-'] code) {
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-}
-
-.prose :deep(.vp-code-group .tabs) {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-@media (min-width: 1024px) {
-  .prose :deep(div[class*='language-']),
-  .prose :deep(.vp-code-group) {
-    margin: 16px 0;
-    border-radius: 8px;
-  }
-
-  .prose :deep(div[class*='language-'] code),
-  .prose :deep(.vp-code-group div[class*='language-'] code) {
-    padding-left: 24px !important;
-    padding-right: 24px !important;
-  }
-
-  .prose :deep(.vp-code-group .tabs) {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-}
-
-.prose pre {
-  margin: 0;
-  padding: 0;
-  border-radius: 0;
-  overflow: visible;
-  color: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.prose pre code {
-  padding: 0;
-  border-radius: 0;
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  border: none;
-}
-
-/* Remove Tailwind Typography backticks around inline code */
-.prose :deep(code)::before,
-.prose :deep(code)::after {
-  content: none;
-}
-</style>

package/src/vitepress/components/voidzero/blog/BlogSingleHero.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import {computed} from 'vue'
-import {useData, withBase} from 'vitepress'
-import {type Author, getAuthorImage, formatDateShort} from './types'
-
-const {frontmatter} = useData()
-
-const coverUrl = computed(() => {
-  if (!frontmatter.value.cover) return null
-  const cover = frontmatter.value.cover
-  // Ensure path is absolute from root
-  const path = cover.startsWith('/') ? cover : `/${cover}`
-  return withBase(path)
-})
-
-const pageUrl = computed(() => {
-  if (typeof window !== 'undefined') {
-    return window.location.href
-  }
-  return ''
-})
-
-function copyLink() {
-  if (typeof navigator !== 'undefined') {
-    navigator.clipboard.writeText(window.location.href)
-  }
-}
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t">
-    <!-- Main hero: two columns -->
-    <div class="flex flex-col lg:flex-row py-10 pt-20 pb-16">
-      <!-- Left: Content -->
-      <div class="flex flex-col justify-between px-6 lg:pl-10 lg:pr-20 flex-1 min-w-0">
-        <div class="flex flex-col gap-4">
-          <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">// {{
-              frontmatter.category
-            }}</span>
-          <h1 class="text-3xl md:text-4xl xl:text-5xl text-pretty text-primary font-normal leading-tight">
-            {{ frontmatter.title }}
-          </h1>
-        </div>
-        <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide mt-8">{{
-            formatDateShort(frontmatter.date)
-          }}</span>
-      </div>
-
-      <!-- Right: Cover image -->
-      <div class="w-full lg:w-[30rem] xl:w-[50rem] flex-shrink-0 bg-nickel overflow-hidden lg:mr-10 mt-8 lg:mt-0">
-        <img
-            v-if="coverUrl"
-            :src="coverUrl"
-            :alt="frontmatter.title"
-            class="w-full h-full object-cover"
-        />
-      </div>
-    </div>
-
-    <!-- Author bar -->
-    <div class="border-t border-stroke">
-      <div class="flex flex-col lg:flex-row py-5">
-        <!-- Left: Author -->
-        <div class="flex items-center gap-4 px-6 lg:pl-10 lg:pr-20 flex-1 min-w-0">
-          <img
-              v-if="frontmatter.authors?.[0] && getAuthorImage(frontmatter.authors[0] as Author)"
-              :src="getAuthorImage(frontmatter.authors[0] as Author)!"
-              :alt="frontmatter.authors[0].name"
-              class="w-10 h-10 rounded object-cover"
-          />
-          <div v-else class="w-10 h-10 rounded bg-grey/20"></div>
-          <span class="text-sm text-primary font-mono">{{
-              frontmatter.authors?.[0]?.name || 'Unknown'
-            }}</span>
-        </div>
-
-        <!-- Right: Read time + Share (matches image width) -->
-        <div class="w-full lg:w-[30rem] xl:w-[50rem] flex-shrink-0 lg:mr-10 px-6 lg:px-0 mt-4 lg:mt-0 flex items-center justify-between">
-          <!-- Read time -->
-          <div class="flex items-center gap-2 text-grey">
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <circle cx="12" cy="12" r="10" stroke-width="1.5"/>
-              <path stroke-width="1.5" stroke-linecap="round" d="M12 6v6l4 2"/>
-            </svg>
-            <span class="text-xs font-medium font-mono uppercase tracking-wide">{{ frontmatter.readTime || '5 MIN READ' }}</span>
-          </div>
-
-          <!-- Share -->
-          <div class="flex items-center gap-4">
-            <span class="hidden lg:inline text-grey text-xs font-medium font-mono uppercase tracking-wide">Share</span>
-            <div class="flex items-center gap-3">
-              <a :href="`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageUrl)}`" target="_blank" rel="noopener" class="text-grey hover:text-primary transition-colors">
-                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><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>
-              </a>
-              <a :href="`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(pageUrl)}`" target="_blank" rel="noopener" class="text-grey hover:text-primary transition-colors">
-                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><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.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 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>
-              </a>
-              <a :href="`https://x.com/intent/tweet?url=${encodeURIComponent(pageUrl)}`" target="_blank" rel="noopener" class="text-grey hover:text-primary transition-colors">
-                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><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>
-              </a>
-              <button @click="copyLink" class="text-grey hover:text-primary transition-colors">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-</style>

package/src/vitepress/components/voidzero/blog/BlogSingleRelated.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import {computed} from 'vue'
-import {useData} from 'vitepress'
-import {type Post, formatDateShort} from './types'
-import NewsletterForm from '@components/shared/NewsletterForm.vue'
-
-interface Props {
-  articles: Post[]
-  newsletterEndpoint?: string
-  newsletterFormId?: string
-}
-
-const props = defineProps<Props>()
-const {frontmatter, page} = useData()
-
-// Get up to 2 related posts (same category, excluding current, most recent first)
-const relatedPosts = computed(() => {
-  const currentCategory = frontmatter.value.category
-  const currentUrl = page.value.relativePath.replace(/\.md$/, '')
-
-  return props.articles
-    .filter(post => {
-      // Same category, not current post
-      const postPath = post.url.replace(/^\//, '').replace(/\/$/, '')
-      const currentPath = currentUrl.replace(/^\//, '').replace(/\/$/, '')
-      return post.category === currentCategory && postPath !== currentPath
-    })
-    .sort((a, b) => b.date.time - a.date.time)
-    .slice(0, 2)
-})
-</script>
-
-<template>
-  <section v-if="relatedPosts.length > 0" class="wrapper wrapper--ticks border-t">
-    <div class="flex flex-col lg:flex-row">
-      <!-- Left: Newsletter Signup -->
-      <div class="bg-beige px-6 lg:pl-10 py-10 flex-1 min-w-0 flex flex-col justify-between">
-        <h2 class="text-2xl md:text-3xl text-primary font-normal leading-tight max-w-xs">
-          Subscribe to our monthly newsletter
-        </h2>
-        <div class="mt-10">
-          <NewsletterForm :endpoint="newsletterEndpoint" :form-id="newsletterFormId" />
-        </div>
-      </div>
-
-      <!-- Right: Related Posts (matches image width from hero) -->
-      <div class="related-posts relative w-full lg:w-[35rem] xl:w-[55rem] flex-shrink-0 px-6 lg:pl-30 lg:mr-10 py-10 lg:py-16">
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-          <a
-            v-for="post in relatedPosts"
-            :key="post.url"
-            :href="post.url"
-            class="group flex flex-col"
-          >
-            <!-- Cover Image -->
-            <div class="w-full aspect-video bg-nickel overflow-hidden">
-              <img
-                v-if="post.cover"
-                :src="post.cover"
-                :alt="post.title"
-                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-              />
-            </div>
-
-            <!-- Content -->
-            <div class="flex flex-col gap-2 mt-4">
-              <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">// {{ post.category }}</span>
-              <h4 class="text-lg text-pretty text-primary font-normal leading-snug group-hover:text-grey transition-colors">
-                {{ post.title }}
-              </h4>
-              <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">{{ formatDateShort(post.date.string) }}</span>
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-@media (min-width: 1024px) {
-  .related-posts::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: var(--color-stroke);
-  }
-}
-</style>