├── .browserslistrc
├── .editorconfig
├── .github
    ├── dependabot.yml
    └── workflows
    │   ├── dependabot-auto-merge.yml
    │   └── deploy.yml
├── .gitignore
├── .npmrc
├── .prettierrc
├── .vscode
    └── settings.json
├── README.md
├── app.vue
├── assets
    ├── css
    │   └── global.scss
    ├── theme-dark.json
    └── theme-light.json
├── components
    ├── ActionTrigger.vue
    ├── Alert.vue
    ├── Button.vue
    ├── ColorModeSwitch.vue
    ├── ContextMenu.vue
    ├── DiffEditor.client.vue
    ├── Icon.vue
    ├── IconButton.vue
    ├── SquareLoader.vue
    └── ToggleButton.vue
├── composables
    ├── use-base-url.ts
    ├── use-diffr-head.ts
    ├── use-font-ready.ts
    ├── use-theme-toggle.ts
    └── use-url-state.ts
├── encoding-worker
    ├── encoding-tools.ts
    ├── encoding-utils.ts
    └── encoding-worker.ts
├── logo.png
├── modules
    ├── fix-manifest
    │   └── module.ts
    └── floating-vue
    │   ├── module.ts
    │   └── plugin.ts
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── about.vue
    └── index.vue
├── public
    ├── apple-touch-icon.png
    ├── diffr-pwa-192x192.png
    ├── diffr-pwa-512x512-maskable.png
    ├── diffr-pwa-512x512.png
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon.ico
    ├── favicon.svg
    ├── icons
    │   ├── blank.svg
    │   ├── copy.svg
    │   ├── cut.svg
    │   ├── diffr.svg
    │   ├── indent.svg
    │   ├── moon.svg
    │   ├── paste.svg
    │   ├── screen.svg
    │   ├── share.svg
    │   ├── split.svg
    │   ├── sun.svg
    │   ├── swap.svg
    │   └── trash.svg
    ├── logo.svg
    └── maskable.svg
├── stores
    ├── color-preference-cycle.ts
    └── encoding-worker.ts
├── tailwind.config.ts
├── tsconfig.json
└── util
    └── encoding-worker
        ├── encoding-tools.ts
        ├── encoding-utils.ts
        └── encoding-worker.ts


/.browserslistrc:
--------------------------------------------------------------------------------
1 | last 2 chrome versions
2 | last 2 firefox versions
3 | ios_saf >= 15.4
4 | safari >= 15.4
5 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 |   - package-ecosystem: npm
 4 |     directory: '/'
 5 |     schedule:
 6 |       interval: daily
 7 |       time: '04:00'
 8 |     open-pull-requests-limit: 10
 9 |     ignore:
10 |       - dependency-name: sass-loader
11 |         versions:
12 |           - '>= 11.a, < 12'
13 |       - dependency-name: '*'
14 |         update-types:
15 |           - 'version-update:semver-patch'
16 |           - 'version-update:semver-minor'
17 | 


--------------------------------------------------------------------------------
/.github/workflows/dependabot-auto-merge.yml:
--------------------------------------------------------------------------------
 1 | name: Dependabot auto-merge
 2 | on: pull_request
 3 | 
 4 | permissions:
 5 |   contents: write
 6 |   pull-requests: write
 7 | 
 8 | jobs:
 9 |   dependabot:
10 |     runs-on: ubuntu-latest
11 |     if: ${{ github.actor == 'dependabot[bot]' }}
12 |     steps:
13 |       - name: Dependabot metadata
14 |         id: metadata
15 |         uses: dependabot/fetch-metadata@v1
16 |         with:
17 |           github-token: '${{ secrets.GITHUB_TOKEN }}'
18 |       - name: Enable auto-merge for Dependabot PRs
19 |         if: ${{ contains(steps.metadata.outputs.dependency-names, 'sass') && (steps.metadata.outputs.update-type == 'version-update:semver-patch' || steps.metadata.outputs.update-type == 'version-update:semver-minor') }}
20 |         run: gh pr merge --auto --squash "$PR_URL"
21 |         env:
22 |           PR_URL: ${{ github.event.pull_request.html_url }}
23 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
24 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Deployment CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - master
 7 | 
 8 | jobs:
 9 |   build:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - uses: actions/checkout@v3
14 |         with:
15 |           persist-credentials: false
16 |       - uses: actions/setup-node@v3
17 |         with:
18 |           node-version: '18'
19 |       - run: npm ci
20 |       - run: npm run generate
21 |         env:
22 |           BASE_URL: /diffr/
23 |       - uses: JamesIves/github-pages-deploy-action@v4
24 |         with:
25 |           token: ${{ secrets.ACCESS_TOKEN }}
26 |           branch: gh-pages
27 |           folder: dist
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log*
 3 | .nuxt
 4 | .nitro
 5 | .cache
 6 | .output
 7 | .env
 8 | dist
 9 | .DS_Store
10 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | legacy-peer-deps=true
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | arrowParens: avoid
 2 | bracketSpacing: true
 3 | htmlWhitespaceSensitivity: css
 4 | insertPragma: false
 5 | jsxBracketSameLine: false
 6 | jsxSingleQuote: false
 7 | printWidth: 80
 8 | proseWrap: preserve
 9 | requirePragma: false
10 | semi: false
11 | singleQuote: true
12 | tabWidth: 2
13 | trailingComma: all
14 | useTabs: false
15 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "workbench.colorCustomizations": {
 3 |     "titleBar.activeBackground": "#47b5e8",
 4 |     "titleBar.activeForeground": "#15202b",
 5 |     "titleBar.inactiveBackground": "#47b5e899",
 6 |     "titleBar.inactiveForeground": "#15202b99",
 7 |     "sash.hoverBorder": "#74c7ee",
 8 |     "commandCenter.border": "#15202b99"
 9 |   },
10 |   "peacock.color": "#47b5e8"
11 | }
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <br>
 3 |   <br>
 4 |   <img src="logo.png" alt="The Diffr logo: two slightly overlapping diamond shapes" width="270" height="174">
 5 | 
 6 |   <br>
 7 | </div>
 8 | 
 9 | # Diffr
10 | 
11 | > Create and share diffs with Diffr, the privacy focused online text diffing tool.
12 | 
13 | This is the source code repository of the Diffr app. You can find the app at [loilo.github.io/diffr](https://loilo.github.io/diffr/).
14 | 
15 | ## Technologies
16 | 
17 | The core technologies this project uses are:
18 | 
19 | <!-- prettier-ignore -->
20 | Technology | Purpose
21 | -|-
22 | **[Monaco Editor](https://microsoft.github.io/monaco-editor/)** | A text/code editor by Microsoft, used for the editing and diffing area itself.
23 | **[Nuxt](https://nuxt.com/)** | An application framework for Vue.js, used for prerendering, PWA support and overall application structure.
24 | **[`lz-string`](https://www.npmjs.com/package/lz-string)** | A quick and space-efficient compression algorithm, used for serializing the current app state in the URL anchor in as few characters as possible.
25 | **[GitHub Pages](https://pages.github.com/)** | This app does (purposefully) not generate any income. Therefore, free hosting is essential to keep it running.
26 | 
27 | ## Setup
28 | 
29 | Clone this repository and install its dependencies using [npm](https://npmjs.com/).
30 | 
31 | ```bash
32 | npm ci
33 | ```
34 | 
35 | ## Local Development
36 | 
37 | Start a local dev server with hot reloading:
38 | 
39 | ```bash
40 | npm run dev
41 | ```
42 | 
43 | ## Generate Production Site
44 | 
45 | Create a production-ready site in the `dist` folder:
46 | 
47 | ```
48 | npm run generate
49 | ```
50 | 
51 | Set the `BASE_URL` environment variable to create a build that can be hosted in a subfolder of a domain, e.g.:
52 | 
53 | ```
54 | BASE_URL=/diffr/ npm run generate
55 | ```


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | useDiffrHead()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <VitePwaManifest />
 7 |   <div>
 8 |     <NuxtPage />
 9 |   </div>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/assets/css/global.scss:
--------------------------------------------------------------------------------
1 | body {
2 |   @apply bg-slate-50 text-slate-600 dark:bg-slate-900 dark:text-slate-500;
3 | }
4 | 
5 | div:where(.diffr-prose) {
6 |   @apply prose prose-slate dark:prose-invert prose-headings:font-normal prose-headings:text-slate-400 prose-a:rounded-md prose-a:text-blue-400 prose-a:no-underline focus-visible:prose-a:outline focus-visible:prose-a:outline-2 focus-visible:prose-a:outline-offset-8 focus-visible:prose-a:outline-current dark:prose-headings:text-slate-500 dark:prose-a:text-teal-400;
7 | }
8 | 


--------------------------------------------------------------------------------
/assets/theme-dark.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "base": "vs-dark",
 3 |   "inherit": false,
 4 |   "colors": {
 5 |     "diffEditor.insertedTextBackground": "#5af78e44",
 6 |     "diffEditor.insertedTextForeground": "#95e6cb99",
 7 |     "diffEditor.removedTextBackground": "#ff5c5744",
 8 |     "diffEditor.removedTextForeground": "#f07178bb",
 9 |     "editor.contextMenuBackground": "#2c3340",
10 |     "editor.background": "#19212F",
11 |     "editor.findMatchBackground": "#ffcc6633",
12 |     "editor.findMatchHighlightBackground": "#ffcc6633",
13 |     "editor.foreground": "#d9d7ce",
14 |     "editor.hoverHighlightBackground": "#2fb1f088",
15 |     "editor.selectionBackground": "#47b5e866",
16 |     "editorLineNumber.foreground": "#3d4752",
17 |     "editorLink.activeForeground": "#2fb1f0",
18 |     "editorWhitespace.foreground": "#3d475288",
19 |     "focusBorder": "#2fb1f088",
20 |     "foreground": "#d9d7ce",
21 |     "input.border": "#7386994c",
22 |     "textLink.foreground": "#2fb1f0"
23 |   },
24 |   "rules": [
25 |     {
26 |       "token": "",
27 |       "foreground": "f3f2ef"
28 |     }
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/assets/theme-light.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "base": "vs",
 3 |   "inherit": false,
 4 |   "colors": {
 5 |     "focusBorder": "#47b5e8",
 6 |     "foreground": "#686968",
 7 |     "editorGroup.emptyBackground": "#F3F4F5",
 8 |     "editor.selectionBackground": "#47b5e844",
 9 |     "editor.background": "#FAFBFC",
10 |     "editor.foreground": "#565869",
11 |     "editorWhitespace.foreground": "#ADB1C255",
12 |     "editor.contextMenuBackground": "#ffffff",
13 |     "editor.findMatchBackground": "#00E6E06A",
14 |     "editor.findMatchHighlightBackground": "#00E6E02A",
15 |     "editor.hoverHighlightBackground": "#47b5e844",
16 |     "input.border": "#E9EAEB",
17 |     "editorLink.activeForeground": "#47b5e8",
18 |     "textLink.foreground": "#47b5e8",
19 |     "diffEditor.insertedTextBackground": "#2DAE5844",
20 |     "diffEditor.removedTextBackground": "#FFAEAC5b",
21 |     "editorLineNumber.foreground": "#9194A2"
22 |   },
23 |   "rules": [
24 |     {
25 |       "token": "",
26 |       "foreground": "565869"
27 |     }
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/components/ActionTrigger.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 | A "renderless" component that represents various kinds of buttons in this app:
 3 | - regular, interactive buttons
 4 | - internal or external links (by passing a 'link' attribute)
 5 | 
 6 | Can be used as the root element of another component to avoid having to implement
 7 | this functionality in multiple places.
 8 | -->
 9 | 
10 | <script lang="ts">
11 | export default {
12 |   inheritAttrs: false,
13 | }
14 | </script>
15 | 
16 | <script lang="ts" setup>
17 | import { NuxtLink } from '#components'
18 | 
19 | let props = withDefaults(
20 |   defineProps<{
21 |     link?: string
22 |     disabled?: boolean
23 |   }>(),
24 |   {
25 |     link: undefined,
26 |     disabled: false,
27 |   },
28 | )
29 | 
30 | let hasLink = computed(() => typeof props.link !== 'undefined')
31 | let hasTextLink = computed(() => typeof props.link === 'string')
32 | let hasAnchorLink = computed(
33 |   () => hasTextLink.value && props.link!.startsWith('#'),
34 | )
35 | let hasExternalLink = computed(
36 |   () => hasTextLink.value && /^https?:\/\//.test(props.link!),
37 | )
38 | let hasRouterLink = computed(
39 |   () => hasLink.value && !hasAnchorLink.value && !hasExternalLink.value,
40 | )
41 | let component = computed(() => {
42 |   if (props.disabled) {
43 |     return 'button'
44 |   } else if (hasLink.value && !hasExternalLink.value) {
45 |     return NuxtLink
46 |   } else if (hasLink.value) {
47 |     return 'a'
48 |   } else {
49 |     return 'button'
50 |   }
51 | })
52 | 
53 | let attrs = useAttrs()
54 | 
55 | let componentAttrs = computed(() => {
56 |   if (!props.disabled) {
57 |     // Don't apply hrefs if link is "disabled"
58 | 
59 |     if (hasRouterLink.value) {
60 |       return { to: props.link }
61 |     } else if (hasLink.value) {
62 |       let resultingAttrs: Record<string, string> = { href: props.link! }
63 | 
64 |       if ('target' in attrs) {
65 |         resultingAttrs.rel = 'noopener'
66 |       }
67 | 
68 |       return resultingAttrs
69 |     } else {
70 |       return { type: 'button' }
71 |     }
72 |   } else {
73 |     return {
74 |       disabled: true,
75 |     }
76 |   }
77 | })
78 | </script>
79 | 
80 | <template>
81 |   <component
82 |     :is="component"
83 |     v-bind="{ ...componentAttrs, ...$attrs } as any"
84 |     :class="{ 'cursor-pointer': !disabled, 'cursor-default': disabled }"
85 |   >
86 |     <slot
87 |       v-bind="{
88 |         link: hasLink,
89 |         external: hasExternalLink,
90 |         anchor: hasAnchorLink,
91 |       }"
92 |     />
93 |   </component>
94 | </template>
95 | 


--------------------------------------------------------------------------------
/components/Alert.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div
3 |     role="alert"
4 |     class="rounded bg-blue-100 p-4 text-sm text-blue-900 dark:bg-teal-900 dark:text-teal-100 md:mt-6"
5 |   >
6 |     <slot />
7 |   </div>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/components/Button.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | let props = withDefaults(
 3 |   defineProps<{
 4 |     theme?: 'text' | 'fancy'
 5 |   }>(),
 6 |   {
 7 |     theme: 'text',
 8 |   },
 9 | )
10 | </script>
11 | 
12 | <template>
13 |   <ActionTrigger
14 |     :class="{
15 |       'inline-flex justify-center rounded bg-gradient-to-tr from-blue-700 to-teal-300 px-4 py-2 text-sm font-medium text-white shadow [text-shadow:0_0.125em_0.25em_rgba(0,0,0,0.2)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue disabled:bg-slate-100 disabled:bg-none disabled:text-slate-300 disabled:[text-shadow:none] not-disabled:hover:bg-blue-200 not-disabled:hover:from-blue-600 not-disabled:hover:to-teal-200 not-disabled:active:translate-y-px not-disabled:active:scale-[0.98] not-disabled:active:from-blue-800 not-disabled:active:to-teal-400 not-disabled:active:text-teal-100 dark:from-teal-700 dark:to-teal-500 dark:text-teal-50 dark:focus-visible:outline-teal-400 dark:disabled:bg-slate-400 dark:disabled:text-slate-300 dark:not-disabled:hover:from-teal-600 dark:not-disabled:hover:to-teal-400 dark:not-disabled:hover:text-white dark:not-disabled:active:from-teal-800 dark:not-disabled:active:to-teal-600 dark:not-disabled:active:text-teal-100 md:px-5 md:py-2.5':
16 |         theme === 'fancy',
17 |       'inline-flex text-sm text-teal-900 underline decoration-blue-400 underline-offset-2 disabled:text-slate-300 disabled:decoration-slate-100 not-disabled:hover:text-teal-700 not-disabled:active:text-teal-800 dark:text-teal-200 dark:decoration-teal-400 dark:disabled:text-slate-500 dark:disabled:decoration-slate-600 dark:not-disabled:hover:text-teal-100 dark:not-disabled:active:text-teal-400':
18 |         theme === 'text',
19 |     }"
20 |     v-bind="$attrs"
21 |     ><slot
22 |   /></ActionTrigger>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/components/ColorModeSwitch.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | let mounted = useMounted()
  3 | let themeToggle = useThemeToggle()
  4 | </script>
  5 | 
  6 | <template>
  7 |   <ActionTrigger
  8 |     @click="themeToggle.toggle()"
  9 |     :aria-pressed="
 10 |       themeToggle.auto ? 'mixed' : String(themeToggle.theme === 'dark')
 11 |     "
 12 |     class="switch disabled:opacity-40"
 13 |     :class="{ mounted }"
 14 |     :disabled="!mounted"
 15 |   >
 16 |     <span class="sr-only">Color Mode: </span>
 17 |     <ClientOnly>
 18 |       <input
 19 |         ref="checkboxRef"
 20 |         :checked="themeToggle.theme === 'dark'"
 21 |         :indeterminate="themeToggle.auto"
 22 |         type="checkbox"
 23 |         class="switch__input"
 24 |         tabindex="-1"
 25 |       />
 26 |     </ClientOnly>
 27 |     <span class="switch__slider">
 28 |       <span
 29 |         class="switch__icon flex items-center justify-center text-slate-200 dark:text-slate-700"
 30 |       >
 31 |         <Icon
 32 |           name="screen"
 33 |           alt="Align with the operating system"
 34 |           class="h-4 w-4"
 35 |           :class="themeToggle.auto ? 'block' : 'hidden'"
 36 |         />
 37 |         <Icon
 38 |           name="sun"
 39 |           alt="Light Mode"
 40 |           class="h-4 w-4"
 41 |           :class="
 42 |             !themeToggle.auto && themeToggle.theme === 'light'
 43 |               ? 'block'
 44 |               : 'hidden'
 45 |           "
 46 |         />
 47 |         <Icon
 48 |           name="moon"
 49 |           alt="Dark Mode"
 50 |           class="h-4 w-4"
 51 |           :class="
 52 |             !themeToggle.auto && themeToggle.theme === 'dark'
 53 |               ? 'block'
 54 |               : 'hidden'
 55 |           "
 56 |         />
 57 |       </span>
 58 |     </span>
 59 |   </ActionTrigger>
 60 | </template>
 61 | 
 62 | <style lang="scss">
 63 | // The switch itself - the box around the slider
 64 | .switch {
 65 |   --switch-size: 2em;
 66 |   --switch-padding: 0.2em;
 67 |   --switch-additional-width: 0.3em;
 68 |   --switch-transition: 200ms;
 69 | 
 70 |   --background: theme('colors.slate.300');
 71 |   --foreground: theme('colors.slate.700');
 72 |   --highlight-strong: theme('colors.blue.400');
 73 | 
 74 |   @at-root :root.dark & {
 75 |     --background: theme('colors.slate.700');
 76 |     --foreground: theme('colors.slate.300');
 77 |     --highlight-strong: theme('colors.teal.400');
 78 |   }
 79 | 
 80 |   position: relative;
 81 |   display: inline-block;
 82 |   width: calc(
 83 |     2 * var(--switch-size) + 2 * var(--switch-padding) +
 84 |       var(--switch-additional-width)
 85 |   );
 86 |   height: calc(var(--switch-size) + 2 * var(--switch-padding));
 87 | 
 88 |   // Hide default HTML checkbox
 89 |   &__input {
 90 |     opacity: 0;
 91 |     width: 0;
 92 |     height: 0;
 93 |   }
 94 | 
 95 |   // The slider
 96 |   &__slider {
 97 |     position: absolute;
 98 |     z-index: 1;
 99 |     cursor: pointer;
100 |     top: 0;
101 |     left: 0;
102 |     right: 0;
103 |     bottom: 0;
104 |     background-color: var(--background);
105 |     border-radius: calc(var(--switch-size) + 2 * var(--switch-padding));
106 |     @apply shadow-inner-xs;
107 | 
108 |     &::before {
109 |       opacity: 0;
110 |       position: absolute;
111 |       content: '';
112 |       height: var(--switch-size);
113 |       width: var(--switch-size);
114 |       left: var(--switch-padding);
115 |       bottom: var(--switch-padding);
116 |       background-color: var(--foreground);
117 |       border-radius: 50%;
118 |       transition-property: transform, opacity;
119 |       transition-duration: var(--switch-transition);
120 |       @apply shadow shadow-slate-500/50;
121 |     }
122 |   }
123 | 
124 |   &__icon {
125 |     opacity: 0;
126 |     position: absolute;
127 |     height: var(--switch-size);
128 |     width: var(--switch-size);
129 |     left: var(--switch-padding);
130 |     bottom: var(--switch-padding);
131 |     transition-property: transform, opacity;
132 |     transition-duration: var(--switch-transition);
133 |   }
134 | 
135 |   &.mounted &__slider::before,
136 |   &.mounted &__icon {
137 |     opacity: 1;
138 |   }
139 | 
140 |   &:focus {
141 |     outline: none;
142 |   }
143 | 
144 |   &:focus-visible &__slider::before {
145 |     outline: 2px solid var(--highlight-strong);
146 |     outline-offset: 2px;
147 |   }
148 | 
149 |   // Use a fallback to avoid the switch
150 |   // flipping over when the component is hydrated
151 |   &__input:checked + &__slider::before,
152 |   &__input:checked + &__slider &__icon {
153 |     transform: translateX(
154 |       calc(var(--switch-size) + var(--switch-additional-width))
155 |     );
156 |   }
157 | 
158 |   &__input:indeterminate + &__slider::before,
159 |   &__input:indeterminate + &__slider &__icon {
160 |     transform: translateX(
161 |       calc((var(--switch-size) + var(--switch-additional-width)) / 2)
162 |     );
163 |   }
164 | }
165 | </style>
166 | 


--------------------------------------------------------------------------------
/components/ContextMenu.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import type { MaybeElementRef } from '@vueuse/core'
  3 | 
  4 | type ContextItem = {
  5 |   label: string
  6 |   icon?: string
  7 |   action: (event: MouseEvent) => void
  8 | }
  9 | 
 10 | let props = withDefaults(
 11 |   defineProps<{
 12 |     target?: MaybeElementRef
 13 |     items: ContextItem[] | ((event: PointerEvent) => ContextItem[])
 14 |     strategy?: 'offset' | 'page'
 15 |     preventMousedown?: boolean
 16 |   }>(),
 17 |   {
 18 |     strategy: 'page',
 19 |     preventMousedown: true,
 20 |   },
 21 | )
 22 | 
 23 | let emit = defineEmits<{
 24 |   (e: 'open', event: PointerEvent): void
 25 | }>()
 26 | 
 27 | let parentEl = useParentElement()
 28 | let target = computed(() => unrefElement(props.target) ?? unref(parentEl))
 29 | let items = ref<ContextItem[]>([])
 30 | 
 31 | let anchorStyle = ref({
 32 |   left: '0px',
 33 |   top: '0px',
 34 | })
 35 | 
 36 | let menuItemsRef = ref<any>()
 37 | let triggerRef = ref<HTMLElement>()
 38 | let pending = autoResetRef(false, 200)
 39 | 
 40 | function calculateOffset(
 41 |   element: HTMLElement | null,
 42 |   property: 'offsetLeft' | 'offsetTop',
 43 | ) {
 44 |   if (!element) return 0
 45 | 
 46 |   let value = 0
 47 |   do {
 48 |     if (!isNaN(element![property])) {
 49 |       value += element![property]
 50 |     }
 51 |   } while ((element = element!.offsetParent as HTMLElement | null))
 52 | 
 53 |   return value
 54 | }
 55 | 
 56 | useEventListener(target, 'mousedown', (event: MouseEvent) => {
 57 |   if (event.button !== 2) return
 58 |   event.preventDefault()
 59 | })
 60 | 
 61 | useEventListener(target, 'contextmenu', (event: PointerEvent) => {
 62 |   event.preventDefault()
 63 |   pending.value = true
 64 | 
 65 |   items.value =
 66 |     typeof props.items === 'function' ? props.items(event) : props.items
 67 | 
 68 |   let element = event.target as HTMLElement
 69 | 
 70 |   let [left, top] =
 71 |     props.strategy === 'offset'
 72 |       ? [
 73 |           calculateOffset(element, 'offsetLeft') + event.offsetX,
 74 |           calculateOffset(element, 'offsetTop') + event.offsetY,
 75 |         ]
 76 |       : [event.x, event.y]
 77 | 
 78 |   anchorStyle.value = {
 79 |     left: `${left}px`,
 80 |     top: `${top}px`,
 81 |   }
 82 | 
 83 |   setTimeout(() => {
 84 |     triggerRef.value!.click()
 85 |     emit('open', event)
 86 |   }, 0)
 87 | })
 88 | 
 89 | function onHide() {
 90 |   if (pending.value) {
 91 |     triggerRef.value!.click()
 92 |   }
 93 | }
 94 | 
 95 | function onShow() {
 96 |   setTimeout(() => {
 97 |     unrefElement(menuItemsRef.value!)?.focus()
 98 |   }, 50)
 99 | }
100 | 
101 | function action(callback: (event: MouseEvent) => void, event: MouseEvent) {
102 |   callback(event)
103 |   triggerRef.value!.click()
104 | }
105 | </script>
106 | 
107 | <template>
108 |   <ClientOnly>
109 |     <Teleport to="body">
110 |       <div data-context-menu class="absolute" :style="anchorStyle">
111 |         <VDropdown
112 |           theme="ctx"
113 |           :auto-hide="true"
114 |           placement="bottom-start"
115 |           :distance="-5"
116 |           :skidding="-5"
117 |           :triggers="['click']"
118 |           @apply-show="onShow"
119 |           @apply-hide="onHide"
120 |         >
121 |           <button
122 |             data-ctx-trigger
123 |             tabindex="-1"
124 |             aria-hidden="true"
125 |             ref="triggerRef"
126 |             class="pointer-events-none absolute h-px w-px opacity-0"
127 |           />
128 |           <template #popper>
129 |             <HeadlessMenu>
130 |               <HeadlessMenuItems
131 |                 ref="menuItemsRef"
132 |                 static
133 |                 class="min-w-[7rem] rounded border border-slate-300 bg-white shadow focus:outline-none"
134 |               >
135 |                 <div class="px-1 py-1">
136 |                   <template v-for="item in items">
137 |                     <HeadlessMenuItem v-slot="{ active }">
138 |                       <slot name="item" v-bind="item">
139 |                         <button
140 |                           :class="[
141 |                             active
142 |                               ? 'bg-slate-100 text-teal-900'
143 |                               : 'text-slate-600',
144 |                             'group flex w-full items-center rounded px-2.5 py-2 text-sm',
145 |                           ]"
146 |                           @click="action(item.action, $event)"
147 |                         >
148 |                           <slot name="inner-item" v-bind="item">
149 |                             <span class="flex items-center gap-2.5">
150 |                               <Icon
151 |                                 :name="item.icon ?? 'blank'"
152 |                                 class="h-4 w-auto"
153 |                               />
154 |                               {{ item.label }}
155 |                             </span>
156 |                           </slot>
157 |                         </button>
158 |                       </slot>
159 |                     </HeadlessMenuItem>
160 |                   </template>
161 |                 </div>
162 |               </HeadlessMenuItems>
163 |             </HeadlessMenu>
164 |           </template>
165 |         </VDropdown>
166 |       </div>
167 |     </Teleport>
168 |   </ClientOnly>
169 | </template>
170 | 
171 | <style>
172 | .v-popper__arrow-container,
173 | .v-popper__arrow-container * {
174 |   visibility: hidden !important;
175 | }
176 | 
177 | .v-popper__inner {
178 |   overflow: visible !important;
179 | }
180 | </style>
181 | 


--------------------------------------------------------------------------------
/components/DiffEditor.client.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     data-editor
  4 |     ref="editorElementRef"
  5 |     class="h-full"
  6 |     :data-no-cursor="props.options.readOnly ? '' : undefined"
  7 |     @dragenter="onDragEnter"
  8 |     @dragleave="onDragLeave"
  9 |     @dragover.prevent
 10 |     @drop.prevent="onDrop"
 11 |   >
 12 |     <ContextMenu :items="contextMenuItems" @open="selectEditor" />
 13 |     <slot v-if="isLoading" />
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script lang="ts" setup>
 18 | import type * as Monaco from 'monaco-editor'
 19 | import lightTheme from '~/assets/theme-light.json'
 20 | import darkTheme from '~/assets/theme-dark.json'
 21 | 
 22 | interface Props {
 23 |   /**
 24 |    * Programming Language (Not a locale for UI);
 25 |    * overrides `options.language`
 26 |    */
 27 |   lang?: string
 28 |   /**
 29 |    * Options passed to the second argument of `monaco.editor.createDiffEditor`
 30 |    */
 31 |   options?: Monaco.editor.IStandaloneDiffEditorConstructionOptions
 32 |   original?: string
 33 |   modified?: string
 34 | }
 35 | 
 36 | interface Emits {
 37 |   (event: 'update:original', value: string): void
 38 |   (event: 'update:modified', value: string): void
 39 |   (event: 'load', editor: Monaco.editor.IStandaloneDiffEditor): void
 40 | }
 41 | 
 42 | let props = withDefaults(defineProps<Props>(), {
 43 |   lang: () => 'plaintext',
 44 |   options: () => ({}),
 45 |   original: () => '',
 46 |   modified: () => '',
 47 | })
 48 | let emit = defineEmits<Emits>()
 49 | let isLoading = ref(true)
 50 | 
 51 | let editorElementRef = ref<HTMLDivElement>()
 52 | let monaco = useMonaco()!
 53 | 
 54 | let editor: Monaco.editor.IStandaloneDiffEditor
 55 | let originalModel: Monaco.editor.ITextModel
 56 | let modifiedModel: Monaco.editor.ITextModel
 57 | let editorRef = ref()
 58 | 
 59 | watch(
 60 |   () => [props.original, props.modified],
 61 |   () => {
 62 |     if (
 63 |       originalModel &&
 64 |       modifiedModel &&
 65 |       (originalModel.getValue() !== props.original ||
 66 |         modifiedModel.getValue() !== props.modified)
 67 |     ) {
 68 |       originalModel.setValue(props.original)
 69 |       modifiedModel.setValue(props.modified)
 70 |     }
 71 |   },
 72 | )
 73 | 
 74 | watch(
 75 |   () => props.lang,
 76 |   () => {
 77 |     if (originalModel) {
 78 |       originalModel.dispose()
 79 |     }
 80 |     if (modifiedModel) {
 81 |       originalModel.dispose()
 82 |     }
 83 |     originalModel = monaco.editor.createModel(props.original, props.lang)
 84 |     modifiedModel = monaco.editor.createModel(props.modified, props.lang)
 85 |     editor.setModel({
 86 |       original: originalModel,
 87 |       modified: modifiedModel,
 88 |     })
 89 |   },
 90 | )
 91 | 
 92 | watch(
 93 |   () => props.options,
 94 |   () => {
 95 |     editor?.updateOptions(props.options)
 96 |   },
 97 | )
 98 | 
 99 | let containerSize = useElementSize(editorElementRef)
100 | watch([containerSize.width, containerSize.height], () => {
101 |   editor?.layout()
102 | })
103 | 
104 | defineExpose({
105 |   /**
106 |    * Monaco editor instance
107 |    */
108 |   $editor: editorRef,
109 | })
110 | 
111 | let mounted = useMounted()
112 | let hasEditorElementRef = computed(() => isDefined(editorElementRef))
113 | let fontIsReady = useFontReady('Fragment Mono')
114 | 
115 | watch(fontIsReady, ready => {
116 |   if (!ready) return
117 |   monaco.editor.remeasureFonts()
118 | })
119 | 
120 | until(() => unref(mounted) && unref(hasEditorElementRef))
121 |   .toBe(true)
122 |   .then(() => {
123 |     monaco.editor.defineTheme('light', lightTheme as any)
124 |     monaco.editor.defineTheme('dark', darkTheme as any)
125 | 
126 |     editor = monaco.editor.createDiffEditor(editorElementRef.value!, {
127 |       contextmenu: false,
128 |       enableSplitViewResizing: false,
129 |       fontFamily:
130 |         '"Fragment Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
131 |       fontSize: 16,
132 |       // ignoreTrimWhitespace: this.ignoreTrimWhitespace,
133 |       ignoreTrimWhitespace: true,
134 |       links: false,
135 |       matchBrackets: 'never',
136 |       originalEditable: true,
137 |       occurrencesHighlight: false,
138 |       renderWhitespace: 'selection',
139 |       lightbulb: {
140 |         enabled: false,
141 |       },
142 |       quickSuggestions: false,
143 |       inlineSuggest: { enabled: false },
144 |       scrollBeyondLastColumn: 100,
145 |       scrollBeyondLastLine: false,
146 |       showUnused: false,
147 |       tabCompletion: 'off',
148 |       // theme: this.$store.state.theme.name,
149 |       theme: 'light',
150 |       useTabStops: false,
151 |       wordWrap: 'on',
152 |       wrappingStrategy: 'advanced',
153 |       // wordWrapColumn
154 |       ...props.options,
155 |     })
156 |     editorRef.value = editor
157 |     originalModel = monaco.editor.createModel(props.original, props.lang)
158 |     modifiedModel = monaco.editor.createModel(props.modified, props.lang)
159 |     editor.setModel({
160 |       original: originalModel,
161 |       modified: modifiedModel,
162 |     })
163 |     editor.onDidUpdateDiff(() => {
164 |       emit('update:original', editor.getModel()!.original.getValue())
165 |       emit('update:modified', editor.getModel()!.modified.getValue())
166 |     })
167 |     isLoading.value = false
168 |     emit('load', editor)
169 |   })
170 | 
171 | let ctxEditor = shallowRef<Monaco.editor.IStandaloneCodeEditor>()
172 | function selectEditor(event: PointerEvent) {
173 |   ctxEditor.value = getCtxEditor(event)
174 | }
175 | 
176 | function getComposedPath(event: MouseEvent | PointerEvent) {
177 |   return document.elementsFromPoint(event.clientX, event.clientY)
178 | }
179 | 
180 | function getCtxEditor(event: MouseEvent | PointerEvent) {
181 |   let hits = getComposedPath(event)
182 | 
183 |   return hits.includes(editor.getOriginalEditor().getDomNode()!)
184 |     ? editor.getOriginalEditor()
185 |     : editor.getModifiedEditor()
186 | }
187 | 
188 | function getSelectedText(editor: Monaco.editor.IStandaloneCodeEditor) {
189 |   if (!editor) return ''
190 | 
191 |   return (editor.getSelections() as any[])
192 |     .map(selection => editor.getModel()!.getValueInRange(selection))
193 |     .join('\n')
194 | }
195 | 
196 | function overwriteRange(
197 |   editor: Monaco.editor.IStandaloneCodeEditor,
198 |   range: Monaco.Range,
199 |   content: string,
200 | ) {
201 |   let id = {}
202 |   let operation = {
203 |     identifier: id,
204 |     range,
205 |     text: content,
206 |     forceMoveMarkers: true,
207 |   }
208 |   editor.executeEdits('overwrite', [operation])
209 | }
210 | 
211 | function overwriteSelection(
212 |   editor: Monaco.editor.IStandaloneCodeEditor,
213 |   content: string,
214 | ) {
215 |   let selection = editor.getSelection()
216 |   if (!selection) return
217 | 
218 |   let range = new monaco.Range(
219 |     selection.startLineNumber,
220 |     selection.startColumn,
221 |     selection.endLineNumber,
222 |     selection.endColumn,
223 |   )
224 | 
225 |   overwriteRange(editor, range, content)
226 | }
227 | 
228 | let contextMenuItems = [
229 |   {
230 |     label: 'Cut',
231 |     icon: 'cut',
232 |     action: (event: MouseEvent) => {
233 |       let selectedText = getSelectedText(ctxEditor.value!)
234 |       navigator.clipboard.writeText(selectedText)
235 |       overwriteSelection(ctxEditor.value!, '')
236 |     },
237 |   },
238 |   {
239 |     label: 'Copy',
240 |     icon: 'copy',
241 |     action: (event: MouseEvent) => {
242 |       let selectedText = getSelectedText(ctxEditor.value!)
243 |       navigator.clipboard.writeText(selectedText)
244 |     },
245 |   },
246 |   {
247 |     label: 'Paste',
248 |     icon: 'paste',
249 |     action: async (event: MouseEvent) => {
250 |       let content: string
251 |       try {
252 |         content = await navigator.clipboard.readText()
253 |       } catch {
254 |         alert('Could not paste content because clipboard access was denied.')
255 |         return
256 |       }
257 |       overwriteSelection(ctxEditor.value!, content)
258 |     },
259 |   },
260 | ]
261 | 
262 | let dragTarget = shallowRef<Monaco.editor.IStandaloneCodeEditor>()
263 | 
264 | watch(dragTarget, (editor, previousEditor) => {
265 |   if (previousEditor) {
266 |     previousEditor.getDomNode()!.classList.remove('drop-zone')
267 |   }
268 | 
269 |   if (editor) {
270 |     editor.getDomNode()!.classList.add('drop-zone')
271 |   }
272 | })
273 | 
274 | function onDragEnter(event: DragEvent) {
275 |   if (props.options.renderSideBySide === false) return
276 | 
277 |   let hits = getComposedPath(event)
278 | 
279 |   if (hits.includes(editor.getOriginalEditor().getDomNode()!)) {
280 |     dragTarget.value = editor.getOriginalEditor()
281 |   } else if (hits.includes(editor.getModifiedEditor().getDomNode()!)) {
282 |     dragTarget.value = editor.getModifiedEditor()
283 |   }
284 | 
285 |   if (!dragTarget.value) return
286 | 
287 |   dragTarget.value.getDomNode()!.dataset.dropLabel =
288 |     event.dataTransfer?.types.includes('Files')
289 |       ? 'Drop file here to compare'
290 |       : event.dataTransfer?.types.includes('text/plain')
291 |       ? 'Drop text here to compare'
292 |       : undefined
293 | }
294 | 
295 | function onDragLeave(event: DragEvent) {
296 |   if (
297 |     (dragTarget.value === editor.getOriginalEditor() &&
298 |       event.target === editor.getOriginalEditor().getDomNode()) ||
299 |     (dragTarget.value === editor.getModifiedEditor() &&
300 |       event.target === editor.getModifiedEditor().getDomNode())
301 |   ) {
302 |     dragTarget.value = undefined
303 |   }
304 | }
305 | 
306 | async function onDrop(event: DragEvent) {
307 |   if (!dragTarget.value) return
308 | 
309 |   event.preventDefault()
310 | 
311 |   let value: string
312 |   if (event.dataTransfer?.types.includes('Files')) {
313 |     value = await event.dataTransfer.files[0].text()
314 |   } else {
315 |     value = event.dataTransfer?.getData('text')!
316 |   }
317 | 
318 |   dragTarget.value.getModel()!.setValue(value)
319 |   dragTarget.value = undefined
320 | }
321 | </script>
322 | 
323 | <style>
324 | [data-editor] .codicon-light-bulb {
325 |   display: none;
326 | }
327 | 
328 | [data-editor][data-no-cursor] .cursors-layer > .cursor {
329 |   display: none !important;
330 | }
331 | 
332 | [data-editor] .drop-zone::after {
333 |   @apply absolute inset-1 box-border flex items-center justify-center rounded bg-blue-400/20 text-2xl text-blue-400 dark:bg-teal-400/20 dark:text-teal-500;
334 |   content: attr(data-drop-label);
335 | }
336 | </style>
337 | 


--------------------------------------------------------------------------------
/components/Icon.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | let props = defineProps<{
 3 |   name: string
 4 |   alt?: string
 5 | }>()
 6 | 
 7 | let iconUrl = computed(() => useAbsoluteUrl(`icons/${props.name}.svg`))
 8 | let iconCssUrl = computed(() => `url('${iconUrl.value}')`)
 9 | </script>
10 | 
11 | <template>
12 |   <div class="icon inline-flex" :style="{ '--icon-mask': iconCssUrl }">
13 |     <img class="block opacity-0" :src="iconUrl" :alt="alt" draggable="false" />
14 |   </div>
15 | </template>
16 | 
17 | <style scoped>
18 | .icon {
19 |   mask-image: var(--icon-mask);
20 |   mask-size: 100% 100%;
21 |   mask-repeat: no-repeat;
22 |   mask-position: center;
23 | }
24 | 
25 | :where(.icon) {
26 |   background-color: currentColor;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/components/IconButton.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | withDefaults(
 3 |   defineProps<{
 4 |     icon?: string
 5 |     label: string
 6 |     highlight?: boolean
 7 |     disabled?: boolean
 8 |     size?: string
 9 |   }>(),
10 |   {
11 |     highlight: false,
12 |     disabled: false,
13 |   },
14 | )
15 | </script>
16 | 
17 | <template>
18 |   <ActionTrigger
19 |     class="group flex flex-col items-stretch rounded-sm px-3 py-1 text-center text-xs/none focus:outline-none focus-visible:outline-2 focus-visible:outline-blue not-disabled:hover:bg-slate-100 dark:focus-visible:outline-teal-400 dark:not-disabled:hover:bg-slate-700 sm:px-2 sm:py-2 sm:text-icon/[1.15] md:py-3"
20 |     :class="
21 |       disabled
22 |         ? 'text-slate-400 dark:text-slate-700'
23 |         : highlight
24 |         ? 'text-teal-900 dark:text-slate-300'
25 |         : 'text-slate-600 dark:text-slate-500'
26 |     "
27 |     :disabled="disabled"
28 |   >
29 |     <div
30 |       class="flex flex-col items-center gap-2 group-not-disabled:group-active:scale-[0.96]"
31 |     >
32 |       <Icon
33 |         v-if="icon"
34 |         :name="icon"
35 |         class="bg-gradient-to-tr"
36 |         :class="[
37 |           typeof size === 'string' ? size : 'h-[1.125rem] w-auto sm:h-5',
38 |           disabled
39 |             ? 'from-slate-300 to-slate-200 dark:from-slate-700 dark:to-slate-600'
40 |             : highlight
41 |             ? 'from-blue-700 to-teal-300 dark:from-blue-600 dark:to-teal-400'
42 |             : 'from-slate-400 to-slate-300 dark:from-slate-500 dark:to-slate-400',
43 |         ]"
44 |       />
45 |       {{ label }}
46 |     </div>
47 |   </ActionTrigger>
48 | </template>
49 | 


--------------------------------------------------------------------------------
/components/SquareLoader.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | An animated loader, playing with the parts of the Diffr logo.
  3 | Thanks to the CSS animation, the loader is already visible and animated
  4 | before any JavaScript is loaded on the page.
  5 | -->
  6 | 
  7 | <script lang="ts" setup>
  8 | let props = withDefaults(
  9 |   defineProps<{
 10 |     finish?: boolean
 11 |     delayAfterFinish?: number
 12 |   }>(),
 13 |   {
 14 |     finish: false,
 15 |     delayAfterFinish: 0,
 16 |   },
 17 | )
 18 | 
 19 | let emit = defineEmits<{
 20 |   (e: 'done'): void
 21 | }>()
 22 | 
 23 | let square1Ref = ref<HTMLElement>()!
 24 | let square2Ref = ref<HTMLElement>()!
 25 | 
 26 | watch(
 27 |   () => props.finish,
 28 |   value => {
 29 |     if (!value) return
 30 |     finishAnimation()
 31 |   },
 32 | )
 33 | 
 34 | function delay(ms: number) {
 35 |   return new Promise(resolve => setTimeout(resolve, ms))
 36 | }
 37 | 
 38 | async function finishAnimation() {
 39 |   // Skip all animation steps if the document is hidden
 40 |   if (document.hidden) {
 41 |     emit('done')
 42 |     return
 43 |   }
 44 | 
 45 |   square1Ref.value!.style.animationPlayState = 'paused'
 46 |   square2Ref.value!.style.animationPlayState = 'paused'
 47 | 
 48 |   const square1Transform = window.getComputedStyle(square1Ref.value!).transform
 49 |   const square2Transform = window.getComputedStyle(square2Ref.value!).transform
 50 | 
 51 |   square1Ref.value!.style.animation = 'none'
 52 |   square1Ref.value!.style.transform = square1Transform
 53 |   square2Ref.value!.style.animation = 'none'
 54 |   square2Ref.value!.style.transform = square2Transform
 55 | 
 56 |   await delay(0)
 57 | 
 58 |   let whenTransitionEnd = new Promise<void>(resolve => {
 59 |     square1Ref.value!.addEventListener(
 60 |       'transitionend',
 61 |       () => {
 62 |         resolve()
 63 |       },
 64 |       { once: true },
 65 |     )
 66 |   })
 67 | 
 68 |   square1Ref.value!.removeAttribute('style')
 69 |   square2Ref.value!.removeAttribute('style')
 70 | 
 71 |   await delay(0)
 72 |   await whenTransitionEnd
 73 | 
 74 |   await delay(props.delayAfterFinish)
 75 | 
 76 |   emit('done')
 77 | }
 78 | </script>
 79 | 
 80 | <template>
 81 |   <div
 82 |     ref="loading"
 83 |     class="loading z-1 absolute inset-0 flex h-full flex-col items-center justify-center"
 84 |     :class="{ 'loading--finish': finish }"
 85 |   >
 86 |     <div class="loading__spinner" role="presentation">
 87 |       <div
 88 |         ref="square1Ref"
 89 |         class="loading__spinner-square-1 bg-gradient-to-t from-blue-500 to-teal-400"
 90 |       />
 91 |       <div
 92 |         ref="square2Ref"
 93 |         class="loading__spinner-square-2 bg-gradient-to-t from-teal-500 to-teal-700"
 94 |       />
 95 |     </div>
 96 |     <span class="mt-6 block text-2xl"
 97 |       ><slot>Loading Diffr Editor...</slot></span
 98 |     >
 99 |     <span
100 |       class="mt-2 block animate-fade-in text-base opacity-0"
101 |       style="--animation-delay: 3000ms"
102 |       ><slot name="subtitle"
103 |         >This may take a moment on your first visit.</slot
104 |       ></span
105 |     >
106 |   </div>
107 | </template>
108 | 
109 | <style lang="scss" scoped>
110 | $shadow-distance: 1px;
111 | $shadow-blur: 2px;
112 | $shadow-spread: 0;
113 | $shadow-color: rgba(0, 0, 0, 0.25);
114 | 
115 | .loading {
116 |   &__label {
117 |     display: block;
118 |     margin-top: 1.5em;
119 |   }
120 | 
121 |   &__spinner {
122 |     margin-top: -2.5em;
123 | 
124 |     width: 68px;
125 |     height: 68px;
126 |     position: relative;
127 | 
128 |     &-square-1,
129 |     &-square-2 {
130 |       width: 25px;
131 |       height: 25px;
132 |       position: absolute;
133 |       top: 0;
134 |       left: 0;
135 |       box-shadow: 0 $shadow-distance $shadow-blur $shadow-spread $shadow-color;
136 | 
137 |       animation: spin-square 2.5s infinite ease-in-out;
138 |     }
139 | 
140 |     &-square-2 {
141 |       animation-delay: -1.1s;
142 |     }
143 |   }
144 | }
145 | 
146 | .loading--finish {
147 |   .loading__spinner-square-1,
148 |   .loading__spinner-square-2 {
149 |     animation: none;
150 |     transition: all 0.4s;
151 |     box-shadow: #{0.5 * $shadow-distance} #{0.5 * $shadow-distance} $shadow-blur
152 |       $shadow-spread $shadow-color;
153 |   }
154 | 
155 |   .loading__spinner-square-1 {
156 |     transform: translate(-13px, -13px) translate(24px, 34px) rotate(45deg);
157 |   }
158 | 
159 |   .loading__spinner-square-2 {
160 |     transform: translate(-13px, -13px) translate(24px, 34px) translateX(35px)
161 |       translateX(-14px) rotate(45deg);
162 |   }
163 | }
164 | 
165 | @keyframes spin-square {
166 |   0% {
167 |     box-shadow: 0 $shadow-distance $shadow-blur $shadow-spread $shadow-color;
168 |     transform: rotate(0deg);
169 |   }
170 | 
171 |   25% {
172 |     box-shadow: -#{2 * $shadow-distance} 0 #{2 * $shadow-blur} #{2 * $shadow-spread}
173 |       $shadow-color;
174 |     transform: translateX(42px) rotate(-90deg) scale(0.5);
175 |   }
176 | 
177 |   50% {
178 |     box-shadow: 0 -#{$shadow-distance} $shadow-blur $shadow-spread $shadow-color;
179 |     transform: translateX(42px) translateY(42px) rotate(-180deg);
180 |   }
181 | 
182 |   75% {
183 |     box-shadow: #{2 * $shadow-distance} 0 #{2 * $shadow-blur} #{2 *
184 |       $shadow-spread} $shadow-color;
185 |     transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
186 |   }
187 | 
188 |   100% {
189 |     box-shadow: 0 $shadow-distance $shadow-blur $shadow-spread $shadow-color;
190 |     transform: rotate(-360deg);
191 |   }
192 | }
193 | </style>
194 | 


--------------------------------------------------------------------------------
/components/ToggleButton.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | withDefaults(
 3 |   defineProps<{
 4 |     modelValue: boolean
 5 |     icon?: string
 6 |     label: string
 7 |     disabled?: boolean
 8 |   }>(),
 9 |   {
10 |     disabled: false,
11 |   },
12 | )
13 | 
14 | let emit = defineEmits<{
15 |   (e: 'update:modelValue', value: boolean): void
16 | }>()
17 | </script>
18 | 
19 | <template>
20 |   <IconButton
21 |     @click="emit('update:modelValue', !modelValue)"
22 |     :highlight="modelValue && !disabled"
23 |     :label="label"
24 |     :icon="icon"
25 |     :aria-pressed="String(modelValue)"
26 |   />
27 | </template>
28 | 


--------------------------------------------------------------------------------
/composables/use-base-url.ts:
--------------------------------------------------------------------------------
 1 | export function useBaseUrl() {
 2 |   let config = useRuntimeConfig()
 3 |   let baseUrl = config.public.baseURL ?? '/'
 4 |   if (!baseUrl.endsWith('/')) {
 5 |     baseUrl += '/'
 6 |   }
 7 |   return baseUrl
 8 | }
 9 | 
10 | export function useAbsoluteUrl(file: string) {
11 |   return useBaseUrl() + file.replace(/^\/*/, '')
12 | }
13 | 


--------------------------------------------------------------------------------
/composables/use-diffr-head.ts:
--------------------------------------------------------------------------------
 1 | export function useDiffrHead() {
 2 |   useHead({
 3 |     title: 'Diffr',
 4 |     link: [
 5 |       {
 6 |         rel: 'icon',
 7 |         href: useAbsoluteUrl('favicon.ico'),
 8 |       },
 9 |       {
10 |         rel: 'icon',
11 |         type: 'image/svg+xml',
12 |         href: useAbsoluteUrl('favicon.svg'),
13 |       },
14 |       {
15 |         rel: 'apple-touch-icon',
16 |         sizes: '180x180',
17 |         href: useAbsoluteUrl('apple-touch-icon.png'),
18 |       },
19 |       {
20 |         rel: 'mask-icon',
21 |         color: '#FAFBFC',
22 |         href: useAbsoluteUrl('maskable.svg'),
23 |       },
24 |     ],
25 |     script: [
26 |       {
27 |         innerHTML: `if (
28 |             localStorage.theme === 'dark' ||
29 |             (
30 |               (
31 |                 !('theme' in localStorage) ||
32 |                 localStorage.theme === 'auto'
33 |               ) &&
34 |               window.matchMedia('(prefers-color-scheme: dark)').matches
35 |             )
36 |           ) {
37 |             document.documentElement.classList.add('dark')
38 |           } else {
39 |             document.documentElement.classList.remove('dark')
40 |           }`,
41 |       },
42 |     ],
43 |   })
44 | }
45 | 


--------------------------------------------------------------------------------
/composables/use-font-ready.ts:
--------------------------------------------------------------------------------
 1 | export function useFontReady(font: string, size = 12) {
 2 |   if (typeof document !== 'object') return readonly(ref(false))
 3 | 
 4 |   let checkString = `${size}px ${font}`
 5 | 
 6 |   let ready = ref(document.fonts.check(checkString))
 7 | 
 8 |   useEventListener(document.fonts, 'loadingdone', () => {
 9 |     ready.value = document.fonts.check(checkString)
10 |   })
11 | 
12 |   return readonly(ready)
13 | }
14 | 


--------------------------------------------------------------------------------
/composables/use-theme-toggle.ts:
--------------------------------------------------------------------------------
 1 | export function useThemeToggle() {
 2 |   let colorMode = useColorMode()
 3 |   let cycle = useColorPreferenceCycleStore()
 4 | 
 5 |   function toggle() {
 6 |     cycle.next()
 7 |     colorMode.preference = cycle.state
 8 |   }
 9 | 
10 |   let theme = computed(() => {
11 |     if (colorMode.preference === 'system') {
12 |       return colorMode.value === 'dark' ? 'dark' : 'light'
13 |     } else {
14 |       return colorMode.preference === 'dark' ? 'dark' : 'light'
15 |     }
16 |   })
17 | 
18 |   return reactive({
19 |     auto: computed(() => colorMode.preference === 'system'),
20 |     theme,
21 |     toggle,
22 |   })
23 | }
24 | 


--------------------------------------------------------------------------------
/composables/use-url-state.ts:
--------------------------------------------------------------------------------
 1 | // Handle LZ encoding/decoding from/to the URL hash in a worker
 2 | 
 3 | import type {
 4 |   WorkerMessage,
 5 |   EncodingWorkerResponse,
 6 |   DecodingWorkerResponse,
 7 | } from '~/util/encoding-worker/encoding-utils'
 8 | 
 9 | export function useUrlState<T = any>() {
10 |   if (import.meta.env.SSR)
11 |     return {
12 |       async read() {
13 |         return null
14 |       },
15 |       async write() {},
16 |       async encode(data: T) {},
17 |       async decode(serialized: string) {},
18 |     }
19 | 
20 |   let worker = useEncodingWorkerStore().get()
21 | 
22 |   function decode(serialized: string) {
23 |     return new Promise<T>(resolve => {
24 |       let id = crypto.randomUUID()
25 | 
26 |       let stop = useEventListener(
27 |         worker,
28 |         'message',
29 |         (event: MessageEvent<DecodingWorkerResponse>) => {
30 |           if (event.data?.id !== id) return
31 | 
32 |           stop()
33 |           resolve(event.data.payload)
34 |         },
35 |       )
36 | 
37 |       worker.postMessage({
38 |         type: 'decode',
39 |         id,
40 |         payload: serialized,
41 |       } satisfies WorkerMessage)
42 |     })
43 |   }
44 | 
45 |   async function read() {
46 |     const hash = document.location.hash.slice(1)
47 |     if (!hash) {
48 |       return null
49 |     }
50 | 
51 |     return decode(hash)
52 |   }
53 | 
54 |   function encode(data: T) {
55 |     return new Promise<string>(resolve => {
56 |       let id = crypto.randomUUID()
57 | 
58 |       let stop = useEventListener(
59 |         worker,
60 |         'message',
61 |         (event: MessageEvent<EncodingWorkerResponse>) => {
62 |           if (event.data?.id !== id) return
63 | 
64 |           stop()
65 |           resolve(event.data.payload)
66 |         },
67 |       )
68 | 
69 |       worker.postMessage({
70 |         type: 'encode',
71 |         id,
72 |         payload: data,
73 |       } satisfies WorkerMessage)
74 |     })
75 |   }
76 | 
77 |   async function write(data: T) {
78 |     let hash = await encode(data)
79 | 
80 |     const url = new URL(window.location.href)
81 |     url.hash = hash
82 |     history.replaceState(history.state, '', url.href)
83 |   }
84 | 
85 |   return { read, write, encode, decode }
86 | }
87 | 


--------------------------------------------------------------------------------
/encoding-worker/encoding-tools.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   decompressFromEncodedURIComponent,
 3 |   compressToEncodedURIComponent,
 4 | } from 'lz-string'
 5 | 
 6 | export function encode(data: any) {
 7 |   return compressToEncodedURIComponent(JSON.stringify(data))
 8 | }
 9 | 
10 | export function decode(serialized: any) {
11 |   return JSON.parse(decompressFromEncodedURIComponent(serialized))
12 | }
13 | 


--------------------------------------------------------------------------------
/encoding-worker/encoding-utils.ts:
--------------------------------------------------------------------------------
 1 | export type WorkerMessage =
 2 |   | {
 3 |       type: 'encode'
 4 |       id: string
 5 |       payload: any
 6 |     }
 7 |   | {
 8 |       type: 'decode'
 9 |       id: string
10 |       payload: string
11 |     }
12 | 
13 | export type EncodingWorkerResponse = {
14 |   type: 'encoded'
15 |   payload: string
16 |   id: string
17 | }
18 | 
19 | export type DecodingWorkerResponse<T = any> = {
20 |   type: 'decoded'
21 |   payload: T
22 |   id: string
23 | }
24 | 
25 | export function ensureRecord(
26 |   message: unknown,
27 | ): asserts message is Record<string, unknown> {
28 |   if (typeof message !== 'object' || message === null) {
29 |     throw new Error('Invalid message')
30 |   }
31 | }
32 | 
33 | export function validateMessage(
34 |   message: unknown,
35 | ): asserts message is WorkerMessage {
36 |   ensureRecord(message)
37 | 
38 |   if (typeof message.id !== 'string') {
39 |     throw new Error('Invalid message id')
40 |   }
41 | 
42 |   switch (message.type) {
43 |     case 'encode':
44 |       if (typeof message.payload !== 'object') {
45 |         throw new Error('Invalid message payload')
46 |       }
47 |       break
48 | 
49 |     case 'decode':
50 |       if (typeof message.payload !== 'string') {
51 |         throw new Error('Invalid message payload')
52 |       }
53 |       break
54 | 
55 |     default:
56 |       throw new Error('Invalid message type')
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/encoding-worker/encoding-worker.ts:
--------------------------------------------------------------------------------
 1 | // Handle the actual LZ encoding/decoding
 2 | import { encode, decode } from './encoding-tools'
 3 | import {
 4 |   DecodingWorkerResponse,
 5 |   EncodingWorkerResponse,
 6 |   validateMessage,
 7 | } from './encoding-utils'
 8 | 
 9 | addEventListener('message', event => {
10 |   let data = event.data
11 |   validateMessage(data)
12 | 
13 |   switch (data.type) {
14 |     case 'encode':
15 |       postMessage({
16 |         type: 'encoded',
17 |         payload: encode(data.payload),
18 |         id: data.id,
19 |       } satisfies EncodingWorkerResponse)
20 |       break
21 | 
22 |     case 'decode':
23 |       postMessage({
24 |         type: 'decoded',
25 |         payload: decode(data.payload),
26 |         id: data.id,
27 |       } satisfies DecodingWorkerResponse)
28 |       break
29 |   }
30 | })
31 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/loilo/diffr/76573e5059ad2eb7d985ce4b77be1c6edbb1efcf/logo.png


--------------------------------------------------------------------------------
/modules/fix-manifest/module.ts:
--------------------------------------------------------------------------------
 1 | // The manifest.webmanifest file is placed in the wrong folder by VitePWA,
 2 | // so we need to fix this after building.
 3 | 
 4 | import { defineNuxtModule } from '@nuxt/kit'
 5 | 
 6 | import fs from 'node:fs'
 7 | import * as path from 'node:path'
 8 | 
 9 | import consola from 'consola'
10 | 
11 | export default defineNuxtModule({
12 |   async setup(_options, nuxt) {
13 |     if ((nuxt.options.app.baseURL ?? '/') === '/') return
14 | 
15 |     nuxt.hook('close', async () => {
16 |       let outDir = path.join(nuxt.options.rootDir, '.output', 'public')
17 | 
18 |       let wrongManifestPath = path.join(
19 |         outDir,
20 |         nuxt.options.app.baseURL,
21 |         'manifest.webmanifest',
22 |       )
23 |       let correctManifestPath = path.join(outDir, 'manifest.webmanifest')
24 | 
25 |       if (fs.existsSync(wrongManifestPath)) {
26 |         consola.info('Moving manifest.webmanifest')
27 |         fs.renameSync(wrongManifestPath, correctManifestPath)
28 |       } else {
29 |         consola.success('No inappropiate manifest.webmanifest found')
30 |       }
31 |     })
32 |   },
33 | })
34 | 


--------------------------------------------------------------------------------
/modules/floating-vue/module.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
 2 | 
 3 | export default defineNuxtModule({
 4 |   setup(options, nuxt) {
 5 |     nuxt.options.vue.compilerOptions.directiveTransforms =
 6 |       nuxt.options.vue.compilerOptions.directiveTransforms || {}
 7 |     nuxt.options.vue.compilerOptions.directiveTransforms.tooltip = () => ({
 8 |       props: [],
 9 |       needRuntime: true,
10 |     })
11 | 
12 |     nuxt.options.css.push('floating-vue/dist/style.css')
13 | 
14 |     const { resolve } = createResolver(import.meta.url)
15 | 
16 |     addPlugin({
17 |       ssr: false,
18 |       mode: 'client',
19 |       src: resolve('./plugin'),
20 |     })
21 | 
22 |     // @TODO remove when floating-ui supports native ESM
23 |     nuxt.options.build.transpile.push(
24 |       'floating-vue',
25 |       '@floating-ui/core',
26 |       '@floating-ui/dom',
27 |     )
28 |   },
29 | })
30 | 


--------------------------------------------------------------------------------
/modules/floating-vue/plugin.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtPlugin } from '#app'
2 | import FloatingVue from 'floating-vue'
3 | 
4 | export default defineNuxtPlugin(nuxtApp => {
5 |   // @TODO cutomization
6 |   nuxtApp.vueApp.use(FloatingVue)
7 | })
8 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | const baseURL = (String(import.meta.env.BASE_URL ?? '') + '/').replace(
 3 |   /\/+$/,
 4 |   '/',
 5 | )
 6 | 
 7 | export default defineNuxtConfig({
 8 |   modules: [
 9 |     '@vite-pwa/nuxt',
10 |     '@nuxtjs/color-mode',
11 |     '@nuxtjs/tailwindcss',
12 |     '@pinia/nuxt',
13 |     '@vueuse/nuxt',
14 |     '@nuxtjs/google-fonts',
15 |     'nuxt-headlessui',
16 |     'nuxt-monaco-editor',
17 |     '~/modules/floating-vue/module',
18 |     '~/modules/fix-manifest/module',
19 |   ],
20 |   app: {
21 |     baseURL,
22 |     keepalive: true,
23 |   },
24 |   runtimeConfig: {
25 |     public: {
26 |       baseURL,
27 |     },
28 |   },
29 |   css: ['~/assets/css/global.scss'],
30 |   pwa: {
31 |     registerType: 'autoUpdate',
32 |     base: baseURL,
33 |     buildBase: baseURL,
34 |     manifest: {
35 |       name: 'Diffr | The Online Text Diffing Tool',
36 |       short_name: 'Diffr',
37 |       theme_color: '#19212F',
38 |       icons: [
39 |         {
40 |           src: baseURL + 'diffr-pwa-192x192.png',
41 |           sizes: '192x192',
42 |           type: 'image/png',
43 |         },
44 |         {
45 |           src: baseURL + 'diffr-pwa-512x512.png',
46 |           sizes: '512x512',
47 |           type: 'image/png',
48 |         },
49 |         {
50 |           src: baseURL + 'diffr-pwa-512x512-maskable.png',
51 |           sizes: '512x512',
52 |           type: 'image/png',
53 |           purpose: 'any maskable',
54 |         },
55 |       ],
56 |     },
57 |     workbox: {
58 |       navigateFallback: baseURL,
59 |       globPatterns: ['**/*.{js,css,html,png,svg,ico,ttf,woff,woff2}'],
60 |     },
61 |     client: {
62 |       installPrompt: true,
63 |     },
64 |     devOptions: {
65 |       enabled: true,
66 |       type: 'module',
67 |     },
68 |   },
69 |   googleFonts: {
70 |     families: {
71 |       'Fragment+Mono': [400],
72 |       Poppins: [400],
73 |     },
74 |   },
75 |   imports: {
76 |     dirs: ['./stores'],
77 |   },
78 |   pinia: {
79 |     autoImports: ['defineStore', 'acceptHMRUpdate'],
80 |   },
81 |   colorMode: {
82 |     storageKey: 'theme',
83 |     classSuffix: '',
84 |   },
85 | })
86 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "nuxt build",
 6 |     "dev": "nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview",
 9 |     "postinstall": "nuxt prepare"
10 |   },
11 |   "devDependencies": {
12 |     "@nuxtjs/google-fonts": "^3.0.2",
13 |     "@nuxtjs/tailwindcss": "^6.8.0",
14 |     "@pinia/nuxt": "^0.4.11",
15 |     "@tailwindcss/typography": "^0.5.9",
16 |     "@types/node": "^22",
17 |     "@vite-pwa/nuxt": "^1.0.0",
18 |     "monaco-editor": "^0.32.1",
19 |     "nuxt": "^3.16.1",
20 |     "nuxt-headlessui": "^1.1.4",
21 |     "pinia": "^3.0.0",
22 |     "prettier": "^3.0.2",
23 |     "prettier-plugin-tailwindcss": "^0.5.3",
24 |     "sass": "^1.66.1"
25 |   },
26 |   "dependencies": {
27 |     "@nuxtjs/color-mode": "^3.3.0",
28 |     "@vueuse/nuxt": "^13.0.0",
29 |     "floating-vue": "^5.0.2",
30 |     "lz-string": "^1.5.0",
31 |     "nuxt-monaco-editor": "^1.2.3"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | let logoUrl = useAbsoluteUrl('logo.svg')
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="px-4 pb-8 pt-4 sm:px-8 sm:py-8 md:px-16 md:py-12">
 7 |     <div class="diffr-prose mx-auto lg:prose-lg xl:prose-xl">
 8 |       <header class="flex justify-between">
 9 |         <NuxtLink to="/" class="flex items-center gap-[1.5ch]">
10 |           <!-- prettier-ignore -->
11 |           <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="448" height="512" class="w-auto h-[1.5em]"><path fill="currentColor" d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"></path></svg>
12 |           <span class="whitespace-nowrap">to the Diffr App</span>
13 |         </NuxtLink>
14 |         <ColorModeSwitch />
15 |       </header>
16 | 
17 |       <img
18 |         alt="The Diffr logo: two slightly overlapping diamond shapes"
19 |         :src="logoUrl"
20 |         width="270"
21 |         height="174"
22 |         class="!my-8 mx-auto block max-w-[60%] sm:!my-10 md:!my-12 lg:!my-12 xl:!my-16 2xl:!my-20"
23 |       />
24 | 
25 |       <div>
26 |         <h1>About Diffr</h1>
27 |         <p>
28 |           Diffr is a tool for comparing text files. It was created out of
29 |           dissatisfaction with existing diffing tools (and a certain amount of
30 |           paranoia because virtually every diffing tool has to send your data to
31 |           their server to compare). In Diffr, all the work happens locally and
32 |           your data never leaves the browser.
33 |         </p>
34 |         <h2>Features</h2>
35 |         <ul class="list">
36 |           <li>
37 |             Fully local diffing removes the need for a network connection — once
38 |             the app is loaded, it will continue to work even when you're
39 |             offline.
40 |           </li>
41 |           <li>
42 |             Share your diffs with others — all diffing data is contained in the
43 |             shared URL.
44 |           </li>
45 |           <li>
46 |             Drag&amp;Drop files from your filesystem into the editor to compare
47 |             them.
48 |           </li>
49 |           <li>Full support for dark and light mode.</li>
50 |         </ul>
51 |         <h2>Drawbacks</h2>
52 |         <ul class="list">
53 |           <li>
54 |             The editor which Diffr uses under the hood does not currently
55 |             support mobile devices running Android. For that reason, Diffr can
56 |             not support those targets either.
57 |           </li>
58 |           <li>
59 |             Bringing the editor and diffing experience entirely into the browser
60 |             requires quite some bandwidth, which means that the whole site is
61 |             pretty heavyweight (roughly 3&#8239;MB). This does not hurt past
62 |             initial load since the app is cached and not loaded again on further
63 |             visits, but the initial load may be an issue for users with an
64 |             unstable connection or a limited data plan.
65 |           </li>
66 |         </ul>
67 |       </div>
68 |       <hr class="ruler" />
69 |       <footer class="footer">
70 |         The Diffr App is Open Source software under the MIT license. Feel free
71 |         to leave feedback or contribute improvements in our
72 |         <a href="https://github.com/loilo/diffr" class="link github-link">
73 |           <!-- prettier-ignore -->
74 |           <svg aria-hidden="true" focusable="false" class="h-[1.25em] -mt-[0.15em] ml-[0.4ch] mr-[0.2ch] w-auto inline-block" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
75 |           GitHub repository</a
76 |         >.
77 |       </footer>
78 |     </div>
79 |   </div>
80 | </template>
81 | 
82 | <style lang="scss">
83 | .list {
84 |   @apply flex list-none flex-col items-start gap-2 pl-6;
85 | }
86 | 
87 | .list li {
88 |   &::before {
89 |     content: '';
90 |     @apply absolute h-[0.55em] w-[0.55em] translate-x-[calc(-100%_-_0.65em)] translate-y-[0.55em] bg-gradient-to-t from-blue-500 to-teal-400;
91 |     clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
92 |   }
93 | }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | let themeToggle = useThemeToggle()
  3 | 
  4 | let original = ref('')
  5 | let modified = ref('')
  6 | 
  7 | let loaded = ref(false)
  8 | let loaderFinished = ref(false)
  9 | 
 10 | let ignoreTrimWhitespace = ref(true)
 11 | let splitView = ref(true)
 12 | 
 13 | let options = computed(() => ({
 14 |   ignoreTrimWhitespace: unref(ignoreTrimWhitespace),
 15 |   renderSideBySide: unref(splitView),
 16 |   readOnly: !unref(splitView),
 17 |   renderLineHighlight: !unref(splitView) ? ('none' as const) : ('all' as const),
 18 |   theme: themeToggle.theme === 'dark' ? 'dark' : 'light',
 19 | }))
 20 | 
 21 | function swap() {
 22 |   ;[original.value, modified.value] = [modified.value, original.value]
 23 | }
 24 | 
 25 | function clear() {
 26 |   original.value = ''
 27 |   modified.value = ''
 28 | }
 29 | 
 30 | let sessionDocument = useSessionStorage<State | null>('document', null, {
 31 |   serializer: {
 32 |     read: (v: any) => {
 33 |       try {
 34 |         return JSON.parse(v)
 35 |       } catch {
 36 |         return null
 37 |       }
 38 |     },
 39 |     write: (v: any) => JSON.stringify(v),
 40 |   },
 41 | })
 42 | 
 43 | let urlState = useUrlState()
 44 | onMounted(() => {
 45 |   urlState.read().then(value => {
 46 |     if (value == null) {
 47 |       if (sessionDocument.value === null) return
 48 |       value = toRaw(sessionDocument.value)
 49 |     }
 50 | 
 51 |     if (typeof value.original === 'string') {
 52 |       original.value = value.original
 53 |     }
 54 | 
 55 |     if (typeof value.modified === 'string') {
 56 |       modified.value = value.modified
 57 |     }
 58 | 
 59 |     if (typeof value.ignoreTrimWhitespace === 'boolean') {
 60 |       ignoreTrimWhitespace.value = value.ignoreTrimWhitespace
 61 |     }
 62 | 
 63 |     if (typeof value.splitView === 'boolean') {
 64 |       splitView.value = value.splitView
 65 |     }
 66 | 
 67 |     let url = new URL(window.location.href)
 68 |     url.hash = ''
 69 |     history.replaceState(history.state, '', url.href)
 70 |   })
 71 | })
 72 | 
 73 | type State = {
 74 |   original: string
 75 |   modified: string
 76 |   ignoreTrimWhitespace: boolean
 77 |   splitView: boolean
 78 | }
 79 | let storableState = computed<State>(() => {
 80 |   return {
 81 |     original: original.value,
 82 |     modified: modified.value,
 83 |     ignoreTrimWhitespace: ignoreTrimWhitespace.value,
 84 |     splitView: splitView.value,
 85 |   }
 86 | })
 87 | let throttledStorableState = refThrottled(storableState, 1000)
 88 | 
 89 | function writeDocument(value: State) {
 90 |   sessionDocument.value = toRaw(value)
 91 | }
 92 | 
 93 | watch(throttledStorableState, value => {
 94 |   if (!loaderFinished.value) return
 95 | 
 96 |   if (typeof window.requestIdleCallback === 'function') {
 97 |     requestIdleCallback(
 98 |       () => {
 99 |         writeDocument(value)
100 |       },
101 |       { timeout: 400 },
102 |     )
103 |   } else {
104 |     writeDocument(value)
105 |   }
106 | })
107 | 
108 | let showShare = ref(false)
109 | let sharer = useShare()
110 | 
111 | let shareUrl = ref('')
112 | let permissionRead = usePermission('clipboard-read')
113 | let clipboard = useClipboard({ source: shareUrl })
114 | let justCopied = ref(false)
115 | 
116 | watch(showShare, value => {
117 |   if (value) {
118 |     justCopied.value = false
119 |   }
120 | })
121 | 
122 | function copy() {
123 |   clipboard.copy(shareUrl.value)
124 |   justCopied.value = true
125 | }
126 | 
127 | function share() {
128 |   urlState.encode(storableState.value).then(hash => {
129 |     const url = new URL(window.location.href)
130 |     url.hash = hash!
131 |     shareUrl.value = url.toString()
132 |   })
133 |   showShare.value = true
134 | }
135 | </script>
136 | 
137 | <template>
138 |   <div
139 |     class="flex h-[100dvh] flex-col items-stretch"
140 |     :style="{
141 |       '--sidebar-measure': '6.75rem',
142 |       '--sidebar-width': loaded ? 'var(--sidebar-measure)' : '0rem',
143 |     }"
144 |   >
145 |     <HeadlessTransitionRoot appear :show="showShare" as="template">
146 |       <HeadlessDialog as="div" @close="showShare = false" class="relative z-10">
147 |         <HeadlessTransitionChild
148 |           as="template"
149 |           enter="duration-300 ease-out"
150 |           enter-from="opacity-0"
151 |           enter-to="opacity-100"
152 |           leave="duration-200 ease-in"
153 |           leave-from="opacity-100"
154 |           leave-to="opacity-0"
155 |         >
156 |           <div
157 |             class="fixed inset-0 bg-blue-900/25 backdrop-blur-sm dark:bg-slate-500/50"
158 |           />
159 |         </HeadlessTransitionChild>
160 | 
161 |         <div class="fixed inset-0 overflow-y-auto">
162 |           <div
163 |             class="flex min-h-full items-center justify-center p-4 text-center"
164 |           >
165 |             <HeadlessTransitionChild
166 |               as="template"
167 |               enter="duration-300 ease-out"
168 |               enter-from="opacity-0 scale-95"
169 |               enter-to="opacity-100 scale-100"
170 |               leave="duration-200 ease-in"
171 |               leave-from="opacity-100 scale-100"
172 |               leave-to="opacity-0 scale-95"
173 |             >
174 |               <HeadlessDialogPanel
175 |                 class="diffr-prose w-full max-w-lg transform overflow-hidden rounded bg-white p-6 text-left align-middle shadow-xl transition-all prose-headings:my-0 prose-hr:my-8 dark:bg-slate-800 sm:p-8 md:p-10"
176 |               >
177 |                 <HeadlessDialogTitle as="h2">
178 |                   Share this diff
179 |                 </HeadlessDialogTitle>
180 |                 <div class="mt-2 text-base">
181 |                   <p>
182 |                     <template v-if="sharer.isSupported.value">
183 |                       Use the button below to share your diff with others.
184 |                     </template>
185 |                     <template v-else>
186 |                       Copy the URL below to share your diff with others:
187 | 
188 |                       <input
189 |                         class="-mb-2 mt-6 w-full rounded border-2 border-slate-100 bg-slate-100 px-3 py-3 text-sm text-slate-600 focus:border-blue focus:outline-none dark:border-slate-600 dark:bg-slate-600 dark:text-slate-300 dark:focus:border-teal-400"
190 |                         :value="shareUrl"
191 |                         readonly
192 |                       />
193 |                     </template>
194 |                   </p>
195 |                 </div>
196 | 
197 |                 <div class="mt-4 flex items-center gap-7 md:mt-6">
198 |                   <template v-if="sharer.isSupported.value">
199 |                     <Button
200 |                       theme="fancy"
201 |                       @click="sharer.share({ url: shareUrl, title: 'My Diff' })"
202 |                       :disabled="permissionRead === 'denied'"
203 |                     >
204 |                       Share
205 |                     </Button>
206 |                   </template>
207 |                   <template v-else>
208 |                     <Button
209 |                       theme="fancy"
210 |                       @click="copy"
211 |                       :disabled="permissionRead === 'denied'"
212 |                     >
213 |                       Copy URL
214 |                     </Button>
215 |                   </template>
216 | 
217 |                   <Button theme="text" @click="showShare = false">
218 |                     Close
219 |                   </Button>
220 |                 </div>
221 | 
222 |                 <div v-if="!sharer.isSupported && permissionRead === 'denied'">
223 |                   <p class="text-sm">
224 |                     Unfortunately, your browser denies copying to your
225 |                     clipboard. Please copy the URL manually.
226 |                   </p>
227 |                 </div>
228 | 
229 |                 <Alert v-if="justCopied" class="mt-4">
230 |                   The URL has been copied to your clipboard.
231 |                 </Alert>
232 | 
233 |                 <hr />
234 | 
235 |                 <p class="text-xs text-slate-500 dark:text-slate-400">
236 |                   Note that Diffr's highest maxim is to never share your input
237 |                   with a third party. Therefore, no direct collaboration on your
238 |                   diff is possible with people you share it with — they will
239 |                   receive a fresh copy of the text, and their changes will not
240 |                   affect your data.
241 |                 </p>
242 |               </HeadlessDialogPanel>
243 |             </HeadlessTransitionChild>
244 |           </div>
245 |         </div>
246 |       </HeadlessDialog>
247 |     </HeadlessTransitionRoot>
248 | 
249 |     <div
250 |       class="grid h-full min-h-0 grid-rows-[1fr_auto] transition-[grid-template-columns] duration-500 md:grid-cols-[1fr_var(--sidebar-width)]"
251 |     >
252 |       <div
253 |         v-if="!loaderFinished"
254 |         class="relative col-span-1 col-start-1 row-span-1 row-start-1"
255 |       >
256 |         <SquareLoader
257 |           :delay-after-finish="400"
258 |           :finish="loaded"
259 |           @done="loaderFinished = true"
260 |         />
261 |       </div>
262 |       <div
263 |         class="col-span-1 col-start-1 row-span-1 row-start-1"
264 |         :class="{ 'opacity-0': !loaderFinished }"
265 |       >
266 |         <DiffEditor
267 |           v-model:original="original"
268 |           v-model:modified="modified"
269 |           :options="options"
270 |           @load="loaded = true"
271 |         />
272 |       </div>
273 | 
274 |       <div
275 |         data-sidebar
276 |         class="flex items-stretch gap-1 overflow-auto bg-slate-50 p-2 shadow-xl dark:bg-slate-800 sm:grid sm:grid-cols-6 md:flex md:w-[var(--sidebar-measure)] md:flex-col"
277 |       >
278 |         <ToggleButton v-model="splitView" icon="split" label="Split View" />
279 |         <ToggleButton
280 |           v-model="ignoreTrimWhitespace"
281 |           icon="indent"
282 |           label="Ignore Trim Whitespace"
283 |         />
284 | 
285 |         <IconButton
286 |           class="md:my-auto"
287 |           @click="share"
288 |           highlight
289 |           label="Share"
290 |           icon="share"
291 |           size="h-5 sm:h-6 w-auto"
292 |           :disabled="original.length === 0 && modified.length === 0"
293 |         />
294 | 
295 |         <IconButton
296 |           @click="swap"
297 |           highlight
298 |           label="Swap"
299 |           icon="swap"
300 |           :disabled="!splitView"
301 |         />
302 |         <IconButton @click="clear" highlight label="Clear" icon="trash" />
303 |         <IconButton
304 |           @click="themeToggle.toggle()"
305 |           highlight
306 |           :label="
307 |             themeToggle.auto
308 |               ? 'System'
309 |               : themeToggle.theme === 'dark'
310 |               ? 'Dark Mode'
311 |               : 'Light Mode'
312 |           "
313 |           :icon="
314 |             themeToggle.auto
315 |               ? 'screen'
316 |               : themeToggle.theme === 'dark'
317 |               ? 'moon'
318 |               : 'sun'
319 |           "
320 |         />
321 |         <IconButton
322 |           highlight
323 |           link="/about"
324 |           label="About Diffr"
325 |           icon="diffr"
326 |           size="h-6 w-auto"
327 |         />
328 |       </div>
329 |     </div>
330 |   </div>
331 | </template>
332 | 
333 | <style lang="scss" scoped>
334 | [data-sidebar] {
335 |   --sb-track-color: theme('colors.slate.200');
336 |   --sb-thumb-color: theme('colors.slate.300');
337 |   --sb-size: 6px;
338 | 
339 |   @at-root :root.dark & {
340 |     --sb-track-color: theme('colors.slate.900');
341 |     --sb-thumb-color: theme('colors.blue.800');
342 |   }
343 | 
344 |   scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
345 | 
346 |   &::-webkit-scrollbar {
347 |     width: var(--sb-size);
348 |   }
349 | 
350 |   &::-webkit-scrollbar-track {
351 |     background: var(--sb-track-color);
352 |     border-radius: 6px;
353 |   }
354 | 
355 |   &::-webkit-scrollbar-thumb {
356 |     background: var(--sb-thumb-color);
357 |     border-radius: 6px;
358 |   }
359 | }
360 | </style>
361 | 


--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/loilo/diffr/76573e5059ad2eb7d985ce4b77be1c6edbb1efcf/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/diffr-pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/loilo/diffr/76573e5059ad2eb7d985ce4b77be1c6edbb1efcf/public/diffr-pwa-192x192.png


--------------------------------------------------------------------------------
/public/diffr-pwa-512x512-maskable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/loilo/diffr/76573e5059ad2eb7d985ce4b77be1c6edbb1efcf/public/diffr-pwa-512x512-maskable.png


--------------------------------------------------------------------------------
/public/diffr-pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/loilo/diffr/76573e5059ad2eb7d985ce4b77be1c6edbb1efcf/public/diffr-pwa-512x512.png


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/loilo/diffr/76573e5059ad2eb7d985ce4b77be1c6edbb1efcf/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/loilo/diffr/76573e5059ad2eb7d985ce4b77be1c6edbb1efcf/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/loilo/diffr/76573e5059ad2eb7d985ce4b77be1c6edbb1efcf/public/favicon.ico


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="270" height="270" viewBox="0 0 270 270" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-11.7%" y="-8.1%" width="126.6%" height="121.2%" filterUnits="objectBoundingBox" id="a"><feOffset dx="2" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.515431297 0 0 0 0 0.685785708 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><filter x="-13%" y="-13%" width="126.1%" height="126.1%" filterUnits="objectBoundingBox" id="e"><feGaussianBlur stdDeviation="4" in="SourceGraphic"/></filter><filter x="-11.7%" y="-8.1%" width="126.6%" height="121.2%" filterUnits="objectBoundingBox" id="g"><feOffset dx="2" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.634903488 0 0 0 0 0.704961804 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><filter x="-26.1%" y="-26.1%" width="152.2%" height="152.2%" filterUnits="objectBoundingBox" id="k"><feGaussianBlur stdDeviation="8" in="SourceGraphic"/></filter><filter x="-39.5%" y="-39.5%" width="178.9%" height="178.9%" filterUnits="objectBoundingBox" id="n"><feGaussianBlur stdDeviation="10" in="SourceGraphic"/></filter><linearGradient x1="50%" y1="9.697%" x2="50%" y2="85.407%" id="c"><stop stop-color="#38EFFF" offset="0%"/><stop stop-color="#13A7EF" offset="100%"/></linearGradient><linearGradient x1="50%" y1="14.144%" x2="50%" y2="83.837%" id="i"><stop stop-color="#008497" offset="0%"/><stop stop-color="#0EC7DF" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="m"><stop stop-color="#0EAFA4" offset="0%"/><stop stop-color="#005E70" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="o"><stop stop-color="#2CFFF0" offset="0%"/><stop stop-color="#00D5FF" offset="100%"/></linearGradient><path d="m80 0 48 48-32 32 32 32-48 48L0 80 80 0Z" id="b"/><path id="d" d="m80 0 80 80-80 80L0 80z"/><path d="m176 0 80 80-80 80-48-48 32-32-32-32 48-48Z" id="h"/><path id="j" d="m80 0 80 80-80 80L0 80z"/></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero" transform="translate(5 51)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="url(#c)" xlink:href="#b"/></g><g transform="translate(5 51)"><mask id="f" fill="#fff"><use xlink:href="#d"/></mask><use fill-opacity="0" fill="#000" fill-rule="nonzero" xlink:href="#d"/><path fill-opacity=".3" fill="#FFF" fill-rule="nonzero" style="mix-blend-mode:soft-light" filter="url(#e)" mask="url(#f)" d="m80 4 76 76-16 16-76-76z"/></g><g fill-rule="nonzero" transform="translate(5 51)"><use fill="#000" filter="url(#g)" xlink:href="#h"/><use fill="url(#i)" xlink:href="#h"/></g><g transform="translate(101 51)"><mask id="l" fill="#fff"><use xlink:href="#j"/></mask><use fill-opacity="0" fill="#000" fill-rule="nonzero" xlink:href="#j"/><path fill-opacity=".22" fill="#FFF" fill-rule="nonzero" style="mix-blend-mode:soft-light" filter="url(#k)" mask="url(#l)" d="m80 4 76 76-16 16-76-76z"/></g><path d="m136 46 38 38-38 38-38-38 38-38Z" fill-opacity=".2" fill="url(#m)" fill-rule="nonzero" filter="url(#n)" transform="translate(5 51)"/><path d="m134 42 38 38-38 38-38-38 38-38Z" fill="url(#o)" fill-rule="nonzero" transform="translate(5 51)"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/blank.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512"></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/copy.svg:
--------------------------------------------------------------------------------
1 | <svg width="448" height="512" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="m433.941 65.941-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941ZM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6Zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6Zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112Z" fill-rule="nonzero"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/cut.svg:
--------------------------------------------------------------------------------
1 | <svg width="448" height="448" viewBox="0 0 448 448" xmlns="http://www.w3.org/2000/svg"><path d="M263.39 224 445.66 41.37c3.12-3.12 3.12-8.19 0-11.31-18.74-18.74-49.14-18.74-67.88 0L223.82 184.35l-43.1-43.18C187.92 127.71 192 112.33 192 96c0-53.02-42.98-96-96-96S0 42.98 0 96s42.98 96 96 96c16.31 0 31.66-4.07 45.11-11.24L184.26 224l-43.15 43.24C127.66 260.07 112.31 256 96 256c-53.02 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96c0-16.33-4.08-31.71-11.28-45.17l43.1-43.18 153.95 154.29c18.74 18.74 49.14 18.74 67.88 0 3.12-3.12 3.12-8.19 0-11.31L263.39 224ZM96 144c-26.47 0-48-21.53-48-48s21.53-48 48-48 48 21.53 48 48-21.53 48-48 48Zm0 256c-26.47 0-48-21.53-48-48s21.53-48 48-48 48 21.53 48 48-21.53 48-48 48Z" fill-rule="nonzero"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/diffr.svg:
--------------------------------------------------------------------------------
1 | <svg width="266" height="266" viewBox="0 0 266 266" xmlns="http://www.w3.org/2000/svg"><path d="m195.864 52.89 62.225 62.225c10.154 10.154 10.154 26.616 0 36.77l-62.225 62.225c-10.154 10.154-26.616 10.154-36.77 0L133 188.016l-26.093 26.094c-10.154 10.154-26.616 10.154-36.77 0L7.911 151.885c-10.154-10.154-10.154-26.616 0-36.77L70.136 52.89c10.154-10.154 26.616-10.154 36.77 0l26.093 26.093H133l26.094-26.093c10.154-10.154 26.616-10.154 36.77 0Zm-22.627 14.142-13.928 13.927a26.073 26.073 0 0 1 4.735 3.75l30.406 30.406c10.153 10.154 10.153 26.616 0 36.77l-30.406 30.405a26.073 26.073 0 0 1-4.735 3.751l13.928 13.927a6 6 0 0 0 8.485 0l62.225-62.225a6 6 0 0 0 0-8.486l-62.225-62.225a6 6 0 0 0-8.485 0Zm-88.959 0-62.225 62.225a6 6 0 0 0 0 8.486l62.225 62.225a6 6 0 0 0 8.485 0l26.094-26.094-21.988-21.99-.302-.306a26.007 26.007 0 0 1-4.901-7.124 25.822 25.822 0 0 1-1.815-5.4l-.04-.186a26.057 26.057 0 0 1-.467-3.198l-.014-.175a26.171 26.171 0 0 1 .92-9.14 25.94 25.94 0 0 1 2.532-5.945 25.827 25.827 0 0 1 1.105-1.732l.026-.037c.079-.113.158-.225.239-.337l.063-.087c.217-.298.44-.591.671-.881l.018-.023a26.1 26.1 0 0 1 1.965-2.198l21.988-21.99-26.094-26.093a6 6 0 0 0-8.485 0Zm57.139 31.82-16.265 16.263-14.14 14.142a6.05 6.05 0 0 0-.656.776l-.13.191a5.968 5.968 0 0 0-.138.222l.081-.134a5.955 5.955 0 0 0-.615 1.309l.027-.077a5.994 5.994 0 0 0-.31 1.502l.01-.11a6.04 6.04 0 0 0-.02.257l.01-.147c-.006.074-.01.148-.013.223l.004-.076c-.004.075-.007.15-.008.224l.004-.148a6.037 6.037 0 0 0-.004.231v-.083c0 .081 0 .162.002.243l-.002-.16c0 .086.002.172.005.257l-.003-.097c.002.078.005.155.01.232l-.007-.135c.004.093.01.186.019.278l-.012-.143c.005.076.012.15.02.226l-.008-.083c.006.071.013.142.022.213l-.015-.13c.009.083.019.166.031.25l.019.118.018.106-.017-.1a5.987 5.987 0 0 0 .442 1.467l-.029-.068a5.956 5.956 0 0 0 .63 1.11l-.029-.042c.049.069.099.137.15.204l-.12-.161c.048.066.097.132.148.197l-.028-.036.138.172-.11-.136c.06.076.12.15.184.223l-.074-.087c.056.066.113.132.172.197l-.098-.11c.052.06.106.12.162.179l-.064-.07c.052.058.105.114.16.17l.104.106 14.08 14.078 16.263 16.263a6 6 0 0 0 8.485 0l30.406-30.405a6 6 0 0 0 0-8.486l-30.406-30.405a6 6 0 0 0-8.485 0Z" fill-rule="nonzero"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/indent.svg:
--------------------------------------------------------------------------------
1 | <svg width="448" height="448" viewBox="0 0 448 448" xmlns="http://www.w3.org/2000/svg"><path d="M432 388H16c-8.837 0-16 7.163-16 16v16c0 8.837 7.163 16 16 16h416c8.837 0 16-7.163 16-16v-16c0-8.837-7.163-16-16-16ZM27.31 327.3l96-96c6.243-6.248 6.243-16.372 0-22.62l-96-96C17.27 102.66 0 109.78 0 124v192c0 14.31 17.33 21.3 27.31 11.3ZM435.17 132H204.83A12.82 12.82 0 0 0 192 144.83v22.34A12.82 12.82 0 0 0 204.83 180h230.34A12.82 12.82 0 0 0 448 167.17v-22.34A12.82 12.82 0 0 0 435.17 132ZM432 12H16C7.163 12 0 19.163 0 28v16c0 8.837 7.163 16 16 16h416c8.837 0 16-7.163 16-16V28c0-8.837-7.163-16-16-16Zm3.17 248H204.83A12.82 12.82 0 0 0 192 272.83v22.34A12.82 12.82 0 0 0 204.83 308h230.34A12.82 12.82 0 0 0 448 295.17v-22.34A12.82 12.82 0 0 0 435.17 260Z" fill-rule="nonzero"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/moon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512"><path d="M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/paste.svg:
--------------------------------------------------------------------------------
1 | <svg width="448" height="512" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="m433.941 193.941-51.882-51.882A48 48 0 0 0 348.118 128H320V80c0-26.51-21.49-48-48-48h-61.414C201.582 13.098 182.294 0 160 0c-22.294 0-41.582 13.098-50.586 32H48C21.49 32 0 53.49 0 80v288c0 26.51 21.49 48 48 48h80v48c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48V227.882a48 48 0 0 0-14.059-33.941Zm-84.066-16.184 48.368 48.368a6 6 0 0 1 1.757 4.243V240h-64v-64h9.632a6 6 0 0 1 4.243 1.757ZM160 38c9.941 0 18 8.059 18 18s-8.059 18-18 18-18-8.059-18-18 8.059-18 18-18Zm-32 138v192H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h55.414c9.004 18.902 28.292 32 50.586 32 22.294 0 41.582-13.098 50.586-32H266a6 6 0 0 1 6 6v42h-96c-26.51 0-48 21.49-48 48Zm266 288H182a6 6 0 0 1-6-6V182a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v170a6 6 0 0 1-6 6Z" fill-rule="nonzero"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/screen.svg:
--------------------------------------------------------------------------------
1 | <svg width="576" height="576" viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg"><path d="M528 32H48C21.5 32 0 53.5 0 80v288c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48Zm-6 336H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h468c3.3 0 6 2.7 6 6v276c0 3.3-2.7 6-6 6Zm-42 152c0 13.3-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h98.7l18.6-55.8c1.6-4.9 6.2-8.2 11.4-8.2h78.7c5.2 0 9.8 3.3 11.4 8.2l18.6 55.8H456c13.3 0 24 10.7 24 24Z" fill-rule="nonzero"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/share.svg:
--------------------------------------------------------------------------------
1 | <svg width="576" height="576" viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg"><path d="M561.938 190.06 417.94 46.092C387.926 16.078 336 37.097 336 80.032v57.198c-42.45 1.88-84.03 6.55-120.76 17.99-35.17 10.95-63.07 27.58-82.91 49.42C108.22 231.2 96 264.6 96 303.94c0 61.697 33.178 112.455 84.87 144.76 37.546 23.508 85.248-12.65 71.02-55.74-15.515-47.119-17.156-70.923 84.11-78.76V368c0 42.993 51.968 63.913 81.94 33.94l143.998-144c18.75-18.74 18.75-49.14 0-67.88ZM384 368V264.16C255.309 266.082 166.492 287.35 206.31 408 176.79 389.55 144 356.08 144 303.94c0-109.334 129.14-118.947 240-119.85V80l144 144-144 144Zm24.74 84.493a82.658 82.658 0 0 0 20.974-9.303c7.976-4.952 18.286.826 18.286 10.214V496c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V144c0-26.51 21.49-48 48-48h132c6.627 0 12 5.373 12 12v4.486c0 4.917-2.987 9.37-7.569 11.152-13.702 5.331-26.396 11.537-38.05 18.585a12.138 12.138 0 0 1-6.28 1.777H54a6 6 0 0 0-6 6v340a6 6 0 0 0 6 6h340a6 6 0 0 0 6-6v-25.966c0-5.37 3.579-10.059 8.74-11.54Z" fill-rule="nonzero"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/split.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM232 432H54a6 6 0 0 1-6-6V112h184v320zm226 0H280V112h184v314a6 6 0 0 1-6 6z"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/sun.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512"><path d="M494.2 221.9l-59.8-40.5 13.7-71c2.6-13.2-1.6-26.8-11.1-36.4-9.6-9.5-23.2-13.7-36.2-11.1l-70.9 13.7-40.4-59.9c-15.1-22.3-51.9-22.3-67 0l-40.4 59.9-70.8-13.7C98 60.4 84.5 64.5 75 74.1c-9.5 9.6-13.7 23.1-11.1 36.3l13.7 71-59.8 40.5C6.6 229.5 0 242 0 255.5s6.7 26 17.8 33.5l59.8 40.5-13.7 71c-2.6 13.2 1.6 26.8 11.1 36.3 9.5 9.5 22.9 13.7 36.3 11.1l70.8-13.7 40.4 59.9C230 505.3 242.6 512 256 512s26-6.7 33.5-17.8l40.4-59.9 70.9 13.7c13.4 2.7 26.8-1.6 36.3-11.1 9.5-9.5 13.6-23.1 11.1-36.3l-13.7-71 59.8-40.5c11.1-7.5 17.8-20.1 17.8-33.5-.1-13.6-6.7-26.1-17.9-33.7zm-112.9 85.6l17.6 91.2-91-17.6L256 458l-51.9-77-90.9 17.6 17.6-91.2-76.8-52 76.8-52-17.6-91.2 91 17.6L256 53l51.9 76.9 91-17.6-17.6 91.1 76.8 52-76.8 52.1zM256 152c-57.3 0-104 46.7-104 104s46.7 104 104 104 104-46.7 104-104-46.7-104-104-104zm0 160c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/swap.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M508.485 168.485l-100.375 100c-4.686 4.686-12.284 4.686-16.97 0l-19.626-19.626c-4.753-4.753-4.675-12.484.173-17.14L422.916 184H12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h410.916l-51.228-47.719c-4.849-4.656-4.927-12.387-.173-17.14l19.626-19.626c4.686-4.686 12.284-4.686 16.97 0l100.375 100c4.685 4.686 4.685 12.284-.001 16.97zm-504.97 192l100.375 100c4.686 4.686 12.284 4.686 16.97 0l19.626-19.626c4.753-4.753 4.675-12.484-.173-17.14L89.084 376H500c6.627 0 12-5.373 12-12v-24c0-6.627-5.373-12-12-12H89.084l51.228-47.719c4.849-4.656 4.927-12.387.173-17.14l-19.626-19.626c-4.686-4.686-12.284-4.686-16.97 0l-100.375 100c-4.686 4.686-4.686 12.284.001 16.97z"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/icons/trash.svg:
--------------------------------------------------------------------------------
1 | <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M300 416h24c6.627 0 12-5.373 12-12V188c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v216c0 6.627 5.373 12 12 12ZM464 80h-82.41l-34-56.7A48 48 0 0 0 306.41 0H205.59a48.002 48.002 0 0 0-41.16 23.3L130.41 80H48c-8.837 0-16 7.163-16 16v16c0 8.837 7.163 16 16 16h16v336c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48V128h16c8.837 0 16-7.163 16-16V96c0-8.837-7.163-16-16-16ZM203.84 50.91A6 6 0 0 1 209 48h94a6 6 0 0 1 5.15 2.91L325.61 80H186.39l17.45-29.09ZM400 464H112V128h288v336Zm-212-48h24c6.627 0 12-5.373 12-12V188c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v216c0 6.627 5.373 12 12 12Z" fill-rule="nonzero"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="270" height="174" viewBox="0 0 270 174" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-11.7%" y="-8.1%" width="126.6%" height="121.2%" filterUnits="objectBoundingBox" id="a"><feOffset dx="2" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.515431297 0 0 0 0 0.685785708 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><filter x="-13%" y="-13%" width="126.1%" height="126.1%" filterUnits="objectBoundingBox" id="e"><feGaussianBlur stdDeviation="4" in="SourceGraphic"/></filter><filter x="-11.7%" y="-8.1%" width="126.6%" height="121.2%" filterUnits="objectBoundingBox" id="g"><feOffset dx="2" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.634903488 0 0 0 0 0.704961804 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><filter x="-26.1%" y="-26.1%" width="152.2%" height="152.2%" filterUnits="objectBoundingBox" id="k"><feGaussianBlur stdDeviation="8" in="SourceGraphic"/></filter><filter x="-39.5%" y="-39.5%" width="178.9%" height="178.9%" filterUnits="objectBoundingBox" id="n"><feGaussianBlur stdDeviation="10" in="SourceGraphic"/></filter><linearGradient x1="50%" y1="9.697%" x2="50%" y2="85.407%" id="c"><stop stop-color="#38EFFF" offset="0%"/><stop stop-color="#13A7EF" offset="100%"/></linearGradient><linearGradient x1="50%" y1="14.144%" x2="50%" y2="83.837%" id="i"><stop stop-color="#008497" offset="0%"/><stop stop-color="#0EC7DF" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="m"><stop stop-color="#0EAFA4" offset="0%"/><stop stop-color="#005E70" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="o"><stop stop-color="#2CFFF0" offset="0%"/><stop stop-color="#00D5FF" offset="100%"/></linearGradient><path d="m80 0 48 48-32 32 32 32-48 48L0 80 80 0Z" id="b"/><path id="d" d="m80 0 80 80-80 80L0 80z"/><path d="m176 0 80 80-80 80-48-48 32-32-32-32 48-48Z" id="h"/><path id="j" d="m80 0 80 80-80 80L0 80z"/></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero" transform="translate(5 3)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="url(#c)" xlink:href="#b"/></g><g transform="translate(5 3)"><mask id="f" fill="#fff"><use xlink:href="#d"/></mask><use fill-opacity="0" fill="#000" fill-rule="nonzero" xlink:href="#d"/><path fill-opacity=".3" fill="#FFF" fill-rule="nonzero" style="mix-blend-mode:soft-light" filter="url(#e)" mask="url(#f)" d="m80 4 76 76-16 16-76-76z"/></g><g fill-rule="nonzero" transform="translate(5 3)"><use fill="#000" filter="url(#g)" xlink:href="#h"/><use fill="url(#i)" xlink:href="#h"/></g><g transform="translate(101 3)"><mask id="l" fill="#fff"><use xlink:href="#j"/></mask><use fill-opacity="0" fill="#000" fill-rule="nonzero" xlink:href="#j"/><path fill-opacity=".22" fill="#FFF" fill-rule="nonzero" style="mix-blend-mode:soft-light" filter="url(#k)" mask="url(#l)" d="m80 4 76 76-16 16-76-76z"/></g><path d="m136 46 38 38-38 38-38-38 38-38Z" fill-opacity=".2" fill="url(#m)" fill-rule="nonzero" filter="url(#n)" transform="translate(5 3)"/><path d="m134 42 38 38-38 38-38-38 38-38Z" fill="url(#o)" fill-rule="nonzero" transform="translate(5 3)"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/public/maskable.svg:
--------------------------------------------------------------------------------
1 | <svg width="360" height="360" viewBox="0 0 360 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-11.7%" y="-8.1%" width="126.6%" height="121.2%" filterUnits="objectBoundingBox" id="a"><feOffset dx="2" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.515431297 0 0 0 0 0.685785708 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><filter x="-13%" y="-13%" width="126.1%" height="126.1%" filterUnits="objectBoundingBox" id="e"><feGaussianBlur stdDeviation="4" in="SourceGraphic"/></filter><filter x="-11.7%" y="-8.1%" width="126.6%" height="121.2%" filterUnits="objectBoundingBox" id="g"><feOffset dx="2" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.634903488 0 0 0 0 0.704961804 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><filter x="-26.1%" y="-26.1%" width="152.2%" height="152.2%" filterUnits="objectBoundingBox" id="k"><feGaussianBlur stdDeviation="8" in="SourceGraphic"/></filter><filter x="-39.5%" y="-39.5%" width="178.9%" height="178.9%" filterUnits="objectBoundingBox" id="n"><feGaussianBlur stdDeviation="10" in="SourceGraphic"/></filter><linearGradient x1="50%" y1="9.697%" x2="50%" y2="85.407%" id="c"><stop stop-color="#38EFFF" offset="0%"/><stop stop-color="#13A7EF" offset="100%"/></linearGradient><linearGradient x1="50%" y1="14.144%" x2="50%" y2="83.837%" id="i"><stop stop-color="#008497" offset="0%"/><stop stop-color="#0EC7DF" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="m"><stop stop-color="#0EAFA4" offset="0%"/><stop stop-color="#005E70" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="o"><stop stop-color="#2CFFF0" offset="0%"/><stop stop-color="#00D5FF" offset="100%"/></linearGradient><path d="m80 0 48 48-32 32 32 32-48 48L0 80 80 0Z" id="b"/><path id="d" d="m80 0 80 80-80 80L0 80z"/><path d="m176 0 80 80-80 80-48-48 32-32-32-32 48-48Z" id="h"/><path id="j" d="m80 0 80 80-80 80L0 80z"/></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero" transform="translate(52 100)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="url(#c)" xlink:href="#b"/></g><g transform="translate(52 100)"><mask id="f" fill="#fff"><use xlink:href="#d"/></mask><use fill-opacity="0" fill="#000" fill-rule="nonzero" xlink:href="#d"/><path fill-opacity=".3" fill="#FFF" fill-rule="nonzero" style="mix-blend-mode:soft-light" filter="url(#e)" mask="url(#f)" d="m80 4 76 76-16 16-76-76z"/></g><g fill-rule="nonzero" transform="translate(52 100)"><use fill="#000" filter="url(#g)" xlink:href="#h"/><use fill="url(#i)" xlink:href="#h"/></g><g transform="translate(148 100)"><mask id="l" fill="#fff"><use xlink:href="#j"/></mask><use fill-opacity="0" fill="#000" fill-rule="nonzero" xlink:href="#j"/><path fill-opacity=".22" fill="#FFF" fill-rule="nonzero" style="mix-blend-mode:soft-light" filter="url(#k)" mask="url(#l)" d="m80 4 76 76-16 16-76-76z"/></g><path d="m136 46 38 38-38 38-38-38 38-38Z" fill-opacity=".2" fill="url(#m)" fill-rule="nonzero" filter="url(#n)" transform="translate(52 100)"/><path d="m134 42 38 38-38 38-38-38 38-38Z" fill="url(#o)" fill-rule="nonzero" transform="translate(52 100)"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/stores/color-preference-cycle.ts:
--------------------------------------------------------------------------------
 1 | export const useColorPreferenceCycleStore = defineStore(
 2 |   'color-preference-cycle',
 3 |   () => {
 4 |     let colorMode = useColorMode()
 5 | 
 6 |     return useCycleList<'light' | 'system' | 'dark'>(
 7 |       ['light', 'system', 'dark'],
 8 |       {
 9 |         initialValue: colorMode.preference as 'light' | 'system' | 'dark',
10 |       },
11 |     )
12 |   },
13 | )
14 | 


--------------------------------------------------------------------------------
/stores/encoding-worker.ts:
--------------------------------------------------------------------------------
 1 | export const useEncodingWorkerStore = defineStore('encoding-worker', () => {
 2 |   let worker = new Worker(
 3 |     new URL('../util/encoding-worker/encoding-worker', import.meta.url),
 4 |     {
 5 |       type: 'module',
 6 |     },
 7 |   )
 8 | 
 9 |   return { get: () => worker }
10 | })
11 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss'
 2 | import plugin from 'tailwindcss/plugin'
 3 | import typographyPlugin from '@tailwindcss/typography'
 4 | 
 5 | export default {
 6 |   content: ['./**/*.vue'],
 7 |   darkMode: 'class',
 8 |   theme: {
 9 |     extend: {
10 |       fontFamily: {
11 |         sans: "Poppins, Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif",
12 |       },
13 |       fontSize: {
14 |         icon: '0.8rem',
15 |       },
16 |       boxShadow: {
17 |         'inner-sm': 'inset 0 1px 2px 0 rgb(0 0 0 / 0.05)',
18 |         'inner-xs': 'inset 0 1px 1px 0 rgb(0 0 0 / 0.1)',
19 |       },
20 |       colors: {
21 |         slate: {
22 |           '50': '#fafbfc',
23 |           '100': '#f1f5f9',
24 |           '200': '#e2e8f0',
25 |           '300': '#cbd5e1',
26 |           '400': '#94a3b8',
27 |           '500': '#64748b',
28 |           '600': '#475569',
29 |           '700': '#334155',
30 |           '800': '#1F2A3B',
31 |           '900': '#19212F',
32 |           '950': '#141821',
33 |         },
34 |         blue: {
35 |           DEFAULT: '#2fb1f0',
36 |           '50': '#f1f9fe',
37 |           '100': '#e1f1fd',
38 |           '200': '#bce4fb',
39 |           '300': '#82cff7',
40 |           '400': '#2fb1f0',
41 |           '500': '#169ee1',
42 |           '600': '#097ec0',
43 |           '700': '#09649b',
44 |           '800': '#0b5681',
45 |           '900': '#0f476b',
46 |           '950': '#0a2e47',
47 |         },
48 |         teal: {
49 |           DEFAULT: '#06a0b5',
50 |           '50': '#ecffff',
51 |           '100': '#cefeff',
52 |           '200': '#a4fbfd',
53 |           '300': '#65f4fb',
54 |           '400': '#20e4f0',
55 |           '500': '#04c8d6',
56 |           '600': '#06a0b5',
57 |           '700': '#0c7f92',
58 |           '800': '#146676',
59 |           '900': '#155464',
60 |           '950': '#073845',
61 |         },
62 |       },
63 |       keyframes: {
64 |         'fade-in': {
65 |           '0%': {
66 |             opacity: '0',
67 |           },
68 |           '100%': {
69 |             opacity: '1',
70 |           },
71 |         },
72 |       },
73 |       animation: {
74 |         'fade-in':
75 |           'fade-in 500ms ease-in-out var(--animation-delay, 0ms) forwards',
76 |       },
77 |     },
78 |   },
79 |   plugins: [
80 |     plugin(function ({ addVariant }) {
81 |       addVariant('disabled', '&:is(:disabled, [data-disabled])')
82 |       addVariant('group-disabled', '.group:is(:disabled, [data-disabled]) &')
83 |       addVariant(
84 |         'not-disabled',
85 |         '&:where(:not(:disabled):not([data-disabled]))',
86 |       )
87 |       addVariant(
88 |         'group-not-disabled',
89 |         '.group:where(:not(:disabled):not([data-disabled]))&',
90 |       )
91 |     }),
92 |     typographyPlugin,
93 |   ],
94 | } satisfies Config
95 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json",
4 |   "exclude": ["**/.output/**", "**/dist/**"]
5 | }
6 | 


--------------------------------------------------------------------------------
/util/encoding-worker/encoding-tools.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   decompressFromEncodedURIComponent,
 3 |   compressToEncodedURIComponent,
 4 | } from 'lz-string'
 5 | 
 6 | export function encode(data: any) {
 7 |   return compressToEncodedURIComponent(JSON.stringify(data))
 8 | }
 9 | 
10 | export function decode(serialized: any) {
11 |   return JSON.parse(decompressFromEncodedURIComponent(serialized))
12 | }
13 | 


--------------------------------------------------------------------------------
/util/encoding-worker/encoding-utils.ts:
--------------------------------------------------------------------------------
 1 | export type WorkerMessage =
 2 |   | {
 3 |       type: 'encode'
 4 |       id: string
 5 |       payload: any
 6 |     }
 7 |   | {
 8 |       type: 'decode'
 9 |       id: string
10 |       payload: string
11 |     }
12 | 
13 | export type EncodingWorkerResponse = {
14 |   type: 'encoded'
15 |   payload: string
16 |   id: string
17 | }
18 | 
19 | export type DecodingWorkerResponse<T = any> = {
20 |   type: 'decoded'
21 |   payload: T
22 |   id: string
23 | }
24 | 
25 | export function ensureRecord(
26 |   message: unknown,
27 | ): asserts message is Record<string, unknown> {
28 |   if (typeof message !== 'object' || message === null) {
29 |     throw new Error('Invalid message')
30 |   }
31 | }
32 | 
33 | export function validateMessage(
34 |   message: unknown,
35 | ): asserts message is WorkerMessage {
36 |   ensureRecord(message)
37 | 
38 |   if (typeof message.id !== 'string') {
39 |     throw new Error('Invalid message id')
40 |   }
41 | 
42 |   switch (message.type) {
43 |     case 'encode':
44 |       if (typeof message.payload !== 'object') {
45 |         throw new Error('Invalid message payload')
46 |       }
47 |       break
48 | 
49 |     case 'decode':
50 |       if (typeof message.payload !== 'string') {
51 |         throw new Error('Invalid message payload')
52 |       }
53 |       break
54 | 
55 |     default:
56 |       throw new Error('Invalid message type')
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/util/encoding-worker/encoding-worker.ts:
--------------------------------------------------------------------------------
 1 | // Handle the actual LZ encoding/decoding
 2 | import { encode, decode } from './encoding-tools'
 3 | import {
 4 |   DecodingWorkerResponse,
 5 |   EncodingWorkerResponse,
 6 |   validateMessage,
 7 | } from './encoding-utils'
 8 | 
 9 | addEventListener('message', event => {
10 |   let data = event.data
11 |   validateMessage(data)
12 | 
13 |   switch (data.type) {
14 |     case 'encode':
15 |       postMessage({
16 |         type: 'encoded',
17 |         payload: encode(data.payload),
18 |         id: data.id,
19 |       } satisfies EncodingWorkerResponse)
20 |       break
21 | 
22 |     case 'decode':
23 |       postMessage({
24 |         type: 'decoded',
25 |         payload: decode(data.payload),
26 |         id: data.id,
27 |       } satisfies DecodingWorkerResponse)
28 |       break
29 |   }
30 | })
31 | 


--------------------------------------------------------------------------------