Merge pull request #5 from buggregator/feat/add-ssl-badge-to-footer

feat: add SSL grade badge to landing footer

Author: butschster

docker-compose.yml

@@ -35,6 +35,7 @@ services:
       NUXT_PUBLIC_TYPESENSE_PROTOCOL: ${TYPESENSE_PUBLIC_PROTOCOL:-http}
       NUXT_PUBLIC_TYPESENSE_SEARCH_KEY: ${TYPESENSE_SEARCH_KEY:-buggregator-search-key}
       NUXT_PUBLIC_TYPESENSE_COLLECTION: ${TYPESENSE_COLLECTION:-buggregator_docs}
+      NUXT_PUBLIC_CRT_BADGE_ID: ${PUBLIC_CRT_BADGE_ID:-}
       NUXT_EXAMPLES_URL: http://buggregator-examples:8000
     labels:
       - "traefik.enable=true"
@@ -66,6 +67,12 @@ services:
     image: ghcr.io/buggregator/docs:latest
     ports:
       - ${BUGGREGATOR_DOCS_PORT_HTTP:-7073}:80
+    environment:
+      TYPESENSE_UPSTREAM: http://typesense:8108
+      TYPESENSE_COLLECTION: ${TYPESENSE_COLLECTION:-buggregator_docs}
+      TYPESENSE_API_KEY: ${TYPESENSE_SEARCH_KEY:-buggregator-search-key}
+    depends_on:
+      - typesense
     networks:
       - buggregator-network
 
@@ -88,7 +95,7 @@ services:
 
   # ── Buggregator Examples (Demo event sender) ────────────────
   buggregator-examples:
-    image: ghcr.io/buggregator/examples:1.7.1
+    image: ghcr.io/buggregator/examples:1.8.0
     environment:
       APP_NAME: Laravel
       APP_ENV: production
@@ -125,6 +132,7 @@ services:
       BUGGREGATOR_URL: ${BUGGREGATOR_URL:-https://test.buggregator.dev}
       HTTP_DUMP_ENDPOINT: http://http-dump@buggregator:8000
       SMS_ENDPOINT: http://buggregator:8000/sms
+      BUGGREGATOR_PROXY_URL: http://buggregator:8080
     labels:
       - "traefik.enable=true"
       - "traefik.http.routers.buggregator-examples.rule=Host(`examples.app.localhost`)"

frontend/app/components/layout/AppFooter.vue

@@ -2,7 +2,7 @@
 import logoSvg from '~/assets/img/logo.svg'
 
 const { t } = useI18n()
-const { discordUrl } = useRuntimeConfig().public
+const { discordUrl, crtBadgeId } = useRuntimeConfig().public
 
 const productLinks = [
   { label: 'footer.links.docs', href: 'https://docs.buggregator.dev' },
@@ -133,6 +133,14 @@ const resourceLinks = [
         </a>
 
         <div class="flex items-center gap-4 text-on-dark-muted">
+          <a
+            v-if="crtBadgeId"
+            :href="`https://crt.guru/badge/${crtBadgeId}`"
+            target="_blank"
+            rel="noopener"
+          >
+            <img :src="`https://crt.guru/badge/${crtBadgeId}/shield.svg`" alt="SSL Grade" class="h-5" />
+          </a>
           <span class="font-mono text-[10px]">
             Built with <a href="https://wippy.ai" target="_blank" rel="noopener" class="text-on-dark-secondary hover:text-white transition-colors no-underline">Wippy</a>
           </span>

frontend/app/components/sections/ReplacesSection.vue

@@ -5,15 +5,15 @@ const { t } = useI18n()
 const revealRef = ref<InstanceType<typeof RevealWords>>()
 
 const tools = [
-  { key: 'sentry', tool: 'Sentry (local)', color: '#f43f5e' },
-  { key: 'mailhog', tool: 'Mailhog / Mailtrap', color: '#f59e0b' },
+  { key: 'sentry', tool: 'Sentry (local)', color: '#f43f5e', link: '/features/sentry' },
+  { key: 'mailhog', tool: 'Mailhog / Mailtrap', color: '#f59e0b', link: '/features/email-testing' },
   { key: 'ray', tool: 'Ray', color: '#06b6d4' },
-  { key: 'blackfire', tool: 'Blackfire / XHProf UI', color: '#8b5cf6' },
+  { key: 'blackfire', tool: 'Blackfire / XHProf UI', color: '#8b5cf6', link: '/features/profiler' },
   { key: 'logviewers', tool: 'Log viewers', color: '#6b7280' },
   { key: 'requestbin', tool: 'RequestBin', color: '#22c55e' },
   { key: 'inspector', tool: 'Inspector.dev (local)', color: '#eab308' },
-  { key: 'smsgateway', tool: 'SMS gateways (dev)', color: '#a855f7' },
-  { key: 'proxy', tool: 'Charles / Fiddler / mitmproxy', color: '#10b981' },
+  { key: 'smsgateway', tool: 'SMS gateways (dev)', color: '#a855f7', link: '/features/sms' },
+  { key: 'proxy', tool: 'Charles / Fiddler / mitmproxy', color: '#10b981', link: '/features/http-proxy' },
 ]
 </script>
 
@@ -40,17 +40,23 @@ const tools = [
       </div>
 
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        <div
+        <component
+          :is="item.link ? 'NuxtLink' : 'div'"
           v-for="item in tools"
           :key="item.key"
-          class="flex items-center gap-3 p-4 rounded-xl bg-landing-surface border border-landing-border-subtle"
+          :to="item.link || undefined"
+          class="flex items-center gap-3 p-4 rounded-xl bg-landing-surface border border-landing-border-subtle no-underline"
+          :class="item.link ? 'hover:border-landing-border hover:bg-landing-elevated transition-colors duration-150 cursor-pointer' : ''"
         >
           <span class="w-2.5 h-2.5 rounded-full shrink-0" :style="{ background: item.color }" />
-          <div class="min-w-0">
+          <div class="min-w-0 flex-1">
             <p class="text-sm font-medium text-on-dark-secondary font-sans line-through opacity-50">{{ item.tool }}</p>
             <p class="text-sm text-on-dark-secondary font-sans">{{ t(`replaces.tools.${item.key}`) }}</p>
           </div>
-        </div>
+          <svg v-if="item.link" class="w-4 h-4 text-on-dark-muted shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </component>
       </div>
 
       <p class="text-center mt-10 text-lg font-semibold text-white font-sans">

frontend/nuxt.config.ts

@@ -28,6 +28,7 @@ export default defineNuxtConfig({
 
     public: {
       gaMeasurementId: process.env.PUBLIC_GA_MEASUREMENT_ID || '',
+      crtBadgeId: process.env.PUBLIC_CRT_BADGE_ID || '',
       appUrl: process.env.PUBLIC_APP_URL || '',
       siteUrl: process.env.SITE_URL || 'https://buggregator.dev',
       discordUrl: process.env.DISCORD_URL || 'https://discord.gg/uxr5gw2p',