fix(docs): styling of code blocks and nested lists (#107)

Fixes code blocks styling when language is not specified #104 
Fixes nested list styling #103

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,

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.
 
 <Link name="how-to-implement-micro-frontends">
 ## How to implement micro-frontends

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
 
 <Link name="is-this-framework-for-you">
 ## 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
 
 <Link name="why-react-server-components">
 ## Why React Server Components?

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
 
 <Link name="migration">
 ## Migration

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!
+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!

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;
   }
 }