Skip to content

Commit 06f8713

Browse files
rogdenrogden
committed
wip
1 parent e80b492 commit 06f8713

28 files changed

+1646
-99
lines changed

‎package-lock.json‎

Lines changed: 168 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
},
1010
"dependencies": {
1111
"core-js": "^2.6.5",
12+
"get-css-classes": "^1.1.0",
1213
"vue": "^2.6.10",
1314
"vue-router": "^3.0.3",
1415
"vuex": "^3.0.1"
@@ -21,6 +22,7 @@
2122
"babel-eslint": "^10.0.1",
2223
"eslint": "^5.16.0",
2324
"eslint-plugin-vue": "^5.0.0",
25+
"tailwindcss": "^1.0.4",
2426
"vue-template-compiler": "^2.5.21"
2527
}
2628
}

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" type="text/css">
89
<title>tailwind-config-viewer</title>
910
</head>
1011
<body>

‎src/App.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
<template>
22
<div id="app">
3-
<div id="nav">
4-
<router-link to="/">Home</router-link> |
5-
<router-link to="/about">About</router-link>
3+
<div class="bg-gray-800 p-4 text-white text-xl font-bold">
4+
Tailwind Config Viewer
65
</div>
76
<router-view/>
87
</div>
98
</template>
109

1110
<style>
11+
body {
12+
background-color: #fff !important;
13+
}
1214
#app {
1315
font-family: 'Avenir', Helvetica, Arial, sans-serif;
1416
-webkit-font-smoothing: antialiased;
1517
-moz-osx-font-smoothing: grayscale;
16-
text-align: center;
1718
color: #2c3e50;
1819
}
1920
#nav {

‎src/components/Canvas/Canvas.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<div>
3+
<form class="mb-10">
4+
<input
5+
id="file"
6+
type="file"
7+
name="file"
8+
class="absolute opacity-0 w-0 h-0 overflow-hidden"
9+
@change="fileSelected">
10+
<label for="file" class="inline-block p-4 bg-blue-400 hover:bg-blue-500 text-white">Upload Tailwind Config</label>
11+
</form>
12+
<template v-if="config">
13+
<div class="flex">
14+
<nav class="w-56 flex-none px-3 h-full top-0 sticky">
15+
<h2 class="font-bold text-lg">Sections</h2>
16+
<a
17+
v-for="section in configTransformed"
18+
:key="section.title"
19+
:href="`#${section.title}`"
20+
class="block py-2 px-3 text-gray-600 hover:text-gray-900 hover:bg-gray-200 text-lg rounded-sm"
21+
>
22+
{{ section.title }}
23+
</a>
24+
</nav>
25+
<div>
26+
<CanvasSection v-for="section in configTransformed" :key="section.title" :title="section.title" :id="section.title">
27+
<component :is="sectionComponent(section.component)" :data="section.data" />
28+
</CanvasSection>
29+
</div>
30+
</div>
31+
</template>
32+
</div>
33+
</template>
34+
35+
<script>
36+
import configParser, { transformThemeForCanvas } from '@/lib/twConfigParser'
37+
import CanvasSection from './CanvasSection'
38+
import Spacing from './Sections/Spacing'
39+
40+
export default {
41+
components: {
42+
CanvasSection,
43+
Spacing
44+
},
45+
46+
data () {
47+
return {
48+
config: null,
49+
configTransformed: null
50+
}
51+
},
52+
53+
methods: {
54+
sectionComponent: (component) => {
55+
return require(`./Sections/${component}.vue`).default
56+
},
57+
fileSelected (e) {
58+
const fr = new FileReader()
59+
fr.onload = (e) => {
60+
console.log(e)
61+
this.config = configParser(e.target.result)
62+
this.configTransformed = transformThemeForCanvas(this.config)
63+
console.log(this.config)
64+
}
65+
fr.readAsText(e.target.files[0])
66+
}
67+
}
68+
}
69+
</script>

‎src/components/Canvas/CanvasSection.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<section class="mb-16">
3+
<h1 class="mb-6 border-b text-4xl text-gray-800">{{ title }}</h1>
4+
<slot />
5+
</section>
6+
</template>
7+
8+
<script>
9+
export default {
10+
props: {
11+
title: {
12+
type: String,
13+
required: true
14+
}
15+
}
16+
}
17+
</script>

0 commit comments

Comments
 (0)