Skip to content

Commit a9e5a11

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent a8dcd2a commit a9e5a11

File tree

9 files changed

+288
-78
lines changed

9 files changed

+288
-78
lines changed

‎resources/components/Dashboard/Deployments/DeploymentList.vue

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,14 @@ const showModal = ref(false)
2727
<p class="text-2xl font-semibold text-gray-900">
2828
71,897
2929
</p>
30+
3031
<p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
3132
<svg class="h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
3233
<path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
3334
</svg>
3435
<span class="sr-only"> Increased by </span>
3536
122
3637
</p>
37-
38-
<!-- <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
39-
<div class="text-sm">
40-
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">View all<span class="sr-only"> Deployments</span></a>
41-
</div>
42-
</div> -->
4338
</dd>
4439
</div>
4540

@@ -50,6 +45,7 @@ const showModal = ref(false)
5045
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z" />
5146
</svg>
5247
</div>
48+
5349
<p class="ml-16 truncate text-sm font-medium text-gray-500">
5450
Avg. Deploy Time
5551
</p>
@@ -67,12 +63,6 @@ const showModal = ref(false)
6763
<span class="sr-only"> Increased by </span>
6864
12 s
6965
</p>
70-
71-
<!-- <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
72-
<div class="text-sm">
73-
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">View all<span class="sr-only"> Average Deploy Time</span></a>
74-
</div>
75-
</div> -->
7666
</dd>
7767
</div>
7868

@@ -100,12 +90,6 @@ const showModal = ref(false)
10090
<span class="sr-only"> Decreased by </span>
10191
3.2%
10292
</p>
103-
104-
<!-- <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
105-
<div class="text-sm">
106-
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">View all<span class="sr-only"> Success Rate</span></a>
107-
</div>
108-
</div> -->
10993
</dd>
11094
</div>
11195
</dl>
@@ -142,6 +126,10 @@ const showModal = ref(false)
142126
</div>
143127
</div>
144128
</div>
129+
130+
<div class="mt-8 flow-root">
131+
<Editor />
132+
</div>
145133
</div>
146134

147135
<TerminalContainer class="px-4 sm:px-6 lg:px-8 pt-12" :live="true" />

‎resources/components/Editor.vue

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<script setup lang="ts">
2+
import { reactive, watch } from 'vue'
3+
import { VAceEditor } from 'vue3-ace-editor'
4+
import './ace-config'
5+
6+
// import OutlineTree from './OutlineTree.vue';
7+
8+
const langs = ['json', 'javascript', 'typescript', 'sh', 'html', 'yaml', 'markdown']
9+
const themes = ['github', 'github_dark', 'chrome', 'monokai', 'nord_dark']
10+
11+
const states = reactive({
12+
lang: 'typescript',
13+
theme: 'nord_dark',
14+
content: `echo 'Hello World!'
15+
16+
mv ./test/test.ts ./jello
17+
cp`,
18+
})
19+
20+
watch(
21+
() => states.lang,
22+
async (lang) => {
23+
states.content = `echo 'Hello World!'
24+
25+
mv ./test/test.ts ./jello
26+
cp `
27+
},
28+
{ immediate: true },
29+
)
30+
</script>
31+
32+
<template>
33+
<select v-model="states.lang">
34+
<option v-for="lang of langs" :key="lang" :value="lang">
35+
{{ lang }}
36+
</option>
37+
</select>
38+
39+
<select v-model="states.theme">
40+
<option v-for="theme of themes" :key="theme" :value="theme">
41+
{{ theme }}
42+
</option>
43+
</select>
44+
45+
<!-- <div class="w-full h-full bg-[#1D1F21] text-[#C5C8C6] font-mono flex flex-col rounded-lg shadow"> -->
46+
<header class="flex items-center justify-between p-4 bg-[#373b41] border-b border-[#282a2e] rounded-t-lg">
47+
<div class="flex items-center gap-2">
48+
<div class="w-3 h-3 rounded-full bg-[#CC6666]" />
49+
<div class="w-3 h-3 rounded-full bg-[#E6E074]" />
50+
<div class="w-3 h-3 rounded-full bg-[#68B5BD]" />
51+
</div>
52+
53+
<span class="text-sm text-white font-mono">Live Terminal Output</span>
54+
</header>
55+
56+
<VAceEditor
57+
v-model:value="states.content"
58+
class="vue-ace-editor rounded-b-lg"
59+
:placeholder="`Enter your ${states.lang} code here`"
60+
:lang="states.lang"
61+
:theme="states.theme"
62+
:options="{
63+
useWorker: true,
64+
enableBasicAutocompletion: true,
65+
enableSnippets: true,
66+
enableLiveAutocompletion: true,
67+
}"
68+
style="height: 300px"
69+
/>
70+
71+
<!-- <OutlineTree v-if="$refs.aceRef" class="outline-tree" :editor="$refs.aceRef._editor" :content="states.content" /> -->
72+
</template>
73+
74+
<style scoped>
75+
select {
76+
margin-right: 15px;
77+
}
78+
79+
.vue-ace-editor {
80+
font-size: 16px;
81+
flex: 1;
82+
}
83+
84+
/* .outline-tree {
85+
width: 500px;
86+
margin-left: 15px;
87+
border: 1px solid;
88+
font-size: 16px;
89+
} */
90+
</style>

‎resources/components/TerminalContainer.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup>
22
import { defineProps } from 'vue'
33
4-
const props = defineProps({
4+
defineProps({
55
live: Boolean,
66
})
77
</script>
@@ -12,8 +12,8 @@ const props = defineProps({
1212
<header class="flex items-center justify-between p-4 bg-[#373b41] border-b border-[#282a2e] rounded-t-lg">
1313
<div class="flex items-center gap-2">
1414
<div class="w-3 h-3 rounded-full bg-[#CC6666]" />
15+
<div class="w-3 h-3 rounded-full bg-[#E6E074]" />
1516
<div class="w-3 h-3 rounded-full bg-[#68B5BD]" />
16-
<div class="w-3 h-3 rounded-full bg-[#74C6F0]" />
1717
</div>
1818

1919
<div v-if="live" class="text-sm">
@@ -23,6 +23,7 @@ const props = defineProps({
2323
root@localhost:~
2424
</div>
2525
</header>
26+
2627
<div class="h-54 w-full overflow-auto p-4">
2728
<div class="text-sm leading-7">
2829
<p class="text-[#68B5BD]">
@@ -39,6 +40,7 @@ const props = defineProps({
3940
<p>root</p>
4041
</div>
4142
</div>
43+
4244
<div v-if="!live" class="flex items-center gap-2 p-4 border-t border-[#282a2e]">
4345
<span class="text-[#68B5BD]">root@localhost:~$</span>
4446
<input

‎resources/components/ace-config.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import ace from 'ace-builds'
2+
import extSearchboxUrl from 'ace-builds/src-noconflict/ext-searchbox?url'
3+
import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url'
4+
import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url'
5+
import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url'
6+
import modeMarkdownUrl from 'ace-builds/src-noconflict/mode-markdown?url' // Import Markdown mode
7+
import modeShUrl from 'ace-builds/src-noconflict/mode-sh?url'
8+
import modeTypescriptUrl from 'ace-builds/src-noconflict/mode-typescript?url'
9+
import modeYamlUrl from 'ace-builds/src-noconflict/mode-yaml?url'
10+
import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url'
11+
import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url'
12+
import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'
13+
import snippetsYamlUrl from 'ace-builds/src-noconflict/snippets/yaml?url'
14+
import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url'
15+
import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url'
16+
import themeGithubDarkUrl from 'ace-builds/src-noconflict/theme-github_dark?url'
17+
import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url'
18+
import themeNordDarkUrl from 'ace-builds/src-noconflict/theme-nord_dark?url'
19+
import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url'
20+
import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url';
21+
import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url'
22+
import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'
23+
import workerYamlUrl from 'ace-builds/src-noconflict/worker-yaml?url'
24+
import 'ace-builds/src-noconflict/ext-language_tools'
25+
26+
ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
27+
ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
28+
ace.config.setModuleUrl('ace/mode/typescript', modeTypescriptUrl)
29+
ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
30+
ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl)
31+
ace.config.setModuleUrl('ace/mode/sh', modeShUrl)
32+
ace.config.setModuleUrl('ace/theme/github', themeGithubUrl)
33+
ace.config.setModuleUrl('ace/theme/github_dark', themeGithubDarkUrl)
34+
ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl)
35+
ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
36+
ace.config.setModuleUrl('ace/theme/nord_dark', themeNordDarkUrl)
37+
ace.config.setModuleUrl('ace/mode/base', workerBaseUrl)
38+
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl)
39+
ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl)
40+
ace.config.setModuleUrl('ace/mode/typescript_worker', workerJavascriptUrl)
41+
ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl)
42+
ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl)
43+
ace.config.setModuleUrl('ace/mode/markdown', modeMarkdownUrl)
44+
ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl)
45+
ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl)
46+
ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl)
47+
ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl)
48+
ace.config.setModuleUrl('ace/ext/searchbox', extSearchboxUrl)
49+
50+
ace.require('ace/ext/language_tools')

‎resources/views/dashboard/components/index.vue

Lines changed: 62 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,24 @@ useHead({
1616
<div class="relative overflow-hidden rounded-lg bg-white px-4 pt-5 shadow sm:px-6 sm:pt-6">
1717
<dt>
1818
<div class="absolute rounded-md bg-blue-500 p-3">
19-
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
20-
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
21-
</svg>
19+
<div class="i-heroicons-arrow-down-tray h-6 w-6 text-white" />
2220
</div>
21+
2322
<p class="ml-16 truncate text-sm font-medium text-gray-500">
2423
Total Downloads
2524
</p>
2625
</dt>
26+
2727
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
2828
<p class="text-2xl font-semibold text-gray-900">
2929
71,897
3030
</p>
31+
3132
<p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
3233
<svg class="h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
3334
<path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
3435
</svg>
36+
3537
<span class="sr-only"> Increased by </span>
3638
122
3739
</p>
@@ -41,10 +43,9 @@ useHead({
4143
<div class="relative overflow-hidden rounded-lg bg-white px-4 pt-5 shadow sm:px-6 sm:pt-6">
4244
<dt>
4345
<div class="absolute rounded-md bg-blue-500 p-3">
44-
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
45-
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z" />
46-
</svg>
46+
<div class="i-heroicons-clock h-6 w-6 text-white" />
4747
</div>
48+
4849
<p class="ml-16 truncate text-sm font-medium text-gray-500">
4950
Avg. Release Time
5051
</p>
@@ -68,12 +69,11 @@ useHead({
6869
<div class="relative overflow-hidden rounded-lg bg-white px-4 pt-5 shadow sm:px-6 sm:pt-6">
6970
<dt>
7071
<div class="absolute rounded-md bg-blue-500 p-3">
71-
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
72-
<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
73-
</svg>
72+
<div class="i-heroicons-rocket-launch h-6 w-6 text-white" />
7473
</div>
74+
7575
<p class="ml-16 truncate text-sm font-medium text-gray-500">
76-
Components
76+
Releases
7777
</p>
7878
</dt>
7979

@@ -172,6 +172,58 @@ useHead({
172172
<a href="#" class="text-blue-600 hover:text-blue-900">Open<span class="sr-only">, Component A, in IDE</span></a>
173173
</td>
174174
</tr>
175+
176+
<tr>
177+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
178+
Component B
179+
</td>
180+
181+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
182+
30kb
183+
</td>
184+
185+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 font-mono">
186+
./resources/components/component-b.stx
187+
</td>
188+
189+
<td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
190+
01-03-2023 08:23:15
191+
</td>
192+
193+
<td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
194+
04-19-2022 09:04:20
195+
</td>
196+
197+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
198+
<a href="#" class="text-blue-600 hover:text-blue-900">Open<span class="sr-only">, Component A, in IDE</span></a>
199+
</td>
200+
</tr>
201+
202+
<tr>
203+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
204+
Component C
205+
</td>
206+
207+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
208+
30kb
209+
</td>
210+
211+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 font-mono">
212+
./resources/components/component-c.stx
213+
</td>
214+
215+
<td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
216+
01-03-2023 08:23:15
217+
</td>
218+
219+
<td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
220+
04-19-2022 09:04:20
221+
</td>
222+
223+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
224+
<a href="#" class="text-blue-600 hover:text-blue-900">Open<span class="sr-only">, Component A, in IDE</span></a>
225+
</td>
226+
</tr>
175227
</tbody>
176228
</table>
177229
</div>

0 commit comments

Comments
 (0)