Skip to content

Commit 967f88d

Browse files
Titou325Titou325
authored
Merge pull request #37 from OnedocLabs/ffo-48-include-documentation-for-the-react-print-library-with
Ffo 48 include documentation for the react print library with
2 parents d5c5934 + 83148c1 commit 967f88d

File tree

18 files changed

+193
-491
lines changed

18 files changed

+193
-491
lines changed

‎docgen/docs.yml

-172
This file was deleted.

‎docgen/index.ts

+3-46
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,8 @@ const process = async () => {
163163
return a.name.localeCompare(b.name);
164164
});
165165

166+
fs.writeFileSync(path.join(__dirname , "../docs/sortedDocs.json"), JSON.stringify(sortedDocs)); //writes the object for future processing in fileforge-docs
167+
166168
sortedDocs.forEach((docFile) => {
167169
docFile.files.forEach((file)=>{
168170

@@ -277,52 +279,7 @@ const process = async () => {
277279

278280
const introductionPath = path.join(__dirname, "../docs/introduction.mdx");
279281

280-
replaceInFile(introductionPath, "<Components/>", snippet); //TODO: fix the relative component import in Fern to avoid this
281-
282-
283-
//-------------------------------------------------------------------------------- GENERATE DOCS.YML FILE for Fern --------------------------------------------------------------------------------
284-
// genreating the docs.yml file with dynamic content for components
285-
const docYMLFile = path.join(__dirname, "../docs/docs.yml");
286-
287-
// Load and parse the YAML file
288-
const docsYml:any = yaml.load(fs.readFileSync(__dirname+'/docs.yml', 'utf8'));
289-
// Get the Components section
290-
const componentsSection = docsYml.navigation.find(section => section.tab === 'react-print').layout.find(section => section.section === 'Components');
291-
292-
const subdirs = fs.readdirSync(docsPath, { withFileTypes: true }).filter(dirent => dirent.isDirectory()).map(dirent => dirent.name);
293-
294-
subdirs.forEach(subdir => {
295-
// Create a new section for the subdirectory
296-
297-
const newSection = {
298-
section: subdir.charAt(0).toUpperCase() + subdir.slice(1),
299-
contents: [],
300-
icon: sortedDocs.find(df => df.name.toLocaleLowerCase() === subdir.toLocaleLowerCase())!.icon
301-
};
302-
303-
// Get all mdx files in the subdirectory
304-
const mdxFiles = fs.readdirSync(path.join(docsPath, subdir)).filter(file => path.extname(file) === '.mdx');
305-
306-
// Add each mdx file to the new section
307-
mdxFiles.forEach(file => {
308-
const slug = path.basename(file, '.mdx');
309-
newSection.contents.push(
310-
{
311-
page: slug.charAt(0).toUpperCase() + slug.slice(1),
312-
path: `./react-print-pdf/docs/components/${subdir}/${file}`,
313-
slug: slug
314-
});
315-
});
316-
317-
// Add the new section to componentsSection.contents
318-
componentsSection.contents.push(newSection);
319-
});
320-
321-
// Convert the updated object back into YAML
322-
const updatedYaml = yaml.dump(docsYml);
323-
324-
// Write the updated YAML back to the file
325-
fs.writeFileSync(docYMLFile, updatedYaml, 'utf8');
282+
replaceInFile(introductionPath, /<Cards>[\s\S]*?<\/Cards>/, snippet); //TODO: fix the relative component import in Fern to avoid this
326283

327284

328285
};

‎docgen/pageBuilder/buildIntroduction.tsx

+7-11
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,19 @@ import fs from 'fs';
22
import path from 'path';
33

44

5-
export const replaceInFile = (filePath: string, search: string, replace: string) => {
5+
export const replaceInFile = (filePath: string, search: RegExp, replace: string) => {
66

77
let fileContents = fs.readFileSync(filePath, 'utf8');
88

9-
// Find the location to insert at
10-
const insertLocation = fileContents.indexOf(search);
9+
if (search.test(fileContents)) {
10+
// Replace the pattern with the new content
11+
fileContents = fileContents.replace(search, replace);
1112

12-
// Check if the location was found
13-
if (insertLocation !== -1) {
14-
// Insert the new content
15-
const newContent = replace;
16-
fileContents = fileContents.replace(search,newContent);
17-
18-
// Write the file back out
13+
// Write the updated content back to the file
1914
fs.writeFileSync(filePath, fileContents);
15+
console.log('Replacement successful');
2016
} else {
21-
console.log('Location not found');
17+
console.log('Pattern not found');
2218
}
2319

2420
}

‎docs/components/shell/currentpagetop.mdx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: CurrentPageTop
3+
4+
5+
---
6+
7+
Displays content in the top of the current page.
8+
9+
This component will override the content of the `PageTop` component for the current page.
10+
11+
Support
12+
13+
<div style={{
14+
display: "grid",
15+
gridTemplateColumns: "repeat(2, 1fr)",
16+
gap: "0.5rem",
17+
}}><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>
18+
19+
#### Preview
20+
21+
<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>
22+
23+
<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
24+
<CodeBlock title="template.tsx">
25+
```jsx
26+
import { CurrentPageTop } from "@fileforge/react-print";
27+
28+
<CurrentPageTop style={{ backgroundColor: "#bfdbfe" }} />;
29+
30+
```
31+
</CodeBlock>
32+
<CodeBlock title="styles.css">
33+
```css
34+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
35+
36+
html,
37+
body {
38+
font-size: 28px;
39+
font-family: "Inter", sans-serif;
40+
}
41+
42+
@page {
43+
size: A4;
44+
}
45+
46+
```
47+
</CodeBlock>
48+
</CodeBlocks></div>
49+
50+
### Examples
51+

‎docs/components/shell/nobreak.mdx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: NoBreak
3+
4+
5+
---
6+
7+
Prevents a page break. Wrap this component around content that should not be broken across pages.
8+
9+
Support
10+
11+
<div style={{
12+
display: "grid",
13+
gridTemplateColumns: "repeat(2, 1fr)",
14+
gap: "0.5rem",
15+
}}><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>
16+
17+
#### Preview
18+
19+
<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>
20+
21+
<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
22+
<CodeBlock title="template.tsx">
23+
```jsx
24+
import { NoBreak } from "@fileforge/react-print";
25+
26+
<NoBreak>This content will not be split between two pages.</NoBreak>;
27+
28+
```
29+
</CodeBlock>
30+
<CodeBlock title="styles.css">
31+
```css
32+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
33+
34+
html,
35+
body {
36+
font-size: 28px;
37+
font-family: "Inter", sans-serif;
38+
}
39+
40+
@page {
41+
size: A4;
42+
}
43+
44+
```
45+
</CodeBlock>
46+
</CodeBlocks></div>
47+
48+
### Examples
49+

0 commit comments

Comments
 (0)