Copilot commented on code in PR #466:
URL: https://github.com/apache/casbin-website/pull/466#discussion_r3073006229
##########
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>
Review Comment:
This is implemented as a client-side + meta-refresh redirect. Since the site
is deployed via Netlify, consider adding a Netlify redirect rule for `/gallery`
-> https://editor.casbin.org/gallery (301/302) so users/crawlers get an HTTP
redirect without loading this page bundle first.
##########
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);
+ }, []);
Review Comment:
This change drops the previously forwarded theme/lang query parameters for
the gallery page. If editor.casbin.org/gallery still supports `theme` and
`lang` (as the previous iframe URL did), consider keeping that by appending
those params (and/or forwarding existing query parameters) when redirecting.
##########
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);
+ }, []);
Review Comment:
This change drops the previously forwarded theme/lang query parameters when
navigating to the online editor. If editor.casbin.org still supports `theme`
and `lang` (as the previous iframe URL did), consider preserving that behavior
by appending those params (and/or forwarding any existing query string) in the
redirect URL.
##########
src/components/EditorPreview/index.js:
##########
@@ -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/";
>
Review Comment:
The CTA now links directly to the external editor URL without forwarding the
theme/lang query params that were previously passed to the embedded editor. If
editor.casbin.org still supports those parameters, consider adding them to this
link (or linking to `/editor` and letting that page handle parameterized
redirection) to preserve dark mode + locale behavior.
##########
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}`} />
Review Comment:
This is implemented as a client-side + meta-refresh redirect. Since this
site is built/deployed via Netlify (netlify.toml exists), consider adding a
Netlify 301/302 redirect for `/editor` -> https://editor.casbin.org/ so
browsers and crawlers get an HTTP redirect (better SEO/caching and avoids
downloading the page JS/CSS before redirecting).
```suggestion
```
##########
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/";
Review Comment:
The editor link now goes directly to https://editor.casbin.org/ and no
longer includes the theme/lang query parameters that were previously supported
via the embedded editor URL. If the external editor still accepts those params,
consider restoring them here (or routing through `/editor` and letting that
page construct the parameterized redirect) so dark mode and locale are
preserved.
```suggestion
href="/editor"
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
