Set up Next.js project with Tailwind CSS, add guides data and search functionality

Author: marcusrein

packages/guides/data/guides.json

@@ -0,0 +1,32 @@
+[
+  {
+    "title": "Building Subgraphs 101",
+    "slug": "building-subgraphs-101",
+    "description": "Learn the basics of creating a subgraph on The Graph network.",
+    "categories": ["Subgraphs", "Getting Started"],
+    "date": "2024-05-18",
+    "author": "Graph Docs Team",
+    "types": ["blog"],
+    "url": "https://thegraph.com/blog/building-subgraphs-101"
+  },
+  {
+    "title": "Indexing Smart Contracts with The Graph",
+    "slug": "indexing-smart-contracts",
+    "description": "Step-by-step video tutorial for indexing contracts using Graph CLI.",
+    "categories": ["Indexing", "Video"],
+    "date": "2024-03-02",
+    "author": "Graph Protocol",
+    "types": ["video"],
+    "url": "https://youtube.com/watch?v=dQw4w9WgXcQ"
+  },
+  {
+    "title": "Using Graph Client in React",
+    "slug": "using-graph-client-react",
+    "description": "How to query subgraphs efficiently in a React front-end.",
+    "categories": ["Client", "React"],
+    "date": "2023-12-10",
+    "author": "Edge & Node",
+    "types": ["blog", "repo"],
+    "url": "https://github.com/graphprotocol/example"
+  }
+] 

packages/guides/next-env.d.ts

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

packages/guides/next.config.js

@@ -0,0 +1,9 @@
+// @ts-check
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  trailingSlash: true,
+};
+
+export default nextConfig; 

packages/guides/package.json

@@ -6,12 +6,21 @@
   "types": "dist/index.d.ts",
   "files": ["dist"],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "dev": "tsc -w -p tsconfig.json",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "dev": "next dev -p 3100",
+    "build": "next build",
+    "preview": "next start -p 3100",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^14.2.28",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "fuse.js": "^7.0.0"
   },
-  "dependencies": {},
   "devDependencies": {
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "tailwindcss": "^3.4.17",
+    "postcss": "^8.5.3",
+    "autoprefixer": "^10.4.21"
   }
 } 

packages/guides/pages/_app.tsx

@@ -0,0 +1,6 @@
+import '@/styles/globals.css';
+import type { AppProps } from 'next/app';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+} 

packages/guides/pages/guides/[slug].tsx

@@ -0,0 +1,19 @@
+import { GetServerSideProps } from 'next';
+import guides from '@/data/guides.json';
+
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+  const guide = (guides as any[]).find((g) => g.slug === params?.slug);
+  if (guide) {
+    return {
+      redirect: {
+        destination: guide.url,
+        permanent: false,
+      },
+    };
+  }
+  return { notFound: true };
+};
+
+export default function Guide() {
+  return null;
+} 

packages/guides/pages/guides/index.tsx

@@ -0,0 +1,103 @@
+import { useMemo, useState } from 'react';
+import Fuse from 'fuse.js';
+import guidesData from '@/data/guides.json';
+import Link from 'next/link';
+
+interface Guide {
+  title: string;
+  slug: string;
+  description: string;
+  categories: string[];
+  date: string;
+  author: string;
+  types: string[];
+  url: string;
+}
+
+const fuse = new Fuse(guidesData as Guide[], {
+  includeScore: true,
+  threshold: 0.4,
+  keys: ['title', 'description', 'categories', 'types'],
+});
+
+const allCategories = Array.from(
+  new Set((guidesData as Guide[]).flatMap((g) => g.categories)),
+).sort();
+
+export default function GuidesPage() {
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const guides = useMemo(() => {
+    let filtered: Guide[] = guidesData as Guide[];
+    if (selected.size) {
+      filtered = filtered.filter((g) => g.categories.some((c) => selected.has(c)));
+    }
+    if (query.trim()) {
+      return fuse.search(query).map((r) => r.item).filter((g) => filtered.includes(g));
+    }
+    return filtered;
+  }, [query, selected]);
+
+  const toggleCategory = (cat: string) => {
+    const next = new Set(selected);
+    if (next.has(cat)) next.delete(cat);
+    else next.add(cat);
+    setSelected(next);
+  };
+
+  return (
+    <div className="flex min-h-screen p-6 gap-8 font-sans">
+      <aside className="w-64 border-r pr-4">
+        <h2 className="text-xl font-semibold mb-4">Categories</h2>
+        <ul className="space-y-2">
+          {allCategories.map((cat) => (
+            <li key={cat} className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                checked={selected.has(cat)}
+                onChange={() => toggleCategory(cat)}
+                className="h-4 w-4 rounded border-gray-400"
+              />
+              <span className="text-sm">{cat}</span>
+            </li>
+          ))}
+        </ul>
+      </aside>
+      <main className="flex-1">
+        <div className="mb-6">
+          <input
+            type="text"
+            placeholder="Search guides..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="w-full md:w-1/2 border rounded px-3 py-2"
+          />
+        </div>
+        <ul className="space-y-6">
+          {guides.map((g) => (
+            <li key={g.slug} className="border rounded p-4 hover:shadow">
+              <Link href={`/guides/${g.slug}`} target="_blank">
+                <h3 className="text-lg font-semibold mb-1">{g.title}</h3>
+              </Link>
+              <p className="text-sm text-gray-600 mb-2">{g.description}</p>
+              <div className="text-xs text-gray-500 flex flex-wrap gap-2">
+                {g.categories.map((c) => (
+                  <span key={c} className="bg-gray-200 px-2 py-0.5 rounded">
+                    {c}
+                  </span>
+                ))}
+                {g.types.map((t) => (
+                  <span key={t} className="bg-purple-200 px-2 py-0.5 rounded">
+                    {t}
+                  </span>
+                ))}
+                <span>{new Date(g.date).toLocaleDateString()}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </main>
+    </div>
+  );
+} 

packages/guides/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}; 

packages/guides/styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities; 

packages/guides/tailwind.config.mjs

@@ -0,0 +1,18 @@
+import defaultTheme from 'tailwindcss/defaultTheme';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [],
+}; 

packages/guides/tsconfig.json

@@ -5,7 +5,18 @@
     "outDir": "dist",
     "declaration": true,
     "declarationMap": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "*"
+      ]
+    },
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "module": "ESNext"
   },
-  "include": ["src"]
-} 
+  "include": [
+    "src"
+  ]
+}