Skip to content

Commit 6b2ca68

Browse files
committed
chore: very first draft of working tool ready
1 parent a15cf7a commit 6b2ca68

35 files changed

+1577
-764
lines changed

.eslintrc.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,14 @@ module.exports = {
1212
plugins: [
1313
],
1414
// add your custom rules here
15-
rules: {}
15+
rules: {
16+
"no-console": [
17+
"error",
18+
{
19+
allow: [
20+
"error"
21+
]
22+
}
23+
]
24+
}
1625
}

README.md

+14-47
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# offline-diff-viewer
22

3+
## Why another diff viewer
4+
5+
I realise we are missing a diff viewer that is
6+
7+
- Privacy focused
8+
- Simple to use
9+
- And most importantly does not store any data on server to give sharable diff urls
10+
311
## Build Setup
412

513
```bash
@@ -19,51 +27,10 @@ $ npm run generate
1927

2028
For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
2129

22-
## Special Directories
23-
24-
You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
25-
26-
### `assets`
27-
28-
The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
29-
30-
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
31-
32-
### `components`
33-
34-
The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
35-
36-
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
37-
38-
### `layouts`
39-
40-
Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
41-
42-
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
43-
44-
45-
### `pages`
46-
47-
This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
48-
49-
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
50-
51-
### `plugins`
52-
53-
The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
54-
55-
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
56-
57-
### `static`
58-
59-
This directory contains your static files. Each file inside this directory is mapped to `/`.
60-
61-
Example: `/static/robots.txt` is mapped as `/robots.txt`.
62-
63-
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
64-
65-
### `store`
66-
67-
This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
30+
# TODO
6831

69-
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).
32+
- Add support for multiple languages like json,yaml,xml etc
33+
- Enable syntax highlighting
34+
- Auto detect language
35+
- Add small shadow to line numbers
36+
- Fix toast issue. (Click on copy button while toast is on)

app.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en" {{ HTML_ATTRS }}>
3+
4+
<head {{ HEAD_ATTRS }}>
5+
<script>(function (w, d, s, l, i) {
6+
w[l] = w[l] || []; w[l].push({
7+
'gtm.start':
8+
new Date().getTime(), event: 'gtm.js'
9+
}); var f = d.getElementsByTagName(s)[0],
10+
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
11+
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
12+
})(window, document, 'script', 'dataLayer', 'GTM-K3KPK8G');</script>
13+
{{ HEAD }}
14+
</head>
15+
16+
<body {{ BODY_ATTRS }}>
17+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K3KPK8G" height="0" width="0"
18+
style="display:none;visibility:hidden"></iframe></noscript>
19+
{{ APP }}
20+
</body>
21+
22+
</html>

components/NuxtLogo.vue

-11
This file was deleted.

components/RTStickyCopyButton.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="sticky top-0 text-right z-1">
3+
<button
4+
@click="clickHandler"
5+
class="absolute top-0 right-0 p-2 transition-all transform bg-gray-100 rounded-full shadow z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
6+
>
7+
<svg
8+
class="w-6 h-6"
9+
fill="none"
10+
stroke="currentColor"
11+
viewBox="0 0 24 24"
12+
xmlns="http://www.w3.org/2000/svg"
13+
>
14+
<path
15+
stroke-linecap="round"
16+
stroke-linejoin="round"
17+
stroke-width="2"
18+
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
19+
></path>
20+
</svg>
21+
</button>
22+
</div>
23+
</template>
24+
25+
<script>
26+
export default {
27+
props: ['clickHandler'],
28+
}
29+
</script>

components/Toast.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div class="relative mt-24 xl:container">
3+
<div
4+
class="absolute top-0 right-0 flow-root p-4 transition-transform rounded-md shadow-md z-2"
5+
v-bind:class="{
6+
'-translate-y-screen': !toastState.show,
7+
'-translate-y-0': !toastState.show,
8+
'bg-green-400': toastState.theme === 'success',
9+
'bg-blue-400': toastState.theme !== 'success',
10+
}"
11+
>
12+
<div class="flex justify-between gap-2">
13+
<div v-html="toastState.iconHTML"></div>
14+
<h1>{{ toastState.content }}</h1>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
computed: {
23+
toastState() {
24+
return this.$store.state.toast
25+
},
26+
},
27+
}
28+
</script>

components/Tutorial.vue

-46
This file was deleted.

0 commit comments

Comments
 (0)