feat: github stats component

zernonia · Jul 1, 2023 · 1ca23ef · 1ca23ef
1 parent 1b7ddd7
commit 1ca23ef
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 1 deletion.
diff --git a/layer/components/Lego/GithubStar/index.vue b/layer/components/Lego/GithubStar/index.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { withBase, withoutBase } from 'ufo'
+import { useFetch } from '#imports'
+
+const props = defineProps<{
+  repo: string
+  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: stars } = await useFetch('/api/get-github-stars', {
+  query: {
+    repo,
+  },
+})
+</script>
+
+<template>
+  <NuxtLink :to="link" target="_blank" :aria-label="`Star ${repo} on GitHub`">
+    <slot :stars="stars">
+      <div>{{ stars }}</div>
+    </slot>
+  </NuxtLink>
+</template>
diff --git a/layer/server/api/get-github-stars/index.get.ts b/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
+})
diff --git a/layer/server/utils/github.ts b/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,
+})
diff --git a/layer/types/github.ts b/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
+}
diff --git a/layer/types/index.ts b/layer/types/index.ts
@@ -1,2 +1,3 @@
 export * from './twitter'
 export * from './metatags'
+export * from './github'
diff --git a/website/components/GithubStar/Demo.vue b/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>
diff --git a/website/components/GithubStar/Showcase.vue b/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>
diff --git a/website/components/NavBar.vue b/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>

diff --git a/website/components/ShowcaseList.vue b/website/components/ShowcaseList.vue
@@ -10,5 +10,6 @@
     <MarqueeBannerShowcase />
     <PreviewShowcase />
     <TocShowcase />
+    <GithubStarShowcase />
   </div>
 </template>
diff --git a/website/content/docs/2.components/10.github-star.md b/website/content/docs/2.components/10.github-star.md
@@ -0,0 +1,32 @@
+---
+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 button link.       |
+
diff --git a/website/content/docs/2.components/9.preview.md b/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.  |
 
 
-
+
diff --git a/website/plugins/analytics.client.ts b/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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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. \|