site update

.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')
  },

.gitignore

@@ -15,3 +15,4 @@ vite.config.ts.timestamp-*
 pnpm-lock.yaml
 package-lock.json
 yarn-error.log
+*/esseeoh.js

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"
+}

src/lib/components/accordion.svelte

@@ -40,15 +40,15 @@
 
  .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;
 
  &::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) {

src/lib/components/constants.ts → 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,26 +26,30 @@ 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){
  console.log('pagespeed insights bookmarklet did not work: ', error);
  }
  };
  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"],
- },
-};
+
+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);`

src/lib/components/dialogs/contact.svelte

@@ -0,0 +1,102 @@
+<button
+type="button"
+class="button fill-white button-contact"
+on:click={() => document.getElementById("dialog-contact").showModal()}>Contact</button
+>
+
+<dialog id="dialog-contact" class="dialog">
+ <button
+ type="button"
+ class="button-close"
+ title="Close Dialog"
+ on:click={() => document.getElementById("dialog-contact").close()}
+ />
+ <form action="https://formspree.io/f/xeqwzrkq" method="POST">
+ <label for="name">Full Name</label>
+ <input
+ type="text"
+ id="name"
+ class="input"
+ name="name"
+ required
+ autocomplete="name"
+ />
+ <label for="email">Email</label>
+ <input
+ type="email"
+ id="email"
+ class="input"
+ name="email"
+ required
+ autocomplete="email"
+ />
+ <label for="message">Message</label>
+ <textarea name="message" id="message" class="input" required />
+ <button type="submit" class="button fill-white">Send</button>
+ </form>
+ <p>
+ Found an issue? Reach out on
+ <a
+ href="https://github.com/Blumed/make-bookmarklets/issues/new"
+ target="_blank"
+ rel="noopener noreferrer">Github</a
+ >.
+ </p>
+</dialog>
+
+<style lang="scss">
+ .button-contact {
+ margin-left: 20px;
+ }
+
+ .dialog {
+ background-color: var(--color-clay);
+ border-color: var(--color-pink);
+ border-radius: 0.25rem;
+ color: var(--color-black);
+ max-width: 400px;
+
+ &::backdrop {
+ position: fixed;
+ inset: 0px;
+ background: rgba(0, 0, 0, 0.1);
+ }
+
+ form {
+ display: grid;
+ padding: 20px;
+ }
+ label {
+ margin-bottom: 5px;
+ }
+ .input {
+ margin-bottom: 15px;
+ }
+ .button {
+ max-width: 130px;
+ background-color: #f78da7;
+ }
+ p {
+ margin: 0;
+ padding-inline: 20px;
+ }
+
+
+ }
+
+ .button-close {
+ position: absolute;
+ top: 16px;
+ right: 32px;
+ }
+
+ @media (max-width: 768px) {
+ .dialog {
+ margin-inline: 15px;
+ }
+
+ .button-contact {
+ margin-left: 0;
+ }
+ }
+</style>