filter by multiple languages or none and include more info in list (#643)

davemooreuws · web-flow · commit b0559aeb54be · 2024-10-16T18:29:12.000+11:00
diff --git a/.spellcheckerrc.yml b/.spellcheckerrc.yml
@@ -4,8 +4,12 @@ dictionaries:
   - dictionary.txt
 quiet: true
 language: en-US
+frontmatter-keys:
+  - description
+  - title_seo
 plugins:
   - spell
   - syntax-urls
   - syntax-mentions
   - repeated-words
+  - frontmatter
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -39,6 +39,13 @@ const Doc = defineDocumentType(() => ({
       },
       description: 'The tags of the post, used by guides',
     },
+    languages: {
+      type: 'list',
+      of: {
+        type: 'string',
+      },
+      description: 'The languages of the content, used by guides',
+    },
   },
   computedFields: {
     slug: {
diff --git a/dictionary.txt b/dictionary.txt
@@ -217,10 +217,13 @@ misconfigurations
 DSL
 UI
 init
+.env
+.mkv
+.jpg
+.pdf
 
 ^.+[-:_]\w+$
 [a-z]+([A-Z0-9]|[A-Z0-9]\w+)
 ([A-Z][a-z0-9]+)((\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?
 ([a-zA-Z0-9]+\.[a-zA-Z0-9]+)+
-\..+
-️
+\..+️
diff --git a/docs/guides/dart/serverless-rest-api-example.mdx b/docs/guides/dart/serverless-rest-api-example.mdx
@@ -4,6 +4,8 @@ title_seo: Building your first API with Dart and Nitric
 tags:
   - API
   - Key Value Store
+languages:
+  - dart
 ---
 
 # Building a REST API with Nitric
diff --git a/docs/guides/go/realtime-messaging.mdx b/docs/guides/go/realtime-messaging.mdx
@@ -3,6 +3,8 @@ description: Use the Nitric framework to easily build and deploy Go WebSocket ap
 tags:
   - Realtime & Websockets
   - Key Value Store
+languages:
+  - go
 ---
 
 # Building a chat app in Go with WebSockets and Nitric
diff --git a/docs/guides/go/serverless-rest-api-example.mdx b/docs/guides/go/serverless-rest-api-example.mdx
@@ -4,6 +4,8 @@ title_seo: Building your first API with Go and Nitric
 tags:
   - API
   - Key Value Store
+languages:
+  - go
 ---
 
 # Building your first API with Nitric
diff --git a/docs/guides/nodejs/amazon-cognito.mdx b/docs/guides/nodejs/amazon-cognito.mdx
@@ -4,6 +4,9 @@ tags:
   - Authentication
   - API
   - AWS
+languages:
+  - typescript
+  - javascript
 ---
 
 # Securing APIs with Amazon Cognito
diff --git a/docs/guides/nodejs/api-with-nextjs.mdx b/docs/guides/nodejs/api-with-nextjs.mdx
@@ -3,6 +3,9 @@ description: 'Build a serverless backend for your Next.js app using Nitric frame
 tags:
   - Frontend
   - API
+languages:
+  - typescript
+  - javascript
 ---
 
 # Next.js and Nitric example application
diff --git a/docs/guides/nodejs/byo-database.mdx b/docs/guides/nodejs/byo-database.mdx
@@ -2,6 +2,9 @@
 description: 'How to work with existing databases'
 tags:
   - Databases & CMS
+languages:
+  - typescript
+  - javascript
 ---
 
 # BYO Database
diff --git a/docs/guides/nodejs/debugging.mdx b/docs/guides/nodejs/debugging.mdx
@@ -2,6 +2,9 @@
 description: Experience real-time updates, API exploration, and schedule debugging in Nitric's local development dashboard.
 tags:
   - Local Development
+languages:
+  - typescript
+  - javascript
 ---
 
 # Debugging with Nitric
diff --git a/docs/guides/nodejs/expressjs.mdx b/docs/guides/nodejs/expressjs.mdx
@@ -3,6 +3,9 @@ description: 'How to build an Express.js application with Nitric'
 tags:
   - API
   - HTTP Proxy
+languages:
+  - typescript
+  - javascript
 ---
 
 # Enhance Express.js Apps with Cloud Resources
diff --git a/docs/guides/nodejs/fastify.mdx b/docs/guides/nodejs/fastify.mdx
@@ -3,6 +3,9 @@ description: 'How to build a Fastify application with Nitric'
 tags:
   - API
   - HTTP Proxy
+languages:
+  - typescript
+  - javascript
 ---
 
 # Add Cloud Resources to Fastify Apps
diff --git a/docs/guides/nodejs/graphql.mdx b/docs/guides/nodejs/graphql.mdx
@@ -3,6 +3,9 @@ description: Use the Nitric framework to easily build and deploy a serverless No
 title_seo: Building a GraphQL API with Node.js and Nitric
 tags:
   - API
+languages:
+  - typescript
+  - javascript
 ---
 
 # Building a GraphQL API with Nitric
diff --git a/docs/guides/nodejs/nestjs.mdx b/docs/guides/nodejs/nestjs.mdx
@@ -4,6 +4,9 @@ tags:
   - API
   - HTTP Proxy
   - Key Value Store
+languages:
+  - typescript
+  - javascript
 ---
 
 # Nest.js integration with Nitric
diff --git a/docs/guides/nodejs/nitric-and-drizzle.mdx b/docs/guides/nodejs/nitric-and-drizzle.mdx
@@ -3,6 +3,9 @@ description: 'How to work with Nitric SQL Databases and Drizzle'
 tags:
   - Databases & CMS
   - ORMs
+languages:
+  - typescript
+  - javascript
 ---
 
 # Nitric SQL Databases with Drizzle
diff --git a/docs/guides/nodejs/nitric-and-prisma.mdx b/docs/guides/nodejs/nitric-and-prisma.mdx
@@ -3,6 +3,9 @@ description: 'How to work with Nitric SQL Databases and Prisma'
 tags:
   - Databases & CMS
   - ORMs
+languages:
+  - typescript
+  - javascript
 ---
 
 # Nitric SQL Databases with Prisma
diff --git a/docs/guides/nodejs/nitric-and-supabase.mdx b/docs/guides/nodejs/nitric-and-supabase.mdx
@@ -2,6 +2,9 @@
 description: 'Add services, queues, events or secrets to Supabase apps using the Nitric framework'
 tags:
   - Databases & CMS
+languages:
+  - typescript
+  - javascript
 ---
 
 # Extend Supabase Apps with Nitric
diff --git a/docs/guides/nodejs/secure-api-auth0.mdx b/docs/guides/nodejs/secure-api-auth0.mdx
@@ -2,6 +2,9 @@
 description: 'Configure an Auth0 application and secure your API with it'
 tags:
   - Authentication
+languages:
+  - typescript
+  - javascript
 ---
 
 # Securing your API with Auth0
diff --git a/docs/guides/nodejs/serverless-api-with-planetscale-and-prisma.mdx b/docs/guides/nodejs/serverless-api-with-planetscale-and-prisma.mdx
@@ -3,6 +3,9 @@ description: 'Use PlanetScale serverless database, Prisma ORM and Nitric framewo
 tags:
   - Databases & CMS
   - ORMs
+languages:
+  - typescript
+  - javascript
 ---
 
 # APIs with PlanetScale, Prisma and Nitric
diff --git a/docs/guides/nodejs/serverless-rest-api-example.mdx b/docs/guides/nodejs/serverless-rest-api-example.mdx
@@ -4,6 +4,9 @@ title_seo: Building your first API with Node.js and Nitric
 tags:
   - API
   - Key Value Store
+languages:
+  - typescript
+  - javascript
 ---
 
 # Building a REST API with Nitric
diff --git a/docs/guides/nodejs/stripe.mdx b/docs/guides/nodejs/stripe.mdx
@@ -3,6 +3,9 @@ description: 'Build a serverless application with Stripe and Nitric for AWS, Goo
 tags:
   - API
   - Payments
+languages:
+  - typescript
+  - javascript
 ---
 
 # Integrating Stripe with Nitric
diff --git a/docs/guides/nodejs/testing.mdx b/docs/guides/nodejs/testing.mdx
@@ -2,6 +2,9 @@
 description: 'How to test Nitric applications'
 tags:
   - Testing
+languages:
+  - typescript
+  - javascript
 ---
 
 # Testing
diff --git a/docs/guides/nodejs/twilio.mdx b/docs/guides/nodejs/twilio.mdx
@@ -3,6 +3,9 @@ description: 'Build a serverless application with Twilio and Nitric for AWS, Goo
 tags:
   - API
   - Messaging
+languages:
+  - typescript
+  - javascript
 ---
 
 # Integrating Twilio with Nitric
diff --git a/docs/guides/nodejs/uptime.mdx b/docs/guides/nodejs/uptime.mdx
@@ -2,6 +2,9 @@
 description: Learn how to develop an event-driven uptime monitoring tool using Node.js and Nitric.
 tags:
   - API
+languages:
+  - typescript
+  - javascript
 ---
 
 # Build an Uptime Monitoring Tool with Nitric
diff --git a/docs/guides/nodejs/websockets.mdx b/docs/guides/nodejs/websockets.mdx
@@ -2,6 +2,9 @@
 description: 'Getting started building realtime applications on Nitric'
 tags:
   - Realtime & Websockets
+languages:
+  - typescript
+  - javascript
 ---
 
 # Websockets guide
diff --git a/docs/guides/python/create-histogram.mdx b/docs/guides/python/create-histogram.mdx
@@ -3,6 +3,8 @@ description: 'Use the Nitric framework to easily build and deploy a serverless d
 tags:
   - API
   - Data Visualization
+languages:
+  - python
 ---
 
 # Building a data visualization API with Nitric
diff --git a/docs/guides/python/graphql.mdx b/docs/guides/python/graphql.mdx
@@ -3,6 +3,8 @@ description: 'Use the Nitric framework to easily build and deploy a serverless P
 title_seo: Building a GraphQL API with Python and Nitric
 tags:
   - API
+languages:
+  - python
 ---
 
 # Building a GraphQL API with Nitric
diff --git a/docs/guides/python/scheduled-report.mdx b/docs/guides/python/scheduled-report.mdx
@@ -5,6 +5,8 @@ tags:
   - API
   - Google
   - Schedules
+languages:
+  - python
 ---
 
 # Generate a report with Google Sheets and share it with Google Drive
diff --git a/docs/guides/python/serverless-rest-api-example.mdx b/docs/guides/python/serverless-rest-api-example.mdx
@@ -4,6 +4,8 @@ description: Use the Nitric framework to easily build and deploy Python REST API
 tags:
   - API
   - Key Value Store
+languages:
+  - python
 ---
 
 # Building your first API with Nitric
diff --git a/docs/guides/python/text-prediction.mdx b/docs/guides/python/text-prediction.mdx
@@ -2,6 +2,8 @@
 description: Use the Nitric framework and Tensorflow to easily train a prediction model and deploy to AWS, Google Cloud, or Azure
 tags:
   - AI & Machine Learning
+languages:
+  - python
 ---
 
 # Building serverless text prediction from training to deployment
diff --git a/docs/guides/terraform/terratest.mdx b/docs/guides/terraform/terratest.mdx
@@ -3,6 +3,8 @@ description: Use Terratest to validate the infrastructure of a Nitric Go project
 tags:
   - Terraform
   - Testing
+languages:
+  - go
 ---
 
 # Testing AWS resources with Terratest
diff --git a/package.json b/package.json
@@ -95,6 +95,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "prisma": "^5.20.0",
+    "remark-frontmatter": "^5.0.0",
     "sharp": "0.33.1",
     "spellchecker-cli": "^6.2.0"
   }
diff --git a/src/components/FeedbackForm.tsx b/src/components/FeedbackForm.tsx
@@ -72,14 +72,17 @@ const FeedbackForm = () => {
       >
         {choices.map(({ label, value, emoji }) => (
           <div key={value} className="group flex items-center">
-            <RadioGroupItem value={value} id={value} className="group">
-              <span className="mr-2 grayscale group-checked:grayscale-0 group-data-[state=checked]:grayscale-0">
+            <RadioGroupItem value={value} id={value} className="group flex">
+              <span className="mr-2 grayscale transition-all group-checked:grayscale-0 group-hover:grayscale-0 group-data-[state=checked]:grayscale-0">
                 {emoji}
               </span>
+              <Label
+                htmlFor={value}
+                className="cursor-pointer text-xs text-muted-foreground transition-colors group-hover:text-zinc-900 group-data-[state=checked]:text-zinc-900 dark:group-hover:text-white dark:group-data-[state=checked]:text-white"
+              >
+                {label}
+              </Label>
             </RadioGroupItem>
-            <Label htmlFor={value} className="cursor-pointer text-xs">
-              {label}
-            </Label>
           </div>
         ))}
       </RadioGroup>
diff --git a/src/components/LanguageSwitch/LanguageSwitch.client.tsx b/src/components/LanguageSwitch/LanguageSwitch.client.tsx
@@ -1,32 +1,39 @@
 'use client'
 
-import useLang, { LanguageId } from '@/hooks/useLang'
 import { cn } from '@/lib/utils'
 import React from 'react'
 import { Button } from '../ui/button'
+import { languages } from '@/lib/constants'
+import { LanguageIcon } from '../icons/LanguageIcon'
+import useParams from '@/hooks/useParams'
 
-export const LanguageSwitchClient = ({
-  languages,
-}: {
-  languages: { name: string; icon: React.ReactNode }[]
-}) => {
-  const { currentLanguage, setCurrentLanguage } = useLang()
+export const LanguageSwitchClient = () => {
+  const { setParams, searchParams } = useParams()
+  const selectedLangs = searchParams?.get('langs')?.split(',') || []
+
+  const handleLanguageChange = (lang: string) => {
+    if (!selectedLangs.includes(lang)) {
+      setParams('langs', [...selectedLangs, lang].join(','))
+    } else {
+      setParams(
+        'langs',
+        selectedLangs.filter((selected) => selected !== lang).join(','),
+      )
+    }
+  }
 
   return (
     <ul className="flex gap-x-4">
-      {languages.map(({ name, icon }) => (
+      {languages.map((name) => (
         <li
           key={name}
           className={cn(
-            'cursor-pointer transition-all',
-            currentLanguage !== name ? 'grayscale hover:grayscale-0' : '',
+            'cursor-pointer transition-all hover:grayscale-[50%]',
+            !selectedLangs.includes(name) ? 'grayscale' : '',
           )}
         >
-          <Button
-            variant="unstyled"
-            onClick={() => setCurrentLanguage(name as LanguageId)}
-          >
-            {icon}
+          <Button variant="unstyled" onClick={() => handleLanguageChange(name)}>
+            <LanguageIcon name={name} />
             <span className="sr-only">set language to {name}</span>
           </Button>
         </li>
diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx
diff --git a/src/components/code/CodeSwitcherSelect.tsx b/src/components/code/CodeSwitcherSelect.tsx
diff --git a/src/components/code/CodeTabs.client.tsx b/src/components/code/CodeTabs.client.tsx
diff --git a/src/components/guides/GuideItem.tsx b/src/components/guides/GuideItem.tsx
diff --git a/src/components/guides/GuideList.tsx b/src/components/guides/GuideList.tsx
diff --git a/src/components/guides/GuideMobileFilters.tsx b/src/components/guides/GuideMobileFilters.tsx
diff --git a/src/components/icons/LanguageIcon.tsx b/src/components/icons/LanguageIcon.tsx
diff --git a/src/hooks/useLang.ts b/src/hooks/useLang.ts
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
