Feature/popular tutorials UI

[Coffee8848]

Description

Introduce “Popular Tutorials” feature (Phase 1) with:

• API endpoint top-docs.ts providing unified data contract.
• GA4 integration scaffold (server-side fetch with dynamic import + fallback).
• Mock dataset fallback when GA4 env not provided.
• Supports query params: limit, source=ga4|mock|auto, host (host filters GA4 results only).
• Normalized response shape with meta.source, meta.returned, meta.ismock.

Motivation: Establish stable backend contract + future-ready analytics abstraction without blocking on credentials.

Type of change

• New feature (non-breaking change which adds functionality)
• Bug fix
• Breaking change
• Documentation

How Has This Been Tested?

Manual local verification (mock mode):

1. Started dev server without GA4 env vars → returns mock data with meta.source=mock.
2. Hit /api/top-docs?limit=3 and /api/top-docs?limit=12.
3. Forced GA4 path via source=ga4 (falls back cleanly when env absent).
4. Verified JSON structure: items[] + meta.
5. Checked edge: invalid/large limit auto clamped.

(No GA4 live credential test included in this PR.)

Testing Checklist

• Tested in latest Chrome (API responses)
• Tested in latest Firefox
• npm run build
• npm run preview

Checklist

If involving code

• Code follows project style
• Self-review completed
• Added comments in non-trivial areas
• Documentation updated (planned next PR)
• No new warnings

If modified config files

• package.json
• astro.config.mjs
• netlify.toml
• docker-compose.yml
• custom.css

(No config file changes in this PR.)

Folders and Files Added/Modified

Added:

• (None in this PR scope if component already merged elsewhere)

Modified:

• top-docs.ts

Additional Notes

Planned follow-ups:

• Enable GA4 with real credentials
• Add caching (TTL)
• UI indicator of data source
• README / docs update
• Weighted ranking logic

Let me know if you want a shorter variant or need to add the component file to “Added” before submitting.# Description

Please include a summary of the changes and the related issue. Please also include relevant
motivation and context. List any dependencies that are required for this change.

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as
  expected)
• Documentation (update or new)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can
reproduce. Please also list any relevant details for your test configuration.

Testing Checklist

• Tested in latest Chrome
• Tested in latest Firefox
• npm run build
• npm run preview

Checklist

Please delete options that are not relevant.

If involving code

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

If modified config files

• I have checked the following files for changes:
  • package.json
  • astro.config.mjs
  • netlify.toml
  • docker-compose.yml
  • custom.css

Folders and Files Added/Modified

Please list the folders and files added/modified with this pull request and delete options that are not relevant.

• Added:
  • folder/folder
  • folder/folder
• Modified:
  • folder/file
  • folder/file

Additional Notes

Please add any additional information that might be useful for the reviewers.

[netlify]

✅ Deploy Preview for splashkit ready!

Name	Link
🔨 Latest commit	853a548
🔍 Latest deploy log	https://app.netlify.com/projects/splashkit/deploys/68d8902d17ff9400089750a0
😎 Deploy Preview	https://deploy-preview-665--splashkit.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.