Skip to content

Commit a34647f

Browse files
guillaumebridayguillaumebriday
committed
Adding demo
1 parent c014f0b commit a34647f

18 files changed

+9354
-1
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
demo

‎demo/.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎demo/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# demo
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
yarn lint
21+
```
22+
23+
### Customize configuration
24+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎demo/babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎demo/package.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^3.6.4",
12+
"vue": "^2.6.11",
13+
"vue-codemirror": "^4.0.6"
14+
},
15+
"devDependencies": {
16+
"@vue/cli-plugin-babel": "~4.3.0",
17+
"@vue/cli-plugin-eslint": "~4.3.0",
18+
"@vue/cli-service": "~4.3.0",
19+
"babel-eslint": "^10.1.0",
20+
"eslint": "^6.7.2",
21+
"eslint-plugin-vue": "^6.2.2",
22+
"vue-cli-plugin-pug": "~1.0.7",
23+
"vue-cli-plugin-tailwind": "~1.4.1",
24+
"vue-template-compiler": "^2.6.11"
25+
},
26+
"eslintConfig": {
27+
"root": true,
28+
"env": {
29+
"node": true
30+
},
31+
"extends": [
32+
"plugin:vue/essential",
33+
"eslint:recommended"
34+
],
35+
"parserOptions": {
36+
"parser": "babel-eslint"
37+
}
38+
},
39+
"browserslist": [
40+
"> 1%",
41+
"last 2 versions",
42+
"not dead"
43+
]
44+
}

‎demo/postcss.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
'vue-cli-plugin-tailwind/purgecss': {},
5+
autoprefixer: {}
6+
}
7+
}

‎demo/public/favicon.ico

4.19 KB
Binary file not shown.

‎demo/public/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎demo/src/App.vue

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<template lang="pug">
2+
div
3+
div(class="w-full max-w-6xl mx-auto mt-24 p-4")
4+
h1(class="text-center mb-8 text-5xl font-bold") Json Api Response Converter
5+
6+
p(class="text-center mb-4") Normalize your JSON:API response.
7+
8+
p(class="text-center badges")
9+
a(href="https://www.paypal.me/guillaumebriday")
10+
img(src="https://img.shields.io/badge/Donate-PayPal-green.svg")
11+
12+
a(href="https://www.npmjs.com/package/json-api-response-converter")
13+
img(src="https://img.shields.io/npm/dt/json-api-response-converter.svg")
14+
15+
a(href="https://www.npmjs.com/package/json-api-response-converter")
16+
img(src="https://img.shields.io/npm/v/json-api-response-converter.svg")
17+
18+
a(href="https://github.com/guillaumebriday/json-api-response-converter")
19+
img(src="https://github.com/guillaumebriday/json-api-response-converter/workflows/Lint/badge.svg")
20+
21+
a(href="https://github.com/guillaumebriday/json-api-response-converter")
22+
img(src="https://github.com/guillaumebriday/json-api-response-converter/workflows/Test/badge.svg")
23+
24+
a(href="https://github.com/guillaumebriday/json-api-response-converter")
25+
img(src="https://img.shields.io/github/license/guillaumebriday/json-api-response-converter.svg")
26+
27+
a(href="https://json-api-response-converter.netlify.com/")
28+
img(src="https://api.netlify.com/api/v1/badges/f48191db-a459-4ab4-849f-10ea970915af/deploy-status")
29+
30+
h2(class="text-center text-2xl font-bold my-4") Essential links
31+
32+
ul(class="text-center")
33+
li
34+
a(href="https://github.com/guillaumebriday/json-api-response-converter" target="_blank" rel="noopener") Github
35+
36+
li
37+
a(href="https://www.npmjs.com/package/json-api-response-converter" target="_blank" rel="noopener") Npm
38+
39+
h2(class="text-center text-2xl font-bold my-4") Live demo
40+
41+
p Past your API response here
42+
43+
div(class="flex border-t")
44+
div(class="item")
45+
codemirror(v-model="response" :options="options")
46+
47+
pre(class="item pre") {{ formattedResponse }}
48+
</template>
49+
50+
<script>
51+
import { codemirror } from 'vue-codemirror'
52+
import JsonApiResponseConverter from '../../src/main.js'
53+
54+
import 'codemirror/lib/codemirror.css'
55+
import 'codemirror/theme/material.css'
56+
57+
export default {
58+
components: {
59+
codemirror
60+
},
61+
62+
data () {
63+
return {
64+
response: '',
65+
options: {
66+
lineNumbers: true,
67+
theme: 'material'
68+
}
69+
}
70+
},
71+
72+
created () {
73+
const response = {
74+
data: [
75+
{
76+
id: '1',
77+
type: 'articles',
78+
attributes: {
79+
title: 'This project is awesome'
80+
},
81+
relationships: {
82+
author: {
83+
data: { id: '1', type: 'author' }
84+
},
85+
86+
comments: {
87+
data: [
88+
{ id: '1', type: 'comment' },
89+
{ id: '2', type: 'comment' }
90+
]
91+
}
92+
}
93+
}
94+
],
95+
96+
included: [
97+
{
98+
id: '1',
99+
type: 'author',
100+
attributes: {
101+
name: 'Anakin'
102+
}
103+
},
104+
{
105+
id: '1',
106+
type: 'comment',
107+
attributes: {
108+
body: 'First!'
109+
}
110+
},
111+
{
112+
id: '2',
113+
type: 'comment',
114+
attributes: {
115+
body: 'Second!'
116+
}
117+
}
118+
]
119+
}
120+
121+
this.response = JSON.stringify(response)
122+
},
123+
124+
computed: {
125+
formattedResponse () {
126+
try {
127+
return new JsonApiResponseConverter(JSON.parse(this.response)).formattedResponse
128+
} catch {
129+
return 'ERROR: Invalid JSON format.'
130+
}
131+
}
132+
}
133+
}
134+
</script>

‎demo/src/assets/logo.png

6.69 KB
Loading

0 commit comments

Comments
 (0)