New product update: laboratory improvements (tabs, query builder) (#5478

)

.gitignore

@@ -127,7 +127,6 @@ packages/web/app/next.config.mjs
 packages/web/app/environment-*.mjs
 packages/web/app/src/gql/*.ts
 packages/web/app/src/gql/*.json
-packages/web/docs/public/feed.xml
 # Changelog
 packages/web/app/src/components/ui/changelog/generated-changelog.ts
 

packages/web/docs/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

packages/web/docs/next-sitemap.config.cjs → packages/web/docs/next-sitemap.config.js

@@ -1,7 +1,5 @@
-/* eslint-disable no-undef, no-process-env */
 /** @type {import('next-sitemap').IConfig} */
-
-module.exports = {
+export default {
   siteUrl: process.env.SITE_URL || 'https://graphql-hive.com',
   generateIndexSitemap: false,
   output: 'export',

packages/web/docs/next.config.mjs → packages/web/docs/next.config.js

@@ -1,8 +1,9 @@
-/* eslint-disable no-process-env */
-
 import { withGuildDocs } from '@theguild/components/next.config';
 
 export default withGuildDocs({
+  nextraConfig: {
+    themeConfig: './src/theme.config.tsx',
+  },
   output: 'export',
   basePath: process.env.NEXT_BASE_PATH,
   eslint: {

packages/web/docs/package.json

@@ -3,38 +3,34 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "build": "pnpm run generate-rss && next build && next-sitemap --config next-sitemap.config.cjs",
-    "dev": "next",
-    "generate-rss": "tsx ./scripts/rss-generator.ts"
+    "build": "next build && next-sitemap",
+    "dev": "next"
   },
   "dependencies": {
-    "@next/env": "14.2.6",
     "@radix-ui/react-accordion": "1.2.0",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-tabs": "1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
     "@theguild/components": "7.0.0-alpha-20240910155635-d57d888ceb50ef15da6fbc43f2eab9a74fe5028f",
     "clsx": "2.1.1",
     "date-fns": "3.6.0",
-    "gray-matter": "4.0.3",
     "next": "14.2.10",
-    "next-sitemap": "4.2.3",
-    "next-themes": "*",
     "react": "18.3.1",
     "react-avatar": "5.0.3",
     "react-countup": "6.5.3",
     "react-dom": "18.3.1",
     "react-icons": "5.3.0",
-    "rss": "1.2.2",
     "tailwind-merge": "2.5.2",
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-radix": "3.0.3"
   },
   "devDependencies": {
     "@theguild/tailwind-config": "0.5.0",
     "@types/react": "18.3.3",
+    "@types/rss": "^0.0.32",
     "next-sitemap": "4.2.3",
     "postcss": "8.4.41",
+    "rss": "1.2.2",
     "tailwindcss": "3.4.10"
   }
 }

packages/web/docs/src/app/feed.xml/route.ts

@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import RSS from 'rss';
+import { getChangelogs } from '../../components/product-updates';
+
+export async function GET() {
+  const feed = new RSS({
+    title: 'Hive Changelog',
+    site_url: 'https://the-guild.dev/graphql/hive',
+    feed_url: 'https://the-guild.dev/graphql/hive/feed.xml',
+  });
+
+  for (const item of await getChangelogs()) {
+    feed.item({
+      title: item.title,
+      date: item.date,
+      url: `https://the-guild.dev/graphql/hive${item.route}`,
+      description: item.description,
+    });
+  }
+
+  return new Response(feed.xml({ indent: true }), {
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+    },
+  });
+}

packages/web/docs/src/authors.ts

@@ -8,12 +8,12 @@ type Author = {
 export const authors: Record<string, Author> = {
   kamil: {
     name: 'Kamil Kisiela',
-    link: 'https://twitter.com/kamilkisiela',
+    link: 'https://x.com/kamilkisiela',
     github: 'kamilkisiela',
   },
   laurin: {
     name: 'Laurin Quast',
-    link: 'https://twitter.com/n1rual',
+    link: 'https://x.com/n1rual',
     github: 'n1ru4l',
   },
   arda: {
@@ -23,12 +23,17 @@ export const authors: Record<string, Author> = {
   },
   aleksandra: {
     name: 'Aleksandra Sikora',
-    link: 'https://twitter.com/aleksandrasays',
+    link: 'https://x.com/aleksandrasays',
     github: 'beerose',
   },
   jiri: {
     name: 'Jiri Spac',
-    link: 'https://twitter.com/capajj',
+    link: 'https://x.com/capajj',
     github: 'capaj',
   },
+  dimitri: {
+    name: 'Dimitri Postolov',
+    link: 'https://x.com/dimaMachina_',
+    github: 'dimaMachina',
+  },
 };

packages/web/docs/src/components/product-updates.tsx

@@ -1,10 +1,7 @@
-import fs from 'node:fs';
-import path from 'node:path';
 import { ReactElement } from 'react';
 import type { GetStaticProps } from 'next';
 import Link from 'next/link';
 import { format } from 'date-fns';
-import matter from 'gray-matter';
 
 type Changelog = {
   title: string;
@@ -13,7 +10,7 @@ type Changelog = {
   route: string;
 };
 
-function ProductUpdateTeaser(props: Changelog) {
+export function ProductUpdateTeaser(props: Changelog): ReactElement {
   return (
     <li className="mb-10 ml-4">
       <div className="absolute -left-1.5 mt-1.5 size-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700" />
@@ -33,49 +30,48 @@ function ProductUpdateTeaser(props: Changelog) {
   );
 }
 
-export const ProductUpdates = (props: { changelogs: Changelog[] }): ReactElement => {
-  return (
-    <>
-      <div className="pb-12">
-        <h1 className="!m-0 !text-left">Product Updates</h1>
-        <p>The most recent developments from GraphQL Hive.</p>
-      </div>
-      <ol className="relative border-l border-gray-200 dark:border-gray-700">
-        {props.changelogs.map(item => (
-          <ProductUpdateTeaser key={item.route} {...item} />
-        ))}
-      </ol>
-    </>
-  );
-};
+export async function getChangelogs(): Promise<Changelog[]> {
+  const { pageMap } = await import('../../.next/static/chunks/nextra-page-map-.mjs');
 
-export const getStaticProps: GetStaticProps<{ ssg: { changelogs: Changelog[] } }> = async () => {
-  const productUpdatesDirectory = path.join(process.cwd(), 'src', 'pages', 'product-updates');
-  const filenames = fs.readdirSync(productUpdatesDirectory);
-  const changelogs: Changelog[] = [];
+  const productUpdatesFolder = pageMap.find(item => item.route === '/product-updates')!.children!;
 
-  for (const filename of filenames) {
-    if (filename.endsWith('.json') || filename.endsWith('index.mdx') || filename.endsWith('.ts')) {
-      continue;
-    }
+  return productUpdatesFolder
+    .slice(1) // cut `_meta.ts` which always comes first
+    .map(item => {
+      if (!item.children) {
+        if (!('title' in item.frontMatter!)) {
+          throw new Error(`Incorrect Front matter on page ${item.route}`);
+        }
 
-    const { data } = matter(
-      fs.readFileSync(path.join(productUpdatesDirectory, filename), 'utf8'),
-      {},
-    );
+        // Regular mdx page
+        return {
+          title: item.frontMatter.title,
+          date: item.frontMatter.date.toISOString(),
+          description: item.frontMatter.description,
+          route: item.route!,
+        };
+      }
+      // Folder
+      const indexPage = item.children.find(item => item.name === 'index');
+      if (!indexPage) {
+        throw new Error('Changelog folder must have an "index.mdx" page');
+      }
 
-    if (data.title && data.description && data.date) {
-      changelogs.push({
-        date: data.date.toISOString(),
-        title: data.title,
-        description: data.description,
-        route: `/product-updates/${filename.replace(/\.mdx$/, '')}`,
-      });
-    }
-  }
+      if (!('date' in indexPage.frontMatter!)) {
+        throw new Error(`Incorrect Front matter on page ${item.route}`);
+      }
 
-  changelogs.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+      return {
+        title: indexPage.frontMatter.title,
+        date: indexPage.frontMatter.date.toISOString(),
+        description: indexPage.frontMatter.description,
+        route: indexPage.route!,
+      };
+    })
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+}
 
+export const getStaticProps: GetStaticProps<{ ssg: { changelogs: Changelog[] } }> = async () => {
   return {
     props: {
       __nextra_dynamic_opts: {
@@ -84,7 +80,7 @@ export const getStaticProps: GetStaticProps<{ ssg: { changelogs: Changelog[] } }
           description: 'The most recent developments from GraphQL Hive.',
         },
       },
-      ssg: { changelogs },
+      ssg: { changelogs: await getChangelogs() },
     },
   };
 };

packages/web/docs/src/pages/_meta.tsx

@@ -1,6 +1,5 @@
 import type { Item, MenuItem, PageItem } from 'nextra/normalize-pages';
-import { PRODUCTS } from '@theguild/components';
-import { SIX_HIGHLIGHTED_PRODUCTS } from '@theguild/components/products';
+import { PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from '@theguild/components/products';
 import { cn } from '../lib';
 
 const meta: Record<string, DeepPartial<Item | MenuItem | PageItem>> = {

packages/web/docs/src/pages/product-updates.mdx

@@ -0,0 +1,24 @@
+import { useData } from '@theguild/components'
+import { ProductUpdateTeaser } from '../components/product-updates'
+
+export { getStaticProps } from '../components/product-updates'
+
+export function ProductUpdatesPage() {
+  const { changelogs } = useData()
+  return (
+    <ol className="relative mt-12 border-l border-gray-200 dark:border-gray-700">
+      {changelogs.map(item => (
+        <ProductUpdateTeaser key={item.route} {...item} />
+      ))}
+    </ol>
+  )
+}
+
+<div className="[&>h1]:!text-left [&>h1]:!mb-0 [&>p]:!mt-0">
+  # Product Updates
+
+The most recent developments from GraphQL Hive.
+
+</div>
+
+<ProductUpdatesPage />