From 7c20fcff499dcbb77bb77d91eebe155f64c37cdc Mon Sep 17 00:00:00 2001
From: Cheton Wu <cheton_wu@trendmicro.com>
Date: Wed, 4 Dec 2024 14:47:02 +0800
Subject: [PATCH] docs: move "Content Security Policy" to the "Customization"
 section

---
 packages/react-docs/config/sidebar-routes.js       |  2 +-
 .../content-security-policy.page.mdx}              | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)
 rename packages/react-docs/pages/{getting-started/security/index.page.mdx => customization/content-security-policy.page.mdx} (57%)

diff --git a/packages/react-docs/config/sidebar-routes.js b/packages/react-docs/config/sidebar-routes.js
index 42d1428b2b..2e706cd90c 100644
--- a/packages/react-docs/config/sidebar-routes.js
+++ b/packages/react-docs/config/sidebar-routes.js
@@ -36,7 +36,6 @@ export const routes = [
       { title: 'Color Style', path: 'getting-started/color-style' },
       { title: 'Icons', path: 'getting-started/icons' },
       { title: 'The sx prop', path: 'getting-started/the-sx-prop' },
-      { title: 'Security', path: 'getting-started/security' },
       { title: 'Tonic UI Versions', path: 'getting-started/versions' },
     ],
   },
@@ -67,6 +66,7 @@ export const routes = [
       <ToolsConfigurationIcon size="4x" {...props} />
     ),
     routes: [
+      { title: 'Content Security Policy', path: 'customization/content-security-policy' },
       { title: 'CSS Theme Variables', path: 'customization/css-theme-variables' },
       { title: 'Shadow DOM', path: 'customization/shadow-dom' },
     ],
diff --git a/packages/react-docs/pages/getting-started/security/index.page.mdx b/packages/react-docs/pages/customization/content-security-policy.page.mdx
similarity index 57%
rename from packages/react-docs/pages/getting-started/security/index.page.mdx
rename to packages/react-docs/pages/customization/content-security-policy.page.mdx
index 2050df83e1..60eba97a35 100644
--- a/packages/react-docs/pages/getting-started/security/index.page.mdx
+++ b/packages/react-docs/pages/customization/content-security-policy.page.mdx
@@ -1,10 +1,10 @@
-# Security
+# Content Security Policy
 
-## Content Security Policy
+Content Security Policy plays a critical role in protecting against various attacks, most notably Cross-Site Scripting (XSS) and data injections. Its core function involves the inclusion of either a `Content-Security-Policy` header in the HTTP response or `<meta>` tags within the HTML of a page.
 
-Content Security Policy (CSP) plays a critical role in protecting against various attacks, most notably Cross-Site Scripting (XSS) and data injections. Its core function involves the inclusion of either a `Content-Security-Policy` header in the HTTP response or `<meta>` tags within the HTML of a page.
+## Getting Started
 
-Tonic UI relies on [Emotion](https://emotion.sh/) for its styling system. To seamless integrate [Emotion](https://emotion.sh/) with CSP, it is essential to provide a `nonce` value to the `CacheProvider` component. Detailed instruction can be found in the [Emotion documentation](https://emotion.sh/docs/@emotion/cache).
+Tonic UI relies on [Emotion](https://emotion.sh/) for its styling system. To seamless integrate [Emotion](https://emotion.sh/) with Content Security Policy, it is essential to provide a `nonce` value to the `CacheProvider` component. Detailed instruction can be found in the [Emotion documentation](https://emotion.sh/docs/@emotion/cache).
 
 ### Step 1: Implement a `EmotionCacheProvider` component
 
@@ -13,7 +13,11 @@ const EmotionCacheProvider = ({
   children,
   nonce,
 }) => {
-  const cache = createCache({ key: 'tonic-ui', nonce });
+  const cache = createCache({
+    key: 'tonic-ui',
+    nonce,
+  });
+
   return (
     <CacheProvider value={cache}>
       {children}