Community Resources Pages

src/components/DocsLayout.tsx

@@ -10,16 +10,16 @@
 import {
   Link,
   useMatches,
   useNavigate,
   useParams,
 } from '@tanstack/react-router'
 import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import { last } from '~/utils/utils'
 import type { SelectOption } from '~/components/Select'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
 import { create } from 'zustand'
 import { Framework, getFrameworkOptions } from '~/libraries'
 import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
 import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
 import { twMerge } from 'tailwind-merge'
@@ -74,6 +74,14 @@
         label: 'Contributors',
         to: '/$libraryId/$version/docs/contributors',
       },
+      ...(config.sections.find((d) => d.label === 'Community Resources')
+        ? [
+            {
+              label: 'Community Resources',
+              to: '/$libraryId/$version/docs/community-resources',
+            },
+          ]
+        : []),
       {
         label: (
           <div className="flex items-center gap-2">

src/routeTree.gen.ts

@@ -55,6 +55,7 @@ import { Route as LibrariesConfigVersionIndexRouteImport } from './routes/_libra
 import { Route as LibraryIdVersionDocsIndexRouteImport } from './routes/$libraryId/$version.docs.index'
 import { Route as LibraryIdVersionDocsChar123Char125DotmdRouteImport } from './routes/$libraryId/$version.docs.{$}[.]md'
 import { Route as LibraryIdVersionDocsContributorsRouteImport } from './routes/$libraryId/$version.docs.contributors'
+import { Route as LibraryIdVersionDocsCommunityResourcesDotmdRouteImport } from './routes/$libraryId/$version.docs.community-resources[.]md'
 import { Route as LibraryIdVersionDocsSplatRouteImport } from './routes/$libraryId/$version.docs.$'
 import { Route as LibraryIdVersionDocsFrameworkIndexRouteImport } from './routes/$libraryId/$version.docs.framework.index'
 import { Route as LibraryIdVersionDocsFrameworkFrameworkIndexRouteImport } from './routes/$libraryId/$version.docs.framework.$framework.index'
@@ -305,6 +306,12 @@ const LibraryIdVersionDocsContributorsRoute =
     path: '/contributors',
     getParentRoute: () => LibraryIdVersionDocsRoute,
   } as any)
+const LibraryIdVersionDocsCommunityResourcesDotmdRoute =
+  LibraryIdVersionDocsCommunityResourcesDotmdRouteImport.update({
+    id: '/community-resources.md',
+    path: '/community-resources.md',
+    getParentRoute: () => LibraryIdVersionDocsRoute,
+  } as any)
 const LibraryIdVersionDocsSplatRoute =
   LibraryIdVersionDocsSplatRouteImport.update({
     id: '/$',
@@ -374,6 +381,7 @@ export interface FileRoutesByFullPath {
   '/blog/': typeof LibrariesBlogIndexRoute
   '/stats/npm': typeof StatsNpmIndexRoute
   '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
+  '/$libraryId/$version/docs/community-resources.md': typeof LibraryIdVersionDocsCommunityResourcesDotmdRoute
   '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
   '/$libraryId/$version/docs/{$}.md': typeof LibraryIdVersionDocsChar123Char125DotmdRoute
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
@@ -423,6 +431,7 @@ export interface FileRoutesByTo {
   '/blog': typeof LibrariesBlogIndexRoute
   '/stats/npm': typeof StatsNpmIndexRoute
   '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
+  '/$libraryId/$version/docs/community-resources.md': typeof LibraryIdVersionDocsCommunityResourcesDotmdRoute
   '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
   '/$libraryId/$version/docs/{$}.md': typeof LibraryIdVersionDocsChar123Char125DotmdRoute
   '/$libraryId/$version/docs': typeof LibraryIdVersionDocsIndexRoute
@@ -478,6 +487,7 @@ export interface FileRoutesById {
   '/_libraries/blog/': typeof LibrariesBlogIndexRoute
   '/stats/npm/': typeof StatsNpmIndexRoute
   '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
+  '/$libraryId/$version/docs/community-resources.md': typeof LibraryIdVersionDocsCommunityResourcesDotmdRoute
   '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
   '/$libraryId/$version/docs/{$}.md': typeof LibraryIdVersionDocsChar123Char125DotmdRoute
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
@@ -533,6 +543,7 @@ export interface FileRouteTypes {
     | '/blog/'
     | '/stats/npm'
     | '/$libraryId/$version/docs/$'
+    | '/$libraryId/$version/docs/community-resources.md'
     | '/$libraryId/$version/docs/contributors'
     | '/$libraryId/$version/docs/{$}.md'
     | '/$libraryId/$version/docs/'
@@ -582,6 +593,7 @@ export interface FileRouteTypes {
     | '/blog'
     | '/stats/npm'
     | '/$libraryId/$version/docs/$'
+    | '/$libraryId/$version/docs/community-resources.md'
     | '/$libraryId/$version/docs/contributors'
     | '/$libraryId/$version/docs/{$}.md'
     | '/$libraryId/$version/docs'
@@ -636,6 +648,7 @@ export interface FileRouteTypes {
     | '/_libraries/blog/'
     | '/stats/npm/'
     | '/$libraryId/$version/docs/$'
+    | '/$libraryId/$version/docs/community-resources.md'
     | '/$libraryId/$version/docs/contributors'
     | '/$libraryId/$version/docs/{$}.md'
     | '/$libraryId/$version/docs/'
@@ -995,6 +1008,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibraryIdVersionDocsContributorsRouteImport
       parentRoute: typeof LibraryIdVersionDocsRoute
     }
+    '/$libraryId/$version/docs/community-resources.md': {
+      id: '/$libraryId/$version/docs/community-resources.md'
+      path: '/community-resources.md'
+      fullPath: '/$libraryId/$version/docs/community-resources.md'
+      preLoaderRoute: typeof LibraryIdVersionDocsCommunityResourcesDotmdRouteImport
+      parentRoute: typeof LibraryIdVersionDocsRoute
+    }
     '/$libraryId/$version/docs/$': {
       id: '/$libraryId/$version/docs/$'
       path: '/$'
@@ -1042,6 +1062,7 @@ declare module '@tanstack/react-router' {
 
 interface LibraryIdVersionDocsRouteChildren {
   LibraryIdVersionDocsSplatRoute: typeof LibraryIdVersionDocsSplatRoute
+  LibraryIdVersionDocsCommunityResourcesDotmdRoute: typeof LibraryIdVersionDocsCommunityResourcesDotmdRoute
   LibraryIdVersionDocsContributorsRoute: typeof LibraryIdVersionDocsContributorsRoute
   LibraryIdVersionDocsChar123Char125DotmdRoute: typeof LibraryIdVersionDocsChar123Char125DotmdRoute
   LibraryIdVersionDocsIndexRoute: typeof LibraryIdVersionDocsIndexRoute
@@ -1054,6 +1075,8 @@ interface LibraryIdVersionDocsRouteChildren {
 
 const LibraryIdVersionDocsRouteChildren: LibraryIdVersionDocsRouteChildren = {
   LibraryIdVersionDocsSplatRoute: LibraryIdVersionDocsSplatRoute,
+  LibraryIdVersionDocsCommunityResourcesDotmdRoute:
+    LibraryIdVersionDocsCommunityResourcesDotmdRoute,
   LibraryIdVersionDocsContributorsRoute: LibraryIdVersionDocsContributorsRoute,
   LibraryIdVersionDocsChar123Char125DotmdRoute:
     LibraryIdVersionDocsChar123Char125DotmdRoute,

src/routes/$libraryId/$version.docs.community-resources[.]md.tsx

@@ -0,0 +1,155 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import { DocContainer } from '~/components/DocContainer'
+import { DocTitle } from '~/components/DocTitle'
+import { findLibrary, getBranch, getLibrary } from '~/libraries'
+import { seo } from '~/utils/seo'
+import { loadDocs } from '~/utils/docs'
+
+export const Route = createFileRoute(
+  '/$libraryId/$version/docs/community-resources.md'
+)({
+  staleTime: 1000 * 60 * 5,
+  loader: async (ctx) => {
+    const { libraryId, version } = ctx.params
+    const library = findLibrary(libraryId)
+
+    if (!library) return { doc: null as null | any }
+
+    const root = library.docsRoot || 'docs'
+
+    try {
+      const doc = await loadDocs({
+        repo: library.repo,
+        branch: getBranch(library, version),
+        docsPath: `${root}/community-resources`,
+        currentPath: ctx.location.pathname,
+        redirectPath: `/${library.id}/${version}/docs/overview`,
+      })
+
+      return { doc }
+    } catch {
+      return { doc: null as null | any }
+    }
+  },
+  head: ({ params, loaderData }) => {
+    const library = getLibrary(params.libraryId)
+    const doc = (loaderData as any)?.doc
+    return {
+      meta: seo({
+        title: `${library.name} Community Resources`,
+        description: `A collection of community resources for ${library.name}.`,
+      }),
+    }
+  },
+  component: RouteComponent,
+})
+
+type ResourceType = 'article' | 'media' | 'utility' | 'other'
+
+type Resource = {
+  title: string
+  description: string
+  url: string
+}
+
+function RouteComponent() {
+  const { libraryId } = Route.useParams()
+  const library = getLibrary(libraryId)
+  const data = Route.useLoaderData().doc?.frontmatter
+
+  return (
+    <DocContainer>
+      <div
+        className={twMerge(
+          'w-full flex flex-col bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[1200px]'
+        )}
+      >
+        <div className="p-4 lg:p-6 flex flex-col space-y-4 w-full">
+          <div className={twMerge('flex overflow-auto flex-col w-full')}>
+            <DocTitle>
+              {(data?.title as string | undefined) ||
+                `${library.name} Community Resources`}
+            </DocTitle>
+            <div className="h-4" />
+            <div className="h-px bg-gray-500 opacity-20" />
+          </div>
+          <span>
+            {(data?.frontmatter?.description as string | undefined) || (
+              <>
+                Discover resources created by the{' '}
+                <strong>{library.name}</strong> community. Have something to
+                share?{' '}
+                <a
+                  href={`https://github.com/${libraryId}/edit/main/docs/community-resources.md`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  Submit a PR on GitHub
+                </a>{' '}
+                to contribute to this list.
+              </>
+            )}
+          </span>
+          {data?.frontmatter?.articles > 1 && (
+            <CommunitySection
+              type="article"
+              resources={data.frontmatter.articles as Resource[]}
+            />
+          )}
+          {data?.frontmatter?.media > 1 && (
+            <CommunitySection
+              type="media"
+              resources={data.frontmatter.media as Resource[]}
+            />
+          )}
+          {data?.frontmatter?.utilities > 1 && (
+            <CommunitySection
+              type="utility"
+              resources={data.frontmatter.utilities as Resource[]}
+            />
+          )}
+          {data?.frontmatter?.others > 1 && (
+            <CommunitySection
+              type="other"
+              resources={data.frontmatter.others as Resource[]}
+            />
+          )}
+        </div>
+      </div>
+    </DocContainer>
+  )
+}
+
+function CommunitySection({
+  resources,
+  type,
+}: {
+  resources: Resource[]
+  type: ResourceType
+}) {
+  return (
+    <section>
+      <h2 className="text-[1.5rem] font-semibold pb-4 capitalize">{type}</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 ">
+        {resources.map((res) => (
+          <a
+            key={res.url}
+            href={res.url}
+            className="flex flex-wrap items-center space-y-2 dark:text-gray-500 p-3 cursor-pointer bg-white dark:bg-white/5 rounded-lg overflow-hidden shadow-lg hover:bg-gray-100 dark:hover:bg-white/10 transition-colors border border-1 border-gray-200 dark:border-gray-700"
+          >
+            <span className="text-base font-bold text-gray-800 dark:text-white truncate">
+              {res.title}
+            </span>
+            <div className="h-2" />
+            <div className="h-px bg-gray-500 opacity-20 w-full" />
+            <p className="text-sm dark:text-gray-400 text-gray-50 line-clamp-3 w-full h-14">
+              {res.description}
+            </p>
+          </a>
+        ))}
+      </div>
+    </section>
+  )
+}

src/utils/docs.ts

@@ -85,6 +85,7 @@ export const fetchDocs = createServerFn({ method: 'GET' })
       description,
       filePath,
       content: frontMatter.content,
+      frontmatter: frontMatter.data,
     }
   })