Add overlay category to integrations

scripts/integrations.json

@@ -17,6 +17,9 @@
     },
     "performance+seo": {
       "keywords": ["seo", "performance", "perf", "optimization"]
+    },
+    "devtools": {
+      "keywords": ["devtools", "dev-overlay"]
     }
   },
   "featured": [
@@ -39,6 +42,13 @@
     "@astropub/icons",
     "astro-json-element"
   ],
+  "overlay": [
+    "@astrojs/tailwind",
+    "@astrojs/sitemap",
+    "@astrojs/mdx",
+    "astro-compress",
+    "@storyblok/astro"
+  ],
   "allowlist": [],
   "blocklist": [
     "@astrojs/turbolinks",

scripts/integrations.mjs

@@ -64,3 +64,8 @@ export function getFeaturedPackagePriority(pkg) {
 	const index = integrations.featured.indexOf(pkg) + 1
 	return index > 0 ? index : undefined
 }
+
+export function getOverlayPackagePriority(pkg) {
+	const index = integrations["overlay"].indexOf(pkg) + 1
+	return index > 0 ? index : undefined
+}

scripts/update-integrations.mjs

@@ -11,6 +11,7 @@ import {
 	blocklist,
 	getCategoriesForKeyword,
 	getFeaturedPackagePriority,
+	getOverlayPackagePriority,
 	getOverrides,
 	isNewPackage,
 } from "./integrations.mjs"
@@ -44,10 +45,12 @@ function normalizePackageDetails(data, pkg) {
 	const keywordCategories = (data.keywords ?? []).map(getCategoriesForKeyword).flat()
 
 	const featured = getFeaturedPackagePriority(pkg)
+	const overlay = getOverlayPackagePriority(pkg)
 
 	const otherCategories = [
 		isOfficial(pkg) ? "official" : undefined,
 		featured ? "featured" : undefined,
+		overlay ? "devtools" : undefined,
 		isNewPackage(data) ? "recent" : undefined,
 	].filter(Boolean)
 
@@ -77,13 +80,15 @@ async function fetchWithOverrides(pkg) {
 	const downloads = await fetchDownloadsForPackage(pkg)
 	const badge = badgeForPackage(details)
 	const featured = getFeaturedPackagePriority(pkg)
+	const overlay = getOverlayPackagePriority(pkg)
 
 	return {
 		...normalizePackageDetails(details, pkg),
 		...integrationOverrides,
 		downloads,
 		badge,
 		featured,
+		overlay,
 	}
 }
 

src/content/config.ts

@@ -11,6 +11,7 @@ export const IntegrationCategories = new Map([
 	["performance+seo", "Performance + SEO"],
 	["analytics", "Analytics"],
 	["accessibility", "Accessibility"],
+	["devtools", "Developer Tools"],
 ] as const)
 
 export const ThemeCategories = new Map([

src/content/integrations/@astrojsmdx.md

@@ -6,6 +6,7 @@ categories:
   - "css+ui"
   - "official"
   - "featured"
+  - "devtools"
 npmUrl: "https://www.npmjs.com/package/@astrojs/mdx"
 image: "/assets/integrations/mdx.svg"
 repoUrl: "https://github.com/withastro/astro"
@@ -14,4 +15,5 @@ homepageUrl: "https://docs.astro.build/en/guides/integrations-guide/mdx/"
 downloads: 174294
 badges:
   - "featured"
+overlay: 3
 ---

src/content/integrations/@astrojssitemap.md

@@ -7,6 +7,7 @@ categories:
   - "performance+seo"
   - "official"
   - "featured"
+  - "devtools"
 npmUrl: "https://www.npmjs.com/package/@astrojs/sitemap"
 image: "/assets/integrations/sitemap.svg"
 repoUrl: "https://github.com/withastro/astro"
@@ -15,4 +16,5 @@ homepageUrl: "https://docs.astro.build/en/guides/integrations-guide/sitemap/"
 downloads: 185031
 badges:
   - "featured"
+overlay: 2
 ---

src/content/integrations/@astrojstailwind.md

@@ -6,12 +6,14 @@ categories:
   - "css+ui"
   - "official"
   - "featured"
+  - "devtools"
 npmUrl: "https://www.npmjs.com/package/@astrojs/tailwind"
 image: "/assets/integrations/tailwind.svg"
 repoUrl: "https://github.com/withastro/astro"
 featured: 1
 homepageUrl: "https://docs.astro.build/en/guides/integrations-guide/tailwind/"
-downloads: 289876
+downloads: 299128
 badges:
   - "featured"
+overlay: 1
 ---

src/content/integrations/@storyblokastro.md

@@ -5,12 +5,14 @@ description: "Official Astro integration for the Storyblok Headless CMS"
 categories:
   - "css+ui"
   - "featured"
+  - "devtools"
 npmUrl: "https://www.npmjs.com/package/@storyblok/astro"
 image: "/assets/integrations/storyblok.svg"
 repoUrl: "https://github.com/storyblok/storyblok-astro"
 featured: 5
 homepageUrl: "https://github.com/storyblok/storyblok-astro"
-downloads: 5917
+downloads: 6335
 badges:
   - "featured"
+overlay: 5
 ---

src/content/integrations/astro-compress.md

@@ -6,12 +6,14 @@ categories:
   - "css+ui"
   - "performance+seo"
   - "featured"
+  - "devtools"
 npmUrl: "https://www.npmjs.com/package/astro-compress"
 image: "/assets/integrations/astro-compress.svg"
 repoUrl: "https://github.com/astro-community/AstroCompress"
 featured: 4
 homepageUrl: "https://github.com/astro-community/AstroCompress#readme"
-downloads: 39781
+downloads: 40181
 badges:
   - "featured"
+overlay: 4
 ---

src/content/integrations/astro-imagetools.md

@@ -10,7 +10,7 @@ npmUrl: "https://www.npmjs.com/package/astro-imagetools"
 repoUrl: "https://github.com/RafidMuhymin/astro-imagetools"
 featured: 2
 homepageUrl: "https://github.com/RafidMuhymin/astro-imagetools#readme"
-downloads: 10508
+downloads: 10737
 badges:
   - "featured"
 ---

src/data/last-modified.json

@@ -1,3 +1,3 @@
 {
-  "integrations": "Tue, 14 Nov 2023 00:00:00 GMT"
+  "integrations": "Fri, 17 Nov 2023 17:32:02 GMT"
 }

src/helpers/integrations.ts

@@ -5,17 +5,22 @@ import type { MapKeys } from "./types.ts"
 export interface IntegrationOptions {
 	search?: string | null
 	categories?: MapKeys<typeof IntegrationCategories> | null
+	overlay?: boolean
 }
 
 export async function getFilteredIntegrations(options: IntegrationOptions = {}) {
-	const { categories: selectedCategories = [], search } = options
+	const { categories: selectedCategories = [], overlay = false, search } = options
 	const searchRegex = search && new RegExp(search, "i")
 	function integrationsFilter(integration: CollectionEntry<"integrations">) {
+		// Overlay doesn't support categories or search (for now)
+		if (overlay) {
+			return integration.data.categories.some((c) => c === "overlay")
+		}
 		// if at least one category filter is applied, hide integrations that don't match
 		if (selectedCategories && selectedCategories.length > 0) {
 			if (
 				!integration.data.categories.some((c) =>
-					selectedCategories.includes(c as (typeof selectedCategories)[number]),
+					selectedCategories.includes(c as MapKeys<typeof IntegrationCategories>[number]),
 				)
 			) {
 				return false

src/pages/api/v1/dev-overlay/[...page].ts

@@ -0,0 +1,45 @@
+import type { APIRoute } from "astro"
+import { integrations as LAST_MODIFIED } from "~/data/last-modified.json"
+import { getFilteredIntegrations } from "~/helpers/integrations.ts"
+
+export const prerender = false
+
+const headers = {
+	accept: "application/json",
+	"cache-control": "public,max-age=604800,s-max-age=604800,stale-while-revalidate=86400",
+	"last-modified": LAST_MODIFIED,
+	"Access-Control-Allow-Credentials": "true",
+	"Access-Control-Allow-Origin": "*",
+	"Access-Control-Allow-Methods": "GET,OPTIONS,HEAD",
+	"Access-Control-Allow-Headers":
+		"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, If-Modified-Since, X-Api-Version",
+}
+
+export const HEAD: APIRoute = (ctx) => {
+	const modified = ctx.request.headers.get("If-Modified-Since")
+	if (modified === LAST_MODIFIED) {
+		return new Response(null, { status: 304 })
+	}
+	return Response.json(null, { headers })
+}
+
+export const GET: APIRoute = async (ctx) => {
+	const modified = ctx.request.headers.get("If-Modified-Since")
+	if (modified === LAST_MODIFIED) {
+		return new Response(null, { status: 304 })
+	}
+	const filteredIntegrations = await getFilteredIntegrations({ overlay: true })
+
+	const responseData = {
+		data: filteredIntegrations.map(({ data }) => {
+			if (data.image) data.image = new URL(data.image, ctx.url).toString()
+			return data
+		}),
+	}
+
+	return Response.json(responseData, { headers })
+}
+
+export const ALL: APIRoute = ({ request }) => {
+	return Response.json({ error: `${request.method} not allowed` }, { status: 405 })
+}