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

estruyf · estruyf · commit 55d07e0b3f1d · 2024-02-12T09:53:34.000+01:00
diff --git a/components/Docs/PageInfo.tsx b/components/Docs/PageInfo.tsx
@@ -46,15 +46,15 @@ export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({ page, items
             {(prevPage && prevPage.slug && prevPage.title) && (
               <a href={`/docs/${(prevPage as PageFrontMatter).slug}`}
                 title={prevPage.title}
-                className={`border border-vulcan-100 hover:border-teal-900 rounded-sm w-1/2 p-4 items-start flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
+                className={`border border-vulcan-100 hover:border-teal-900 rounded w-1/2 p-4 items-start flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
                 <span className="text-base text-whisper-500">Previous</span>
                 <span>&larr; {(prevPage as PageFrontMatter).title}</span>
               </a>
             )}
             {(nextPage && nextPage.slug && nextPage.title) && (
               <a href={`/docs/${(nextPage as PageFrontMatter).slug}`}
                 title={nextPage.title}
-                className={`border border-vulcan-100 hover:border-teal-900 rounded-sm w-1/2 p-4 items-end ml-auto flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
+                className={`border border-vulcan-100 hover:border-teal-900 rounded w-1/2 p-4 items-end ml-auto flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
                 <span className="text-base text-whisper-500">Next</span>
                 <span>{(nextPage as PageFrontMatter).title} &rarr;</span>
               </a>
diff --git a/components/GitHub/Stargazers.tsx b/components/GitHub/Stargazers.tsx
@@ -5,11 +5,11 @@ import { Extension } from '../../constants/extension';
 import { StarService } from '../../services/StarService';
 import { GitHub } from '../Images/GitHub';
 
-export interface IStargazersProps {}
+export interface IStargazersProps { }
 
 export const Stargazers: React.FunctionComponent<IStargazersProps> = (props: React.PropsWithChildren<IStargazersProps>) => {
-  const [ stars, setStars ] = useState<number | null>(null);
-  const [ calling, setCalling ] = useState<boolean>(false);
+  const [stars, setStars] = useState<number | null>(null);
+  const [calling, setCalling] = useState<boolean>(false);
 
   useEffect(() => {
     const getStars = async () => {
@@ -23,10 +23,10 @@ export const Stargazers: React.FunctionComponent<IStargazersProps> = (props: Rea
   }, [calling]);
 
   return (
-    <div className={`stargazers group flex items-center`} style={{height:"36px"}}>
-      <Link 
+    <div className={`stargazers group flex items-center`} style={{ height: "36px" }}>
+      <Link
         href={Extension.githubLink}
-        className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700`} 
+        className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700 rounded`}
         title={`Give the project a star on GitHub`}>
         <GitHub className={`h-4 w-4 mr-1`} />
         <span>Star</span>
@@ -41,7 +41,7 @@ export const Stargazers: React.FunctionComponent<IStargazersProps> = (props: Rea
 
             <Link
               href={Extension.stars}
-              className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700`}
+              className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700 rounded`}
               title={`Give the project a star on GitHub`}>
               {stars}
             </Link>
diff --git a/components/Page/CTA.tsx b/components/Page/CTA.tsx
@@ -4,7 +4,7 @@ import { Extension } from '../../constants/extension';
 import { isProduction } from '../../helpers/isProduction';
 import { FrontMatterLines } from './FrontMatterLines';
 
-export interface ICTAProps {}
+export interface ICTAProps { }
 
 export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithChildren<ICTAProps>) => {
   const { t: strings } = useTranslation();
@@ -33,10 +33,10 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
 
           <div className="mt-10 max-w-sm mx-auto sm:max-w-none">
             <div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
-              <a href={`/docs/getting-started`} title={`Read our documentation`}  className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8">
+              <a href={`/docs/getting-started`} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8">
                 {strings(`cta_button_primary`) as string}
               </a>
-              <a href={isProduction() ? Extension.installLink : Extension.installBetaLink} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
+              <a href={isProduction() ? Extension.installLink : Extension.installBetaLink} className="flex items-center justify-center px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
                 {isProduction() ? strings(`cta_button_secondary`) as string : strings(`cta_button_beta_secondary`) as string}
               </a>
             </div>
@@ -47,8 +47,8 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
       <div className="sm:mx-auto sm:max-w-3xl sm:px-6">
         <div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2`}>
           <div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:-mr-40 lg:max-w-none lg:h-full lg:pl-12`}>
-            <img 
-              className={`w-full lg:h-full lg:w-auto lg:max-w-none`} 
+            <img
+              className={`w-full lg:h-full lg:w-auto lg:max-w-none`}
               // src={`https://res.cloudinary.com/estruyf/image/upload/w_1256/v1631871148/frontmatter/preview-3.2.0.png`}
               // src={"https://res.cloudinary.com/estruyf/image/upload/w_1256/v1649328023/frontmatter/7.1.0/panel-preview-light.png"}
               src={"https://res.cloudinary.com/estruyf/image/upload/w_1256/v1649335002/frontmatter/7.1.0/fm-doc-screenshot.png"}
diff --git a/components/Page/Features.tsx b/components/Page/Features.tsx
@@ -44,7 +44,7 @@ export const Features: React.FunctionComponent<IFeaturesProps> = (props: React.P
           <div className="mt-4">
             <Link
               href={Extension.featureLink}
-              className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-opacity-70 sm:px-8`}
+              className={`inline-block px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-opacity-70 sm:px-8`}
               target={`_blank`}
               rel={`noopener noreferrer`}>
               {strings(`features_cta_button`) as string}
diff --git a/components/Page/GetStarted.tsx b/components/Page/GetStarted.tsx
@@ -15,10 +15,10 @@ export const GetStarted: React.FunctionComponent<IGetStartedProps> = (props: Rea
           <span className="block">Ready to get started?</span>
         </h2>
         <div className="mt-6 lg:mt-auto space-y-4 sm:space-y-0 sm:flex sm:space-x-5">
-          <a href={isProduction() ? Extension.installLink : Extension.installBetaLink} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8">
+          <a href={isProduction() ? Extension.installLink : Extension.installBetaLink} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8">
             {strings(`cta_button_bottom_primary`) as string}
           </a>
-          <a href={`/docs/getting-started`} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
+          <a href={`/docs/getting-started`} className="flex items-center justify-center px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
             {strings(`cta_button_bottom_secondary`) as string}
           </a>
         </div>
diff --git a/components/Page/Hero.tsx b/components/Page/Hero.tsx
@@ -36,7 +36,7 @@ export const Hero: React.FunctionComponent<IHeroProps> = ({ view, title, descrip
                 <Link
                   href={link}
                   title={linkText}
-                  className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8`}>
+                  className={`inline-block px-4 py-3 border border-transparent text-base font-medium rounded shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8`}>
                   {linkText}
                 </Link>
               )
diff --git a/components/Pricing/Pricing.tsx b/components/Pricing/Pricing.tsx
@@ -21,7 +21,7 @@ export const Pricing: React.FunctionComponent<IPricingProps> = (props: React.Pro
 
           <navigation.sponsor.icon
             title={strings(`pricing_cta_title`)}
-            btnClassName={`group mt-4 inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-vulcan-500 sm:px-8`}
+            btnClassName={`group mt-4 inline-block px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-vulcan-500 sm:px-8`}
             className="inline-block h-6 w-6"
             aria-hidden="true" />
         </div>
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -37,7 +37,7 @@ export const Modal: React.FunctionComponent<React.PropsWithChildren<IModalProps>
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className="inline-block align-bottom bg-vulcan-200 px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
+            <div className="inline-block align-bottom bg-vulcan-200 px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6 rounded">
               {children}
             </div>
           </Transition.Child>
diff --git a/constants/navigation.tsx b/constants/navigation.tsx
@@ -40,7 +40,7 @@ export const navigation = {
             open && (
               <Modal isOpen={open} onClose={() => setOpen(false)}>
                 <div className="relative">
-                  <div className="hidden sm:block absolute top-0 right-0 pr-4">
+                  <div className="hidden sm:block absolute top-0 right-0">
                     <button
                       type="button"
                       className="bg-vulcan-50 rounded-md text-whisper-900 hover:text-whisper-300 focus:outline-none"
@@ -67,7 +67,7 @@ export const navigation = {
                 </div>
                 <div className="mt-5 sm:mt-6 space-y-4">
                   <a
-                    className="inline-flex justify-center w-full px-4 py-2 bg-whisper-600 text-base font-medium text-vulcan-500 hover:bg-rose-900 hover:text-whisper-500  focus:outline-none sm:text-sm"
+                    className="inline-flex justify-center w-full px-4 py-2 bg-whisper-600 text-base font-medium text-vulcan-500 hover:bg-rose-900 hover:text-whisper-500  focus:outline-none sm:text-sm rounded"
                     onClick={() => setOpen(false)}
                     href={Extension.sponsorLink}
                     target={`_blank`}
@@ -76,7 +76,7 @@ export const navigation = {
                     GitHub Sponsor
                   </a>
                   <a
-                    className="inline-flex justify-center w-full px-4 py-2 bg-whisper-600 text-base font-medium text-vulcan-500 hover:bg-rose-900 hover:text-whisper-500 focus:outline-none sm:text-sm"
+                    className="inline-flex justify-center w-full px-4 py-2 bg-whisper-600 text-base font-medium text-vulcan-500 hover:bg-rose-900 hover:text-whisper-500 focus:outline-none sm:text-sm rounded"
                     onClick={() => setOpen(false)}
                     href={Extension.sponsorOpenCollective}
                     target={`_blank`}
@@ -85,7 +85,7 @@ export const navigation = {
                     Open Collective
                   </a>
                   <a
-                    className="inline-flex justify-center w-full px-4 py-2 bg-whisper-600 text-base font-medium text-vulcan-500 hover:bg-rose-900 hover:text-whisper-500 focus:outline-none sm:text-sm"
+                    className="inline-flex justify-center w-full px-4 py-2 bg-whisper-600 text-base font-medium text-vulcan-500 hover:bg-rose-900 hover:text-whisper-500 focus:outline-none sm:text-sm rounded"
                     onClick={() => setOpen(false)}
                     href={Extension.sponsorCoffee}
                     target={`_blank`}
diff --git a/content/docs/content-creation/placeholders.md b/content/docs/content-creation/placeholders.md
@@ -3,7 +3,7 @@ title: Placeholders
 slug: content-creation/placeholders
 description: null
 date: 2022-03-14T08:42:21.626Z
-lastmod: 2023-08-20T11:04:12.770Z
+lastmod: 2024-01-31T16:17:03.272Z
 weight: 200.4
 ---
 
@@ -140,26 +140,30 @@ Here is an example of a dynamic `uniqueId` placeholder:
 "frontMatter.content.placeholders": [
   {
     "id": "uniqueId",
-    "script": "./scripts/uniqueId.js",
-    "command": "~/.nvm/versions/node/v16.13.1/bin/node"
+    "script": "./scripts/uniqueId.mjs",
+    "command": "~/.nvm/versions/node/v18.17.1/bin/node"
   }
 ]
 ```
 
 #### Placeholder script
 
-The base script looks like this:
+To get started, you first need to install the
+[@frontmatter/extensibility](https://www.npmjs.com/package/@frontmatter/extensibility) 
+dependency.
+
+```bash
+npm i @frontmatter/extensibility
+```
+
+Once installed, you can use the following example:
 
 ```javascript
-const arguments = process.argv;
+import { PlaceholderScript } from "@frontmatter/extensibility";
 
-if (arguments && arguments.length > 0) {
-  const workspaceArg = arguments[2]; // The workspace path
-  const filePath = arguments[3]; // The path of the file
-  const title = arguments[4]; // Title of the page
+const { workspacePath, filePath, title, answers } = PlaceholderScript.getArguments();
 
-  console.log(Math.random().toString(36).substring(2, 15));
-}
+PlaceholderScript.done(Math.random().toString(36).substring(2, 15));
 ```
 
 > **Info**: Like the other content scripts, you can use other types of scripts like Python, Bash,
@@ -172,6 +176,38 @@ that the file is still not completely processed, and not all front matter fields
 > **Important**: In case you need to retrieve the whole front matter object, you can make use of the
 > `postScript` property on your content type in combination with a [content script][01].
 
+You can also ask additional input/questions during the placeholder script execution.
+For instance, if you want to pick between a category upon content creation, you can use the
+`PlaceholderScript.askQuestions` method.
+
+```javascript
+import { PlaceholderScript } from "@frontmatter/extensibility";
+
+(async () => {
+  const { answers } =
+    PlaceholderScript.getArguments();
+
+  if (!answers) {
+    PlaceholderScript.askQuestions([
+      {
+        name: "category",
+        message: "What category do you want to use for this article?"
+      },
+    ]);
+    return;
+  }
+
+  const { category } = answers;
+
+  if (!category) {
+    PlaceholderScript.done(undefined);
+    return;
+  }
+
+  PlaceholderScript.done(category);
+})();
+```
+
 #### Placeholder usage
 
 To use the `ogImage` placeholder, you need to define the `{{ogImage}}` value in your field as
diff --git a/content/docs/custom-actions.md b/content/docs/custom-actions.md
@@ -3,7 +3,7 @@ title: Custom actions
 slug: custom-actions
 description: null
 date: 2021-08-30T16:13:00.546Z
-lastmod: 2023-12-07T16:37:05.124Z
+lastmod: 2024-01-31T12:48:37.504Z
 weight: 500
 ---
 
@@ -116,12 +116,12 @@ When you do not want to use the `@frontmatter/extensibility` package, you can cr
 follows:
 
 ```javascript
-const arguments = process.argv;
+const args = process.argv;
 
-if (arguments && arguments.length > 0) {
-  const workspaceArg = arguments[2]; // The workspace path
-  const fileArg = arguments[3]; // The file path
-  const frontMatterArg = arguments[4]; // Front matter data
+if (args && args.length > 0) {
+  const workspaceArg = args[2]; // The workspace path
+  const fileArg = args[3]; // The file path
+  const frontMatterArg = args[4]; // Front matter data
 
   console.log(`The content returned for your notification.`);
 }
@@ -130,9 +130,9 @@ if (arguments && arguments.length > 0) {
 The current workspace-, file-path, and front matter data will be passed as a arguments. Like you can
 see in the above sample script, you can fetch these argument values as follows:
 
-- `arguments[2]`: The workspace path
-- `arguments[3]`: The file path (Markdown file)
-- `arguments[4]`: The front matter data as object
+- `args[2]`: The workspace path
+- `args[3]`: The file path (Markdown file)
+- `args[4]`: The front matter data as object
 
 ### Creating a script with the extensibility package
 
@@ -272,8 +272,8 @@ Here is a sample on how you can define a media script:
 
 The script will provide you the following arguments:
 
-- `arguments[2]`: The workspace path
-- `arguments[3]`: The file or folder path. This depends on the type of script.
+- `args[2]`: The workspace path
+- `args[3]`: The file or folder path. This depends on the type of script.
 
 When using the `@frontmatter/extensibility` package, you can get the arguments as follows:
 
@@ -383,15 +383,15 @@ print(f'frontMatterArg: {sys.argv[3]}')
 ```javascript
 const path = require("path");
 
-const arguments = process.argv;
+const args = process.argv;
 
 (async () => {
-  if (arguments && arguments.length > 0) {
+  if (args && args.length > 0) {
     const imagemin = (await import("imagemin")).default;
     const imageminJpegtran = (await import("imagemin-jpegtran")).default;
     const imageminPngquant = (await import("imagemin-pngquant")).default;
 
-    const fileArg = arguments[3]; // The file path
+    const fileArg = args[3]; // The file path
 
     await imagemin([fileArg], {
       destination: path.dirname(fileArg),
@@ -413,16 +413,16 @@ const arguments = process.argv;
 ```javascript
 const path = require("path");
 
-const arguments = process.argv;
+const args = process.argv;
 
 (async () => {
-  if (arguments && arguments.length > 0) {
+  if (args && args.length > 0) {
     const imagemin = (await import("imagemin")).default;
     const imageminJpegtran = (await import("imagemin-jpegtran")).default;
     const imageminPngquant = (await import("imagemin-pngquant")).default;
 
-    const workspaceArg = arguments[2]; // The workspace path
-    const folderArg = arguments[3]; // The folder path
+    const workspaceArg = args[2]; // The workspace path
+    const folderArg = args[3]; // The folder path
 
     const files = await imagemin([path.join(folderArg, "*.{jpg,png}")], {
       destination: folderArg,
diff --git a/pages/community/index.tsx b/pages/community/index.tsx
@@ -45,14 +45,14 @@ export default function Home({ content }: any) {
 
             <div className={`grid grid-cols-1 md:grid-cols-2 gap-8 mt-8`}>
               {communityLinks.map((link, index) => (
-                <div key={index} className={`p-4 shadow-lg bg-vulcan-100`}>
+                <div key={index} className={`p-4 shadow-lg bg-vulcan-100 rounded`}>
                   <h3 className={`text-2xl font-bold`}>{link.title}</h3>
                   <p className={`mt-2 text-base text-whisper-700`}>{link.description}</p>
                   <a
                     href={link.link}
                     target={`_blank`}
                     rel={`noopener noreferrer`}
-                    className={`mt-4 inline-flex items-center px-4 py-2 border border-transparent text-base font-medium text-white bg-rose-900 hover:bg-rose-800 focus:outline-none`}>Go to {link.title}</a>
+                    className={`mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded text-base font-medium text-white bg-rose-900 hover:bg-rose-800 focus:outline-none`}>Go to {link.title}</a>
                 </div>
               ))}
             </div>

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export const Hero: React.FunctionComponent<IHeroProps> = ({ view, title, descrip`
`36`	`36`	`<Link`
`37`	`37`	`href={link}`
`38`	`38`	`title={linkText}`
`39`		- className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8`}>
	`39`	+ className={`inline-block px-4 py-3 border border-transparent text-base font-medium rounded shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8`}>
`40`	`40`	`{linkText}`
`41`	`41`	`</Link>`
`42`	`42`	`)`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ export const Modal: React.FunctionComponent<React.PropsWithChildren<IModalProps>`
`37`	`37`	`leaveFrom="opacity-100 translate-y-0 sm:scale-100"`
`38`	`38`	`leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"`
`39`	`39`	`>`
`40`		`- <div className="inline-block align-bottom bg-vulcan-200 px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">`
	`40`	`+ <div className="inline-block align-bottom bg-vulcan-200 px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6 rounded">`
`41`	`41`	`{children}`
`42`	`42`	`</div>`
`43`	`43`	`</Transition.Child>`