diff --git a/docs/how-to/allow-ip-addresses.mdx b/docs/features/allow-ip-addresses.mdx similarity index 100% rename from docs/how-to/allow-ip-addresses.mdx rename to docs/features/allow-ip-addresses.mdx diff --git a/docs/how-to/api-token.mdx b/docs/features/api-token.mdx similarity index 100% rename from docs/how-to/api-token.mdx rename to docs/features/api-token.mdx diff --git a/docs/how-to/browser-extension.mdx b/docs/features/browser-extension.mdx similarity index 100% rename from docs/how-to/browser-extension.mdx rename to docs/features/browser-extension.mdx diff --git a/docs/how-to/dependency-management.md b/docs/features/dependency-management.md similarity index 100% rename from docs/how-to/dependency-management.md rename to docs/features/dependency-management.md diff --git a/docs/how-to/end-to-end-testing.mdx b/docs/features/end-to-end-testing.mdx similarity index 100% rename from docs/how-to/end-to-end-testing.mdx rename to docs/features/end-to-end-testing.mdx diff --git a/docs/how-to/environments.mdx b/docs/features/environments.mdx similarity index 100% rename from docs/how-to/environments.mdx rename to docs/features/environments.mdx diff --git a/docs/how-to/fork-our-examples.mdx b/docs/features/fork-our-examples.mdx similarity index 100% rename from docs/how-to/fork-our-examples.mdx rename to docs/features/fork-our-examples.mdx diff --git a/docs/how-to/framework-bundlers.mdx b/docs/features/framework-bundlers.mdx similarity index 100% rename from docs/how-to/framework-bundlers.mdx rename to docs/features/framework-bundlers.mdx diff --git a/docs/how-to/github-automations.mdx b/docs/features/github-automations.mdx similarity index 100% rename from docs/how-to/github-automations.mdx rename to docs/features/github-automations.mdx diff --git a/docs/how-to/gitlab-automations.mdx b/docs/features/gitlab-automations.mdx similarity index 100% rename from docs/how-to/gitlab-automations.mdx rename to docs/features/gitlab-automations.mdx diff --git a/docs/how-to/mf-guide.mdx b/docs/features/mf-guide.mdx similarity index 100% rename from docs/how-to/mf-guide.mdx rename to docs/features/mf-guide.mdx diff --git a/docs/how-to/migrate-nx-webpack-to-rspack.mdx b/docs/features/migrate-nx-webpack-to-rspack.mdx similarity index 100% rename from docs/how-to/migrate-nx-webpack-to-rspack.mdx rename to docs/features/migrate-nx-webpack-to-rspack.mdx diff --git a/docs/how-to/version-statuses.md b/docs/features/version-statuses.md similarity index 100% rename from docs/how-to/version-statuses.md rename to docs/features/version-statuses.md diff --git a/docs/how-to/versioning-tags.mdx b/docs/features/versioning-tags.mdx similarity index 100% rename from docs/how-to/versioning-tags.mdx rename to docs/features/versioning-tags.mdx diff --git a/docs/learning/concepts/architecture.mdx b/docs/general/architecture.mdx similarity index 100% rename from docs/learning/concepts/architecture.mdx rename to docs/general/architecture.mdx diff --git a/docs/learning/concepts/edge.mdx b/docs/learning/concepts/edge.mdx deleted file mode 100644 index d6e5a59..0000000 --- a/docs/learning/concepts/edge.mdx +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: What does edge even mean? -description: Zephyr Cloud Documentation - A comprehensive explaination of "Edge" ---- - -# What does edge even mean? diff --git a/docs/learning/concepts/micro-frontend.mdx b/docs/learning/concepts/micro-frontend.mdx deleted file mode 100644 index 55e06f0..0000000 --- a/docs/learning/concepts/micro-frontend.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Micro-Frontend -description: Zephyr Cloud Documentation - What's micro-frontend? What's their use cases? Who needs them? ---- - -# Micro-frontend - -:::note{title="Hanging there!"} - -Docs coming soon... - -::: diff --git a/docs/learning/concepts/module-federation.mdx b/docs/learning/concepts/module-federation.mdx deleted file mode 100644 index 2a66efd..0000000 --- a/docs/learning/concepts/module-federation.mdx +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Module Federation -description: Zephyr Cloud Documentation - What's module federation? When does people need them? Why do they need it and it's use cases - ---- - - - -# Module Federation - -:::details {title="Prior Knowledge"} -- If you are using Rspack or Webpack in production - great. If you are joining a new company, or would like to learn [webpack](https://webpack.js.org/) from scratch. We recommend you to go through our [learn webpack by creating a react app with webpack](/learning/react-webpack). - -::: - -## Deep dive - -:::note{title="Hanging there!"} - -Docs coming soon... - -::: - - - - -## MF 1.0 VS. MF 2.0 - - - -:::note {title="Appreciation"} -- Huge shout of to [Hanric Zhang](https://x.com/2hea1) and [Zack Jackson](https://x.com/ScriptedAlchemy) because this section is adjusted based on their [Understanding Module Federation: A Deep Dive](https://scriptedalchemy.medium.com/understanding-webpack-module-federation-a-deep-dive-efe5c55bf366). - -::: \ No newline at end of file diff --git a/docs/learning/concepts/terminologies.mdx b/docs/learning/concepts/terminologies.mdx deleted file mode 100644 index a44d8d3..0000000 --- a/docs/learning/concepts/terminologies.mdx +++ /dev/null @@ -1,33 +0,0 @@ -# Terminologies - -:::note{title="Hanging there!"} - -Docs coming soon... - -::: - - -### Micro-Frontends - - - - -### Module Federation - - - - -### Consumption Module (Host/Remote/Import) - - - - -### Exposed Module (Remote) - - - -### Shared Module/Dependency - - - -### Remote Entry \ No newline at end of file diff --git a/docs/learning/react-webpack.mdx b/docs/learning/react-webpack.mdx deleted file mode 100644 index db55c5e..0000000 --- a/docs/learning/react-webpack.mdx +++ /dev/null @@ -1,8 +0,0 @@ - -# Learn webpack by creating a react app with webpack - -:::note{title="Hanging there!"} - -Docs coming soon... - -::: diff --git a/docs/recipes.mdx b/docs/tutorials.mdx similarity index 100% rename from docs/recipes.mdx rename to docs/tutorials.mdx diff --git a/docs/recipes/existing-app.mdx b/docs/tutorials/existing-app.mdx similarity index 100% rename from docs/recipes/existing-app.mdx rename to docs/tutorials/existing-app.mdx diff --git a/docs/recipes/migrate-nx-webpack-to-rspack.mdx b/docs/tutorials/migrate-nx-webpack-to-rspack.mdx similarity index 100% rename from docs/recipes/migrate-nx-webpack-to-rspack.mdx rename to docs/tutorials/migrate-nx-webpack-to-rspack.mdx diff --git a/docs/recipes/modernjs.mdx b/docs/tutorials/modernjs.mdx similarity index 100% rename from docs/recipes/modernjs.mdx rename to docs/tutorials/modernjs.mdx diff --git a/docs/recipes/nx-mf-app.mdx b/docs/tutorials/nx-mf-app.mdx similarity index 100% rename from docs/recipes/nx-mf-app.mdx rename to docs/tutorials/nx-mf-app.mdx diff --git a/docs/recipes/parcel-react.mdx b/docs/tutorials/parcel-react.mdx similarity index 100% rename from docs/recipes/parcel-react.mdx rename to docs/tutorials/parcel-react.mdx diff --git a/docs/recipes/react-native.mdx b/docs/tutorials/react-native.mdx similarity index 100% rename from docs/recipes/react-native.mdx rename to docs/tutorials/react-native.mdx diff --git a/docs/recipes/react-native/bootstrapping-thumbnail.jpg b/docs/tutorials/react-native/bootstrapping-thumbnail.jpg similarity index 100% rename from docs/recipes/react-native/bootstrapping-thumbnail.jpg rename to docs/tutorials/react-native/bootstrapping-thumbnail.jpg diff --git a/docs/recipes/react-native/bootstrapping-your-native-application.mdx b/docs/tutorials/react-native/bootstrapping-your-native-application.mdx similarity index 100% rename from docs/recipes/react-native/bootstrapping-your-native-application.mdx rename to docs/tutorials/react-native/bootstrapping-your-native-application.mdx diff --git a/docs/recipes/react-native/configuring-host.mdx b/docs/tutorials/react-native/configuring-host.mdx similarity index 100% rename from docs/recipes/react-native/configuring-host.mdx rename to docs/tutorials/react-native/configuring-host.mdx diff --git a/docs/recipes/react-native/configuring-remote.mdx b/docs/tutorials/react-native/configuring-remote.mdx similarity index 100% rename from docs/recipes/react-native/configuring-remote.mdx rename to docs/tutorials/react-native/configuring-remote.mdx diff --git a/docs/recipes/react-native/rspack-ios-setup.mdx b/docs/tutorials/react-native/rspack-ios-setup.mdx similarity index 100% rename from docs/recipes/react-native/rspack-ios-setup.mdx rename to docs/tutorials/react-native/rspack-ios-setup.mdx diff --git a/docs/recipes/react-native/state-manager-sharing-between-react-native-applications.mdx b/docs/tutorials/react-native/state-manager-sharing-between-react-native-applications.mdx similarity index 100% rename from docs/recipes/react-native/state-manager-sharing-between-react-native-applications.mdx rename to docs/tutorials/react-native/state-manager-sharing-between-react-native-applications.mdx diff --git a/docs/recipes/react-rspack-nx.mdx b/docs/tutorials/react-rspack-nx.mdx similarity index 100% rename from docs/recipes/react-rspack-nx.mdx rename to docs/tutorials/react-rspack-nx.mdx diff --git a/docs/recipes/react-vite-nx.mdx b/docs/tutorials/react-vite-nx.mdx similarity index 100% rename from docs/recipes/react-vite-nx.mdx rename to docs/tutorials/react-vite-nx.mdx diff --git a/docs/recipes/react-vite.mdx b/docs/tutorials/react-vite.mdx similarity index 100% rename from docs/recipes/react-vite.mdx rename to docs/tutorials/react-vite.mdx diff --git a/docs/recipes/repack-mf.mdx b/docs/tutorials/repack-mf.mdx similarity index 100% rename from docs/recipes/repack-mf.mdx rename to docs/tutorials/repack-mf.mdx diff --git a/docs/learning/resources.mdx b/docs/tutorials/resources.mdx similarity index 100% rename from docs/learning/resources.mdx rename to docs/tutorials/resources.mdx diff --git a/docs/recipes/rolldown-react.mdx b/docs/tutorials/rolldown-react.mdx similarity index 100% rename from docs/recipes/rolldown-react.mdx rename to docs/tutorials/rolldown-react.mdx diff --git a/docs/recipes/rspress.mdx b/docs/tutorials/rspress.mdx similarity index 100% rename from docs/recipes/rspress.mdx rename to docs/tutorials/rspress.mdx diff --git a/docs/recipes/turborepo-react.mdx b/docs/tutorials/turborepo-react.mdx similarity index 100% rename from docs/recipes/turborepo-react.mdx rename to docs/tutorials/turborepo-react.mdx diff --git a/docs/recipes/vanilla-mf.mdx b/docs/tutorials/vanilla-mf.mdx similarity index 100% rename from docs/recipes/vanilla-mf.mdx rename to docs/tutorials/vanilla-mf.mdx diff --git a/docs/recipes/vite-rspack-webpack-mf.mdx b/docs/tutorials/vite-rspack-webpack-mf.mdx similarity index 100% rename from docs/recipes/vite-rspack-webpack-mf.mdx rename to docs/tutorials/vite-rspack-webpack-mf.mdx diff --git a/package.json b/package.json index 24c2a34..1f42127 100644 --- a/package.json +++ b/package.json @@ -63,20 +63,21 @@ "@types/node": "^22.13.13", "@types/react": "^19.0.12", "autoprefixer": "^10.4.21", + "dotenv": "^16.5.0", "globals": "^16.0.0", "nx": "21.1.2", "postcss": "^8.5.3", "postcss-loader": "^8.1.1", "tailwindcss": "^3.4.17", - "typescript": "^5.8.2", - "dotenv": "^16.5.0" + "typescript": "^5.8.2" }, "optionalDependencies": { "@rspress/mdx-rs-linux-x64-gnu": "^0.6.6" }, "pnpm": { "patchedDependencies": { - "rspress-plugin-google-analytics@0.3.0": "patches/rspress-plugin-google-analytics@0.3.0.patch" + "rspress-plugin-google-analytics@0.3.0": "patches/rspress-plugin-google-analytics@0.3.0.patch", + "@rspress/theme-default": "patches/@rspress__theme-default.patch" }, "onlyBuiltDependencies": [ "@biomejs/biome", diff --git a/patches/@rspress__theme-default.patch b/patches/@rspress__theme-default.patch new file mode 100644 index 0000000..b826635 --- /dev/null +++ b/patches/@rspress__theme-default.patch @@ -0,0 +1,63 @@ +diff --git a/dist/bundle.css b/dist/bundle.css +index 5d3288642b3aacdde9f44747854047832cf79a6a..f1d39cddeb4a8c012c1f434b596d2b626118151e 100644 +--- a/dist/bundle.css ++++ b/dist/bundle.css +@@ -1,7 +1,7 @@ + .aside-link { +- border-radius: var(--rp-radius-small) 0 0 var(--rp-radius-small); ++ border-radius: 0 0 0 0; + margin-bottom: 1px; +- padding: .25rem 0; ++ padding: 0.4rem 0.2rem; + } + + .aside-link:hover { +@@ -15,7 +15,7 @@ + + .aside-link-text { + overflow-wrap: break-word; +- padding: 0 12px; ++ padding: 6px 12px; + font-size: .8125rem; + line-height: 1.25rem; + } +@@ -53,7 +53,7 @@ + + .navContainer_d18b1 { + background: var(--rp-c-bg); +- height: var(--rp-nav-height); ++ border-bottom: 0.4px solid var(--rp-c-text-1); + z-index: var(--rp-z-index-nav); + transition: transform .3s, opacity .3s; + top: 0; +@@ -243,7 +243,7 @@ + } + + .menuItem_ac22e, .menuItemActive_de63c { +- border-radius: 0 var(--rp-radius) var(--rp-radius) 0; ++ border-radius: 0 0 0 0; + font-size: 13px; + line-height: 19px; + } +diff --git a/dist/bundle.js b/dist/bundle.js +index ef6850600f48b035786e29398a6e5ea9eb2dc020..a1c92257c8666e49eed84af3753200cb19bcb5ca 100644 +--- a/dist/bundle.js ++++ b/dist/bundle.js +@@ -601,7 +601,7 @@ function SidebarGroup(props) { + collapsible && toggleCollapse(e); + }, + style: { +- borderRadius: 0 === depth ? '0 var(--rp-radius) var(--rp-radius) 0' : void 0, ++ borderRadius: 0 === depth ? '0 0 0 0' : void 0, + cursor: collapsible || item.link ? 'pointer' : 'normal' + }, + children: [ +@@ -689,7 +689,7 @@ function SidebarItem(props) { + style: { + fontSize: 0 === depth ? '14px' : '13px', + marginLeft: 0 === depth ? 0 : '18px', +- borderRadius: '0 var(--rp-radius) var(--rp-radius) 0', ++ borderRadius: '0 0 0 0', + ...0 === depth ? highlightTitleStyle : {} + }, + children: [ diff --git a/rspress.config.ts b/rspress.config.ts index 0a83b3c..005f17c 100644 --- a/rspress.config.ts +++ b/rspress.config.ts @@ -66,17 +66,6 @@ const socialLinks: SocialLink[] = [ ]; const nav: Nav = [ - { - text: "Get Started", - link: "/general/get-started", - activeMatch: "/general/get-started/", - }, - { - text: "Learning", - link: "/learning", - activeMatch: "/learning", - }, - { text: "Zephyr Cloud →", link: "https://app.zephyr-cloud.io", @@ -87,11 +76,16 @@ const sidebar: Sidebar = { "/": [ { text: "General", + link: "/", items: [ { text: "Why Zephyr Cloud", link: "/general/why-zephyr-cloud", }, + { + text: "Architecture", + link: "/general/architecture", + }, { text: "Get Started", link: "/general/get-started", @@ -107,204 +101,210 @@ const sidebar: Sidebar = { ], }, { - text: "How to", + text: "Features", + link: "/features/mf-guide", items: [ { text: "Micro-Frontends with Zephyr", - link: "/how-to/mf-guide", + link: "/features/mf-guide", }, { text: "Dependency Management", - link: "/how-to/dependency-management", + link: "/features/dependency-management", }, { text: "Fork Our Examples", - link: "/how-to/fork-our-examples", + link: "/features/fork-our-examples", }, { text: "Environments", - link: "/how-to/environments", + link: "/features/environments", }, { text: "GitHub automations", - link: "/how-to/github-automations", + link: "/features/github-automations", }, { text: "Gitlab automations", - link: "/how-to/gitlab-automations", + link: "/features/gitlab-automations", }, { text: "End-to-end Testing", - link: "/how-to/end-to-end-testing", + link: "/features/end-to-end-testing", }, { text: "Chrome Extension", - link: "/how-to/browser-extension", + link: "/features/browser-extension", }, { text: "Version rollback and roll-forward", - link: "/how-to/versioning-tags", + link: "/features/versioning-tags", }, { text: "Generate an API Token", - link: "/how-to/api-token", + link: "/features/api-token", }, { text: "Version Statuses", - link: "/how-to/version-statuses", + link: "/features/version-statuses", }, { text: "Allow IP addresses", - link: "/how-to/allow-ip-addresses", + link: "/features/allow-ip-addresses", }, ], }, { - text: "Cloud Providers", - link: "/cloud", + text: "Supported Bundlers & Platforms", + link: "/supported", + }, + { + text: "Troubleshooting", + link: "/errors", + collapsed: true, + collapsible: true, + items: Object.entries(Categories) + .filter(([category]) => category !== "unknown") + .map(([category, value]) => ({ + text: capitalizeFirstLetter(category), + collapsed: true, + collapsible: true, + items: Object.values(Errors) + .filter((error) => error.kind === category) + .map((error) => ({ + text: `ZE${value}${error.id}`, + link: `/errors/ze${value}${error.id}`, + description: error.message, + label: error.message, + })), + })), + }, + ], + "/learning": [ + { + text: "Concepts", + collapsed: false, + collapsible: true, items: [ { - text: "Cloudflare", - link: "/cloud/cloudflare", + text: "Terminologies", + link: "/learning/concepts/terminologies", }, { - text: "Fastly", - link: "/cloud/fastly", + text: "Architecture", + link: "/learning/concepts/architecture", }, + { - text: "Netlify", - link: "/cloud/netlify", + text: "Micro-Frontend", + link: "/learning/concepts/micro-frontend", + }, + { + text: "Module Federation", + link: "/learning/concepts/module-federation", + }, + ], + }, + + { + text: "Walk-through", + collapsed: true, + collapsible: true, + items: [ + { + text: "Learn webpack with React", + link: "/learning/react-webpack", }, ], }, { - text: "Recipes", - link: "/recipes", + text: "Additional Resources", + link: "/learning/resources", + }, + ], + "/tutorials": [ + { + text: "Tutorials", collapsed: false, collapsible: true, items: [ { text: "Existing App", - link: "/recipes/existing-app", + link: "/tutorials/existing-app", }, { text: "React Native + Re.Pack + MF", - link: "/recipes/repack-mf", + link: "/tutorials/repack-mf", }, { text: "React + Vite", - link: "/recipes/react-vite", + link: "/tutorials/react-vite", }, { text: "Vite + Rspack + webpack + MF", - link: "/recipes/vite-rspack-webpack-mf", + link: "/tutorials/vite-rspack-webpack-mf", }, { text: "React + Rspack + Nx", - link: "/recipes/react-rspack-nx", + link: "/tutorials/react-rspack-nx", }, { text: "Rspress", - link: "/recipes/rspress", + link: "/tutorials/rspress", }, { text: "React + Rspack + Turborepo", - link: "/recipes/turborepo-react", + link: "/tutorials/turborepo-react", }, { text: "React Native", - link: "/recipes/react-native", + link: "/tutorials/react-native", }, { text: "Migrate from Webpack to Rspack in Nx", - link: "/recipes/migrate-nx-webpack-to-rspack", + link: "/tutorials/migrate-nx-webpack-to-rspack", }, { text: "Nx MF App", - link: "/recipes/nx-mf-app", + link: "/tutorials/nx-mf-app", }, { text: "ModernJS", - link: "/recipes/modernjs", + link: "/tutorials/modernjs", }, { text: "Rolldown React", - link: "/recipes/rolldown-react", + link: "/tutorials/rolldown-react", }, { text: "Parcel React", - link: "/recipes/parcel-react", + link: "/tutorials/parcel-react", }, ], }, - - { - text: "Supported Bundlers & Platforms", - link: "/supported", - }, - { - text: "Troubleshooting", - link: "/errors", - collapsed: true, - collapsible: true, - items: Object.entries(Categories) - .filter(([category]) => category !== "unknown") - .map(([category, value]) => ({ - text: capitalizeFirstLetter(category), - collapsed: true, - collapsible: true, - items: Object.values(Errors) - .filter((error) => error.kind === category) - .map((error) => ({ - text: `ZE${value}${error.id}`, - link: `/errors/ze${value}${error.id}`, - description: error.message, - label: error.message, - })), - })), - }, - ], - "/learning": [ { - text: "Concepts", - collapsed: false, - collapsible: true, + text: "Cloud Providers", + link: "/cloud", items: [ { - text: "Terminologies", - link: "/learning/concepts/terminologies", - }, - { - text: "Architecture", - link: "/learning/concepts/architecture", + text: "Cloudflare", + link: "/cloud/cloudflare", }, - { - text: "Micro-Frontend", - link: "/learning/concepts/micro-frontend", + text: "Fastly", + link: "/cloud/fastly", }, { - text: "Module Federation", - link: "/learning/concepts/module-federation", + text: "Netlify", + link: "/cloud/netlify", }, ], }, - { - text: "Walk-through", - collapsed: true, - collapsible: true, - items: [ - { - text: "Learn webpack with React", - link: "/learning/react-webpack", - }, - ], - }, { text: "Additional Resources", - link: "/learning/resources", + link: "/tutorials/resources", }, ], }; diff --git a/styles/index.css b/styles/index.css index 4f4f109..e5c4168 100644 --- a/styles/index.css +++ b/styles/index.css @@ -24,12 +24,13 @@ /*--rp-c-text-code: #476573;*/ - --rp-c-brand: #5889d5; - --rp-c-brand-light: #00aaff; + --rp-c-brand: #803fd4; + --rp-c-brand-light: #ad84e3; --rp-c-brand-lighter: #ecf4ff; - --rp-c-brand-dark: #287dde; - --rp-c-brand-darker: #3367af; - --rp-c-brand-tint: rgba(127, 163, 255, 0.16); + --rp-c-brand-dark: #521f94; + --rp-c-brand-darker: #340e66; + --rp-c-brand-tint: rgb(128, 63, 212, 0.14); + --rp-c-link: #e1d0f6; /*--rp-c-gray: #8e8e8e;*/ --rp-c-gray-light-1: #aeaeae; diff --git a/theme/index.tsx b/theme/index.tsx index ffd31a9..6524859 100644 --- a/theme/index.tsx +++ b/theme/index.tsx @@ -7,6 +7,8 @@ import { TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/cn"; +import { DividerVerticalIcon } from "@radix-ui/react-icons"; +import { GitHubLogoIcon } from "@radix-ui/react-icons"; import { useEffect, useState } from "react"; import { useDark } from "rspress/runtime"; import Theme from "rspress/theme"; @@ -68,13 +70,31 @@ export const CurrentVersion = () => { const AfterNavTitle = () => { return ( -
+
Docs + + + Get Started + + + Features + + + Tutorials +
); };