32 |
--------------------------------------------------------------------------------
/lint-staged.config.cjs:
--------------------------------------------------------------------------------
1 | /**
2 | * https://github.com/vercel/next.js/blob/canary/lint-staged.config.js
3 | */
4 |
5 | const { quote } = require("shell-quote");
6 |
7 | const isWin = process.platform === "win32";
8 |
9 | module.exports = {
10 | "**/*.{js,jsx,cjs,mjs,ts,tsx,mts,cts,md,json}": (filenames) => {
11 | const escapedFileNames = filenames
12 | .map((filename) => `"${isWin ? filename : escape([filename])}"`)
13 | .join(" ");
14 | return [
15 | `prettier --write ${escapedFileNames}`,
16 | `git add ${escapedFileNames}`,
17 | ];
18 | },
19 | };
20 |
21 | function escape(str) {
22 | const escaped = quote(str);
23 | return escaped.replace(/\\@/g, "@");
24 | }
25 |
--------------------------------------------------------------------------------
/options.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | (null);
14 | const [mode, setMode] = useState<"codes" | "preview">("codes");
15 | const [domain, setDomain] = useState(null);
16 | const [isDeploying, setIsDeploying] = useState(false);
17 | const [currentUrl, setCurrentUrl] = useState("");
18 | const [projectID, setProjectID] = useState("");
19 |
20 | const chatID =
21 | useMemo(() => {
22 | const splited = currentUrl.split("/");
23 | if (splited.length < 5) return "";
24 |
25 | return splited[4];
26 | }, [currentUrl]) || "";
27 |
28 | const dashURL =
29 | useMemo(() => {
30 | return "https://dash.zeabur.com/projects/" + projectID;
31 | }, [projectID]) || "";
32 |
33 | // listen for messages from the background script
34 | useEffect(() => {
35 | chrome.runtime.onMessage.addListener((message) => {
36 | if (!message) return;
37 |
38 | console.log("Message received in SidePanel:", message);
39 | const { key, newValue } = message;
40 |
41 | if (key === "codes") {
42 | setCodes(newValue);
43 | }
44 | });
45 | }, []);
46 |
47 | // get the current tab URL
48 | useEffect(() => {
49 | const getCurrentUrl = () => {
50 | chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
51 | setCurrentUrl(tabs[0].url || "");
52 | });
53 | };
54 |
55 | getCurrentUrl();
56 |
57 | // Optional: Set up a listener for tab updates
58 | const tabUpdateListener = (tabId: any, changeInfo: any, tab: any) => {
59 | if (changeInfo.status === "complete") {
60 | getCurrentUrl();
61 | }
62 | };
63 |
64 | chrome.tabs.onUpdated.addListener(tabUpdateListener);
65 |
66 | return () => {
67 | chrome.tabs.onUpdated.removeListener(tabUpdateListener);
68 | };
69 | }, []);
70 |
71 | useEffect(() => {
72 | setMode("codes");
73 | }, [selectedCode]);
74 |
75 | function getAllSavedArtifacts() {
76 | chrome.storage.local.get(["chatID", "codes"], (result) => {
77 | console.log(result);
78 | });
79 | }
80 |
81 | function saveArtifactsToProject() {
82 | chrome.storage.local.set({
83 | chatID,
84 | codes,
85 | });
86 | }
87 |
88 | return (
89 |
90 | {/* */}
96 |
97 |
98 | {domain && (
99 |
100 | Deployed to:
101 |
102 |
107 | {domain}
108 |
109 |
110 | )}
111 |
112 | {projectID && (
113 |
118 | Claim the project on Zeabur
119 |
120 | )}
121 |
122 |
123 |
124 | {codes.map((code, index) => (
125 | - setSelectedCode(code)}
134 | key={index}
135 | >
136 | {code.title}
137 |
138 | ))}
139 |
140 |
141 | {selectedCode && (
142 |
143 |
144 |
154 |
155 | {selectedCode.language === "html" && (
156 |
166 | )}
167 |
168 | {selectedCode.language === "html" && (
169 |
198 | )}
199 |
200 |
206 |
207 |
208 | {mode === "preview" && selectedCode.language === "html" && (
209 |
218 | )}
219 |
220 | {mode === "codes" && (
221 |
222 | {selectedCode.content}
223 |
224 | )}
225 |
226 | )}
227 |
228 | );
229 | };
230 |
231 | const root = createRoot(document.getElementById("root")!);
232 |
233 | root.render(
234 |
235 |
237 | );
238 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: ["./src/**/*.{js,jsx,ts,tsx}"],
4 | theme: {
5 | extend: {},
6 | },
7 | plugins: [require("@tailwindcss/forms")],
8 | };
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"]
24 | }
25 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import { resolve } from "path";
3 | import react from "@vitejs/plugin-react-swc";
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [react()],
8 | build: {
9 | rollupOptions: {
10 | input: {
11 | sidePanel: resolve(__dirname, "sidePanel.html"),
12 | options: resolve(__dirname, "options.html"),
13 | service_worker: resolve(__dirname, "src/background.ts"),
14 | content_script: resolve(__dirname, "src/content-script.ts"),
15 | },
16 | output: {
17 | chunkFileNames: "[name].[hash].js",
18 | assetFileNames: "[name].[hash].[ext]",
19 | entryFileNames: "[name].js",
20 | dir: "dist",
21 | },
22 | },
23 | },
24 | });
25 |
--------------------------------------------------------------------------------