From 5b0abf2e0b8408f4552a56c9e01323e3071e85e2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 10:02:09 +0000
Subject: [PATCH 1/5] Initial plan


From 0fc71c15404c76e37ad69a0caab2a2de0ef3ea84 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 10:18:30 +0000
Subject: [PATCH 2/5] Add editor iframe to homepage with beautiful styling

Co-authored-by: nomeguy <85475922+nomeguy@users.noreply.github.com>
---
 src/components/EditorPreview/index.js         | 54 ++++++++++
 .../EditorPreview/styles.module.css           | 98 +++++++++++++++++++
 src/pages/index.js                            |  2 +
 3 files changed, 154 insertions(+)
 create mode 100644 src/components/EditorPreview/index.js
 create mode 100644 src/components/EditorPreview/styles.module.css

diff --git a/src/components/EditorPreview/index.js b/src/components/EditorPreview/index.js
new file mode 100644
index 00000000..a7abb451
--- /dev/null
+++ b/src/components/EditorPreview/index.js
@@ -0,0 +1,54 @@
+import React, {useEffect, useState} from "react";
+import {useColorMode} from "@docusaurus/theme-common";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Link from "@docusaurus/Link";
+import Translate from "@docusaurus/Translate";
+import styles from "./styles.module.css";
+
+function EditorPreview() {
+  const {colorMode} = useColorMode();
+  const {i18n} = useDocusaurusContext();
+  const currentLanguage = i18n.currentLocale;
+  const [editorUrl, setEditorUrl] = useState("");
+
+  useEffect(() => {
+    setEditorUrl(`https://editor.casbin.org/?theme=${colorMode}&lang=${currentLanguage}`);
+  }, [colorMode, currentLanguage]);
+
+  return (
+    <div className={styles.editorSection}>
+      <div className="container">
+        <div className={styles.editorHeader}>
+          <h2 className={styles.editorTitle}>
+            <Translate>Try Casbin Online Editor</Translate>
+          </h2>
+          <p className={styles.editorDescription}>
+            <Translate>
+              Write and test your Casbin model and policy in real-time with our interactive online editor.
+              Experiment with different access control models and see results instantly.
+            </Translate>
+          </p>
+        </div>
+        <div className={styles.editorContainer}>
+          <div className={styles.editorWrapper}>
+            <iframe
+              src={editorUrl}
+              className={styles.editorIframe}
+              title="Casbin Online Editor"
+            />
+          </div>
+          <div className={styles.editorFooter}>
+            <Link
+              className="button button--primary button--lg"
+              to="/editor"
+            >
+              <Translate>Open Full Editor</Translate>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EditorPreview;
diff --git a/src/components/EditorPreview/styles.module.css b/src/components/EditorPreview/styles.module.css
new file mode 100644
index 00000000..48d127fd
--- /dev/null
+++ b/src/components/EditorPreview/styles.module.css
@@ -0,0 +1,98 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+.editorSection {
+  padding: 60px 0;
+  background: linear-gradient(135deg, var(--ifm-color-primary-lightest) 0%, var(--ifm-color-primary-light) 100%);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+html[data-theme="dark"] .editorSection {
+  background: linear-gradient(135deg, rgb(179 136 255 / 10%) 0%, rgb(179 136 255 / 5%) 100%);
+}
+
+.editorHeader {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.editorTitle {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: var(--ifm-heading-color);
+}
+
+.editorDescription {
+  font-size: 1.2rem;
+  color: var(--ifm-font-color-base);
+  max-width: 800px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.editorContainer {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.editorWrapper {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgb(0 0 0 / 10%);
+  overflow: hidden;
+  margin-bottom: 30px;
+  height: 600px;
+  position: relative;
+}
+
+html[data-theme="dark"] .editorWrapper {
+  background: var(--ifm-background-surface-color);
+  box-shadow: 0 10px 40px rgb(0 0 0 / 30%);
+}
+
+.editorIframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+.editorFooter {
+  text-align: center;
+}
+
+/* Mobile responsiveness */
+@media screen and (max-width: 996px) {
+  .editorTitle {
+    font-size: 2rem;
+  }
+
+  .editorDescription {
+    font-size: 1rem;
+    padding: 0 20px;
+  }
+
+  .editorWrapper {
+    height: 500px;
+    border-radius: 8px;
+  }
+
+  .editorSection {
+    padding: 40px 0;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .editorTitle {
+    font-size: 1.5rem;
+  }
+
+  .editorWrapper {
+    height: 400px;
+    border-radius: 6px;
+  }
+
+  .editorSection {
+    padding: 30px 0;
+  }
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 627a744d..a16f0d94 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -8,6 +8,7 @@ import HomepageFeatures from "../components/HomepageFeatures";
 import {UserList} from "@site/src/components/UserList";
 import Translate from "@docusaurus/Translate";
 import {useWindowSize} from "@docusaurus/theme-common";
+import EditorPreview from "../components/EditorPreview";
 
 class Button extends React.Component {
   render() {
@@ -189,6 +190,7 @@ export default function Home() {
         <PolicyPersistence />
         <PolicyEnforcement />
         <RoleManager />
+        <EditorPreview />
         <Showcase />
         <OpenCollective />
       </main>

From 3c3c308adb7de15494a8b2b6a5af2dad2432a4c7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 10:24:55 +0000
Subject: [PATCH 3/5] Optimize EditorPreview to avoid unnecessary iframe
 reloads

Co-authored-by: nomeguy <85475922+nomeguy@users.noreply.github.com>
---
 src/components/EditorPreview/index.js | 8 +++-----
 static/js/clarity.js                  | 8 ++++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/EditorPreview/index.js b/src/components/EditorPreview/index.js
index a7abb451..f4288443 100644
--- a/src/components/EditorPreview/index.js
+++ b/src/components/EditorPreview/index.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React from "react";
 import {useColorMode} from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Link from "@docusaurus/Link";
@@ -9,11 +9,9 @@ function EditorPreview() {
   const {colorMode} = useColorMode();
   const {i18n} = useDocusaurusContext();
   const currentLanguage = i18n.currentLocale;
-  const [editorUrl, setEditorUrl] = useState("");
 
-  useEffect(() => {
-    setEditorUrl(`https://editor.casbin.org/?theme=${colorMode}&lang=${currentLanguage}`);
-  }, [colorMode, currentLanguage]);
+  // Compute editor URL reactively to avoid unnecessary reloads
+  const editorUrl = `https://editor.casbin.org/?theme=${colorMode}&lang=${currentLanguage}`;
 
   return (
     <div className={styles.editorSection}>
diff --git a/static/js/clarity.js b/static/js/clarity.js
index fcd16bc9..7c380b1f 100644
--- a/static/js/clarity.js
+++ b/static/js/clarity.js
@@ -1,5 +1,5 @@
-(function(c,l,a,r,i,t,y){
-  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+(function(c, l, a, r, i, t, y) {
+  c[a] = c[a] || function() {(c[a].q = c[a].q || []).push(arguments);};
+  t = l.createElement(r);t.async = 1;t.src = "https://www.clarity.ms/tag/" + i;
+  y = l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t, y);
 })(window, document, "clarity", "script", "3j9jin33qx");

From 884f879156b7e2d07a890f5cd93b001956216625 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 10:38:39 +0000
Subject: [PATCH 4/5] Move editor section to top of homepage after features

Co-authored-by: nomeguy <85475922+nomeguy@users.noreply.github.com>
---
 src/pages/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index a16f0d94..d5293dbf 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -187,10 +187,10 @@ export default function Home() {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <EditorPreview />
         <PolicyPersistence />
         <PolicyEnforcement />
         <RoleManager />
-        <EditorPreview />
         <Showcase />
         <OpenCollective />
       </main>

From 3b8328f826974c487f71250d88228899d12b9764 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 10:53:35 +0000
Subject: [PATCH 5/5] Improve editor section UI to align with site theme

Co-authored-by: nomeguy <85475922+nomeguy@users.noreply.github.com>
---
 .../EditorPreview/styles.module.css           | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/EditorPreview/styles.module.css b/src/components/EditorPreview/styles.module.css
index 48d127fd..48ff570e 100644
--- a/src/components/EditorPreview/styles.module.css
+++ b/src/components/EditorPreview/styles.module.css
@@ -2,30 +2,25 @@
 
 .editorSection {
   padding: 60px 0;
-  background: linear-gradient(135deg, var(--ifm-color-primary-lightest) 0%, var(--ifm-color-primary-light) 100%);
   background-color: var(--ifm-color-emphasis-100);
 }
 
-html[data-theme="dark"] .editorSection {
-  background: linear-gradient(135deg, rgb(179 136 255 / 10%) 0%, rgb(179 136 255 / 5%) 100%);
-}
-
 .editorHeader {
   text-align: center;
   margin-bottom: 40px;
 }
 
 .editorTitle {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 16px;
+  font-size: 2.25rem;
+  font-weight: 600;
+  margin-bottom: 20px;
   color: var(--ifm-heading-color);
 }
 
 .editorDescription {
-  font-size: 1.2rem;
-  color: var(--ifm-font-color-base);
-  max-width: 800px;
+  font-size: 1.1rem;
+  color: var(--ifm-color-emphasis-700);
+  max-width: 700px;
   margin: 0 auto;
   line-height: 1.6;
 }
@@ -36,9 +31,10 @@ html[data-theme="dark"] .editorSection {
 }
 
 .editorWrapper {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 10px 40px rgb(0 0 0 / 10%);
+  background: var(--ifm-background-color);
+  border-radius: 8px;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
   overflow: hidden;
   margin-bottom: 30px;
   height: 600px;
@@ -47,7 +43,8 @@ html[data-theme="dark"] .editorSection {
 
 html[data-theme="dark"] .editorWrapper {
   background: var(--ifm-background-surface-color);
-  box-shadow: 0 10px 40px rgb(0 0 0 / 30%);
+  border-color: var(--ifm-color-emphasis-300);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
 }
 
 .editorIframe {