19

Recreating notepadtab

 4 months ago
source link: https://willschenk.com/howto/2024/recreating_notepadtab/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Recreating notepadtab

I found this cool little project called notepadtab.com that lets you enter text into a box, and it will encode it in the url, which you can then bookmark, or share around, or whatever. Put it through a url shortener or what have you and the next is available to see anywhere.

I wanted to see how it worked by implementing it myself. This code is much smaller than what is at revolter/notepadtab.com, though it doesn't do the zlib compression because there was an issue with using the minimized version of pako. Still, small and fun.

Important code

  // main.js
  import '@unocss/reset/tailwind.css';
  import './main.css';
  import '@shoelace-style/shoelace/dist/themes/light.css';
  import '@shoelace-style/shoelace/dist/components/copy-button/copy-button.js';
  import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';

  window.addEventListener("load", (event) => {
      const box = document.getElementById( "note-area" )
      const copy = document.getElementById( "copy" );
      copy.value = window.location;
      
      const hash = window.location.hash
      if( hash != '' ) {
          // Restore the value
          const smaller = window.atob( hash.substring( 1 ) )
          box.value = smaller;
      }

      box.addEventListener( "sl-input", (event) => {
          // Update the url on change
          const hash = window.btoa( box.value )
          window.location.hash = '#' + hash
          copy.value = window.location
      });
  });

index.html:

  <html>
    <head>
      <title>Notepade</title>
      <script src="main.js" type="module"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body px-2>
      <div max-w-prose mx-auto prose>
        <h1 font-header text-2xl font-bold>All your note data in the url</h1>

        <sl-copy-button float-right id="copy"></sl-copy-button>

        <sl-textarea
          id="note-area"
          label="Secret note"
          resize="auto"
          help-text="Nothing stored on the server, just a big url">
        </sl-textarea>

        <p>
          Reimplementing <a href="https://notepadtab.com/">notepadtab</a> for fun.  This code is at
          <a href="https://github.com/wschenk/nodepadjs/">https://github.com/wschenk/nodepadjs/</a>.
        </p>
      </div>
    </body>
  </html>

Boilerplate junk

package.json:

  {
      "type": "module",
      "scripts": {
          "dev": "unocss \"**/*.html\" -o main.css --watch & vite",
          "build": "unocss \"**/*.html\" -o main.css && vite build"
      },
      "dependencies": {
          "@shoelace-style/shoelace": "^2.15.1",
          "unocss": "^0.60.4",
          "vite": "^5.2.12",
          "vite-plugin-static-copy": "^1.0.5"
      }
  }
  // uno.config.ts
  import {
      defineConfig,
      presetAttributify,
      presetTypography,
      presetUno
  } from 'unocss'

  export default defineConfig({
    presets: [
        presetAttributify(), // required when using attributify mode
        presetUno(), // required
        presetTypography(),
    ],
  })

Update the base if you are deploying it somewhere else, I'm using github pages without a domain so it's in a subdirectory.

  // vite.config.js
  import { defineConfig } from 'vite';
  import { viteStaticCopy } from 'vite-plugin-static-copy';

  const iconsPath = 'node_modules/@shoelace-style/shoelace/dist/assets/icons';

  // https://vitejs.dev/config/
  export default defineConfig({
      base: '/nodepadjs/', // Or / if you arent using github pages
      resolve: {
          alias: [
              {
                  find: /\/assets\/icons\/(.+)/,
                  replacement: `${iconsPath}/$1`,
              },
          ],
      },
      build: {
          rollupOptions: {
              // external: /^lit/,
              plugins: [],
          },
      },
      plugins: [
          viteStaticCopy({
              targets: [
                  {
                      src: iconsPath,
                      dest: 'assets',
                  },
              ],
          }),
      ],
  });

Deploy

  mkdir -p .github/workflows
  name: Deploy

  on:
    push:
      branches:
        - main

  jobs:
    build:
      name: Build
      runs-on: ubuntu-latest

      steps:
        - name: Checkout repo
          uses: actions/checkout@v3

        - name: Setup Node
          uses: actions/setup-node@v3

        - name: Install dependencies
          uses: bahmutov/npm-install@v1

        - name: Build project
          run: npm run build

        - name: Upload production-ready build files
          uses: actions/upload-artifact@v3
          with:
            name: production-files
            path: ./dist

    deploy:
      name: Deploy
      needs: build
      runs-on: ubuntu-latest
      if: github.ref == 'refs/heads/main'

      steps:
        - name: Download artifact
          uses: actions/download-artifact@v3
          with:
            name: production-files
            path: ./dist

        - name: Deploy to GitHub Pages
          uses: peaceiris/actions-gh-pages@v3
          with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: ./dist

Check it out

Deployed here. It takes forever because the vite build includes all of the icons for shoelace…


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK