feat: [LAR-106] add github repositories on the homepage (#262)

Author: mckenziearts

.env.example

@@ -74,7 +74,7 @@ MEDIA_DISK=media
 FILAMENT_FILESYSTEM_DISK=${MEDIA_DISK}
 
 SENTRY_LARAVEL_DSN=
-SENTRY_TRACES_SAMPLE_RATE=
+SENTRY_TRACES_SAMPLE_RATE=1.0
 
 NOTCHPAY_PUBLIC_KEY=
 
@@ -85,3 +85,5 @@ TWITTER_ACCESS_SECRET=your-access-token-secret
 
 GOOGLE_RECAPTCHA_SITE_KEY=your-recaptcha-site-key
 GOOGLE_RECAPTCHA_SECRET_KEY=your-secret-key
+
+GITHUB_FINE_GRAINED_TOKEN=

app/Actions/GetGithubRepositoriesAction.php

@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions;
+
+use App\Data\RepositoryData;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
+
+final class GetGithubRepositoriesAction
+{
+    public function __invoke(): Collection
+    {
+        $response = Http::withToken(config('services.github.token'))
+            ->get('https://api.github.com/orgs/laravelcm/repos');
+
+        if (Cache::has('github-repositories')) {
+            return Cache::get('github-repositories');
+        }
+
+        $only = [
+            'laravel-subscriptions',
+            'livewire-slide-overs',
+            'abstract-ip-geolocation',
+            'angular-admin-panel',
+        ];
+
+        return Cache::remember(
+            key: 'github-repositories',
+            ttl: now()->addWeek(),
+            callback: fn () => collect($response->json())
+                ->reject(fn (array $value) => $value['fork'] === true || ! in_array($value['name'], $only))
+                ->map(fn (array $data) => RepositoryData::from($data))
+        );
+    }
+}

app/Data/RepositoryData.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Data;
+
+use Spatie\LaravelData\Data;
+
+final class RepositoryData extends Data
+{
+    public function __construct(
+        public string $name,
+        public string $html_url,
+        public int $stargazers_count = 0,
+        public int $download = 0,
+        public ?string $description = null,
+    ) {}
+}

config/services.php

@@ -36,6 +36,7 @@
         'client_id' => env('GITHUB_CLIENT_ID'),
         'client_secret' => env('GITHUB_CLIENT_SECRET'),
         'redirect' => env('GITHUB_REDIRECT'),
+        'token' => env('GITHUB_FINE_GRAINED_TOKEN'),
         'scopes' => [],
         'with' => [],
     ],

lang/en/global.php

@@ -103,5 +103,6 @@
     'characters' => ':number characters',
     'like' => ':count like',
     'locale_help' => 'The language in which your content will be available on the site.',
+    'community_oss_description' => 'The community is also developing open source packages to contribute to the Laravel ecosystem.',
 
 ];

lang/fr/global.php

@@ -103,5 +103,6 @@
     'characters' => ':number caractères',
     'like' => ':count j\'aime',
     'locale_help' => 'La langue dans laquelle votre contenu sera accessible sur le site.',
+    'community_oss_description' => 'La communauté développe aussi des packages open source pour contribuer à l\'ecosystème de Laravel.',
 
 ];

resources/views/components/repository.blade.php

@@ -0,0 +1,43 @@
+@props([
+    'repository',
+])
+
+<li class="group relative flex flex-col items-start isolate">
+    <div class="relative z-10 flex size-12 items-center justify-center rounded-full bg-white shadow-md shadow-gray-800/5 ring-1 ring-gray-900/5 dark:border dark:border-white/10 dark:bg-gray-800 dark:ring-0">
+        <x-icon.github class="size-8" aria-hidden="true" />
+    </div>
+    <h2 class="mt-6 text-base font-semibold text-gray-800 dark:text-gray-100">
+        <div class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-white opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 rounded-2xl dark:bg-gray-800"
+        ></div>
+        <a href="{{ $repository->html_url }}" target="_blank">
+            <span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 rounded-2xl"></span>
+            <span class="relative inline-flex items-center gap-2 z-10">
+                {{ $repository->name }}
+                <span class="inline-flex items-center pointer-events-none rounded-full bg-gray-50 p-1.5 text-gray-500 dark:bg-white/10 dark:text-gray-300">
+                    <svg
+                        class="size-3 transition duration-300 ease-in-out group-hover:rotate-45"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                    >
+                        <path
+                            d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"
+                        />
+                    </svg>
+                </span>
+            </span>
+        </a>
+    </h2>
+    <p class="relative z-10 mt-2 text-sm text-gray-600 dark:text-gray-400">
+        {{ $repository->description }}
+    </p>
+    <p class="relative z-10 mt-6 flex text-sm text-gray-400 transition group-hover:text-primary-500 dark:text-gray-200">
+        <svg viewBox="0 0 24 24" aria-hidden="true" class="size-6 flex-none">
+            <path
+                d="M15.712 11.823a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm-4.95 1.768a.75.75 0 0 0 1.06-1.06l-1.06 1.06Zm-2.475-1.414a.75.75 0 1 0-1.06-1.06l1.06 1.06Zm4.95-1.768a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm3.359.53-.884.884 1.06 1.06.885-.883-1.061-1.06Zm-4.95-2.12 1.414-1.415L12 6.344l-1.415 1.413 1.061 1.061Zm0 3.535a2.5 2.5 0 0 1 0-3.536l-1.06-1.06a4 4 0 0 0 0 5.656l1.06-1.06Zm4.95-4.95a2.5 2.5 0 0 1 0 3.535L17.656 12a4 4 0 0 0 0-5.657l-1.06 1.06Zm1.06-1.06a4 4 0 0 0-5.656 0l1.06 1.06a2.5 2.5 0 0 1 3.536 0l1.06-1.06Zm-7.07 7.07.176.177 1.06-1.06-.176-.177-1.06 1.06Zm-3.183-.353.884-.884-1.06-1.06-.884.883 1.06 1.06Zm4.95 2.121-1.414 1.414 1.06 1.06 1.415-1.413-1.06-1.061Zm0-3.536a2.5 2.5 0 0 1 0 3.536l1.06 1.06a4 4 0 0 0 0-5.656l-1.06 1.06Zm-4.95 4.95a2.5 2.5 0 0 1 0-3.535L6.344 12a4 4 0 0 0 0 5.656l1.06-1.06Zm-1.06 1.06a4 4 0 0 0 5.657 0l-1.061-1.06a2.5 2.5 0 0 1-3.535 0l-1.061 1.06Zm7.07-7.07-.176-.177-1.06 1.06.176.178 1.06-1.061Z"
+                fill="currentColor"
+            />
+        </svg>
+        <span class="ml-2">github.com</span>
+    </p>
+</li>

resources/views/home.blade.php

@@ -46,7 +46,7 @@ class="inline-flex items-center rounded-full bg-green-700 p-1 pr-2 text-white sm
     </div>
 
     <x-container>
-        <div class="divide-y divide-skin-base">
+        <div class="divide-y divide-gray-200 dark:divide-white/10">
             <div class="py-12 lg:py-20">
                 <x-section-header
                     :title="__('pages/home.popular_posts.title')"
@@ -251,4 +251,6 @@ class="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black xl:inset-y-0 xl
             </div>
         </div>
     </div>
+
+    <livewire:components.github-repositories />
 </x-app-layout>

resources/views/livewire/components/discussion/comment.blade.php

@@ -28,7 +28,7 @@ class="text-xs capitalize leading-5 text-gray-500 dark:text-gray-400"
                 @can('delete', $comment)
                     <div class="mt-1 flex sm:mt-0">
                         <span class="hidden font-medium text-gray-500 dark:text-gray-400 sm:inline-block">·</span>
-                        <div class="flex items-center space-x-2 divide-x divide-skin-base pl-2">
+                        <div class="flex items-center space-x-2 divide-x divide-gray-200 dark:divide-white/10 pl-2">
                             <button
                                 type="button"
                                 wire:click="delete"

resources/views/livewire/components/github-repositories.blade.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Actions\GetGithubRepositoriesAction;
+
+use function Livewire\Volt\{computed};
+
+$repositories = computed(fn () => app()->call(GetGithubRepositoriesAction::class));
+
+?>
+
+<x-container class="relative py-12 space-y-12 lg:py-20 lg:space-y-16">
+    <div>
+        <div class="shrink-0 flex items-center gap-2">
+            <span
+                class="inline-flex items-center justify-center rounded-full p-2 ring-1 ring-black/5 dark:ring-white/10"
+            >
+                <x-icon.tags.open-source class="size-6" aria-hidden="true" />
+            </span>
+            <h2 class="font-heading font-bold text-zinc-900 text-2xl dark:text-white lg:text-3xl">Open source</h2>
+        </div>
+        <p class="mt-4 max-w-2xl text-gray-500 dark:text-gray-400">
+            {{ __('global.community_oss_description') }}
+        </p>
+    </div>
+    <div class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
+        @foreach($this->repositories->sortByDesc('stargazers_count') as $repository)
+            <x-repository :repository="$repository" />
+        @endforeach
+    </div>
+</x-container>

resources/views/livewire/markdown-x.blade.php

@@ -1807,7 +1807,7 @@ function (e) {
             window.addEventListener('markdown-x-peoples-results', (event) => {
                 let peoplesResults = event.detail.results
 
-                let peopleContents = `<ul role="list" class="divide-y divide-skin-base">`
+                let peopleContents = `<ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">`
                 for (let i = 0; i < peoplesResults.length; i++) {
                     peopleContents += `<li class="p-3 group hover:bg-skin-primary">
                     <button type="button" onclick="addAdditionalContent('@${peoplesResults[i]['username']}', '${event.detail.key}')" class="flex items-center w-full">