Skip to content

Commit 47aba1c

Browse files
AlenarAlenar
committed
feat(website): add make swizzled-components-upgrade
to facilate upgrading of swizzled components if their base code from docusaurus change.
1 parent 149f342 commit 47aba1c

10 files changed

+502
-1
lines changed

‎docs/website/Makefile

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.PHONY: clean install build serve dev lint format upgrade update-current
1+
.PHONY: clean install build serve dev lint format upgrade update-current swizzled-components-upgrade
22

33
package-lock.json:
44
npm install
@@ -55,3 +55,24 @@ update-current:
5555
mv versioned_sidebars/version-updated-sidebars.json versioned_sidebars/version-maintained-sidebars.json
5656
# Remove the entry for the temporary version in the versions.json file
5757
sed -i '/updated/d' versions.json
58+
59+
swizzled-components-upgrade:
60+
@echo "\033[1mRemoving swizzled components\033[0m"
61+
rm -rf ./src/theme/Footer ./src/theme/Navbar
62+
63+
@echo "\033[1mRe-swizzling Docusaurus components\033[0m"
64+
npm run swizzle @docusaurus/theme-classic Footer/Layout -- --eject --typescript
65+
npm run swizzle @docusaurus/theme-classic Footer/LinkItem -- --eject --typescript
66+
npm run swizzle @docusaurus/theme-classic Footer/Links/MultiColumn -- --eject --typescript
67+
npm run swizzle @docusaurus/theme-classic Footer/Logo -- --eject --typescript
68+
69+
npm run swizzle @docusaurus/theme-classic Navbar/Content -- --eject --typescript --danger
70+
npm run swizzle @docusaurus/theme-classic Navbar/Layout -- --eject --typescript --danger
71+
npm run swizzle @docusaurus/theme-classic Navbar/MobileSidebar/Layout -- --eject --typescript --danger
72+
npm run swizzle @docusaurus/theme-classic Navbar/MobileSidebar/PrimaryMenu -- --eject --typescript --danger
73+
74+
@echo "\033[1mApplying prettier\033[0m"
75+
prettier --write ./src/theme/Footer ./src/theme/Navbar
76+
77+
@echo "\033[1mTrying to apply custom changes ...\033[0m conflicts must be handled manually"
78+
git apply ./upgrade/*.patch

‎docs/website/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,16 @@ When releasing a new distribution, the `current` documentation content can be ro
5454
```shell
5555
make update-current
5656
```
57+
58+
### Upgrading swizzled components
59+
60+
To apply a custom theme to the website, some components from the `docusaurus-theme-classic` have been swizzled.
61+
If there are changes from the docusaurus side, a makefile command is available to automatically swizzle them again and
62+
try to apply our custom changes:
63+
64+
> [!WARNING]
65+
> Conflicts have to be handled manually by the developer.
66+
67+
```shell
68+
$ make swizzled-components-upgrade
69+
```

‎docs/website/upgrade/theme-footer-layout.patch

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
diff --git a/docs/website/src/theme/Footer/Layout/index.tsx b/docs/website/src/theme/Footer/Layout/index.tsx
2+
index 9ccff2426..dbf8df940 100644
3+
--- a/docs/website/src/theme/Footer/Layout/index.tsx
4+
+++ b/docs/website/src/theme/Footer/Layout/index.tsx
5+
@@ -1,24 +1,18 @@
6+
import React, { type ReactNode } from "react";
7+
-import clsx from "clsx";
8+
-import { ThemeClassNames } from "@docusaurus/theme-common";
9+
import type { Props } from "@theme/Footer/Layout";
10+
+import clsx from "clsx";
11+
12+
export default function FooterLayout({
13+
- style,
14+
links,
15+
logo,
16+
copyright,
17+
}: Props): ReactNode {
18+
return (
19+
- <footer
20+
- className={clsx(ThemeClassNames.layout.footer.container, "footer", {
21+
- "footer--dark": style === "dark",
22+
- })}
23+
- >
24+
- <div className="container container-fluid">
25+
+ <footer className="bg-blue">
26+
+ <div className="pageContainer py-14 text-gray-extra-light">
27+
{links}
28+
{(logo || copyright) && (
29+
- <div className="footer__bottom text--center">
30+
+ <div className="flex tablet:items-center gap-2 tablet:flex-row flex-col text-gray-dark tablet:justify-between tablet:pt-4 tablet:border-t border-t-gray-dark">
31+
{logo && <div className="margin-bottom--sm">{logo}</div>}
32+
{copyright}
33+
</div>

‎docs/website/upgrade/theme-footer-linkItem.patch

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
diff --git a/docs/website/src/theme/Footer/LinkItem/index.tsx b/docs/website/src/theme/Footer/LinkItem/index.tsx
2+
index c0dfe6e7b..5aedc324b 100644
3+
--- a/docs/website/src/theme/Footer/LinkItem/index.tsx
4+
+++ b/docs/website/src/theme/Footer/LinkItem/index.tsx
5+
@@ -2,8 +2,7 @@ import React, { type ReactNode } from "react";
6+
import clsx from "clsx";
7+
import Link from "@docusaurus/Link";
8+
import useBaseUrl from "@docusaurus/useBaseUrl";
9+
-import isInternalUrl from "@docusaurus/isInternalUrl";
10+
-import IconExternalLink from "@theme/Icon/ExternalLink";
11+
+
12+
import type { Props } from "@theme/Footer/LinkItem";
13+
14+
export default function FooterLinkItem({ item }: Props): ReactNode {
15+
@@ -13,7 +12,7 @@ export default function FooterLinkItem({ item }: Props): ReactNode {
16+
17+
return (
18+
<Link
19+
- className={clsx("footer__link-item", className)}
20+
+ className={clsx("", className)}
21+
{...(href
22+
? {
23+
href: prependBaseUrlToHref ? normalizedHref : href,
24+
@@ -24,7 +23,6 @@ export default function FooterLinkItem({ item }: Props): ReactNode {
25+
{...props}
26+
>
27+
{label}
28+
- {href && !isInternalUrl(href) && <IconExternalLink />}
29+
</Link>
30+
);
31+
}

‎docs/website/upgrade/theme-footer-links-multiColumn.patch

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
diff --git a/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx b/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx
2+
index f06d1ea4b..dec1797ad 100644
3+
--- a/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx
4+
+++ b/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx
5+
@@ -1,6 +1,5 @@
6+
import React, { type ReactNode } from "react";
7+
import clsx from "clsx";
8+
-import { ThemeClassNames } from "@docusaurus/theme-common";
9+
import LinkItem from "@theme/Footer/LinkItem";
10+
import type { Props } from "@theme/Footer/Links/MultiColumn";
11+
12+
@@ -24,15 +23,9 @@ function ColumnLinkItem({ item }: { item: ColumnItemType }) {
13+
14+
function Column({ column }: { column: ColumnType }) {
15+
return (
16+
- <div
17+
- className={clsx(
18+
- ThemeClassNames.layout.footer.column,
19+
- "col footer__col",
20+
- column.className,
21+
- )}
22+
- >
23+
- <div className="footer__title">{column.title}</div>
24+
- <ul className="footer__items clean-list">
25+
+ <div className="flex flex-col gap-6">
26+
+ <div className="font-bold min-h-5">{column.title}</div>
27+
+ <ul className="flex flex-col gap-6">
28+
{column.items.map((item, i) => (
29+
<ColumnLinkItem key={i} item={item} />
30+
))}
31+
@@ -43,7 +36,7 @@ function Column({ column }: { column: ColumnType }) {
32+
33+
export default function FooterLinksMultiColumn({ columns }: Props): ReactNode {
34+
return (
35+
- <div className="row footer__links">
36+
+ <div className="laptop:flex laptop:flex-row tablet:grid tablet:grid-cols-2 laptop:gap-[6.25rem] gap-y-7 flex flex-col text-sm pb-12 tablet:pb-[3.625rem]">
37+
{columns.map((column, i) => (
38+
<Column key={i} column={column} />
39+
))}

‎docs/website/upgrade/theme-footer-logo.patch

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
diff --git a/docs/website/src/theme/Footer/Logo/index.tsx b/docs/website/src/theme/Footer/Logo/index.tsx
2+
index 2aa257a75..e7427e732 100644
3+
--- a/docs/website/src/theme/Footer/Logo/index.tsx
4+
+++ b/docs/website/src/theme/Footer/Logo/index.tsx
5+
@@ -15,7 +15,7 @@ function LogoImage({ logo }: Props) {
6+
};
7+
return (
8+
<ThemedImage
9+
- className={clsx("footer__logo", logo.className)}
10+
+ className={clsx(logo.className)}
11+
alt={logo.alt}
12+
sources={sources}
13+
width={logo.width}
14+
@@ -35,6 +35,9 @@ export default function FooterLogo({ logo }: Props): ReactNode {
15+
<LogoImage logo={logo} />
16+
</Link>
17+
) : (
18+
- <LogoImage logo={logo} />
19+
+ <div className="flex items-center text-2xl tracking-[-0.01125rem] gap-1">
20+
+ <LogoImage logo={logo} />
21+
+ <h4>Mithril</h4>
22+
+ </div>
23+
);
24+
}

‎docs/website/upgrade/theme-navbar-content.patch

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
diff --git a/docs/website/src/theme/Navbar/Content/index.tsx b/docs/website/src/theme/Navbar/Content/index.tsx
2+
index 43f2a1e73..2c98c10ac 100644
3+
--- a/docs/website/src/theme/Navbar/Content/index.tsx
4+
+++ b/docs/website/src/theme/Navbar/Content/index.tsx
5+
@@ -1,29 +1,24 @@
6+
-import React, { type ReactNode } from "react";
7+
-import clsx from "clsx";
8+
-import {
9+
- useThemeConfig,
10+
- ErrorCauseBoundary,
11+
- ThemeClassNames,
12+
-} from "@docusaurus/theme-common";
13+
+import React from "react";
14+
+import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common";
15+
import {
16+
splitNavbarItems,
17+
useNavbarMobileSidebar,
18+
} from "@docusaurus/theme-common/internal";
19+
-import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem";
20+
+import NavbarItem from "@theme/NavbarItem";
21+
import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle";
22+
import SearchBar from "@theme/SearchBar";
23+
import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
24+
import NavbarLogo from "@theme/Navbar/Logo";
25+
import NavbarSearch from "@theme/Navbar/Search";
26+
-
27+
import styles from "./styles.module.css";
28+
+import Discord from "../../../components/icons/Discord";
29+
+import Github from "../../../components/icons/Github";
30+
31+
function useNavbarItems() {
32+
// TODO temporary casting until ThemeConfig type is improved
33+
- return useThemeConfig().navbar.items as NavbarItemConfig[];
34+
+ return useThemeConfig().navbar.items;
35+
}
36+
-
37+
-function NavbarItems({ items }: { items: NavbarItemConfig[] }): ReactNode {
38+
+function NavbarItems({ items }) {
39+
return (
40+
<>
41+
{items.map((item, i) => (
42+
@@ -44,57 +39,28 @@ ${JSON.stringify(item, null, 2)}`,
43+
</>
44+
);
45+
}
46+
-
47+
-function NavbarContentLayout({
48+
- left,
49+
- right,
50+
-}: {
51+
- left: ReactNode;
52+
- right: ReactNode;
53+
-}) {
54+
+function NavbarContentLayout({ left, right }) {
55+
return (
56+
<div className="navbar__inner">
57+
- <div
58+
- className={clsx(
59+
- ThemeClassNames.layout.navbar.containerLeft,
60+
- "navbar__items",
61+
- )}
62+
- >
63+
- {left}
64+
- </div>
65+
- <div
66+
- className={clsx(
67+
- ThemeClassNames.layout.navbar.containerRight,
68+
- "navbar__items navbar__items--right",
69+
- )}
70+
- >
71+
- {right}
72+
- </div>
73+
+ <div className="navbar__items">{left}</div>
74+
+ <div className="navbar__items navbar__items--right">{right}</div>
75+
</div>
76+
);
77+
}
78+
-
79+
-export default function NavbarContent(): ReactNode {
80+
+export default function NavbarContent() {
81+
const mobileSidebar = useNavbarMobileSidebar();
82+
-
83+
const items = useNavbarItems();
84+
const [leftItems, rightItems] = splitNavbarItems(items);
85+
-
86+
const searchBarItem = items.find((item) => item.type === "search");
87+
-
88+
return (
89+
<NavbarContentLayout
90+
left={
91+
- // TODO stop hardcoding items?
92+
<>
93+
- {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
94+
<NavbarLogo />
95+
<NavbarItems items={leftItems} />
96+
</>
97+
}
98+
right={
99+
- // TODO stop hardcoding items?
100+
- // Ask the user to add the respective navbar items => more flexible
101+
<>
102+
<NavbarItems items={rightItems} />
103+
<NavbarColorModeToggle className={styles.colorModeToggle} />
104+
@@ -103,6 +69,23 @@ export default function NavbarContent(): ReactNode {
105+
<SearchBar />
106+
</NavbarSearch>
107+
)}
108+
+ <a
109+
+ href="https://github.com/input-output-hk/mithril/"
110+
+ target="_blank"
111+
+ rel="noopener noreferrer"
112+
+ className="hover:text-[var(--ifm-navbar-link-hover-color)] mx-3 py-1 laptop:flex hidden"
113+
+ >
114+
+ <Github />
115+
+ </a>
116+
+ <a
117+
+ href="https://discord.gg/5kaErDKDRq"
118+
+ target="_blank"
119+
+ rel="noopener noreferrer"
120+
+ className="hover:text-[var(--ifm-navbar-link-hover-color)] mx-3 py-1 laptop:flex hidden"
121+
+ >
122+
+ <Discord />
123+
+ </a>
124+
+ {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
125+
</>
126+
}
127+
/>
128+
diff --git a/docs/website/src/theme/Navbar/Content/styles.module.css b/docs/website/src/theme/Navbar/Content/styles.module.css
129+
index 9f080ff96..4c9471e10 100644
130+
--- a/docs/website/src/theme/Navbar/Content/styles.module.css
131+
+++ b/docs/website/src/theme/Navbar/Content/styles.module.css
132+
@@ -6,11 +6,3 @@ Hide color mode toggle in small viewports
133+
display: none;
134+
}
135+
}
136+
-
137+
-/*
138+
-Restore some Infima style that broke with CSS Cascade Layers
139+
-See https://github.com/facebook/docusaurus/pull/11142
140+
- */
141+
-:global(.navbar__items--right) > :last-child {
142+
- padding-right: 0;
143+
-}

0 commit comments

Comments
 (0)