framer · Sakib25800 · Oct 21, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/plugins/semrush/.gitignore b/plugins/semrush/.gitignore
@@ -0,0 +1,33 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+
+/node_modules
+/.pnp
+.pnp.js
+.yarn
+
+# misc
+
+.DS_Store
+\*.pem
+
+# files
+
+my-plugin
+dev-plugin
+dist
+
+# debug
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log\*
+
+# local env files
+
+.env\*.local
+
+# Packed plugin
+
+plugin.zip
diff --git a/plugins/semrush/README.md b/plugins/semrush/README.md
@@ -0,0 +1,19 @@
+# Framer Plugin Template
+
+This is a template for using the Framer Plugin API in a TypeScript project.
+
+## Quickstart
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Learn more: https://www.framer.com/developers/plugins/introduction
diff --git a/plugins/semrush/eslint.config.js b/plugins/semrush/eslint.config.js
@@ -0,0 +1,25 @@
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+
+export default tseslint.config(
+    { ignores: ["dist"] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2022,
+            globals: globals.browser,
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+        },
+    }
+)
diff --git a/plugins/semrush/framer.json b/plugins/semrush/framer.json
@@ -0,0 +1,6 @@
+{
+    "id": "036742",
+    "name": "Semrush",
+    "modes": ["canvas"],
+    "icon": "/semrush.svg"
+}
diff --git a/plugins/semrush/index.html b/plugins/semrush/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Semrush</title>
+    </head>
+    <body>
+      <div id="root"></div>
+      <script type="module" src="/src/main.tsx"></script>
+    </body>
+  </html>
+
diff --git a/plugins/semrush/package.json b/plugins/semrush/package.json
@@ -0,0 +1,43 @@
+{
+    "name": "semrush",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview",
+        "pack": "npx framer-plugin-tools@latest pack"
+    },
+    "dependencies": {
+        "framer-plugin": "^1.1.0",
+        "@tanstack/react-query": "^5.49.2",
+        "classnames": "^2.5.1",
+        "framer-motion": "^11.2.9",
+        "react": "^18",
+        "react-dom": "^18",
+        "react-error-boundary": "^4.0.13",
+        "usehooks-ts": "^3.1.0",
+        "vite-plugin-mkcert": "^1",
+        "wouter": "^3.3.5"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "@vitejs/plugin-react": "^4.3.1",
+        "@vitejs/plugin-react-swc": "^3",
+        "autoprefixer": "^10.4.20",
+        "eslint": "^9.9.0",
+        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+        "eslint-plugin-react-refresh": "^0.4.9",
+        "globals": "^15.9.0",
+        "postcss": "^8.4.47",
+        "tailwindcss": "^3.4.14",
+        "typescript": "^5.3",
+        "typescript-eslint": "^8.0.1",
+        "vite": "^5",
+        "vite-plugin-framer": "^1"
+    }
+}
diff --git a/plugins/semrush/postcss.config.js b/plugins/semrush/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}
diff --git a/plugins/semrush/public/semrush.svg b/plugins/semrush/public/semrush.svg
diff --git a/plugins/semrush/src/App.css b/plugins/semrush/src/App.css
@@ -0,0 +1,10 @@
+/* Your Plugin CSS */
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    padding: 0 15px 15px 15px;
+    height: 100%;
+    gap: 15px;
+}
diff --git a/plugins/semrush/src/App.tsx b/plugins/semrush/src/App.tsx
@@ -0,0 +1,43 @@
+import { framer } from "framer-plugin"
+import { useEffect, useRef, useState } from "react"
+import { useDebounceCallback, useResizeObserver } from "usehooks-ts"
+import { Router } from "./router"
+import { semrush } from "./api"
+
+interface Size {
+    width?: number
+    height?: number
+}
+
+const usePluginResizeObserver = (ref: React.RefObject<HTMLDivElement>) => {
+    const [{ width, height }, setSize] = useState<Size>({
+        width: 260,
+        // Menu Page : Auth Page heights
+        height: semrush.auth.isAuthenticated() ? 545 : 344,
+    })
+
+    const onResize = useDebounceCallback(setSize, 0)
+
+    useResizeObserver({
+        ref,
+        onResize,
+    })
+
+    useEffect(() => {
+        framer.showUI({
+            width,
+            height,
+        })
+    }, [width, height])
+}
+
+export function App() {
+    const ref = useRef(null)
+    usePluginResizeObserver(ref)
+
+    return (
+        <main ref={ref}>
+            <Router />
+        </main>
+    )
+}