Merge branch 'cloudflare' of github.com:FrontMatter/web-documentation-nextjs into cloudflare

Author: estruyf

.frontmatter/database/mediaDb.json

@@ -2,6 +2,7 @@ import { PencilIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { Extension } from '../../constants/extension';
 import { PageFrontMatter } from '../../models/PageFrontMatter';
+import { CONFIG } from '../../constants';
 
 export interface IPageActionsProps {
   page: PageFrontMatter | undefined;
@@ -16,7 +17,7 @@ export const PageActions: React.FunctionComponent<IPageActionsProps> = ({ page }
     <div className={`mt-16 mb-8`}>
       <a
         className={`flex items-center text-whisper-900 hover:text-whisper-500`}
-        href={`${Extension.githubDocs}/edit/${process.env.NEXT_PUBLIC_VERCEL_ENV === "production" ? "main" : "dev"}/content/docs/${page.fileName}.md`}
+        href={`${Extension.githubDocs}/edit/${CONFIG.environment === "production" ? "main" : "dev"}/content/docs/${page.fileName}.md`}
         target="_blank"
         rel={`noopener noreferrer`}>
         <PencilIcon className={`w-4 h-4 mr-2`} /> <span>Edit page</span>

components/Docs/PageActions.tsx

@@ -5,6 +5,7 @@ import { Extension } from '../../constants/extension';
 import { PageFrontMatter } from '../../models/PageFrontMatter';
 import Giscus from "@giscus/react";
 import { PageActions } from './PageActions';
+import { CONFIG } from '../../constants';
 
 export interface IPageInfoProps {
   items: PageFrontMatter[];
@@ -36,7 +37,7 @@ export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({ page, items
   }
 
   const date = parseJSON(page.lastmod);
-  // const feedbackUrl = `${Extension.issueLink}/new?title=Feedback:%20&body=%0A%0A%5BEnter%20feedback%20here%5D%0A%0A%0A---%0A%23%23%23%23%20Document%20Details%0A%0A%E2%9A%A0%20*Do%20not%20edit%20this%20section*%0A%0A*%20ID%3A%20${page.fileName}%0A*%20URL%3A%20${`${process.env.NEXT_PUBLIC_VERCEL_ENV === "production" ? Extension.mainSite : Extension.betaSite}/docs/${page.fileName}`}%0A*%20Content%20Source%3A%20${encodeURIComponent(`/content/docs/${page.fileName}.md`)}`;
+  // const feedbackUrl = `${Extension.issueLink}/new?title=Feedback:%20&body=%0A%0A%5BEnter%20feedback%20here%5D%0A%0A%0A---%0A%23%23%23%23%20Document%20Details%0A%0A%E2%9A%A0%20*Do%20not%20edit%20this%20section*%0A%0A*%20ID%3A%20${page.fileName}%0A*%20URL%3A%20${`${CONFIG.environment === "production" ? Extension.mainSite : Extension.betaSite}/docs/${page.fileName}`}%0A*%20Content%20Source%3A%20${encodeURIComponent(`/content/docs/${page.fileName}.md`)}`;
 
   return (
     <>
@@ -88,7 +89,7 @@ export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({ page, items
             reactionsEnabled="0"
             emitMetadata="0"
             inputPosition="top"
-            theme={process.env.NEXT_PUBLIC_GISCUS_THEME}
+            theme={CONFIG.giscus.theme}
             lang="en"
             loading="lazy" />
         </div>
@@ -102,7 +103,7 @@ export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({ page, items
         }
 
         <div className="mt-2 text-sm">
-          <p>Did you spot an issue in our documentation, or want to contribute? Edit this page on <a className={`text-teal-500 hover:text-teal-900`} href={`${Extension.githubDocs}/edit/${process.env.NEXT_PUBLIC_VERCEL_ENV === "production" ? "main" : "dev"}/content/docs/${page.fileName}.md`} target="_blank" rel={`noopener noreferrer`}>Github</a>!</p>
+          <p>Did you spot an issue in our documentation, or want to contribute? Edit this page on <a className={`text-teal-500 hover:text-teal-900`} href={`${Extension.githubDocs}/edit/${CONFIG.environment === "production" ? "main" : "dev"}/content/docs/${page.fileName}.md`} target="_blank" rel={`noopener noreferrer`}>Github</a>!</p>
         </div>
       </div>
     </>

components/Docs/PageInfo.tsx

@@ -9,6 +9,7 @@ import { Header } from './Header';
 import { Home } from './Home';
 import { Sponsors } from './Sponsors';
 import { AiOutlineRobot } from 'react-icons/ai';
+import { CONFIG } from '../../constants';
 
 export interface IDocsLayoutProps {
   navItems?: PageFrontMatter[];
@@ -69,7 +70,7 @@ export const DocsLayout: React.FunctionComponent<React.PropsWithChildren<IDocsLa
               backgroundColor: "transparent",
               color: "transparent"
             }}
-            anon_key={process.env.MENDABLE_ANON_KEY ?? ""} />
+            anon_key={CONFIG.mendable.key ?? ""} />
         </div>
 
         <Footer />

components/Page/DocsLayout.tsx

@@ -2,19 +2,20 @@ import * as React from 'react';
 // const docsearch = require('@docsearch/js');
 // import { useEffect } from 'react';
 import { DocSearch } from '@docsearch/react';
+import { CONFIG } from '../../constants';
 
-export interface ISearchboxProps {}
+export interface ISearchboxProps { }
 
 export const Searchbox: React.FunctionComponent<ISearchboxProps> = (props: React.PropsWithChildren<ISearchboxProps>) => {
 
   return (
     <>
-      <DocSearch 
-        apiKey={process.env.NEXT_PUBLIC_AGOLIA_APIKEY || ""} 
-        indexName={process.env.NEXT_PUBLIC_AGOLIA_INDEX || ""} 
-        appId={process.env.NEXT_PUBLIC_AGOLIA_APPID || ""} 
+      <DocSearch
+        apiKey={CONFIG.agolia.apiKey || ""}
+        indexName={CONFIG.agolia.index || ""}
+        appId={CONFIG.agolia.appId || ""}
         disableUserPersonalization={true}
-        />
+      />
     </>
   );
 };

components/Page/Searchbox.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Sponsor, SponsorData } from '../../models/SponsorData';
 import sponsors from '../../sponsors.json';
+import { CONFIG } from '../../constants';
 
 export interface ISponsorsProps { }
 
@@ -13,7 +14,7 @@ export const Sponsors: React.FunctionComponent<ISponsorsProps> = (props: React.P
 
   useEffect(() => {
     const getSponsors = async () => {
-      const response = await fetch('/api/sponsors');
+      const response = await fetch(`${CONFIG.urls.api}/api/sponsors`);
 
       if (!response.ok) {
         setIndividuals(null);

components/Page/Sponsors.tsx

@@ -0,0 +1,24 @@
+export const CONFIG = {
+  urls: {
+    api: process.env.NEXT_PUBLIC_API_URL,
+    production: "https://frontmatter.codes",
+    preview: "https://cloudflare.front-matter-docs.pages.dev",
+    local: "http://localhost:3000",
+  },
+  environment: process.env.NEXT_PUBLIC_VERCEL_ENV,
+  github: {
+    token: process.env.GITHUB_AUTH,
+  },
+  sponsors: process.env.BACKERS,
+  agolia: {
+    apiKey: process.env.NEXT_PUBLIC_AGOLIA_APIKEY,
+    index: process.env.NEXT_PUBLIC_AGOLIA_INDEX,
+    appId: process.env.NEXT_PUBLIC_AGOLIA_APPID,
+  },
+  giscus: {
+    theme: process.env.NEXT_PUBLIC_GISCUS_THEME,
+  },
+  mendable: {
+    key: process.env.MENDABLE_ANON_KEY,
+  },
+};

constants/config.ts

@@ -0,0 +1,4 @@
+export * from "./config";
+export * from "./extension";
+export * from "./features";
+export * from "./navigation";

constants/index.ts

@@ -3,7 +3,7 @@ title: Content view
 slug: dashboard/content-view
 description: null
 date: 2022-11-28T14:55:04.221Z
-lastmod: 2024-02-22T12:24:21.051Z
+lastmod: 2024-06-20T08:31:20.651Z
 weight: 300.1
 ---
 
@@ -12,6 +12,14 @@ weight: 300.1
 The contents view is the default view when you open the dashboard. It will show you all the pages in
 your project, and allow you to filter and sort them.
 
+<!-- FM:Snippet:Start data:{"id":"Open in VS Code","fields":[{"name":"title","value":"Open dashboard in VS Code"},{"name":"command","value":"frontMatter.dashboard"},{"name":"title","value":"Open dashboard in VS Code"}]} -->
+<a class="open_vscode" title="Open content dashboard in VS Code" href='vscode://eliostruyf.execcommand?command=frontMatter.dashboard'>
+  Open content dashboard in VS Code
+</a>
+<!-- FM:Snippet:End -->
+
+![Dashboard - Contents view][07]
+
 ## Card configuration
 
 ### Card field configuration
@@ -169,3 +177,4 @@ of the content view. This will allow you to quickly access.
 [03]: /docs/content-creation/fields#draft
 [04]: /releases/v5.3.0/draft-status.png
 [06]: /docs/experimental/ui-extensibility#registering-a-custom-ui-extension
+[07]: /releases/v7.1.0/dashboard-7.1.0.png

content/docs/dashboard/content-view.md

@@ -3,8 +3,8 @@ title: Data files view
 slug: dashboard/datafiles-view
 description: null
 date: 2022-11-28T14:55:04.221Z
-lastmod: 2024-02-22T12:23:03.653Z
-weight: 300.3
+lastmod: 2024-06-20T08:29:08.737Z
+weight: 300.4
 ---
 
 # Data files view
@@ -13,10 +13,21 @@ Data files/folders are pieces of content that do not belong to any markdown cont
 their own. Most of the time, these data files are used to store additional information about your
 project/blog/website that will be used to render the content.
 
-For example: navigation, social media links, contacts, etc.
+For example: 
+
+- navigation
+- social media links
+- contacts
+- etc.
 
 The data files dashboard allows you to quickly manage your data files.
 
+<!-- FM:Snippet:Start data:{"id":"Open in VS Code","fields":[{"name":"title","value":"Open data dashboard in VS Code"},{"name":"command","value":"frontMatter.dashboard.data"},{"name":"title","value":"Open data dashboard in VS Code"}]} -->
+<a class="open_vscode" title="Open data dashboard in VS Code" href='vscode://eliostruyf.execcommand?command=frontMatter.dashboard.data'>
+  Open data dashboard in VS Code
+</a>
+<!-- FM:Snippet:End -->
+
 ![Data files dashboard][01]
 
 ## Configuration