This commit does not bring any changes in the code functionality.

Signed-off-by: prisis <d.bannert@anolilab.de>

feat: Refactor theme UI and improve cohesion across components

BREAKING-CHANGE: Multiple changes were made to enhance the UI and functionality of the theme. These include adjustments in margins, padding, and view classes for better responsiveness and aesthetics, removal of unused/commented codes, correction of preflight logic, and addition of tests. This was done to ensure consistency and efficiency of design across various components, enhancing user experience and usability of the theme. Also, unnecessary details were removed to improve readability and maintenance of the code.
Signed-off-by: prisis <d.bannert@anolilab.de>

feat: extending docs theme with new feature and fixes

removed newNextLinkBehavior option
added react-wrap-balancer on all header
exporting zoom
exporting toast as hook
added new meta description config
Fathom added to the docs
updated copy/symlink script for the docs
exporting search
added new accordion and accordion-group component
added new image-frame component
added new tooltip component

BREAKING CHANGE: next.js version changed to >=13.1.5

Signed-off-by: prisis <d.bannert@anolilab.de>

docs/.eslintignore

@@ -15,3 +15,6 @@ __test__/__fixture__
 __test__/__snapshots__
 
 _meta.*.json
+
+# Add all package docs to the .gitignore
+pages/docs/nextra-theme-docs

docs/theme.config.tsx

@@ -134,7 +134,6 @@ const config: DocumentationThemeConfig = {
             </span>
         ),
     },
-    // },
     i18n: [{ locale: "en-US", name: "English" }],
     logo: () => {
         // eslint-disable-next-line react-hooks/rules-of-hooks

examples/nextra/components/authors.js

@@ -0,0 +1,23 @@
+export default function Authors({ date, children, by = "by" }) {
+    return (
+        <div className="mt-4 mb-16 text-gray-500 text-sm">
+            {date} {by} {children}
+        </div>
+    );
+}
+
+export function Author({ name, link }) {
+    return (
+        <span className="after:content-[','] last:after:content-['']">
+            <a
+                key={name}
+                href={link}
+                target="_blank"
+                // style={{ textUnderlinePosition: "under" }}
+                className="mx-1 text-current underline [text-underline-position:from-font] decoration-from-font"
+            >
+                {name}
+            </a>
+        </span>
+    );
+}

examples/nextra/components/blog-index.js

@@ -0,0 +1,31 @@
+import { getPagesUnderRoute } from "nextra/context";
+import filterRouteLocale from "nextra/filter-route-locale";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+export default function BlogIndex({ more = "Read more" }) {
+    const { locale, defaultLocale } = useRouter();
+    return filterRouteLocale(getPagesUnderRoute("/blog"), locale, defaultLocale).map((page) => {
+        return (
+            <div key={page.route} className="mb-10">
+                <h3>
+                    <Link href={page.route} style={{ color: "inherit", textDecoration: "none" }} className="block font-semibold mt-8 text-2xl ">
+                        {page.meta?.title || page.frontMatter?.title || page.name}
+                    </Link>
+                </h3>
+                <p className="opacity-80 mt-6 leading-7">
+                    {page.frontMatter?.description}{" "}
+                    <span className="inline-block">
+                        <Link
+                            href={page.route}
+                            className="text-[color:hsl(var(--nextra-primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font"
+                        >
+                            {more + " →"}
+                        </Link>
+                    </span>
+                </p>
+                {page.frontMatter?.date ? <p className="opacity-50 text-sm mt-6 leading-7">{page.frontMatter.date}</p> : null}
+            </div>
+        );
+    });
+}

examples/nextra/components/diagrams/cache.js

@@ -0,0 +1,22 @@
+import useLocalesMap from "../use-locales-map";
+import { diagramCachePathsMap } from "../../translations/svgs";
+
+export const Cache = () => {
+    const paths = useLocalesMap(diagramCachePathsMap);
+
+    return (
+        <svg viewBox="0 0 588 311" fill="none" className="invert-on-dark">
+            <path stroke="#D2D2D2" d="M22.5 59.5h543v232h-543z" />
+            <path fill="#fff" d={paths.boxFirstCacheProvider} />
+            <path fill="#141414" d={paths.firstCacheProvider} />
+            <path stroke="#D2D2D2" d="M54.5 91.5h256v168h-256z" />
+            <circle cx={183} cy={174} r={44.5} fill="#EAEAEA" stroke="#D3D3D3" />
+            <path fill="#000" d={paths.leftSWRHooks} />
+            <circle cx={434} cy={174} r={44.5} fill="#EAEAEA" stroke="#D3D3D3" />
+            <path fill="#000" d={paths.rightSWRHooks} />
+            <path fill="#fff" d={paths.boxSecondCacheProvider} />
+            <path fill="#141414" d={paths.secondCacheProvider} />
+            <path fill="#9A9A9A" d={paths.defaultCacheProvider} />
+        </svg>
+    );
+};

examples/nextra/components/diagrams/infinite.js

@@ -0,0 +1,24 @@
+import useLocalesMap from "../use-locales-map";
+import { diagramInfinitePathMap } from "../../translations/svgs";
+
+export const Infinite = () => {
+    const path = useLocalesMap(diagramInfinitePathMap);
+
+    return (
+        <svg viewBox="0 0 769 356" fill="none" className="invert-on-dark">
+            <path
+                d="M5 0.5H763C765.485 0.5 767.5 2.51472 767.5 5V351C767.5 353.485 765.485 355.5 763 355.5H5.00002C2.51473 355.5 0.5 353.485 0.5 351V5C0.5 2.51472 2.51472 0.5 5 0.5Z"
+                fill="white"
+                stroke="#EEEEEE"
+            />
+            <path d="M21 26H747V40H21V26Z" fill="#E5E5E5" />
+            <path d="M21 70H747V84H21V70Z" fill="#E5E5E5" />
+            <path d="M21 114H747V128H21V114Z" fill="#E5E5E5" />
+            <path d="M21 158H747V172H21V158Z" fill="#E5E5E5" />
+            <path d="M21 202H747V216H21V202Z" fill="#E5E5E5" />
+            <path d="M21 246H747V260H21V246Z" fill="#E5E5E5" />
+            <rect x="21.5" y="288.5" width="725" height="31" rx="2.5" fill="#FAFAFA" stroke="#D3D3D3" />
+            <path d={path} fill="#454545" />
+        </svg>
+    );
+};

examples/nextra/components/diagrams/pagination.js

@@ -0,0 +1,37 @@
+import useLocalesMap from "../use-locales-map";
+import { diagramPaginationPathsMap } from "../../translations/svgs";
+
+export const Pagination = () => {
+    const paths = useLocalesMap(diagramPaginationPathsMap);
+
+    return (
+        <svg viewBox="0 0 769 356" fill="none" className="invert-on-dark">
+            <path
+                d="M5 0.5H763C765.485 0.5 767.5 2.51472 767.5 5V351C767.5 353.485 765.485 355.5 763 355.5H5.00002C2.51473 355.5 0.5 353.485 0.5 351V5C0.5 2.51472 2.51472 0.5 5 0.5Z"
+                fill="white"
+                stroke="#EEEEEE"
+            />
+            <path d="M1 288H769" stroke="#E5E5E5" />
+            <path d="M21 26H747V40H21V26Z" fill="#E5E5E5" />
+            <path d="M21 70H747V84H21V70Z" fill="#E5E5E5" />
+            <path d="M21 114H747V128H21V114Z" fill="#E5E5E5" />
+            <path d="M21 158H747V172H21V158Z" fill="#E5E5E5" />
+            <path d="M21 202H747V216H21V202Z" fill="#E5E5E5" />
+            <path d="M21 246H747V260H21V246Z" fill="#E5E5E5" />
+            <rect x="21.5" y="306.5" width="69" height="31" rx="2.5" fill="#FAFAFA" stroke="#D3D3D3" />
+            <path d={paths.prev} fill="#454545" />
+            <rect x="307.5" y="306.5" width="69" height="31" rx="2.5" fill="#FAFAFA" stroke="#D3D3D3" />
+            <path d={paths.next} fill="#454545" />
+            <path
+                d="M281.098 322.03C281.563 322.03 281.951 321.651 281.951 321.178C281.951 320.713 281.563 320.33 281.098 320.33C280.63 320.33 280.246 320.713 280.246 321.178C280.246 321.651 280.63 322.03 281.098 322.03ZM284.497 322.03C284.961 322.03 285.349 321.651 285.349 321.178C285.349 320.713 284.961 320.33 284.497 320.33C284.028 320.33 283.645 320.713 283.645 321.178C283.645 321.651 284.028 322.03 284.497 322.03ZM287.895 322.03C288.36 322.03 288.748 321.651 288.748 321.178C288.748 320.713 288.36 320.33 287.895 320.33C287.426 320.33 287.043 320.713 287.043 321.178C287.043 321.651 287.426 322.03 287.895 322.03Z"
+                fill="black"
+            />
+            <rect x="103.5" y="306.5" width="44" height="31" rx="2.5" fill="#FAFAFA" stroke="#D3D3D3" />
+            <path d={paths.one} fill="#454545" />
+            <rect x="160.5" y="306.5" width="44" height="31" rx="2.5" fill="#EDEDED" stroke="#B3B3B3" />
+            <path d={paths.two} fill="#454545" />
+            <rect x="217.5" y="306.5" width="44" height="31" rx="2.5" fill="#FAFAFA" stroke="#D3D3D3" />
+            <path d={paths.three} fill="#454545" />
+        </svg>
+    );
+};