You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@casbin.apache.org by hs...@apache.org on 2026/04/13 13:11:07 UTC
(casbin-website) branch master updated: feat: replace all iframes with links (#466)
This is an automated email from the ASF dual-hosted git repository.
hsluoyz pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/casbin-website.git
The following commit(s) were added to refs/heads/master by this push:
new f82eeb4b feat: replace all iframes with links (#466)
f82eeb4b is described below
commit f82eeb4b23f3f0447d8c12257f553066485f209c
Author: cooronx <54...@users.noreply.github.com>
AuthorDate: Mon Apr 13 21:11:01 2026 +0800
feat: replace all iframes with links (#466)
---
docusaurus.config.js | 4 +-
src/components/EditorPreview/index.js | 21 +++-----
src/components/EditorPreview/styles.module.css | 8 +--
src/pages/editor.js | 66 +++++++------------------
src/pages/gallery.js | 66 +++++++------------------
src/pages/index.js | 2 +-
static/img/online_editor_homepage_preview.png | Bin 0 -> 599360 bytes
7 files changed, 50 insertions(+), 117 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index fb91717f..a81b0955 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -86,12 +86,12 @@ module.exports = {
position: "left",
},
{
- href: "/gallery",
+ href: "https://editor.casbin.org/gallery",
label: "Authorization Models",
position: "left",
},
{
- href: "/editor",
+ href: "https://editor.casbin.org/",
label: "GUI Policy Editor",
position: "left",
},
diff --git a/src/components/EditorPreview/index.js b/src/components/EditorPreview/index.js
index 56bcb825..70b6db74 100644
--- a/src/components/EditorPreview/index.js
+++ b/src/components/EditorPreview/index.js
@@ -1,18 +1,9 @@
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">
@@ -29,16 +20,18 @@ function EditorPreview() {
</div>
<div className={styles.editorContainer}>
<div className={styles.editorWrapper}>
- <iframe
- src={editorUrl}
- className={styles.editorIframe}
- title="Apache Casbin Online Editor"
+ <img
+ src="/img/online_editor_homepage_preview.png"
+ className={styles.editorPreviewImage}
+ alt="Preview of the Apache Casbin online editor interface"
+ width="1552"
+ height="973"
/>
</div>
<div className={styles.editorFooter}>
<Link
className="button button--primary button--lg"
- to="/editor"
+ href="https://editor.casbin.org/"
>
<Translate>Open Full Editor</Translate>
</Link>
diff --git a/src/components/EditorPreview/styles.module.css b/src/components/EditorPreview/styles.module.css
index 3009be41..d3f042f1 100644
--- a/src/components/EditorPreview/styles.module.css
+++ b/src/components/EditorPreview/styles.module.css
@@ -42,7 +42,6 @@
box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
overflow: hidden;
margin-bottom: 30px;
- height: 800px;
position: relative;
}
@@ -52,11 +51,10 @@ html[data-theme="dark"] .editorWrapper {
box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}
-.editorIframe {
+.editorPreviewImage {
width: 100%;
- height: 100%;
- border: none;
display: block;
+ height: auto;
}
.editorFooter {
@@ -149,7 +147,6 @@ html[data-theme="dark"] .editorFooter :global(.button--primary:hover) {
}
.editorWrapper {
- height: 700px;
border-radius: 8px;
}
@@ -164,7 +161,6 @@ html[data-theme="dark"] .editorFooter :global(.button--primary:hover) {
}
.editorWrapper {
- height: 400px;
border-radius: 6px;
}
diff --git a/src/pages/editor.js b/src/pages/editor.js
index fa846c24..484de7b4 100644
--- a/src/pages/editor.js
+++ b/src/pages/editor.js
@@ -1,56 +1,28 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect} from "react";
+import Head from "@docusaurus/Head";
import Layout from "@theme/Layout";
-import Giscus from "@giscus/react";
-import {useColorMode} from "@docusaurus/theme-common";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Link from "@docusaurus/Link";
-function EditorContent() {
- const {colorMode} = useColorMode();
- const {i18n} = useDocusaurusContext();
- const currentLanguage = i18n.currentLocale;
- const [editorUrl, setEditorUrl] = useState("");
+const EDITOR_URL = "https://editor.casbin.org/";
+function Editor() {
useEffect(() => {
- setEditorUrl(`https://editor.casbin.org/?theme=${colorMode}&lang=${currentLanguage}`);
- }, [colorMode, currentLanguage]);
-
- return (
- <>
- <div className="editor-container">
- <iframe
- src={editorUrl}
- className="editor-iframe"
- title="Apache Casbin Editor"
- />
- </div>
- <div className="comments-container">
- <Giscus
- id="comments"
- repo="casbin/casbin"
- repoId="MDEwOlJlcG9zaXRvcnk4NzYxNzUwOA=="
- category="Docs comments"
- categoryId="DIC_kwDOBTjv5M4CRIiA"
- mapping="pathname"
- strict="0"
- reactionsEnabled="1"
- emitMetadata="0"
- inputPosition="top"
- theme={colorMode}
- lang="en"
- loading="lazy"
- />
- </div>
- </>
- );
-}
+ window.location.replace(EDITOR_URL);
+ }, []);
-function Editor() {
return (
- <Layout
- title="Editor"
- description="Apache Casbin Online Editor"
- >
- <EditorContent />
+ <Layout title="Redirecting to Editor" description="Redirecting to the Apache Casbin Online Editor">
+ <Head>
+ <meta httpEquiv="refresh" content={`0;url=${EDITOR_URL}`} />
+ <link rel="canonical" href={EDITOR_URL} />
+ </Head>
+ <main className="container margin-vert--xl">
+ <p>
+ Redirecting to the online editor...
+ {" "}
+ <Link href={EDITOR_URL}>Continue manually</Link>
+ </p>
+ </main>
</Layout>
);
}
diff --git a/src/pages/gallery.js b/src/pages/gallery.js
index 4adcba94..e319f2f2 100644
--- a/src/pages/gallery.js
+++ b/src/pages/gallery.js
@@ -1,56 +1,28 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect} from "react";
+import Head from "@docusaurus/Head";
import Layout from "@theme/Layout";
-import Giscus from "@giscus/react";
-import {useColorMode} from "@docusaurus/theme-common";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Link from "@docusaurus/Link";
-function GalleryContent() {
- const {colorMode} = useColorMode();
- const {i18n} = useDocusaurusContext();
- const currentLanguage = i18n.currentLocale;
- const [galleryUrl, setGalleryUrl] = useState("");
+const GALLERY_URL = "https://editor.casbin.org/gallery";
+function Gallery() {
useEffect(() => {
- setGalleryUrl(`https://editor.casbin.org/gallery?theme=${colorMode}&lang=${currentLanguage}`);
- }, [colorMode, currentLanguage]);
-
- return (
- <>
- <div className="editor-container">
- <iframe
- src={galleryUrl}
- className="editor-iframe"
- title="Apache Casbin Gallery"
- />
- </div>
- <div className="comments-container">
- <Giscus
- id="comments"
- repo="casbin/casbin"
- repoId="MDEwOlJlcG9zaXRvcnk4NzYxNzUwOA=="
- category="Docs comments"
- categoryId="DIC_kwDOBTjv5M4CRIiA"
- mapping="pathname"
- strict="0"
- reactionsEnabled="1"
- emitMetadata="0"
- inputPosition="top"
- theme={colorMode}
- lang={currentLanguage}
- loading="lazy"
- />
- </div>
- </>
- );
-}
+ window.location.replace(GALLERY_URL);
+ }, []);
-function Gallery() {
return (
- <Layout
- title="Gallery"
- description="Apache Casbin Online Gallery"
- >
- <GalleryContent />
+ <Layout title="Redirecting to Gallery" description="Redirecting to the Apache Casbin authorization model gallery">
+ <Head>
+ <meta httpEquiv="refresh" content={`0;url=${GALLERY_URL}`} />
+ <link rel="canonical" href={GALLERY_URL} />
+ </Head>
+ <main className="container margin-vert--xl">
+ <p>
+ Redirecting to the authorization model gallery...
+ {" "}
+ <Link href={GALLERY_URL}>Continue manually</Link>
+ </p>
+ </main>
</Layout>
);
}
diff --git a/src/pages/index.js b/src/pages/index.js
index fcdbaa03..5c66b31e 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -78,7 +78,7 @@ function HomepageHeader() {
<Translate>Get Started</Translate>
</Link>
<Link className={`button button--lg ${styles.tryEditorBtn}`}
- to="/editor"
+ href="https://editor.casbin.org/"
>
<Code size={18} />
<Translate>Try Online Editor</Translate>
diff --git a/static/img/online_editor_homepage_preview.png b/static/img/online_editor_homepage_preview.png
new file mode 100644
index 00000000..27a16aab
Binary files /dev/null and b/static/img/online_editor_homepage_preview.png differ
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@casbin.apache.org
For additional commands, e-mail: commits-help@casbin.apache.org