feat: add editor iframe to homepage

src/components/EditorPreview/index.js

@@ -0,0 +1,52 @@
+import React 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;
+
+  // Compute editor URL reactively to avoid unnecessary reloads
+  const editorUrl = `https://editor.casbin.org/?theme=${colorMode}&lang=${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;

src/components/EditorPreview/styles.module.css

@@ -0,0 +1,95 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+.editorSection {
+  padding: 60px 0;
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.editorHeader {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.editorTitle {
+  font-size: 2.25rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: var(--ifm-heading-color);
+}
+
+.editorDescription {
+  font-size: 1.1rem;
+  color: var(--ifm-color-emphasis-700);
+  max-width: 700px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.editorContainer {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.editorWrapper {
+  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;
+  position: relative;
+}
+
+html[data-theme="dark"] .editorWrapper {
+  background: var(--ifm-background-surface-color);
+  border-color: var(--ifm-color-emphasis-300);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
+}
+
+.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;
+  }
+}

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() {
@@ -186,6 +187,7 @@ export default function Home() {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <EditorPreview />
         <PolicyPersistence />
         <PolicyEnforcement />
         <RoleManager />

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");