diff --git a/src/webapp/app/bookmarklet/layout.tsx b/src/webapp/app/bookmarklet/layout.tsx
new file mode 100644
index 00000000..77d5ade0
--- /dev/null
+++ b/src/webapp/app/bookmarklet/layout.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+ title: 'Semble bookmarklet',
+ description:
+ 'Learn how to add our bookmarklet to your browser to quickly open any webpage in Semble.',
+};
+
+interface Props {
+ children: React.ReactNode;
+}
+
+export default function Layout(props: Props) {
+ return props.children;
+}
diff --git a/src/webapp/app/bookmarklet/page.tsx b/src/webapp/app/bookmarklet/page.tsx
index 1c7bd95f..dad0e023 100644
--- a/src/webapp/app/bookmarklet/page.tsx
+++ b/src/webapp/app/bookmarklet/page.tsx
@@ -9,83 +9,109 @@ import {
Code,
Alert,
Box,
+ Badge,
+ Image,
Group,
+ Anchor,
+ CopyButton,
} from '@mantine/core';
import { useState } from 'react';
import { BiInfoCircle } from 'react-icons/bi';
+import SembleLogo from '@/assets/semble-logo.svg';
+import Link from 'next/link';
export default function BookmarkletPage() {
- const [copied, setCopied] = useState(false);
-
const appUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://127.0.0.1:4000';
const bookmarkletCode = `javascript:(function(){
const currentUrl = window.location.href;
const sembleUrl = '${appUrl}/url?id=' + currentUrl;
window.open(sembleUrl, '_blank');
- })();`;
-
- const handleCopy = async () => {
- try {
- await navigator.clipboard.writeText(bookmarkletCode);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- } catch (err) {
- console.error('Failed to copy bookmarklet:', err);
- }
- };
+})();`;
// Create the bookmarklet link using dangerouslySetInnerHTML to bypass React's security check
const createBookmarkletLink = () => {
return {
- __html: `Open in Semble`,
+ __html: `Open in Semble`,
};
};
return (
-
+
-
- Semble Bookmarklet
-
- Add this bookmarklet to your browser to quickly open any webpage in
- Semble.
-
+
+
+
+
+ Alpha
+
+
+
+ Semble Bookmarklet
+
+ Add this bookmarklet to your browser to quickly open any webpage
+ in Semble.
+
+
- } title="How to install" color="orange">
+
-
- 1. Copy the bookmarklet code below or drag the button to your
- bookmarks bar
-
-
- {
- "2. When you're on any webpage, click the bookmarklet to open it in Semble"
- }
-
+
+
+ 1
+
+
+ Copy the bookmarklet code below or drag the button to your
+ bookmarks bar
+
+
+
+
+ 2
+
+
+
+ {
+ "When you're on any webpage, click the bookmarklet to open it in Semble"
+ }
+
+
-
- Method 1: Drag to Bookmarks Bar
-
-
- {"Drag this button directly to your browser's bookmarks bar:"}
-
+
+ Method 1: Drag to Bookmarks Bar
+
+ {"Drag this button directly to your browser's bookmarks bar:"}
+
+
-
- Method 2: Copy Code
-
-
- Copy this code and create a new bookmark with it as the URL:
-
+
+ Method 2: Copy Code
+
+ Copy this code and create a new bookmark with it as the URL:
+
+
{bookmarkletCode}
-
+
+ {({ copied, copy }) => (
+
+ )}
+