diff --git a/docs/react-server.config.mjs b/docs/react-server.config.mjs
index c91b7c9..9dc6b14 100644
--- a/docs/react-server.config.mjs
+++ b/docs/react-server.config.mjs
@@ -13,7 +13,7 @@ export default {
],
mdx: {
remarkPlugins: [remarkGfm],
- rehypePlugins: [rehypeHighlight, rehypeMdxCodeProps],
+ rehypePlugins: [[rehypeHighlight, { detect: true }], rehypeMdxCodeProps],
components: "./src/mdx-components.jsx",
},
prerender: false,
diff --git a/docs/src/pages/en/(pages)/framework/micro-frontends.mdx b/docs/src/pages/en/(pages)/framework/micro-frontends.mdx
index 92f920c..db3dc42 100644
--- a/docs/src/pages/en/(pages)/framework/micro-frontends.mdx
+++ b/docs/src/pages/en/(pages)/framework/micro-frontends.mdx
@@ -16,13 +16,10 @@ Micro-frontends are a way to split your application into smaller, more manageabl
Micro-frontends are a great way to scale your application development. They allow you to:
-- [x] **Scale your development team:** Each team can work on a separate micro-frontend, allowing them to develop, test, and deploy independently.
-
-- [x] **Scale your infrastructure:** Each micro-frontend can be deployed independently, allowing you to scale your infrastructure more easily.
-
-- [x] **Improve performance:** Micro-frontends can be loaded on demand, reducing the initial load time of your application.
-
-- [x] **Improve maintainability:** Each micro-frontend is a separate application, making it easier to maintain and update.
+- **Scale your development team:** Each team can work on a separate micro-frontend, allowing them to develop, test, and deploy independently.
+- **Scale your infrastructure:** Each micro-frontend can be deployed independently, allowing you to scale your infrastructure more easily.
+- **Improve performance:** Micro-frontends can be loaded on demand, reducing the initial load time of your application.
+- **Improve maintainability:** Each micro-frontend is a separate application, making it easier to maintain and update.
## How to implement micro-frontends
diff --git a/docs/src/pages/en/(pages)/guide/why.mdx b/docs/src/pages/en/(pages)/guide/why.mdx
index 1032324..a5da3f3 100644
--- a/docs/src/pages/en/(pages)/guide/why.mdx
+++ b/docs/src/pages/en/(pages)/guide/why.mdx
@@ -16,11 +16,11 @@ This is a page dedicated to answer the question: Why `@lazarv/react-server`? Hop
`@lazarv/react-server` is best compared to Next.js / Remix / Astro. We can consider a solution to be a meta-framework when the following features are supported and the framework is using a specific library as it's base.
-- [x] File-based routing
-- [x] Static generation
-- [x] Hybrid rendering
-- [x] Data fetching
-- [x] Isomorphic component trees
+- File-based routing
+- Static generation
+- Hybrid rendering
+- Data fetching
+- Isomorphic component trees
## Is this framework for you?
@@ -34,20 +34,20 @@ This framework is for you when you want to use bleeding-edge new technologies an
The goal of `@lazarv/react-server` is to provide a meta-framework that has these features:
-- [x] uses React Server Components
-- [x] uses ES modules
-- [x] uses Vite
-- [x] extensible with plugins
-- [x] supports server actions
-- [x] supports file-system based routing
-- [x] supports Markdown and MDX pages
-- [x] supports static generation
-- [x] supports progressive enhancement
-- [x] supports streaming server-side rendering
-- [x] supports selective hydration
-- [x] supports response caching and revalidation
-- [x] supports React hot module replacement
-- [x] supports node.js cluster for blazing-fast production builds
+- uses React Server Components
+- uses ES modules
+- uses Vite
+- extensible with plugins
+- supports server actions
+- supports file-system based routing
+- supports Markdown and MDX pages
+- supports static generation
+- supports progressive enhancement
+- supports streaming server-side rendering
+- supports selective hydration
+- supports response caching and revalidation
+- supports React hot module replacement
+- supports node.js cluster for blazing-fast production builds
## Why React Server Components?
diff --git a/docs/src/pages/en/(pages)/integrations/vite.mdx b/docs/src/pages/en/(pages)/integrations/vite.mdx
index 3329b69..2b8d263 100644
--- a/docs/src/pages/en/(pages)/integrations/vite.mdx
+++ b/docs/src/pages/en/(pages)/integrations/vite.mdx
@@ -24,9 +24,9 @@ You can use all the Vite plugins in your project. You can follow the [Vite plugi
When using Vite plugins, expect three environments:
-- [ ] `rsc` - when the plugin is used in React Server Components (RSC payload)
-- [ ] `ssr` - when the plugin is used in server-side rendering (HTML output)
-- [ ] `client` - when the plugin is used in client components
+- `rsc` - when the plugin is used in React Server Components (RSC payload)
+- `ssr` - when the plugin is used in server-side rendering (HTML output)
+- `client` - when the plugin is used in client components
## Migration
diff --git a/docs/src/pages/en/framework.(index).mdx b/docs/src/pages/en/framework.(index).mdx
index 2eb5cc6..675f77b 100644
--- a/docs/src/pages/en/framework.(index).mdx
+++ b/docs/src/pages/en/framework.(index).mdx
@@ -14,4 +14,4 @@ For error handling, you can learn about how to use the built-in [error boundary]
You can also learn about some small, but useful modes of the framework in this section, like [partial pre-rendering](/framework/ppr), [cluster mode](/framework/cluster) or [middleware mode](/framework/middleware-mode). Partial pre-rendering is useful when you want to pre-render only parts of your app. Cluster mode is useful when you want to run your app in a multi-process environment. While middleware mode is useful when you want to run your app as a middleware in an existing server, like Express or NestJS.
-You can learn about how to implement a micro-frontend architecture using the framework in the [micro-frontends](/framework/micro-frontends) section. The framework provides a set of tools to help you implement micro-frontends in your app. You can use the `RemoteComponent` component to load a micro-frontend from a remote URL and render it in your app using server-side rendering. Server-side rendering supported `iframe` fragments for React applications!
\ No newline at end of file
+You can learn about how to implement a micro-frontend architecture using the framework in the [micro-frontends](/framework/micro-frontends) section. The framework provides a set of tools to help you implement micro-frontends in your app. You can use the `RemoteComponent` component to load a micro-frontend from a remote URL and render it in your app using server-side rendering. Server-side rendering supported `iframe` fragments for React applications!
diff --git a/docs/src/pages/global.css b/docs/src/pages/global.css
index 3294f5c..f763c12 100644
--- a/docs/src/pages/global.css
+++ b/docs/src/pages/global.css
@@ -236,7 +236,56 @@ article {
}
& ul {
- @apply list-disc list-inside mb-4;
+ @apply list-none list-inside mb-4;
+
+ & li {
+ @apply pl-0 mb-2;
+
+ &:before {
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ width: 0.25rem;
+ height: 2px;
+ margin-top: -1px;
+ margin-right: 0.5rem;
+ background-color: currentColor;
+ }
+
+ & ul {
+ @apply list-none pl-4 mb-0 mt-2;
+
+ & li {
+ @apply pl-0 mb-2;
+
+ &:before {
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ width: 0.25rem;
+ height: 2px;
+ margin-top: -1px;
+ margin-right: 0.5rem;
+ background-color: currentColor;
+ }
+
+ & ul {
+ @apply list-none pl-4 mb-0 mt-2;
+
+ & li:before {
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ width: 0.25rem;
+ height: 2px;
+ margin-top: -1px;
+ margin-right: 0.5rem;
+ background-color: currentColor;
+ }
+ }
+ }
+ }
+ }
}
& a {
@@ -246,14 +295,6 @@ article {
.contains-task-list {
@apply list-none;
- & li {
- @apply flex items-center mb-2;
- }
-
- & input {
- @apply mr-2;
- }
-
& code {
@apply bg-gray-100 dark:bg-gray-500 text-sm p-1 mx-1.5;
}
@@ -298,18 +339,7 @@ article {
& input[type="checkbox"] {
width: 0;
- margin-right: 0.75rem;
- position: relative;
-
- &::after {
- position: absolute;
- top: 50%;
- content: "";
- display: inline-block;
- width: 0.25rem;
- height: 2px;
- background-color: currentColor;
- }
+ margin: 0;
}
}