diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 13b6414..ca4f0bc 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,10 +1,17 @@ module.exports = { root: true, parser: '@typescript-eslint/parser', - extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], - plugins: ['svelte3', '@typescript-eslint'], - ignorePatterns: ['*.cjs'], - overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], + extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended' + ], + plugins: ['@typescript-eslint' + ], + ignorePatterns: ['*.cjs' + ], + overrides: [ + { files: ['*.svelte' + ], processor: 'svelte-eslint-parser' + } + ], settings: { 'svelte3/typescript': () => require('typescript') }, diff --git a/.gitignore b/.gitignore index afa8509..fab5659 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,4 @@ vite.config.ts.timestamp-* pnpm-lock.yaml package-lock.json yarn-error.log +*/esseeoh.js \ No newline at end of file diff --git a/package.json b/package.json index 16f540b..2f0730b 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,10 @@ "version": "0.0.1", "private": true, "scripts": { + "start": "vite dev", "dev": "vite dev", - "build": "vite build", + "build": "vite build && terser ./build/esseeoh.js -c -m -o ./build/esseeoh.js", "preview": "vite preview", - "test": "playwright test", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "test:unit": "vitest", @@ -15,30 +15,27 @@ "postbuild": "svelte-sitemap --domain https://make-bookmarklets.com --change-freq weekly --reset-time -i '404.html'" }, "devDependencies": { - "@codemirror/lang-javascript": "^6.1.4", - "@codemirror/lint": "^6.1.0", - "@codemirror/theme-one-dark": "^6.1.0", - "@playwright/test": "^1.28.1", - "@sveltejs/adapter-static": "^2.0.1", - "@sveltejs/kit": "^1.5.0", - "@types/uglify-js": "^3.17.1", - "@typescript-eslint/eslint-plugin": "^5.45.0", - "@typescript-eslint/parser": "^5.45.0", + "@codemirror/lang-javascript": "^6.2.2", + "@codemirror/lint": "^6.5.0", + "@codemirror/theme-one-dark": "^6.1.2", + "@sveltejs/adapter-static": "^2.0.3", + "@sveltejs/kit": "^1.30.4", + "@types/uglify-js": "^3.17.5", + "@typescript-eslint/eslint-plugin": "^5.60.1", + "@typescript-eslint/parser": "^5.62.0", "codemirror": "^6.0.1", - "eslint": "^8.28.0", - "eslint-linter-browserify": "^8.34.0", - "eslint-plugin-svelte3": "^4.0.0", - "sass": "^1.58.2", - "svelte": "^4.0.0", - "svelte-check": "^3.0.1", + "eslint": "^8.57.0", + "eslint-linter-browserify": "^8.57.0", + "eslint-plugin-svelte": "^2.37.0", + "sass": "^1.70.0", + "svelte": "^4.2.10", + "svelte-check": "^3.4.4", "svelte-codemirror-editor": "^1.1.0", "svelte-sitemap": "^2.6.0", - "terser": "^5.16.3", - "tslib": "^2.4.1", - "typescript": "^5.0.0", - "vite": "^4.0.0", - "vitest": "^0.32.0" + "terser": "^5.30.3", + "tslib": "^2.6.2", + "typescript": "^5.4.5", + "vite": "^5.2.10" }, - "type": "module", - "dependencies": {} -} + "type": "module" +} \ No newline at end of file diff --git a/playwright.config.ts b/playwright.config.ts deleted file mode 100644 index 80731be..0000000 --- a/playwright.config.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { PlaywrightTestConfig } from '@playwright/test'; - -const config: PlaywrightTestConfig = { - webServer: { - command: 'npm run build && npm run preview', - port: 4173 - }, - testDir: 'tests' -}; - -export default config; diff --git a/src/lib/components/accordion.svelte b/src/lib/components/accordion.svelte index 7c4f89a..1a44ebb 100644 --- a/src/lib/components/accordion.svelte +++ b/src/lib/components/accordion.svelte @@ -40,7 +40,7 @@ .button { border-radius: 0; - box-shadow: 12px 12px 0 0 var(--pink-color); + box-shadow: 12px 12px 0 0 var(--color-pink); line-height: 25px; padding-right: 50px; position: relative; @@ -48,7 +48,7 @@ &::after { content: ""; width: 12px; - background-color: var(--red-color); + background-color: var(--color-red); height: 2px; position: absolute; right: 20px; @@ -58,7 +58,7 @@ &::before { content: ""; width: 2px; - background-color: var(--red-color); + background-color: var(--color-red); height: 12px; position: absolute; right: 25px; @@ -73,12 +73,12 @@ &:hover { transform: translate(3px, 3px); - box-shadow: 6px 6px 0 0 var(--pink-color) !important; + box-shadow: 6px 6px 0 0 var(--color-pink) !important; } &:active { transform: translate(6px, 6px); - box-shadow: 3px 3px 0 0 var(--pink-color) !important; + box-shadow: 3px 3px 0 0 var(--color-pink) !important; } } @media (max-width: 768px) { diff --git a/src/lib/components/constants.ts b/src/lib/components/code-snippets.ts similarity index 79% rename from src/lib/components/constants.ts rename to src/lib/components/code-snippets.ts index 9c2f45d..06dcfbb 100644 --- a/src/lib/components/constants.ts +++ b/src/lib/components/code-snippets.ts @@ -1,4 +1,4 @@ -export const useExampleBookmarklet1 = `const source = "https://assets.make-bookmarklets.com/thanks-ac42db36.mp3"; +export const playMP3Recording = `const source = "https://assets.make-bookmarklets.com/thanks-ac42db36.mp3"; const audio = new Audio(); audio.addEventListener("load", () => { @@ -8,7 +8,7 @@ audio.addEventListener("load", () => { audio.src = source; audio.autoplay = true;`; -export const useExampleBookmarklet2 = `const capture = async () => { +export const fullWebpageScreenShot = `const capture = async () => { const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); const video = document.createElement("video"); @@ -26,7 +26,8 @@ export const useExampleBookmarklet2 = `const capture = async () => { }; capture();`; -export const useExampleBookmarklet3 = `function pageSpeedInsights(currentSite){ + +export const openCurrentPageGooglePageSpeedInsights = `function pageSpeedInsights(currentSite){ try { window.open('https://pagespeed.web.dev/report?url=' + currentSite, '_blank', 'noopener,noreferrer'); } catch (error){ @@ -34,18 +35,21 @@ export const useExampleBookmarklet3 = `function pageSpeedInsights(currentSite){ } }; pageSpeedInsights(window.location.href);`; - export const useExampleBookmarklet4 = `try { + +export const copyToClipboard = `try { navigator.clipboard.writeText('ADD WHAT EVER TEXT YOU WANT HERE'); } catch(error) { console.log('Copy To Clipboard Bookmarklet did not work: ', error); - }`; -export const useExampleBookmarklet5 = `try { +}`; + +export const googleHighlightedText = `try { const highlightedText = window.getSelection().toString(); window.open('http://google.com/search?q=site:' + window.location.hostname + ' "' + highlightedText + '"'); } catch(error) { console.log('Google If Text Indexed Bookmarklet did not work: ', error); }`; -export const useExampleSnippet1 = `const container = document.createElement('div'); + +export const tippyTopUI = `const container = document.createElement('div'); container.className = 'xxxxxx_wraper_xxxxx'; container.textContent = 'Give me some data, or maybe some buttons?'; container.styles = 'width: 100%;letter-spacing:1px;background-color:pink;text-align:right;font-family:helvetica !important;font-weight:100;padding-inline: 60px;color:#161613;margin:auto;top:0;right:0;left:0;position:fixed;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:center;line-height:36px;'; @@ -59,7 +63,8 @@ close.textContent = 'x'; close.setAttribute('style', 'position:absolute;left:30px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;'); close.onclick = () => container.remove(); container.appendChild(close);`; -export const useExampleSnippet2 = `const container = document.createElement('dialog'); + +export const dialogUI = `const container = document.createElement('dialog'); function createDialog() { const close = document.createElement('button'); @@ -95,22 +100,16 @@ function createContent(header) { } createDialog();`; -export const config = { - parserOptions: { - ecmaVersion: 2019, - sourceType: "module", - }, - env: { - browser: true, - node: true, - }, - rules: { - semi: ["warn", "always"], - "valid-typeof": ["error", "always"], - "no-unused-vars": ["error", "always"], - "no-unreachable": ["error", "always"], - "no-dupe-args": ["error", "always"], - "no-dupe-else-if": ["error", "always"], - "no-console": ["warn", "always"], - }, -}; \ No newline at end of file + +export const colorPicker = `const abortController = new AbortController(); +async function sampleColorFromScreen(abortController) { + const eyeDropper = new EyeDropper(); + try { + const result = await eyeDropper.open({signal: abortController.signal}); + navigator.clipboard.writeText(result.sRGBHex); + return result.sRGBHex; + } catch (e) { + return null; + } +} +sampleColorFromScreen(abortController);` \ No newline at end of file diff --git a/src/lib/components/dialogs/contact.svelte b/src/lib/components/dialogs/contact.svelte new file mode 100644 index 0000000..6b61684 --- /dev/null +++ b/src/lib/components/dialogs/contact.svelte @@ -0,0 +1,102 @@ + + + +