xyvs/visualtree
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Site home page

Browse Source
This commit is contained in:
Fran
2021-12-27 20:28:08 -06:00
parent 3740bb4140
commit 4c3e6373e2
4 changed files with 62 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>VisualTREE</title>
</head>
<body>
<div id="app"></div>

64
src/App.vue
View File

@@ -1,21 +1,53 @@
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import Input from './components/Input.vue'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
<div class="bg-black">
<div class="min-h-screen min-w-screen flex flex-col items-center bg-blue-100 dark:bg-blue-800/10">
<div class="p-10 w-full text-center flex items-center justify-center">
<div class="flex items-center justify-center bg-white dark:bg-gray-900 rounded-lg overflow-hidden text-sm">
<div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
Home
</div>
<div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
Source Code
</div>
<div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
Guide
</div>
<div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
About
</div>
</div>
</div>
<div class="flex-grow flex flex-col items-center justify-center w-full">
<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 gap-8 p-12 rounded-xl border-gray-200 shadow w-1/3">
<div class="space-y-3 text-center">
<div class="text-3xl font-semibold text-gray-800 dark:text-gray-100">
VisualTREE
</div>
<div class="text-gray-500 dark:text-gray-400 text-sm">
A tool that allows you to visualize and interact with the output of your
<a class="text-blue-300" href="https://linux.die.net/man/1/tree">tree</a> command.
</div>
</div>
<Input />
<div class="space-y-4">
<div class="text-gray-500 dark:text-gray-400 text-sm">
Example of a valid tree command:
</div>
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all">
tree -h -J -L 2 . > tree.json
</div>
<div class="text-gray-500 dark:text-gray-400 text-sm">
For a more detailed explanation of the tree command and
the valid list of options, please refer to the
<a class="text-blue-300" href="">guide</a> page.
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

40
src/components/HelloWorld.vue
View File

@@ -1,40 +0,0 @@
<script setup>
import { ref } from 'vue'
defineProps({
msg: String
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<p>
Recommended IDE setup:
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
</p>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">
Vite Documentation
</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>
<button type="button" @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<style scoped>
a {
color: #42b983;
}
</style>

13
src/components/Input.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup>
</script>
<template>
<div>
<input type="file" id="treeFile" class="hidden">
<label for="treeFile" class="p-12 border border-blue-500 bg-blue-100/30 dark:bg-blue-900/20 border-dashed rounded-xl text-blue-400 text cursor-pointer block">
Drop a file here or click to select a file
</label>
</div>
</template>