feat(design): add a modern touch to the homepage and documentation (still wip)

Author: gulien

docs/getting-started/introduction.mdx

@@ -3,6 +3,8 @@ id: introduction
 title: What is Gotenberg?
 ---
 
+import Sponsors from '@site/src/components/documentation/Sponsors';
+
 [Gotenberg](https://github.com/gotenberg/gotenberg) is a containerized API for seamless PDF conversion.
 
 ## Overview
@@ -26,20 +28,7 @@ Gotenberg's modular design means each component is independently configurable.
 * **Open Source**<br />
 Gotenberg is open-source and free to use, making it an accessible solution for integrating PDF conversion into your projects.
 
-## Sponsors
-
-<div className="text--center">
-<a href="https://thecodingmachine.com" target="_blank">
-<img src="https://user-images.githubusercontent.com/8983173/130324668-9d6e7b35-53a3-49c7-a574-38190d2bd6b0.png" alt="TheCodingMachine Logo" width="429" height="210" />
-</a>
-<a href="https://pdfme.com?utm_source=gotenberg_github&utm_medium=website" target="_blank">
-<img src="https://github.com/user-attachments/assets/2a75dd40-ca18-4d34-acd5-5dd474595168" alt="pdfme Logo" width="429" height="210" />
-</a>
-</div>
-
----
-
-Sponsorships help maintain and improve Gotenberg - [become a sponsor](https://github.com/sponsors/gulien) ❤️
+<Sponsors />
 
 ## Getting Started
 

docusaurus.config.js

@@ -9,7 +9,12 @@ module.exports = {
   url: "https://gotenberg.dev",
   baseUrl: "/",
   onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
+  markdown: {
+    hooks: {
+      onBrokenMarkdownLinks: "warn",
+      onBrokenMarkdownImages: "throw",
+    },
+  },
   favicon: "img/favicon.ico",
   organizationName: "gotenberg",
   projectName: "gotenberg.dev",
@@ -22,7 +27,7 @@ module.exports = {
     },
     announcementBar: {
       id: "support_us",
-      content: `⭐️  &nbsp; If you like Gotenberg, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/gotenberg/gotenberg">GitHub</a>! &nbsp; ⭐️`,
+      content: `If you like Gotenberg, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/gotenberg/gotenberg">GitHub</a>!️`,
     },
     // announcementBar: {
     //   id: "gotenberg_8",
@@ -125,7 +130,7 @@ module.exports = {
       copyright: `Copyright © ${new Date().getFullYear()} Julien Neuhart.<br /> Built with <a href="https://docusaurus.io" target="_blank">Docusaurus</a>.`,
     },
     prism: {
-      theme: lightTheme,
+      theme: themes.nightOwl,
       additionalLanguages: ["bash", "docker", "json"],
     },
     colorMode: {

package-lock.json

@@ -9,39 +9,65 @@ export default function Hero() {
     <header className={styles.hero}>
       <div className="container">
         <div className="row">
-          <div className="col col--6">
-            <h1>
+          <div className={clsx("col col--6", styles.heroContent)}>
+            <h1 className={styles.title}>
               A containerized API for seamless
               <br />
-              <span className="highlight">PDF conversion</span>
+              <span className={styles.highlight}>PDF conversion</span>
             </h1>
-            <Link
-              className={clsx(
-                "button button--primary button--lg",
-                styles.getStartedButton
-              )}
-              to="/docs/getting-started/introduction"
-            >
-              Getting started
-            </Link>
-            <Link
-              className="button button--secondary button--lg"
-              to="https://github.com/gotenberg/gotenberg"
-            >
-              <img
-                className={styles.githubIcon}
-                src={useBaseUrl("/img/github.svg")}
-                alt="GitHub Logo"
-              />{" "}
-              <span className={styles.githubButtonText}>GitHub</span>
-            </Link>
-            <p className="padding-top--md">
+
+            <p className={styles.subtitle}>
               Available on <strong>amd64</strong>, <strong>arm64</strong>,{" "}
               <strong>armhf</strong>, <strong>i386</strong>, and{" "}
-              <strong>ppc64le</strong> architectures
+              <strong>ppc64le</strong>
             </p>
+
+            <div className={styles.buttons}>
+              <Link
+                className={clsx(
+                  "button button--primary button--lg",
+                  styles.btnCrisp,
+                  styles.btnPrimary
+                )}
+                to="/docs/getting-started/introduction"
+              >
+                Getting started
+                {/* Tiny arrow icon for momentum */}
+                <svg
+                  width="13"
+                  height="12"
+                  viewBox="0 0 13 12"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className={styles.btnIcon}
+                >
+                  <path
+                    d="M0 6H11M11 6L6 1M11 6L6 11"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  />
+                </svg>
+              </Link>
+
+              <Link
+                className={clsx(
+                  "button button--secondary button--lg",
+                  styles.btnCrisp,
+                  styles.btnSecondary
+                )}
+                to="https://github.com/gotenberg/gotenberg"
+              >
+                <img
+                  className={styles.githubIcon}
+                  src={useBaseUrl("/img/github.svg")}
+                  alt="GitHub Logo"
+                />
+                <span className={styles.githubButtonText}>GitHub</span>
+              </Link>
+            </div>
           </div>
-          <div className="col col--6">
+
+          <div className={clsx("col col--6", styles.heroImage)}>
             <img
               className={styles.logo}
               src={useBaseUrl("/img/logo_jed.png")}