Merge pull request #63 from harlan-zw/feat/github-stars

feat: github stars

layer/components/Lego/GithubStar/index.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { withBase, withoutBase } from 'ufo'
+import { useFetch } from '#imports'
+
+const props = defineProps<{
+  repo: string
+  raw?: boolean
+  to?: string
+}>()
+
+const repo = computed(() => {
+  // support users providing full github url
+  return withoutBase(props.repo, 'https://github.com/')
+})
+const link = computed(() => {
+  return props.to || withBase(repo.value, 'https://github.com/')
+})
+// pull the stars from the server
+const { data } = await useFetch('/api/get-github-stars', {
+  query: {
+    repo: repo.value,
+  },
+  watch: [
+    repo,
+  ],
+  key: `github-stars-${repo.value}`,
+}).catch(() => {
+  return {
+    data: ref({ stars: 0 }),
+  }
+})
+
+const stars = computed(() => {
+  if (props.raw)
+    return data.value
+  return new Intl.NumberFormat('en', { notation: 'compact' }).format(data.value)
+})
+</script>
+
+<template>
+  <NuxtLink :to="link" target="_blank" :aria-label="`Star ${repo} on GitHub`">
+    <slot :stars="stars">
+      <div>{{ stars }}</div>
+    </slot>
+  </NuxtLink>
+</template>

layer/server/api/get-github-stars/index.get.ts

@@ -0,0 +1,14 @@
+import { getQuery } from 'h3'
+import type { GitHubRepo } from '../../../types'
+import { cachedGitHubRepo } from '#imports'
+
+export default defineEventHandler(async (event) => {
+  const repoWithOwner = getQuery(event).repo
+
+  if (!repoWithOwner)
+    return sendError(event, new Error('Missing repo name.'))
+
+  // use ungh to fetch the statrs
+  const repo = await cachedGitHubRepo(repoWithOwner).catch({ stars: 0 }) as GitHubRepo
+  return repo.stars
+})

layer/server/utils/github.ts

@@ -0,0 +1,9 @@
+import { cachedFunction } from '#imports'
+
+export const cachedGitHubRepo = cachedFunction(async (repo: string) => {
+  return (await $fetch(`https://ungh.cc/repos/${repo}`)).repo
+}, {
+  maxAge: 60 * 60,
+  name: 'github-repo',
+  getKey: (repo: string) => repo,
+})

layer/types/github.ts

@@ -0,0 +1,12 @@
+export interface GitHubRepo {
+  id: number
+  name: string
+  repo: string
+  description: string
+  createdAt: string
+  updatedAt: string
+  pushedAt: string
+  stars: number
+  watchers: number
+  forks: number
+}

layer/types/index.ts

@@ -1,2 +1,3 @@
 export * from './twitter'
 export * from './metatags'
+export * from './github'

website/components/GithubStar/Demo.vue

@@ -0,0 +1,11 @@
+<template>
+  <LegoGithubStar v-slot="{ stars }" repo="zernonia/nuxt-lego" class="group border bg-white hover:bg-gray-100 transition rounded-lg text-xl flex justify-center">
+    <div class="flex items-center bg-gray-100 group-hover:bg-gray-200 transition rounded-l px-4 py-3 space-x-1">
+      <Icon name="uil:star" class="text-xl group-hover:op75 " />
+      <div>Star</div>
+    </div>
+    <div class="px-4 py-3">
+      {{ stars }}
+    </div>
+  </LegoGithubStar>
+</template>

website/components/GithubStar/Showcase.vue

@@ -0,0 +1,12 @@
+<template>
+  <ShowcaseCard slug="github-star">
+    <template #image>
+      <div class="text-blue-300 group-hover:text-[1.25rem] group-hover:text-blue-500 transition-all ">
+        <LegoGithubStar v-slot="{ stars }" repo="zernonia/nuxt-lego" class="flex items-center space-x-1 px-3 py-2 border bg-white hover:bg-gray-50 transition rounded-lg flex justify-center">
+          <Icon name="mdi:star" class="op75 " />
+          {{ stars }}
+        </LegoGithubStar>
+      </div>
+    </template>
+  </ShowcaseCard>
+</template>

website/components/NavBar.vue

@@ -34,6 +34,16 @@ watch(
 
       <div v-if="$route.path.includes('blueprints')" to="/blueprints" class="h-4 w-1px mx-2 sm:mx-4 bg-gray-200" />
 
+      <LegoGithubStar v-slot="{ stars }" repo="zernonia/nuxt-lego" class="mr-5 group border bg-white hover:bg-gray-100 transition rounded-lg text-sm flex justify-center">
+        <div class="flex items-center bg-gray-100 group-hover:bg-gray-200 transition rounded-l px-2 py-1 space-x-1">
+          <Icon name="uil:star" class="group-hover:op75 " />
+          <div>Star</div>
+        </div>
+        <div class="px-2 py-1">
+          {{ stars }}
+        </div>
+      </LegoGithubStar>
+
       <NuxtLink to="https://github.com/zernonia/nuxt-lego" target="_blank">
         <Icon class="text-3xl" name="uil:github" />
       </NuxtLink>

website/components/ShowcaseList.vue

@@ -10,5 +10,6 @@
     <MarqueeBannerShowcase />
     <PreviewShowcase />
     <TocShowcase />
+    <GithubStarShowcase />
   </div>
 </template>

website/content/docs/2.components/10.github-star.md

@@ -0,0 +1,33 @@
+---
+title: GitHub Star
+description: Share your GitHub projects with ease.
+new: true
+---
+
+::code-example
+#preview
+:github-star-demo
+#code
+codegen{src="website/components/GithubStar/Demo.vue" lang="vue" fileName="/content/ProseImg.vue"} 
+::
+
+## Anatomy
+
+```vue
+<template>
+  <LegoGithubStar>
+    <slot />
+  </LegoGithubStar>
+</template>
+```
+
+## API Reference
+
+### Root
+
+| Prop | Default | Types     | Description                                                            |
+|------|--------|-----------|------------------------------------------------------------------------|
+| repo | ``     | `string`  | The name of the repository to check. For example: `zernonia/nuxt-lego` |
+| to   | ``     | `string`  | Set a different anchor link.                                           |
+| raw   | ``  | `boolean` | Return the star number without formatting.                             |
+

website/content/docs/2.components/9.preview.md

@@ -34,4 +34,4 @@ codegen{src="website/components/Preview/Demo.vue" lang="vue" fileName="/content/
 | maxWidth | 1000       | `number` | Max width for the element to scale.  |
 
 
-
+

website/plugins/analytics.client.ts

@@ -1,6 +1,9 @@
 export default defineNuxtPlugin(() => {
   const cfg = useRuntimeConfig()
 
+  if (!cfg.public.umamiHost)
+    return
+
   const url = new URL('/script.js', cfg.public.umamiHost)
   const node = document.createElement('script')
   node.async = true