Some fixes on website

allevo · Nov 27, 2024 · 4914ccc · 4914ccc
1 parent 2dca63e
commit 4914ccc
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 15 deletions.
diff --git a/packages/components/src/Dropdown/index.tsx b/packages/components/src/Dropdown/index.tsx
@@ -19,9 +19,6 @@ export async function Dropdown(
 	{ label, openOn, align, children }: ComponentProps<DropdownPropsType>,
 	{ component, app }: Contexts,
 ) {
-	console.log("......");
-	console.log(label);
-
 	const classes = ["dropdown"];
 	if (openOn === "hover") {
 		classes.push("dropdown-hover");
@@ -55,7 +52,6 @@ export async function Dropdown(
 		}
 	}
 
-	console.log("label", label, typeof label);
 	const btn =
 		typeof label === "string" ? (
 			<div tabIndex={0} role="button" className="btn m-1">
@@ -65,6 +61,13 @@ export async function Dropdown(
 			label
 		);
 
+	if (btn instanceof HTMLElement) {
+		// This is needed for Safari, otherwise the dropdown won't open
+		// See: https://github.com/allevo/seqflow-js/issues/29
+		// See: https://stackoverflow.com/questions/61652836/why-does-focus-within-not-work-in-safari
+		btn.tabIndex = 0;
+	}
+
 	component.renderSync(
 		<>
 			{btn}

diff --git a/packages/components/src/Menu/index.tsx b/packages/components/src/Menu/index.tsx
@@ -10,6 +10,7 @@ export async function Menu(
 	{ component, app }: Contexts,
 ) {
 	component._el.classList.add(...["menu", "rounded-box"]);
+	component._el.tabIndex = 0;
 
 	if (direction) {
 		/*

diff --git a/packages/website/src/components/Header.tsx b/packages/website/src/components/Header.tsx
@@ -103,15 +103,6 @@ export async function Header(
 								Blog
 							</Link>
 						</Menu.Item>
-						{/*<Menu.Item>
-							<Link
-								showAsButton="ghost"
-								href="/api-reference"
-								id="api-reference-link"
-							>
-								Api Reference
-							</Link>
-						</Menu.Item>*/}
 						<Menu.Item>
 							<Menu.SubMenu label="Examples">{getExamples()}</Menu.SubMenu>
 						</Menu.Item>

diff --git a/packages/website/src/pages/Home.tsx b/packages/website/src/pages/Home.tsx
@@ -43,7 +43,6 @@ ${setupArrow.name}();
 		<div className={classes["arrow-wrapper"]}>
 			<ArrowSVG />
 		</div>,
-		script,
 		<div
 			className="arrow-anchor"
 			style={{ position: "absolute", top: "0%", opacity: "0" }}
@@ -56,6 +55,7 @@ ${setupArrow.name}();
 			className="arrow-anchor"
 			style={{ position: "absolute", top: "50%", opacity: "0" }}
 		/>,
+		script,
 	]);
 
 	Prism.highlightAll();

diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js
@@ -6,7 +6,9 @@ export default {
       './src/public/*.{js,jsx,ts,tsx,css,md,mdx}',
     ],
     theme: {
-      extend: {},
+      extend: {
+        ringColor: "transparent",
+      },
     },
     plugins: [
       require("@tailwindcss/typography"),