Directory as a standalone site

swing-xyz · Jan 23, 2024 · 584296c · 584296c · vercel · Jan 23, 2024
1 parent 88185ef
commit 584296c
Show file tree

Hide file tree

Showing 33 changed files with 402 additions and 161 deletions.
diff --git a/README.md b/README.md
@@ -1,21 +1,30 @@
 <p align="center">
-  <a href="https://developers.swing.xyz/examples">
+  <a href="https://examples.swing.xyz">
     <picture>
       <img src="./apps/directory/public/directory-landing.png" height="300" style="border-radius:10px;">
     </picture>
     <h1 align="center">Swing Example Templates</h1>
   </a>
 </p>
 
-> Have an idea for a template? Please [create a pull request](https://github.com/polkaswitch/examples/pulls) or [request an example](https://github.com/polkaswitch/examples/issues/new).
+<p align="center">Kickstart your Swing integration with ready-to-ship repositories.</p>
+
+<p align="center">
+  <a aria-label="Examples Website" href="https://examples.swing.xyz">
+    <img alt="Examples Website" src="https://img.shields.io/badge/Examples%20Directory-000000.svg?style=for-the-badge&labelColor=000">
+  </a>
+  <a aria-label="Swing Developers Website" href="https://developers.swing.xyz">
+    <img alt="Swing Developers Website" src="https://img.shields.io/badge/Developer%20Docs-000000.svg?style=for-the-badge&labelColor=000">
+  </a>
+</p>
 
 ## Documentation
 
 Looking for the documentation? https://developers.swing.xyz
 
 ## Getting started
 
-First choose one of the [examples](./examples).
+First choose one of the [examples](#examples).
 
 Install the NPM dependencies:
 
@@ -33,21 +42,15 @@ Finally, open the example http://localhost:3000
 
 ## Examples
 
-### Swaps
+> Have an idea for a template? Please [create a pull request](https://github.com/swing-xyz/examples/pulls) or [request one](https://github.com/swing-xyz/examples/issues/new).
 
-**Next.js**
+### Swaps
 
 - [swaps-widget-nextjs](./examples/swaps-widget-nextjs/README.md) - Cross-chain Swaps using the Widget in **Next.js App Router**
 - [swaps-widget-nextjs-pages](./examples/swaps-widget-nextjs-pages/README.md) - Cross-chain Swaps using the Widget in **Next.js Pages Router**
 - [swaps-sdk-nextjs](./examples/swaps-sdk-nextjs/README.md) - Cross-chain Swaps using the SDK in Next.js
 - [swaps-api-nextjs](./examples/swaps-api-nextjs/README.md) - Cross-chain Swaps using the Swing API in Next.js
-
-**Webpack**
-
 - [swaps-widget-webpack](./examples/swaps-widget-webpack/README.md) - Cross-chain Swaps using the Widget with Webpack
-
-**Angular**
-
 - [swaps-widget-angular](./examples/swaps-widget-angular/README.md) - Cross-chain Swaps using the Widget in Angular
 
 ### Staking

diff --git a/apps/directory/README.md b/apps/directory/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://developers.swing.xyz/examples">
+  <a href="https://examples.swing.xyz">
     <picture>
       <img src="./public/directory-landing.png" height="300" style="border-radius:10px;">
     </picture>

diff --git a/apps/directory/next.config.mjs b/apps/directory/next.config.mjs
@@ -2,7 +2,20 @@
 const nextConfig = {
   reactStrictMode: true,
 
-  basePath: "/examples",
+  experimental: {
+    useDeploymentId: true,
+    useDeploymentIdServerActions: true,
+  },
+
+  redirects: async () => [
+    {
+      // Examples directory was hosted from https://developers.swing.xyz/examples at one time.
+      // It has since been moved to https://examples.swing.xyz
+      source: "/examples",
+      destination: "/",
+      permanent: true,
+    },
+  ],
 };
 
 export default nextConfig;
diff --git a/apps/directory/package.json b/apps/directory/package.json
@@ -20,6 +20,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "fast-glob": "^3.3.2",
+    "geist": "^1.2.0",
     "lucide-react": "^0.314.0",
     "next": "^14.1.0",
     "next-themes": "^0.2.1",

diff --git a/apps/directory/public/directory-landing.png b/apps/directory/public/directory-landing.png
diff --git a/apps/directory/src/app/layout.tsx b/apps/directory/src/app/layout.tsx
@@ -1,13 +1,26 @@
 import { ThemeProvider } from "components/theme-provider";
 import "styles/globals.css";
 
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+import { Header } from "components/header";
+import { Footer } from "components/footer";
+
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head />
 
-      <body className="relative max-h-screen min-h-full">
-        <ThemeProvider>{children}</ThemeProvider>
+      <body
+        className={`bg-background font-sans relative antialiased max-h-screen min-h-full ${GeistSans.variable} ${GeistMono.variable}`}
+      >
+        <ThemeProvider>
+          <Header />
+
+          <main className="max-w-6xl mx-auto">{children}</main>
+
+          <Footer />
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/apps/directory/src/app/page.tsx b/apps/directory/src/app/page.tsx
@@ -1,82 +1,26 @@
-import { Footer } from "components/footer";
 import { Hero } from "components/hero";
-import { TemplateMeta, Templates } from "components/templates";
+import { Templates } from "components/templates";
 
-import fg from "fast-glob";
-import path from "node:path";
-import fs from "node:fs";
-import { slugify } from "lib/slugify";
-import { keywordOptions } from "lib/keywords";
 import { Suspense } from "react";
 import { Filters } from "components/filters";
 import { TemplateGrid } from "components/template-grid";
+import { getTemplates } from "lib/templates";
 
-const examplesPath = path.resolve(
-  __dirname,
-  "..",
-  "..",
-  "..",
-  "..",
-  "..",
-  "examples"
-);
-
-const templates: TemplateMeta[] = fg
-  .globSync(["**/package.json"], {
-    cwd: examplesPath,
-    deep: 2,
-    onlyFiles: true,
-  })
-  .map((packageJsonPath) => {
-    const packageJson = JSON.parse(
-      fs.readFileSync(path.join(examplesPath, packageJsonPath), "utf-8")
-    );
-
-    if (!packageJson.name) {
-      console.log(packageJson);
-    }
-
-    const keywords: string[] =
-      packageJson.keywords?.map((keyword: string) => slugify(keyword)) || [];
-
-    const template = {
-      integration: keywordOptions.Integration.find((integration) =>
-        packageJson.name.includes(slugify(integration))
-      ),
-      framework: keywordOptions.Framework.find((framework) =>
-        keywords.includes(slugify(framework))
-      ),
-      wallet: keywordOptions.Wallet.find((wallet) =>
-        keywords.includes(slugify(wallet))
-      ),
-      "use-case": keywordOptions["Use Case"].find((useCase) =>
-        packageJson.name.includes(slugify(useCase))
-      ),
-    };
-
-    return {
-      id: packageJson.name,
-      name: `${template["use-case"]} ${template.integration} in ${template.framework}`,
-      description: `${template.framework} example showcasing how to integrate the ${template["use-case"]} ${template.integration}.`,
-      url:
-        packageJson.demo ||
-        `https://github.com/swing-xyz/examples/tree/main/examples/${packageJson.name}`,
-      keywords,
-      ...template,
-    };
-  })
-  .sort((a, b) => a.name.localeCompare(b.name));
+const templates = getTemplates();
 
 export const metadata = {
-  metadataBase: new URL("https://developers.swing.xyz/examples"),
+  metadataBase: new URL("https://examples.swing.xyz"),
   title: "Swing Example Templates",
   description:
     "Find an example template to help you get started integrating with Swing.",
   openGraph: {
     type: "website",
+    title: "Swing Example Templates",
+    description:
+      "Find an example template to help you get started integrating with Swing.",
     images: [
       {
-        url: "https://developers.swing.xyz/examples/directory-landing.png",
+        url: "/directory-landing.png",
         width: 1200,
         height: 838,
         alt: "Swing Example Templates",
@@ -96,12 +40,12 @@ export const metadata = {
 
 export default function Directory() {
   return (
-    <main>
+    <>
       <Hero />
 
-      <div id="templates">
-        <div className="flex flex-col min-[960px]:flex-row container max-w-6xl gap-10 py-32">
-          <div className="px-10 min-[960px]:w-56 min-[960px]:px-0">
+      <div id="templates" className="container">
+        <div className="flex flex-col min-[960px]:flex-row gap-10 py-16 sm:py-20">
+          <div className="min-[960px]:w-56">
             <Suspense>
               <Filters />
             </Suspense>
@@ -114,8 +58,6 @@ export default function Directory() {
           </div>
         </div>
       </div>
-
-      <Footer />
-    </main>
+    </>
   );
 }
diff --git a/apps/directory/src/components/filters.tsx b/apps/directory/src/components/filters.tsx
@@ -27,10 +27,10 @@ export function Filters() {
   return (
     <Drawer open={open} onOpenChange={setOpen}>
       <DrawerTrigger asChild>
-        <Button variant="ghost">Filter Templates</Button>
+        <Button variant="ghost">Filter</Button>
       </DrawerTrigger>
 
-      <DrawerContent>
+      <DrawerContent className="p-4">
         <Filter />
       </DrawerContent>
     </Drawer>
@@ -43,9 +43,9 @@ function Filter() {
   const pathname = usePathname();
 
   return (
-    <>
+    <div className="relative overflow-auto">
       <div className="flex items-center justify-between">
-        <h4 className="font-bold">Filter Templates</h4>
+        <h4 className="font-bold text-base">Filter</h4>
 
         <Button
           className={cn({
@@ -125,6 +125,6 @@ function Filter() {
           })}
         </Accordion>
       </form>
-    </>
+    </div>
   );
 }
diff --git a/apps/directory/src/components/footer.tsx b/apps/directory/src/components/footer.tsx
@@ -1,28 +1,23 @@
+import { GithubIcon } from "./icons/github";
+import { TwitterIcon } from "./icons/twitter";
+
 const footerNavigation = [
   {
     name: "GitHub",
     href: "https://github.com/swing-xyz/examples",
-    icon: (props: React.SVGProps<SVGSVGElement>) => (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" {...props}>
-        <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
-      </svg>
-    ),
+    icon: GithubIcon,
   },
   {
     name: "X",
     href: "https://x.com/swing_xyz",
-    icon: (props: React.SVGProps<SVGSVGElement>) => (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
-        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
-      </svg>
-    ),
+    icon: TwitterIcon,
   },
 ];
 
 export function Footer() {
   return (
     <footer>
-      <div className="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
+      <div className="mx-auto max-w-6xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
         <div className="flex justify-center space-x-6 md:order-2">
           {footerNavigation.map((item) => (
             <a
@@ -32,7 +27,7 @@ export function Footer() {
             >
               <span className="sr-only">{item.name}</span>
               <item.icon
-                className="h-6 w-6 fill-muted hover:fill-muted/80"
+                className="h-5 w-5 fill-muted hover:fill-muted/80"
                 aria-hidden="true"
               />
             </a>

diff --git a/apps/directory/src/components/grid-pattern.tsx b/apps/directory/src/components/grid-pattern.tsx
@@ -0,0 +1,51 @@
+export function GridPattern({
+  width,
+  height,
+  x,
+  y,
+  squares,
+  ...props
+}: React.ComponentPropsWithoutRef<"svg"> & {
+  width: number;
+  height: number;
+  x: string | number;
+  y: string | number;
+  squares: [x: number, y: number][];
+}) {
+  return (
+    <svg aria-hidden="true" {...props}>
+      <defs>
+        <pattern
+          id="GridPattern"
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path d={`M.5 ${height}V.5H${width}`} fill="none" />
+        </pattern>
+      </defs>
+      <rect
+        width="100%"
+        height="100%"
+        strokeWidth={0}
+        fill={`url(#GridPattern)`}
+      />
+      {squares && (
+        <svg x={x} y={y} className="overflow-visible">
+          {squares.map(([x, y]) => (
+            <rect
+              strokeWidth="0"
+              key={`${x}-${y}`}
+              width={width + 1}
+              height={height + 1}
+              x={x * width}
+              y={y * height}
+            />
+          ))}
+        </svg>
+      )}
+    </svg>
+  );
+}