feat: github stats, astro icons and octokit

astro.config.ts

@@ -1,9 +1,9 @@
+import solidJs from '@astrojs/solid-js';
 import tailwind from '@astrojs/tailwind';
+import icon from 'astro-icon';
 import { defineConfig } from 'astro/config';
 
-import solidJs from '@astrojs/solid-js';
-
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind({ applyBaseStyles: false }), solidJs()],
+  integrations: [tailwind({ applyBaseStyles: false }), solidJs(), icon()],
 });

package.json

@@ -50,13 +50,17 @@
   "dependencies": {
     "@astrojs/solid-js": "4.4.2",
     "@astrojs/tailwind": "5.1.2",
+    "@iconify-json/mdi": "1.2.1",
     "@kobalte/core": "0.13.7",
+    "@octokit/openapi-types": "22.2.0",
     "@tailwindcss/typography": "0.5.15",
     "astro": "4.16.8",
+    "astro-icon": "1.1.2",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
     "marked": "14.1.3",
+    "octokit": "4.0.2",
     "sharp": "0.33.5",
     "solid-js": "1.9.3",
     "solid-markdown": "2.0.13",

src/components/Footer.astro

@@ -1,6 +1,7 @@
 ---
-import { siteMetadata } from '~/constants';
-import GitHubIcon from '../icons/GitHub.astro';
+import { Icon } from 'astro-icon/components';
+
+import { URLs, siteMetadata } from '~/constants';
 
 const { currentPathname } = Astro.props;
 const isHomepage = currentPathname === '/';
@@ -15,11 +16,11 @@ const isHomepage = currentPathname === '/';
     <a
       target="_blank"
       rel="noopener noreferrer"
-      href=`https://github.com/${siteMetadata.repo}`
+      href=`${URLs.GITHUB.REPO}`
       aria-label="GitHub Repository"
       class="mt-1 mb-4 mx-2 p-1 text-white hover:text-gray-400"
     >
-      <GitHubIcon className="w-6" />
+      <Icon name="mdi:github" size={32} />
     </a>
 
     <div class="my-3">

src/components/GitHubRepo.astro

@@ -0,0 +1,70 @@
+---
+import { Icon } from 'astro-icon/components';
+import { Octokit } from 'octokit';
+
+import { URLs, siteMetadata } from '~/constants';
+import type { RepoStats } from '~/types';
+
+const octokit = new Octokit();
+
+const formatCount = (count: number) => {
+  return new Intl.NumberFormat('en', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(count);
+};
+
+const loadRepoStats = async (): Promise<RepoStats> => {
+  try {
+    const repository = await octokit.rest.repos.get({
+      owner: siteMetadata.repo.owner,
+      repo: siteMetadata.repo.name,
+    });
+
+    const latestRelease = await octokit.rest.repos.getLatestRelease({
+      owner: siteMetadata.repo.owner,
+      repo: siteMetadata.repo.name,
+    });
+
+    return {
+      forks: formatCount(repository.data.forks_count),
+      stars: formatCount(repository.data.stargazers_count),
+      latestReleaseName: latestRelease.data.name?.replace('v', '') ?? '',
+    };
+  } catch (error) {
+    console.error('Failed to load repo stats', error);
+    return {
+      forks: '',
+      stars: '',
+      latestReleaseName: '',
+    };
+  }
+};
+
+const { forks, stars, latestReleaseName } = await loadRepoStats();
+---
+
+<a href={URLs.GITHUB.REPO} 
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label="GitHub Repository"
+    class="text-white hover:text-gray-300 hover:no-underline"
+>
+  <section class="flex flex-row gap-2 items-center">
+    <Icon name="mdi:github" size={32} class="w-6 sm:w-10" />
+    <div class="font-light">
+      <div class="text-sm">{siteMetadata.repo.fullName}</div>
+      <div class="flex flex-row gap-2 text-xs">
+        <div class="flex flex-row gap-0.5 items-center">
+          <Icon name="mdi:tag-outline" /> {latestReleaseName}
+        </div>
+        <div class="flex flex-1 gap-0.5 items-center">
+          <Icon name="mdi:star-outline" /> {stars}
+        </div>
+        <div class="flex flex-1 gap-0.5 items-center">
+          <Icon name="mdi:source-branch" /> {forks}
+        </div>
+      </div>
+    </div>
+  </section>
+</a>

src/components/GoogleAnalytics.astro

@@ -1,12 +1,15 @@
+---
+import { siteMetadata } from '~/constants';
+---
+
 <!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-QXML81DEDV"
-></script>
+<script async src=`https://www.googletagmanager.com/gtag/js?id=${siteMetadata.google.analytics}`></script>
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag() {
     dataLayer.push(arguments);
   }
   gtag('js', new Date());
 
-  gtag('config', 'G-QXML81DEDV');
+  gtag('config', siteMetadata.google.analytics);
 </script>

src/components/Hero.astro

@@ -2,6 +2,7 @@
 import { Image } from 'astro:assets';
 import Logo from './Logo.astro';
 
+import { siteMetadata } from '~/constants';
 import notifications from '../assets/notifications.png';
 import LatestRelease from './LatestRelease.astro';
 ---
@@ -13,11 +14,9 @@ import LatestRelease from './LatestRelease.astro';
     <div class="flex flex-col justify-center flex-grow">
       <Logo className="w-16 lg:w-24 mb-4" isDark />
 
-      <h1 class="text-2xl lg:text-4xl font-semibold">Gitify</h1>
+      <h1 class="text-2xl lg:text-4xl font-semibold">{siteMetadata.title}</h1>
 
-      <h2 class="mt-2 text-xl lg:text-2xl font-light">
-        Your GitHub notifications <br /> on your menu bar.
-      </h2>
+      <h2 class="mt-2 text-xl lg:text-2xl font-light">{siteMetadata.description}.</h2>
 
       <LatestRelease />
     </div>

src/components/LatestRelease.astro

@@ -1,17 +1,22 @@
 ---
+import { Icon } from 'astro-icon/components';
 import { format, parseISO } from 'date-fns';
-import { siteMetadata } from '~/constants';
-import DownloadIcon from '../icons/Download.astro';
-import type { Assets, DownloadLink, DownloadLinks, HeroData } from '../types';
+import { Octokit } from 'octokit';
 
-const REPO_API_URL = `https://api.github.com/repos/${siteMetadata.repo}/releases/latest`;
-const REPO_RELEASES_URL = `https://github.com/${siteMetadata.repo}/releases/latest`;
-const releaseDetailsClassName = 'text-sm mt-4';
+import { URLs, siteMetadata } from '~/constants';
+import type {
+  DownloadLink,
+  DownloadLinks,
+  HeroData,
+  ReleaseAsset,
+} from '../types';
 
-const getDownloadLinks = (assets: Assets[]): DownloadLinks => {
+const octokit = new Octokit();
+
+const getDownloadLinks = (assets: ReleaseAsset[]): DownloadLinks => {
   const getAssetLink = (filenameRegex: RegExp): string => {
     const asset = assets.find((item) => item.name.match(filenameRegex));
-    return asset ? asset.browser_download_url : REPO_RELEASES_URL;
+    return asset ? asset.browser_download_url : URLs.GITHUB.LATEST_RELEASE;
   };
 
   const supportedOSs: DownloadLink[] = [
@@ -63,15 +68,19 @@ const getDownloadLinks = (assets: Assets[]): DownloadLinks => {
 
 const loadInitialData = async (): Promise<HeroData> => {
   try {
-    const response = await fetch(REPO_API_URL);
-    const data = await response.json();
-    const parsedDate = parseISO(data.published_at.slice(0, -1));
-    const downloadLinks = getDownloadLinks(data.assets);
+    const latestRelease = await octokit.rest.repos.getLatestRelease({
+      owner: siteMetadata.repo.owner,
+      repo: siteMetadata.repo.name,
+    });
+
+    const downloadLinks = getDownloadLinks(latestRelease.data.assets);
 
     return {
       downloadLinks,
-      version: data.tag_name,
-      releaseDate: format(parsedDate, 'dd/MM/yyyy'),
+      version: latestRelease.data.name,
+      releaseDate: latestRelease.data.published_at
+        ? format(latestRelease.data.published_at, 'dd/MM/yyyy')
+        : '',
     };
   } catch (error) {
     return {
@@ -88,30 +97,33 @@ const loadInitialData = async (): Promise<HeroData> => {
 const { downloadLinks, version, releaseDate } = await loadInitialData();
 ---
 
-<div class={releaseDetailsClassName}>
+<div class="text-sm mt-4">
   {
     version ? (
       <>
         <div class="sm:flex md:grid md:grid-cols-2">
-          {downloadLinks.primary.map((item, index) => (
+          {downloadLinks.primary.map((item) => (
             <a
               href={item.url}
               class={`flex items-center mb-3 px-4 py-3 font-semibold text-white rounded-md bg-green-700 hover:bg-green-800 hover:text-white mr-4`}
             >
-              <DownloadIcon className="w-4 h-4 mr-2" /> <span>{item.name}</span>
+              <div class="flex flex-row gap-2 items-center">
+                <Icon name="mdi:cloud-download" size={24} />
+                <span>{item.name}</span>
+              </div>
             </a>
           ))}
         </div>
         <div class="w-80">
-          <p>Latest version: <a href={REPO_RELEASES_URL}>{version}</a></p>
+          <p>Latest version: <a href={URLs.GITHUB.LATEST_RELEASE}>{version}</a></p>
           <p class="mt-1">Released on: {releaseDate}</p>
           {downloadLinks.alt.length > 0 && (
             <p class="mt-1">
               Also available on:
                 <ul class="list-disc list-inside ml-4">
-                  {downloadLinks.alt.map((platform, index) => (
+                  {downloadLinks.alt.map((platform) => (
                     <li>
-                      <a href={platform.url || REPO_RELEASES_URL}>
+                      <a href={platform.url || URLs.GITHUB.LATEST_RELEASE}>
                         {platform.name}
                       </a>
                     </li>
@@ -126,10 +138,12 @@ const { downloadLinks, version, releaseDate } = await loadInitialData();
         <div class="flex">
           <a
             class="flex items-center mb-3 px-4 py-3 font-semibold text-white rounded-md bg-green-700 hover:bg-green-800"
-            href={REPO_RELEASES_URL}
+            href={URLs.GITHUB.LATEST_RELEASE}
           >
-            <DownloadIcon className="w-4 h-4 mr-2" />{' '}
-            <span>View GitHub Releases</span>
+            <div class="flex flex-row gap-2 items-center">
+              <Icon name="mdi:cloud-download" size={24} />
+              <span>View GitHub Releases</span>
+            </div>
           </a>
         </div>
         <div>

src/components/Navbar.astro

@@ -1,6 +1,6 @@
 ---
 import { siteMetadata } from '~/constants';
-import GitHubIcon from '../icons/GitHub.astro';
+import GitHubRepo from './GitHubRepo.astro';
 import Logo from './Logo.astro';
 
 const { currentPathname } = Astro.props;
@@ -13,7 +13,7 @@ const isHomepage = currentPathname === '/';
       class="bg-navbar rounded-lg flex items-center justify-between px-8 lg:px-12 py-4 lg:py-6"
     >
       <div class="flex items-center flex-shrink-0 text-white mr-6">
-        <a href="/" aria-label="Gitify">
+        <a href="/" aria-label={siteMetadata.title}>
           <Logo className="w-8" />
         </a>
       </div>
@@ -38,15 +38,8 @@ const isHomepage = currentPathname === '/';
           }
 
           <li>
-            <a
-              class="flex flex-1 py-2 px-2 text-white hover:text-gray-300"
-              rel="noopener noreferrer"
-              href=`https://github.com/${siteMetadata.repo}`
-              aria-label="GitHub Repository"
-            >
-              <GitHubIcon className="w-6" />
-            </a>
-          </li>
+            <GitHubRepo />
+          </li> 
         </ul>
       </div>
     </div>

src/constants.ts

@@ -1,12 +1,18 @@
-export const SITE_URL = import.meta.env.SITE_URL || 'http://localhost:3000';
-
 export const siteMetadata = {
   title: 'Gitify',
-  description: 'Your GitHub notifications on your menu bar.',
-  repo: 'gitify-app/gitify',
+  url: 'https://gitify.io',
+  description: 'GitHub notifications on your menu bar',
+  repo: {
+    fullName: 'gitify-app/gitify',
+    owner: 'gitify-app',
+    name: 'gitify',
+  },
   keywords:
-    'gitify,desktop,application,github,notifications,unread,menu bar,electron,open source,ekonstantinidis,manosim,mac,osx,linux',
-  author: '@manosim_',
+    'gitify,desktop,application,github,notifications,unread,menu bar,electron,open source,mac,windows,linux',
+  google: {
+    analytics: 'G-QXML81DEDV',
+    siteVerification: 'jJNnPZ2wu7F1tlSab57og1N3RNrMqhzTCzRrbztY8WU',
+  },
   menuLinks: [
     {
       name: 'Home',
@@ -19,9 +25,10 @@ export const siteMetadata = {
   ],
 };
 
-export const manifest = {
-  name: 'Gitify',
-  short_name: 'starter',
-  themeColor: '#24292e',
-  display: 'minimal-ui',
+export const URLs = {
+  GITHUB: {
+    REPO: `https://github.com/${siteMetadata.repo.fullName}`,
+    ISSUES: `https://github.com/${siteMetadata.repo.fullName}/issues`,
+    LATEST_RELEASE: `https://github.com/${siteMetadata.repo.fullName}/releases/latest`,
+  },
 };