mirror of
https://github.com/pdfme/pdfme.git
synced 2026-05-19 12:15:08 -04:00
Update website (#520)
* Change website keyword * website image optimize * website: Add pdfme Cloud link to navigation bar * website: Add pdfme Cloud link to footer * update docusaurus * add SidebarBanner * Update readme
This commit is contained in:
Kyohei Fukuda
45
README.md
45
README.md
@@ -1,6 +1,16 @@
|
||||
# PDFME
|
||||
|
||||
<p>
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
|
||||
<h4 align="center">
|
||||
<a href="https://pdfme.com/">Website</a> |
|
||||
<a href="https://app.pdfme.com/">pdfme Cloud</a> |
|
||||
<a href="https://discord.gg/xWPTJbmgNV">Discord</a>
|
||||
</h4>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/pdfme/pdfme/blob/master/LICENSE.md">
|
||||
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="pdfme is released under the MIT license." />
|
||||
</a>
|
||||
@@ -13,26 +23,10 @@
|
||||
<a href="https://npmcharts.com/compare/@pdfme/common?minimal=true">
|
||||
<img src="https://img.shields.io/npm/dm/@pdfme/common.svg" alt="Downloads per month on npm." />
|
||||
</a>
|
||||
<a href="https://pdfme.com/docs/development-guide#contribution">
|
||||
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?text=Awesome+pdf+library%21&url=https://pdfme.com">
|
||||
<img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Tweet" />
|
||||
</a>
|
||||
<a href="https://discord.gg/xWPTJbmgNV">
|
||||
<img
|
||||
src="https://img.shields.io/static/v1?label=discord&message=pdfme&color=566fbb&style=flat-square"
|
||||
alt="Discord Badge"
|
||||
/>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
TypeScript base PDF generator and React base UI.
|
||||
Open source, developed by the community, and completely free to use under the MIT license!
|
||||
<p align="center">TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
|
||||
## Features
|
||||
|
||||
@@ -315,3 +309,18 @@ I definitely could not have created pdfme without these libraries. I am grateful
|
||||
|
||||
If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.
|
||||
We look forward to your contribution!
|
||||
|
||||
## Cloud Service Option
|
||||
|
||||
While pdfme is a powerful open-source library, we understand that some users might prefer a managed solution. For those looking for a ready-to-use, scalable PDF generation service without the need for setup and maintenance, we offer pdfme Cloud.
|
||||
|
||||
**[Try pdfme Cloud - Hassle-free PDF Generation](https://app.pdfme.com/)**
|
||||
|
||||
pdfme Cloud provides all the features of the open-source library, plus:
|
||||
|
||||
- PDF generation at scale without infrastructure management
|
||||
- Hosted WYSIWYG template designer
|
||||
- Simple API integration
|
||||
- Automatic updates and maintenance
|
||||
|
||||
\*pdfme is and will always remain open-source. The cloud service is an optional offering for those who prefer a managed solution.
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
# PDFME
|
||||
|
||||
<p>
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
|
||||
<h4 align="center">
|
||||
<a href="https://pdfme.com/">Website</a> |
|
||||
<a href="https://app.pdfme.com/">pdfme Cloud</a> |
|
||||
<a href="https://discord.gg/xWPTJbmgNV">Discord</a>
|
||||
</h4>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/pdfme/pdfme/blob/master/LICENSE.md">
|
||||
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="pdfme is released under the MIT license." />
|
||||
</a>
|
||||
@@ -13,20 +23,9 @@
|
||||
<a href="https://npmcharts.com/compare/@pdfme/common?minimal=true">
|
||||
<img src="https://img.shields.io/npm/dm/@pdfme/common.svg" alt="Downloads per month on npm." />
|
||||
</a>
|
||||
<a href="https://pdfme.com/docs/development-guide#contribution">
|
||||
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?text=Awesome+pdf+library%21&url=https://pdfme.com">
|
||||
<img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Tweet" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
TypeScript base PDF generator and React base UI.
|
||||
Open source, developed by the community, and completely free to use under the MIT license!
|
||||
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
<p align="center">TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!</p>
|
||||
|
||||
## Features
|
||||
|
||||
@@ -302,3 +301,18 @@ const viewer = new Viewer({ domContainer, template, inputs });
|
||||
|
||||
If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.
|
||||
We look forward to your contribution!
|
||||
|
||||
## Cloud Service Option
|
||||
|
||||
While pdfme is a powerful open-source library, we understand that some users might prefer a managed solution. For those looking for a ready-to-use, scalable PDF generation service without the need for setup and maintenance, we offer pdfme Cloud.
|
||||
|
||||
**[Try pdfme Cloud - Hassle-free PDF Generation](https://app.pdfme.com/)**
|
||||
|
||||
pdfme Cloud provides all the features of the open-source library, plus:
|
||||
|
||||
- PDF generation at scale without infrastructure management
|
||||
- Hosted WYSIWYG template designer
|
||||
- Simple API integration
|
||||
- Automatic updates and maintenance
|
||||
|
||||
\*pdfme is and will always remain open-source. The cloud service is an optional offering for those who prefer a managed solution.
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
# PDFME
|
||||
|
||||
<p>
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
|
||||
<h4 align="center">
|
||||
<a href="https://pdfme.com/">Website</a> |
|
||||
<a href="https://app.pdfme.com/">pdfme Cloud</a> |
|
||||
<a href="https://discord.gg/xWPTJbmgNV">Discord</a>
|
||||
</h4>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/pdfme/pdfme/blob/master/LICENSE.md">
|
||||
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="pdfme is released under the MIT license." />
|
||||
</a>
|
||||
@@ -13,20 +23,9 @@
|
||||
<a href="https://npmcharts.com/compare/@pdfme/generator?minimal=true">
|
||||
<img src="https://img.shields.io/npm/dm/@pdfme/generator.svg" alt="Downloads per month on npm." />
|
||||
</a>
|
||||
<a href="https://pdfme.com/docs/development-guide#contribution">
|
||||
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?text=Awesome+pdf+library%21&url=https://pdfme.com">
|
||||
<img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Tweet" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
TypeScript base PDF generator and React base UI.
|
||||
Open source, developed by the community, and completely free to use under the MIT license!
|
||||
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
<p align="center">TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!</p>
|
||||
|
||||
## Features
|
||||
|
||||
@@ -301,3 +300,18 @@ I definitely could not have created pdfme without these libraries. I am grateful
|
||||
|
||||
If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.
|
||||
We look forward to your contribution!
|
||||
|
||||
## Cloud Service Option
|
||||
|
||||
While pdfme is a powerful open-source library, we understand that some users might prefer a managed solution. For those looking for a ready-to-use, scalable PDF generation service without the need for setup and maintenance, we offer pdfme Cloud.
|
||||
|
||||
**[Try pdfme Cloud - Hassle-free PDF Generation](https://app.pdfme.com/)**
|
||||
|
||||
pdfme Cloud provides all the features of the open-source library, plus:
|
||||
|
||||
- PDF generation at scale without infrastructure management
|
||||
- Hosted WYSIWYG template designer
|
||||
- Simple API integration
|
||||
- Automatic updates and maintenance
|
||||
|
||||
\*pdfme is and will always remain open-source. The cloud service is an optional offering for those who prefer a managed solution.
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
# PDFME
|
||||
|
||||
<p>
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
|
||||
<h4 align="center">
|
||||
<a href="https://pdfme.com/">Website</a> |
|
||||
<a href="https://app.pdfme.com/">pdfme Cloud</a> |
|
||||
<a href="https://discord.gg/xWPTJbmgNV">Discord</a>
|
||||
</h4>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/pdfme/pdfme/blob/master/LICENSE.md">
|
||||
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="pdfme is released under the MIT license." />
|
||||
</a>
|
||||
@@ -13,20 +23,9 @@
|
||||
<a href="https://npmcharts.com/compare/@pdfme/schemas?minimal=true">
|
||||
<img src="https://img.shields.io/npm/dm/@pdfme/schemas.svg" alt="Downloads per month on npm." />
|
||||
</a>
|
||||
<a href="https://pdfme.com/docs/development-guide#contribution">
|
||||
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?text=Awesome+pdf+library%21&url=https://pdfme.com">
|
||||
<img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Tweet" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
TypeScript base PDF generator and React base UI.
|
||||
Open source, developed by the community, and completely free to use under the MIT license!
|
||||
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
<p align="center">TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!</p>
|
||||
|
||||
## Features
|
||||
|
||||
@@ -302,3 +301,18 @@ const viewer = new Viewer({ domContainer, template, inputs });
|
||||
|
||||
If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.
|
||||
We look forward to your contribution!
|
||||
|
||||
## Cloud Service Option
|
||||
|
||||
While pdfme is a powerful open-source library, we understand that some users might prefer a managed solution. For those looking for a ready-to-use, scalable PDF generation service without the need for setup and maintenance, we offer pdfme Cloud.
|
||||
|
||||
**[Try pdfme Cloud - Hassle-free PDF Generation](https://app.pdfme.com/)**
|
||||
|
||||
pdfme Cloud provides all the features of the open-source library, plus:
|
||||
|
||||
- PDF generation at scale without infrastructure management
|
||||
- Hosted WYSIWYG template designer
|
||||
- Simple API integration
|
||||
- Automatic updates and maintenance
|
||||
|
||||
\*pdfme is and will always remain open-source. The cloud service is an optional offering for those who prefer a managed solution.
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
# PDFME
|
||||
|
||||
<p>
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
|
||||
<h4 align="center">
|
||||
<a href="https://pdfme.com/">Website</a> |
|
||||
<a href="https://app.pdfme.com/">pdfme Cloud</a> |
|
||||
<a href="https://discord.gg/xWPTJbmgNV">Discord</a>
|
||||
</h4>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/pdfme/pdfme/blob/master/LICENSE.md">
|
||||
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="pdfme is released under the MIT license." />
|
||||
</a>
|
||||
@@ -13,20 +23,9 @@
|
||||
<a href="https://npmcharts.com/compare/@pdfme/ui?minimal=true">
|
||||
<img src="https://img.shields.io/npm/dm/@pdfme/ui.svg" alt="Downloads per month on npm." />
|
||||
</a>
|
||||
<a href="https://pdfme.com/docs/development-guide#contribution">
|
||||
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?text=Awesome+pdf+library%21&url=https://pdfme.com">
|
||||
<img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Tweet" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
TypeScript base PDF generator and React base UI.
|
||||
Open source, developed by the community, and completely free to use under the MIT license!
|
||||
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
|
||||
</p>
|
||||
<p align="center">TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!</p>
|
||||
|
||||
## Features
|
||||
|
||||
@@ -302,3 +301,18 @@ const viewer = new Viewer({ domContainer, template, inputs });
|
||||
|
||||
If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.
|
||||
We look forward to your contribution!
|
||||
|
||||
## Cloud Service Option
|
||||
|
||||
While pdfme is a powerful open-source library, we understand that some users might prefer a managed solution. For those looking for a ready-to-use, scalable PDF generation service without the need for setup and maintenance, we offer pdfme Cloud.
|
||||
|
||||
**[Try pdfme Cloud - Hassle-free PDF Generation](https://app.pdfme.com/)**
|
||||
|
||||
pdfme Cloud provides all the features of the open-source library, plus:
|
||||
|
||||
- PDF generation at scale without infrastructure management
|
||||
- Hosted WYSIWYG template designer
|
||||
- Simple API integration
|
||||
- Automatic updates and maintenance
|
||||
|
||||
\*pdfme is and will always remain open-source. The cloud service is an optional offering for those who prefer a managed solution.
|
||||
|
||||
@@ -259,3 +259,18 @@ I definitely could not have created pdfme without these libraries. I am grateful
|
||||
|
||||
If you want to contribute to pdfme, please check the [Development Guide](/docs/development-guide) page.
|
||||
We look forward to your contribution!
|
||||
|
||||
## Cloud Service Option
|
||||
|
||||
While pdfme is a powerful open-source library, we understand that some users might prefer a managed solution. For those looking for a ready-to-use, scalable PDF generation service without the need for setup and maintenance, we offer pdfme Cloud.
|
||||
|
||||
**[Try pdfme Cloud - Hassle-free PDF Generation](https://app.pdfme.com/)**
|
||||
|
||||
pdfme Cloud provides all the features of the open-source library, plus:
|
||||
|
||||
- PDF generation at scale without infrastructure management
|
||||
- Hosted WYSIWYG template designer
|
||||
- Simple API integration
|
||||
- Automatic updates and maintenance
|
||||
|
||||
\*pdfme is and will always remain open-source. The cloud service is an optional offering for those who prefer a managed solution.
|
||||
|
||||
@@ -129,6 +129,11 @@ const config = {
|
||||
label: 'Discord',
|
||||
position: 'right',
|
||||
},
|
||||
{
|
||||
href: 'https://app.pdfme.com',
|
||||
label: 'Try pdfme Cloud',
|
||||
position: 'right',
|
||||
}
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
@@ -162,6 +167,10 @@ const config = {
|
||||
label: 'Blog',
|
||||
to: '/blog',
|
||||
},
|
||||
{
|
||||
label: 'Try pdfme Cloud',
|
||||
href: 'https://app.pdfme.com',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
4056
website/package-lock.json
generated
4056
website/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -15,11 +15,11 @@
|
||||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^3.0.1",
|
||||
"@docusaurus/module-type-aliases": "^3.0.1",
|
||||
"@docusaurus/plugin-client-redirects": "^3.0.1",
|
||||
"@docusaurus/plugin-google-gtag": "^3.0.1",
|
||||
"@docusaurus/preset-classic": "^3.0.1",
|
||||
"@docusaurus/core": "^3.4.0",
|
||||
"@docusaurus/module-type-aliases": "^3.4.0",
|
||||
"@docusaurus/plugin-client-redirects": "^3.4.0",
|
||||
"@docusaurus/plugin-google-gtag": "^3.4.0",
|
||||
"@docusaurus/preset-classic": "^3.4.0",
|
||||
"@emotion/react": "^11.7.1",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
"@handsontable/react": "^12.0.1",
|
||||
@@ -40,7 +40,7 @@
|
||||
"sass": "^1.47.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/docusaurus": "^1.0.4",
|
||||
"@tsconfig/docusaurus": "^2.0.3",
|
||||
"atob": "^2.1.2",
|
||||
"buffer": "^6.0.3",
|
||||
"typescript": "^4.5.4"
|
||||
|
||||
@@ -9,22 +9,22 @@ type FeatureItem = {
|
||||
|
||||
const FeatureList: FeatureItem[] = [
|
||||
{
|
||||
title: 'A fast PDF Generator',
|
||||
title: 'High-Speed PDF Generation',
|
||||
description: (
|
||||
<>
|
||||
No complex operations are required. Just bring your favorite template and generate all the PDFs you need.
|
||||
Works on node and the browser.
|
||||
Streamlined PDF generation process with no complex operations required. Use your preferred template
|
||||
to generate all the PDFs you need. Our PDF generation solution works seamlessly on both Node.js and in the browser.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Designer, an easy to use PDF template editor',
|
||||
description: <>Anyone can easily create and modify templates using Designer (UI template editor).</>,
|
||||
title: 'Intuitive PDF Generation Template Editor',
|
||||
description: <>Create and modify PDF generation templates effortlessly with our Designer, a user-friendly UI template editor for efficient PDF creation.</>,
|
||||
},
|
||||
{
|
||||
title: 'Templates as structured JSON Data',
|
||||
title: 'Structured JSON Data for PDF Generation Templates',
|
||||
description: (
|
||||
<>Templates have a JSON document representation, which makes theme easy to understand and easy to work with.</>
|
||||
<>Our PDF generation templates use a JSON document representation, making them easy to understand, manipulate, and integrate into your workflow.</>
|
||||
),
|
||||
},
|
||||
];
|
||||
@@ -48,7 +48,7 @@ export default function HomepageFeatures(): JSX.Element {
|
||||
<div className={clsx('col col--12')}>
|
||||
<h2>
|
||||
<a aria-hidden="true" className="anchor enhancedAnchor" id="features"></a>
|
||||
Features
|
||||
PDF Generation Features
|
||||
<a className="hash-link" href="#features" title="Direct link to heading"></a>
|
||||
</h2>
|
||||
</div>
|
||||
@@ -60,4 +60,4 @@ export default function HomepageFeatures(): JSX.Element {
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -15,26 +15,26 @@ export default function HomepageHeader() {
|
||||
<img src="/img/logo.svg" alt="logo" width={300} className={styles.logo} />
|
||||
</div>
|
||||
<div className="col col--6">
|
||||
<h1 className="hero__title">{siteConfig.title}: Free and Open source PDF generator!</h1>
|
||||
<h1 className="hero__title">{siteConfig.title}: Free and Open source PDF generation library!</h1>
|
||||
<p className="hero__subtitle">
|
||||
A PDF generator library fully written in TypeScript coming with a React based UI
|
||||
template editor*.
|
||||
A powerful PDF generation library fully written in TypeScript, featuring a React-based UI
|
||||
template editor for seamless PDF creation*.
|
||||
<br />
|
||||
Open source, developed by the community, and completely free to use under the MIT
|
||||
Open source, community-driven, and completely free for PDF generation under the MIT
|
||||
license!
|
||||
</p>
|
||||
<strong>* The generator library and the UI editor can be used separately.</strong>
|
||||
<strong>* The PDF generation library and the UI editor can be used separately.</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row row--no-gutters" style={{ alignItems: 'center' }}>
|
||||
<div className="col col--3" style={{ marginTop: '1rem' }}>
|
||||
<Link className="button button--lg button--success " to="/docs/getting-started">
|
||||
Getting Started
|
||||
Start PDF Generation
|
||||
</Link>
|
||||
</div>
|
||||
<div className="col col--3" style={{ marginTop: '1rem' }}>
|
||||
<Link className="button button--lg button--secondary " to="/demo">
|
||||
Demo Apps
|
||||
PDF Generation Demos
|
||||
</Link>
|
||||
</div>
|
||||
<div className="col col--3" style={{ marginTop: '1rem' }}>
|
||||
@@ -43,7 +43,7 @@ export default function HomepageHeader() {
|
||||
href="https://playground.pdfme.com"
|
||||
target={'_blank'}
|
||||
>
|
||||
Playground
|
||||
PDF Generation Playground
|
||||
</a>
|
||||
</div>
|
||||
<div className="col col--6" />
|
||||
@@ -51,4 +51,4 @@ export default function HomepageHeader() {
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -96,8 +96,8 @@ export default function Home(): JSX.Element {
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`Free and Open source PDF generator library!`}
|
||||
description="Free and Open source PDF generator library fully written in TypeScript coming with a React based UI template editor."
|
||||
title="Free and Open source PDF generation library!"
|
||||
description="Free and Open source PDF generation library fully written in TypeScript, featuring a React-based UI template editor for efficient PDF creation."
|
||||
>
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
@@ -111,7 +111,7 @@ export default function Home(): JSX.Element {
|
||||
<div className={clsx('col col--6')}>
|
||||
<h2>
|
||||
<a aria-hidden="true" className="anchor enhancedAnchor" id="template"></a>
|
||||
Template
|
||||
PDF Generation Template
|
||||
<a className="hash-link" href="#template"></a>
|
||||
</h2>
|
||||
<div className="card">
|
||||
@@ -130,7 +130,7 @@ export default function Home(): JSX.Element {
|
||||
className="button button--lg button--primary button--block"
|
||||
to="/docs/getting-started#template"
|
||||
>
|
||||
Learn more about Templates
|
||||
Learn more about PDF Generation Templates
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -138,7 +138,7 @@ export default function Home(): JSX.Element {
|
||||
<div className={clsx('col col--6')}>
|
||||
<h2>
|
||||
<a aria-hidden="true" className="anchor enhancedAnchor" id="generate"></a>
|
||||
Generator
|
||||
PDF Generation
|
||||
<a className="hash-link" href="#generate"></a>
|
||||
</h2>
|
||||
<div style={{ maxHeight: 580, overflow: 'scroll' }}>
|
||||
@@ -158,7 +158,7 @@ export default function Home(): JSX.Element {
|
||||
className="margin-vert--md button button--primary button--lg button--block"
|
||||
to="/docs/getting-started#generator"
|
||||
>
|
||||
Learn more about the Generator
|
||||
Learn more about PDF Generation
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
109
website/src/theme/TOC/index.tsx
Normal file
109
website/src/theme/TOC/index.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import React from 'react';
|
||||
import TOC from '@theme-original/TOC';
|
||||
import type TOCType from '@theme/TOC';
|
||||
import type { WrapperProps } from '@docusaurus/types';
|
||||
import { FlashOn } from '@mui/icons-material';
|
||||
|
||||
function SidebarBanner() {
|
||||
const bannerStyle = {
|
||||
background: 'linear-gradient(45deg, rgb(37, 194, 160), rgb(32, 166, 137))',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 4px 15px rgba(37, 194, 160, 0.3)',
|
||||
padding: '16px',
|
||||
position: 'relative' as const,
|
||||
overflow: 'hidden',
|
||||
transition: 'all 0.3s ease',
|
||||
};
|
||||
|
||||
const blurCircleStyle = {
|
||||
position: 'absolute' as const,
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255, 255, 255, 0.3)',
|
||||
filter: 'blur(20px)',
|
||||
zIndex: 0,
|
||||
};
|
||||
|
||||
const contentStyle = {
|
||||
position: 'relative' as const,
|
||||
zIndex: 1,
|
||||
};
|
||||
|
||||
const linkStyle = {
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
alignItems: 'center',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
};
|
||||
|
||||
const titleStyle = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
marginBottom: '8px',
|
||||
textShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
};
|
||||
|
||||
const iconStyle = {
|
||||
marginRight: '8px',
|
||||
fontSize: '24px',
|
||||
filter: 'drop-shadow(0 2px 2px rgba(0,0,0,0.1))',
|
||||
};
|
||||
|
||||
const subtitleStyle = {
|
||||
color: 'rgba(255, 255, 255, 0.95)',
|
||||
fontSize: '12px',
|
||||
textAlign: 'center' as const,
|
||||
lineHeight: '1.4',
|
||||
textShadow: '0 1px 2px rgba(0,0,0,0.1)',
|
||||
};
|
||||
|
||||
return (
|
||||
<a
|
||||
href="https://app.pdfme.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={linkStyle}
|
||||
>
|
||||
<div
|
||||
className="sidebar-banner"
|
||||
style={bannerStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-3px) scale(1.02)';
|
||||
e.currentTarget.style.boxShadow = '0 6px 20px rgba(37, 194, 160, 0.4)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0) scale(1)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 15px rgba(37, 194, 160, 0.3)';
|
||||
}}
|
||||
>
|
||||
<div style={{ ...blurCircleStyle, top: '-50px', left: '-50px' }} />
|
||||
<div style={{ ...blurCircleStyle, bottom: '-30px', right: '-30px' }} />
|
||||
<div style={contentStyle}>
|
||||
<div style={titleStyle}>
|
||||
<FlashOn style={iconStyle} />
|
||||
<span>Try pdfme Cloud</span>
|
||||
</div>
|
||||
<p style={subtitleStyle}>
|
||||
No setup needed. Create PDFs in seconds with pdfme Cloud!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
type Props = WrapperProps<typeof TOCType>;
|
||||
|
||||
export default function TOCWrapper(props: Props): JSX.Element {
|
||||
return (
|
||||
<div style={{ position: 'sticky', top: 76 }}>
|
||||
<TOC {...props} />
|
||||
<div style={{ height: 32 }} />
|
||||
<SidebarBanner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 447 KiB After Width: | Height: | Size: 436 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 442 KiB After Width: | Height: | Size: 432 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 346 KiB After Width: | Height: | Size: 337 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 284 KiB After Width: | Height: | Size: 279 KiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
Reference in New Issue
Block a user