Skip to content

Commit 1e84a89

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent a6f26fb commit 1e84a89

File tree

6 files changed

+159
-163
lines changed

6 files changed

+159
-163
lines changed

‎resources/components/Editor.vue renamed to ‎resources/components/CodeEditor.vue

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<script setup lang="ts">
2-
import { reactive, watch } from 'vue'
32
import { VAceEditor } from 'vue3-ace-editor'
43
import './ace-config'
54
5+
defineProps({
6+
live: Boolean,
7+
})
8+
69
// import OutlineTree from './OutlineTree.vue';
710
8-
const langs = ['json', 'javascript', 'typescript', 'sh', 'html', 'yaml', 'markdown']
9-
const themes = ['github', 'github_dark', 'chrome', 'monokai', 'nord_dark']
11+
// const langs = ['json', 'javascript', 'typescript', 'sh', 'html', 'yaml', 'markdown']
12+
// const themes = ['github', 'github_dark', 'chrome', 'monokai', 'nord_dark']
1013
1114
const states = reactive({
1215
lang: 'typescript',
@@ -16,41 +19,18 @@ const states = reactive({
1619
mv ./test/test.ts ./jello
1720
cp`,
1821
})
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-
)
3022
</script>
3123

3224
<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"> -->
4625
<header class="flex items-center justify-between p-4 bg-[#373b41] border-b border-[#282a2e] rounded-t-lg">
4726
<div class="flex items-center gap-2">
4827
<div class="w-3 h-3 rounded-full bg-[#CC6666]" />
4928
<div class="w-3 h-3 rounded-full bg-[#E6E074]" />
5029
<div class="w-3 h-3 rounded-full bg-[#68B5BD]" />
5130
</div>
5231

53-
<span class="text-sm text-white font-mono">Live Terminal Output</span>
32+
<span v-if="!live" class="text-sm text-white font-mono">Deploy Script</span>
33+
<span v-else class="text-sm text-white font-mono">Live Terminal Output</span>
5434
</header>
5535

5636
<VAceEditor

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="px-4 sm:px-6 lg:px-8 pt-12">
3+
<div class="sm:flex sm:items-center">
4+
<div class="sm:flex-auto">
5+
<h1 class="text-base font-semibold leading-6 text-gray-900">
6+
Deploy Script
7+
</h1>
8+
9+
<p class="mt-2 text-sm text-gray-700">
10+
If you need a custom deploy script, you may specify it here.
11+
</p>
12+
</div>
13+
14+
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
15+
<button type="button" class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
16+
Save
17+
</button>
18+
</div>
19+
</div>
20+
21+
<div class="mt-8 flow-root">
22+
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
23+
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
24+
<div class="overflow-hidden">
25+
<CodeEditor />
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
</template>

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<template>
2+
<div class="px-4 sm:px-6 lg:px-8 pt-12">
3+
<div class="sm:flex sm:items-center">
4+
<div class="sm:flex-auto">
5+
<h1 class="text-base font-semibold leading-6 text-gray-900">
6+
Deployment History
7+
</h1>
8+
<p class="mt-2 text-sm text-gray-700">
9+
A list of all the deployments relating your project/s.
10+
</p>
11+
</div>
12+
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
13+
<button type="button" class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
14+
Deploy
15+
</button>
16+
</div>
17+
</div>
18+
19+
<div class="mt-8 flow-root">
20+
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
21+
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
22+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
23+
<table class="min-w-full divide-y divide-gray-300">
24+
<thead class="bg-gray-50">
25+
<tr>
26+
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
27+
When
28+
</th>
29+
30+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
31+
Triggered By
32+
</th>
33+
34+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
35+
Commit
36+
</th>
37+
38+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
39+
Branch
40+
</th>
41+
42+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
43+
Status
44+
</th>
45+
46+
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
47+
<span class="sr-only">Edit</span>
48+
</th>
49+
</tr>
50+
</thead>
51+
52+
<tbody class="divide-y divide-gray-200 bg-white">
53+
<tr>
54+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
55+
Moments ago
56+
</td>
57+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
58+
<div class="flex items-center">
59+
<div class="flex-shrink-0 w-10 h-10">
60+
<img
61+
src="https://carefreeagency-eliinova.s3.amazonaws.com/images/avatar/default.svg"
62+
alt=""
63+
class="w-10 h-10 rounded-full"
64+
>
65+
</div>
66+
<div class="ml-4">
67+
<div class="flex items-center text-sm font-medium text-gray-900 dark:text-gray-100">
68+
Chris Breuer
69+
</div>
70+
<div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-300">
71+
chris@stacksjs.org
72+
</div>
73+
</div>
74+
</div>
75+
</td>
76+
77+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 font-mono">
78+
<a href="github.com/stacksjs/stacks/commit/342afe5a" class="text-blue-600 hover:text-blue-900">342afe5a</a>
79+
</td>
80+
81+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 font-mono">
82+
<a href="github.com/stacksjs/stacks" class="text-blue-600 hover:text-blue-900">main</a>
83+
</td>
84+
85+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
86+
Deployed
87+
</td>
88+
89+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
90+
<a href="#" class="text-blue-600 hover:text-blue-900" @click="showModal = true">View<span class="sr-only">, Deployment</span></a>
91+
</td>
92+
</tr>
93+
</tbody>
94+
</table>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</template>

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

Lines changed: 3 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
const deployScript = ref('')
32
const showModal = ref(false)
43
</script>
54

@@ -96,142 +95,11 @@ const showModal = ref(false)
9695
</div>
9796
</div>
9897

99-
<div class="px-4 sm:px-6 lg:px-8 pt-12">
100-
<div class="sm:flex sm:items-center">
101-
<div class="sm:flex-auto">
102-
<h1 class="text-base font-semibold leading-6 text-gray-900">
103-
Deploy Script
104-
</h1>
105-
<p class="mt-2 text-sm text-gray-700">
106-
If you need a custom deploy script, you may specify it here.
107-
</p>
108-
</div>
109-
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
110-
<button type="button" class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
111-
Save
112-
</button>
113-
</div>
114-
</div>
115-
116-
<div class="mt-8 flow-root">
117-
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
118-
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
119-
<div class="overflow-hidden">
120-
<textarea
121-
v-model="deployScript"
122-
class="w-full h-24 p-4 text-sm text-gray-700 bg-white border border-gray-300 rounded-md"
123-
placeholder="echo 'Hello World!'"
124-
/>
125-
</div>
126-
</div>
127-
</div>
128-
</div>
129-
130-
<div class="mt-8 flow-root">
131-
<Editor />
132-
</div>
133-
</div>
134-
135-
<TerminalContainer class="px-4 sm:px-6 lg:px-8 pt-12" :live="true" />
136-
137-
<div class="px-4 sm:px-6 lg:px-8 pt-12">
138-
<div class="sm:flex sm:items-center">
139-
<div class="sm:flex-auto">
140-
<h1 class="text-base font-semibold leading-6 text-gray-900">
141-
Deployment History
142-
</h1>
143-
<p class="mt-2 text-sm text-gray-700">
144-
A list of all the deployments relating your project/s.
145-
</p>
146-
</div>
147-
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
148-
<button type="button" class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
149-
Deploy
150-
</button>
151-
</div>
152-
</div>
98+
<DeployScript />
15399

154-
<div class="mt-8 flow-root">
155-
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
156-
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
157-
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
158-
<table class="min-w-full divide-y divide-gray-300">
159-
<thead class="bg-gray-50">
160-
<tr>
161-
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
162-
When
163-
</th>
100+
<LiveTerminalOutput />
164101

165-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
166-
Triggered By
167-
</th>
168-
169-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
170-
Commit
171-
</th>
172-
173-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
174-
Branch
175-
</th>
176-
177-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
178-
Status
179-
</th>
180-
181-
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
182-
<span class="sr-only">Edit</span>
183-
</th>
184-
</tr>
185-
</thead>
186-
187-
<tbody class="divide-y divide-gray-200 bg-white">
188-
<tr>
189-
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
190-
Moments ago
191-
</td>
192-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
193-
<div class="flex items-center">
194-
<div class="flex-shrink-0 w-10 h-10">
195-
<img
196-
src="https://carefreeagency-eliinova.s3.amazonaws.com/images/avatar/default.svg"
197-
alt=""
198-
class="w-10 h-10 rounded-full"
199-
>
200-
</div>
201-
<div class="ml-4">
202-
<div class="flex items-center text-sm font-medium text-gray-900 dark:text-gray-100">
203-
Chris Breuer
204-
</div>
205-
<div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-300">
206-
chris@stacksjs.org
207-
</div>
208-
</div>
209-
</div>
210-
</td>
211-
212-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 font-mono">
213-
<a href="github.com/stacksjs/stacks/commit/342afe5a" class="text-blue-600 hover:text-blue-900">342afe5a</a>
214-
</td>
215-
216-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 font-mono">
217-
<a href="github.com/stacksjs/stacks" class="text-blue-600 hover:text-blue-900">main</a>
218-
</td>
219-
220-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
221-
Deployed
222-
</td>
223-
224-
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
225-
<a href="#" class="text-blue-600 hover:text-blue-900" @click="showModal = true">View<span class="sr-only">, Deployment</span></a>
226-
</td>
227-
</tr>
228-
</tbody>
229-
</table>
230-
</div>
231-
</div>
232-
</div>
233-
</div>
234-
</div>
102+
<DeploymentHistory />
235103
</div>
236104

237105
<BaseModal v-if="showModal">

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div class="px-4 sm:px-6 lg:px-8 pt-12">
3+
<div class="mt-8 flow-root">
4+
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
5+
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
6+
<div class="overflow-hidden">
7+
<CodeEditor :live="true" />
8+
</div>
9+
</div>
10+
</div>
11+
</div>
12+
</div>
13+
</template>

‎storage/framework/types/components.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@ declare module 'vue' {
1313
BaseModal: typeof import('./../../../resources/components/Dashboard/Modals/BaseModal.vue')['default']
1414
Button: typeof import('./../../../resources/components/Button.vue')['default']
1515
CallToAction: typeof import('./../../../resources/components/Marketing/CallToAction.vue')['default']
16+
CodeEditor: typeof import('./../../../resources/components/CodeEditor.vue')['default']
1617
ComingSoon: typeof import('./../../../resources/components/Marketing/ComingSoon.vue')['default']
1718
Container: typeof import('./../../../resources/components/Container.vue')['default']
1819
Counter: typeof import('./../../../resources/components/Buttons/Counter.vue')['default']
20+
DeploymentHistory: typeof import('./../../../resources/components/Dashboard/Deployments/DeploymentHistory.vue')['default']
1921
DeploymentList: typeof import('./../../../resources/components/Dashboard/Deployments/DeploymentList.vue')['default']
22+
DeployScript: typeof import('./../../../resources/components/Dashboard/Deployments/DeployScript.vue')['default']
2023
Editor: typeof import('./../../../resources/components/Editor.vue')['default']
2124
Faqs: typeof import('./../../../resources/components/Marketing/Faqs.vue')['default']
2225
Feature: typeof import('./../../../resources/components/Marketing/Feature.vue')['default']
@@ -27,6 +30,7 @@ declare module 'vue' {
2730
Hero: typeof import('./../../../resources/components/Marketing/Hero.vue')['default']
2831
Hero2: typeof import('./../../../resources/components/Marketing/Hero2.vue')['default']
2932
Layout: typeof import('./../../../resources/components/Marketing/Layout.vue')['default']
33+
LiveTerminalOutput: typeof import('./../../../resources/components/Dashboard/Deployments/LiveTerminalOutput.vue')['default']
3034
Logo: typeof import('./../../../resources/components/Logo.vue')['default']
3135
MobileSidebar: typeof import('./../../../resources/components/Dashboard/MobileSidebar.vue')['default']
3236
Navbar: typeof import('./../../../resources/components/Dashboard/Navbar.vue')['default']

0 commit comments

Comments
 (0)