Merge pull request #37 from OnedocLabs/ffo-48-include-documentation-f…

…or-the-react-print-library-with

Ffo 48 include documentation for the react print library with

docgen/index.ts

@@ -163,6 +163,8 @@ const process = async () => {
     return a.name.localeCompare(b.name);
   });
 
+  fs.writeFileSync(path.join(__dirname , "../docs/sortedDocs.json"), JSON.stringify(sortedDocs)); //writes the object for future processing in fileforge-docs
+
   sortedDocs.forEach((docFile) => {
     docFile.files.forEach((file)=>{
 
@@ -277,52 +279,7 @@ const process = async () => {
 
   const introductionPath = path.join(__dirname, "../docs/introduction.mdx");
 
-  replaceInFile(introductionPath, "<Components/>", snippet); //TODO: fix the relative component import in Fern to avoid this
-
-
-  //-------------------------------------------------------------------------------- GENERATE DOCS.YML FILE for Fern --------------------------------------------------------------------------------
-  // genreating the docs.yml file with dynamic content for components
-  const docYMLFile = path.join(__dirname, "../docs/docs.yml");
-
-  // Load and parse the YAML file
-  const docsYml:any = yaml.load(fs.readFileSync(__dirname+'/docs.yml', 'utf8'));
-  // Get the Components section
-  const componentsSection = docsYml.navigation.find(section => section.tab === 'react-print').layout.find(section => section.section === 'Components');
-
-  const subdirs = fs.readdirSync(docsPath, { withFileTypes: true }).filter(dirent => dirent.isDirectory()).map(dirent => dirent.name);
-
-  subdirs.forEach(subdir => {
-  // Create a new section for the subdirectory
-
-  const newSection = {
-    section:  subdir.charAt(0).toUpperCase() + subdir.slice(1),
-    contents: [],
-    icon: sortedDocs.find(df => df.name.toLocaleLowerCase() === subdir.toLocaleLowerCase())!.icon
-  };
-
-  // Get all mdx files in the subdirectory
-  const mdxFiles = fs.readdirSync(path.join(docsPath, subdir)).filter(file => path.extname(file) === '.mdx');
-
-  // Add each mdx file to the new section
-  mdxFiles.forEach(file => {
-    const slug = path.basename(file, '.mdx');
-    newSection.contents.push(
-      {
-        page: slug.charAt(0).toUpperCase() + slug.slice(1),
-        path: `./react-print-pdf/docs/components/${subdir}/${file}`,
-        slug: slug
-      });
-  });
-
-  // Add the new section to componentsSection.contents
-  componentsSection.contents.push(newSection);
-});
-
-  // Convert the updated object back into YAML
-  const updatedYaml = yaml.dump(docsYml);
-
-  // Write the updated YAML back to the file
-  fs.writeFileSync(docYMLFile, updatedYaml, 'utf8');
+  replaceInFile(introductionPath, /<Cards>[\s\S]*?<\/Cards>/, snippet); //TODO: fix the relative component import in Fern to avoid this
 
 
 };

docgen/pageBuilder/buildIntroduction.tsx

@@ -2,23 +2,19 @@ import fs from 'fs';
 import path from 'path';
 
 
-export const replaceInFile = (filePath: string, search: string, replace: string) => {
+export const replaceInFile = (filePath: string, search: RegExp, replace: string) => {
 
   let fileContents = fs.readFileSync(filePath, 'utf8');
 
-  // Find the location to insert at
-  const insertLocation = fileContents.indexOf(search);
+  if (search.test(fileContents)) {
+    // Replace the pattern with the new content
+    fileContents = fileContents.replace(search, replace);
 
-  // Check if the location was found
-  if (insertLocation !== -1) {
-    // Insert the new content
-    const newContent = replace;
-    fileContents = fileContents.replace(search,newContent);
-
-    // Write the file back out
+    // Write the updated content back to the file
     fs.writeFileSync(filePath, fileContents);
+    console.log('Replacement successful');
   } else {
-    console.log('Location not found');
+    console.log('Pattern not found');
   }
 
 }

docs/components/shell/currentpagetop.mdx

@@ -0,0 +1,51 @@
+---
+title: CurrentPageTop
+
+
+---
+
+Displays content in the top of the current page.
+
+This component will override the content of the `PageTop` component for the current page.
+
+Support
+
+<div style={{
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "0.5rem",
+  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
+
+#### Preview
+
+<Frame background="subtle"><img src="../../images/previews/currentpagetop-9aae489e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+
+<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
+<CodeBlock title="template.tsx">
+```jsx
+import { CurrentPageTop } from "@fileforge/react-print";
+
+<CurrentPageTop style={{ backgroundColor: "#bfdbfe" }} />;
+
+```
+</CodeBlock>
+<CodeBlock title="styles.css">
+```css
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
+
+html,
+body {
+  font-size: 28px;
+  font-family: "Inter", sans-serif;
+}
+
+@page {
+  size: A4;
+}
+
+```
+</CodeBlock>
+</CodeBlocks></div>
+
+### Examples
+

docs/components/shell/nobreak.mdx

@@ -0,0 +1,49 @@
+---
+title: NoBreak
+
+
+---
+
+Prevents a page break. Wrap this component around content that should not be broken across pages.
+
+Support
+
+<div style={{
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "0.5rem",
+  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
+
+#### Preview
+
+<Frame background="subtle"><img src="../../images/previews/nobreak-d03f0d1f/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+
+<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
+<CodeBlock title="template.tsx">
+```jsx
+import { NoBreak } from "@fileforge/react-print";
+
+<NoBreak>This content will not be split between two pages.</NoBreak>;
+
+```
+</CodeBlock>
+<CodeBlock title="styles.css">
+```css
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
+
+html,
+body {
+  font-size: 28px;
+  font-family: "Inter", sans-serif;
+}
+
+@page {
+  size: A4;
+}
+
+```
+</CodeBlock>
+</CodeBlocks></div>
+
+### Examples
+