✨ feat: add github repository card extension feature

- remove astro-compress to improve build speed
- add target and rel attributes to footer links
- rename unocss opacity utility from 'opacity' to 'op'
- update PostList component's page logic from 'isTag' to 'isHome'
- create extend.css file for markdown extended features
- reorganize and sort styles in heti.css
- fix inline code wrapping issue

src/components/Footer.astro

@@ -30,7 +30,7 @@ const links = socialLinks.map((link) => {
   <p>
     {links.map((link, index) => (
       <>
-        <a class="transition-colors hover:c-primary" href={link.url}>
+        <a class="transition-colors hover:c-primary" href={link.url} target="_blank" rel="noopener noreferrer">
           {link.name}
         </a>
         {index < links.length - 1 && ' / '}
@@ -39,7 +39,7 @@ const links = socialLinks.map((link) => {
   </p>
 
   <p>
-    Powered by <a class="transition-colors hover:c-primary" href="https://astro.build/">Astro</a> and <a class="transition-colors hover:c-primary" href="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
+    Powered by <a class="transition-colors hover:c-primary" href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> and <a class="transition-colors hover:c-primary" href="https://github.com/radishzzz/astro-theme-retypeset" target="_blank" rel="noopener noreferrer">Retypeset</a>
   </p>
 
   <p>

src/components/Header.astro

@@ -60,7 +60,7 @@ const SubtitleTag = isPost ? 'div' : 'h2'
     <SubtitleTag
       class:list={[
         isPost
-          ? `opacity-0 lg:opacity-100`
+          ? `op-0 lg:op-100`
           : 'w-75% lg:w-full',
         'c-secondary font-navbar text-3.5 lg:text-4',
       ]}

src/components/PostList.astro

@@ -3,7 +3,7 @@ import type { CollectionEntry } from 'astro:content'
 import PostDate from '@/components/PostDate.astro'
 import { defaultLocale } from '@/config'
 import { generateDescription } from '@/utils/description'
-import { isTagPage } from '@/utils/page'
+import { isHomePage } from '@/utils/page'
 
 type Post = CollectionEntry<'posts'> & {
   remarkPluginFrontmatter: {
@@ -12,7 +12,7 @@ type Post = CollectionEntry<'posts'> & {
 }
 
 const { posts, lang, pinned = false } = Astro.props
-const isTag = isTagPage(Astro.url.pathname)
+const isHome = isHomePage(Astro.url.pathname)
 
 export interface Props {
   posts: Post[]
@@ -32,14 +32,14 @@ function getPostPath(post: Post) {
   {posts.map(post => (
     <li
       class="mb-5.5"
-      lg={isTag ? '' : 'mb-10'}
+      lg={isHome ? 'mb-10' : ''}
     >
 
       {/* post title */}
       <h3 class="inline">
         <a
           class="hover:c-primary"
-          lg={isTag ? '' : 'font-medium text-4.5'}
+          lg={isHome ? 'font-medium text-4.5' : ''}
           href={getPostPath(post)}
           transition:name={`post-${post.data.abbrlink || post.id}-${lang}`}
           data-disable-transition-on-theme
@@ -82,7 +82,7 @@ function getPostPath(post: Post) {
       </div>
 
       {/* desktop post description */}
-      {!isTag && (
+      {isHome && (
         <div
           class="heti hidden"
           lg="mt-2 block"

src/components/Widgets/BackToTop.astro

@@ -36,10 +36,10 @@ function initBackToTop() {
   observer = new IntersectionObserver(
     ([entry]) => {
       if (entry.isIntersecting) {
-        backToTopButton?.classList.add('opacity-0', 'pointer-events-none', 'translate-y-4')
+        backToTopButton?.classList.add('op-0', 'pointer-events-none', 'translate-y-4')
       }
       else {
-        backToTopButton?.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-4')
+        backToTopButton?.classList.remove('op-0', 'pointer-events-none', 'translate-y-4')
       }
     },
     {

src/components/Widgets/GithubCard.astro

@@ -0,0 +1,59 @@
+<script>
+function setupGithubCards() {
+  const githubCards = document.querySelectorAll('.gc-container')
+  if (githubCards.length === 0)
+    return
+
+  githubCards.forEach(async (card) => {
+    const repo = (card as HTMLElement).dataset.repo
+    if (!repo)
+      return
+
+    const avatarEl = card.querySelector('.gc-owner-avatar') as HTMLElement
+    const descEl = card.querySelector('.gc-repo-description') as HTMLElement
+    const starsEl = card.querySelector('.gc-stars-count') as HTMLElement
+    const forksEl = card.querySelector('.gc-forks-count') as HTMLElement
+    const licenseEl = card.querySelector('.gc-license-info') as HTMLElement
+
+    try {
+      const response = await fetch(`https://api.github.com/repos/${repo}`)
+      if (response.ok) {
+        const data = await response.json()
+
+        if (avatarEl && data.owner?.avatar_url)
+          avatarEl.style.backgroundImage = `url(${data.owner.avatar_url})`
+
+        if (descEl && data.description)
+          descEl.textContent = data.description
+
+        if (starsEl) {
+          starsEl.textContent = new Intl.NumberFormat('en', {
+            notation: 'compact',
+            maximumFractionDigits: 1,
+          }).format(data.stargazers_count)
+        }
+
+        if (forksEl) {
+          forksEl.textContent = new Intl.NumberFormat('en', {
+            notation: 'compact',
+            maximumFractionDigits: 1,
+          }).format(data.forks_count)
+        }
+
+        if (licenseEl)
+          licenseEl.textContent = data.license?.spdx_id || 'No License'
+      }
+      else {
+        if (descEl)
+          descEl.textContent = 'Loading failed.'
+      }
+    }
+    catch {
+      console.error(`Failed to fetch ${repo}`)
+    }
+  })
+}
+
+setupGithubCards()
+document.addEventListener('astro:page-load', setupGithubCards)
+</script>