Skip to content
This repository was archived by the owner on Sep 6, 2024. It is now read-only.

Commit 5bd9a66

Browse files
0xF60xF6
committed
add package reference component
1 parent 9e210a7 commit 5bd9a66

File tree

8 files changed

+335
-11
lines changed

8 files changed

+335
-11
lines changed

‎.vitepress/config.mts

+1-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export default defineConfig({
151151
locales: {
152152
root: {
153153
label: "English",
154-
lang: "en",
154+
lang: "en"
155155
},
156156
},
157157
metaChunk: true,

‎.vitepress/theme/Layout.vue

+1-4
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,7 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
4343
<template>
4444
<DefaultTheme.Layout>
4545
<template #page-bottom>
46-
<shadow-root abstract>
47-
<Footer />
48-
</shadow-root>
49-
46+
<Footer />
5047
</template>
5148
</DefaultTheme.Layout>
5249
</template>

‎.vitepress/theme/PackageReference.vue

+287
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
<template lang="html">
2+
<div class="package" v-on:click="openPackage">
3+
<div class="vs-card-content type-3" style="padding: 10px;">
4+
<div class="vs-card">
5+
<div class="vs-card__img"><img width="94" height="94"
6+
:src="`https://api.vein-lang.org/@/packages/${packageName}/latest/icon`" alt=""
7+
style="min-width: 94px;">
8+
</div>
9+
<div class="vs-card__text">
10+
<div class="vs-card__title">
11+
<h3 style="display: inline-flex;"> {{ packageName }} <!---->
12+
<div style="padding-left: 5px; padding-right: 5px; color: rgb(70, 70, 70);">•
13+
</div>
14+
<div class="vs-tooltip-content" style="display: inline;">
15+
<i class="bx bx-badge-check" style="color: rgb(99, 99, 221);"></i></div>
16+
</h3>
17+
</div>
18+
<div class="card-text">
19+
<p data-v-eac9507a="">
20+
A IshtarVM runtime for Vein Lang
21+
</p>
22+
<div class="card-time" style="min-width: 300px;">
23+
<div placeholder="Danger icon after"
24+
class="vs-input-parent vs-input-parent--state-null vs-component--danger vs-component--is-color ">
25+
<div class="vs-input-content vs-input-content--has-color">
26+
<input disabled="disabled" id="vs-input--2445"
27+
class="vs-input vs-input--has-icon vs-input--has-icon--after"
28+
style="min-width: 100%; opacity: 1;" :value="getValue">
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</template>
38+
<script>
39+
export default {
40+
name: "PackageReference",
41+
props: {
42+
val: {
43+
type: String,
44+
default: '<none>'
45+
},
46+
packageName: {
47+
type: String,
48+
default: '<none>'
49+
}
50+
},
51+
computed: {
52+
getValue() {
53+
return `rune ${this.val}`;
54+
},
55+
getUrl() {
56+
return `https://gallery.vein-lang.org/package/${this.packageName}/latest`;
57+
}
58+
},
59+
methods: {
60+
openPackage() {
61+
window.open(this.getUrl, '_blank');
62+
}
63+
}
64+
}
65+
</script>
66+
<style scoped>
67+
.package>.vs-card-content.type-3>.vs-card {
68+
max-width: 100% !important;
69+
}
70+
71+
.vs-card-content.type-3 .vs-card {
72+
display: -webkit-box;
73+
display: -ms-flexbox;
74+
display: flex;
75+
max-width: 400px;
76+
}
77+
78+
.vs-card {
79+
background: rgba(var(--vs-background), 1);
80+
color: rgba(var(--vs-text), 1);
81+
width: 100%;
82+
max-width: 350px;
83+
-webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, var(--vs-shadow-opacity));
84+
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, var(--vs-shadow-opacity));
85+
border-radius: 20px;
86+
-webkit-transition: all .25s ease;
87+
transition: all .25s ease;
88+
cursor: pointer;
89+
position: relative;
90+
}
91+
92+
.vs-card__img,
93+
.vs-card__img img {
94+
border-radius: 20px;
95+
-webkit-transition: all .25s ease;
96+
transition: all .25s ease;
97+
}
98+
99+
.vs-card__img {
100+
position: relative;
101+
max-height: 250px;
102+
overflow: hidden;
103+
-webkit-box-pack: center;
104+
-ms-flex-pack: center;
105+
justify-content: center;
106+
}
107+
108+
.vs-card__img,
109+
.vs-card__interactions {
110+
display: -webkit-box;
111+
display: -ms-flexbox;
112+
display: flex;
113+
-webkit-box-align: center;
114+
-ms-flex-align: center;
115+
align-items: center;
116+
}
117+
118+
.package>.vs-card-content.type-3>.vs-card>.vs-card__img {
119+
min-width: 94px !important;
120+
}
121+
122+
.package>.vs-card-content.type-3>.vs-card>.vs-card__text {
123+
width: 100% !important;
124+
}
125+
126+
.vs-card-content.type-3 .vs-card__text {
127+
padding-top: 15px;
128+
}
129+
130+
.vs-card__text {
131+
font-size: .85rem;
132+
padding: 0 15px;
133+
padding-bottom: 15px;
134+
}
135+
136+
.vs-card__title {
137+
padding-top: 10px;
138+
padding-bottom: 5px;
139+
}
140+
141+
.card-text {
142+
display: flex;
143+
align-items: flex-end;
144+
justify-content: space-between;
145+
}
146+
147+
.vs-card-content.type-3 .vs-card__title h2,
148+
.vs-card-content.type-3 .vs-card__title h3,
149+
.vs-card-content.type-3 .vs-card__title h4,
150+
.vs-card-content.type-3 .vs-card__title h5,
151+
.vs-card-content.type-3 .vs-card__title h6 {
152+
padding: 0;
153+
}
154+
155+
.vs-card__title h2,
156+
.vs-card__title h3,
157+
.vs-card__title h4,
158+
.vs-card__title h5,
159+
.vs-card__title h6 {
160+
padding: 0;
161+
margin: 0;
162+
font-size: 1.1rem;
163+
}
164+
165+
.card-time {
166+
flex-shrink: 0;
167+
padding-left: 10px;
168+
}
169+
170+
.vs-card__text p {
171+
font-size: inherit;
172+
margin: 0;
173+
opacity: .8;
174+
}
175+
176+
.bx {
177+
padding-left: 2px;
178+
padding-right: 2px;
179+
}
180+
181+
.bx {
182+
font-family: boxicons !important;
183+
font-weight: 400;
184+
font-style: normal;
185+
font-variant: normal;
186+
line-height: 1;
187+
text-rendering: auto;
188+
display: inline-block;
189+
text-transform: none;
190+
speak: none;
191+
-webkit-font-smoothing: antialiased;
192+
-moz-osx-font-smoothing: grayscale;
193+
}
194+
195+
.vs-card-content {
196+
--vs-color: var(--vs-primary);
197+
}
198+
199+
.vs-input-parent {
200+
--vs-color: var(--vs-primary);
201+
display: -webkit-box;
202+
display: -ms-flexbox;
203+
display: flex;
204+
-ms-flex-item-align: center;
205+
align-self: center;
206+
-webkit-box-pack: center;
207+
-ms-flex-pack: center;
208+
justify-content: center;
209+
-webkit-box-orient: vertical;
210+
-webkit-box-direction: normal;
211+
-ms-flex-direction: column;
212+
flex-direction: column;
213+
position: relative;
214+
}
215+
216+
.vs-input-content {
217+
display: -webkit-box;
218+
display: -ms-flexbox;
219+
display: flex;
220+
-webkit-box-align: center;
221+
-ms-flex-align: center;
222+
align-items: center;
223+
-webkit-box-pack: start;
224+
-ms-flex-pack: start;
225+
justify-content: flex-start;
226+
position: relative;
227+
border-radius: 12px;
228+
}
229+
230+
.vs-input-content--has-color .vs-input {
231+
border-bottom: 2px solid #7d33ff;
232+
}
233+
234+
.vs-input--has-icon--after {
235+
padding-left: 7px;
236+
padding-right: 38px;
237+
}
238+
239+
.vs-input__icon__copy {
240+
cursor: pointer !important;
241+
top: -15px;
242+
pointer-events: auto;
243+
}
244+
245+
.vs-input__icon--after {
246+
left: auto;
247+
right: 0;
248+
-webkit-box-shadow: -12px 0 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
249+
box-shadow: -12px 0 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
250+
}
251+
252+
.vs-input__icon {
253+
position: absolute;
254+
right: auto;
255+
width: 36px;
256+
height: 36px;
257+
display: -webkit-box;
258+
display: -ms-flexbox;
259+
display: flex;
260+
-webkit-box-align: center;
261+
-ms-flex-align: center;
262+
align-items: center;
263+
-webkit-box-pack: center;
264+
-ms-flex-pack: center;
265+
justify-content: center;
266+
-webkit-box-shadow: 12px 0 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
267+
box-shadow: 12px 0 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
268+
-webkit-transition: all .25s ease;
269+
transition: all .25s ease;
270+
border-radius: inherit;
271+
background: rgba(var(--vs-gray-2), 1);
272+
pointer-events: none;
273+
left: 0;
274+
}
275+
276+
.vs-input {
277+
border: 2px solid transparent;
278+
background: rgba(var(--vs-gray-2), 1);
279+
color: rgba(var(--vs-text), 1);
280+
padding: 7px 13px;
281+
border-radius: inherit;
282+
-webkit-transition: all .25s ease;
283+
transition: all .25s ease;
284+
padding-left: 10px;
285+
width: 200px;
286+
}
287+
</style>

‎.vitepress/theme/style.css

+31-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@import url(https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.css);
2-
2+
@import url(https://unpkg.com/[email protected]/css/boxicons.min.css);
33

44
:root {
55
--vp-c-left-color: #a21013;
@@ -11,6 +11,22 @@
1111
var(--vp-c-right-color) 50%
1212
) !important;
1313
--vp-home-hero-image-filter: blur(180px) !important;
14+
15+
--vs-background: 30, 32, 35;
16+
--vs-text: 255, 255, 255;
17+
--vs-gray-1: 24, 25, 28;
18+
--vs-gray-2: 20, 20, 23;
19+
--vs-gray-3: 15, 16, 19;
20+
--vs-gray-4: 10, 11, 14;
21+
--vs-shadow-opacity: .3;
22+
--vs-dark: 0, 0, 0;
23+
--vs-background-opacity: .6;
24+
--vs-theme-bg: #18191c;
25+
--vs-theme-color: #fff;
26+
--vs-theme-layout: #1e2023;
27+
--vs-theme-bg2: #141417;
28+
--vs-theme-code: #141417;
29+
--vs-theme-code2: #161619;
1430
}
1531

1632
code {
@@ -53,4 +69,18 @@ code {
5369
#VPSidebarNav > div:nth-child(4) > section > div.items > section.VPSidebarItem.level-1.has-active > div.items > div:nth-child(17) > div > a > .text {
5470
color: #2c2c2c !important;
5571
cursor: not-allowed;
72+
}
73+
74+
[class*=vs-] {
75+
-webkit-box-sizing: border-box;
76+
box-sizing: border-box;
77+
outline: none;
78+
list-style: none;
79+
}
80+
[class*=vs-] {
81+
border: 0;
82+
-webkit-box-sizing: border-box;
83+
box-sizing: border-box;
84+
outline: none;
85+
list-style: none;
5686
}

‎book/index.md

-1
This file was deleted.

‎book/tutor/introduction.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
# Hello World - Introductory
22

33

4-
These lessons teach you the fundamentals of the vein language.
4+
These lessons teach you the fundamentals of the vein language.
5+
6+
7+

‎getstart.md

+10-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,13 @@
44
- [New Project](/newproject)
55
- [Publishing](/etc/publish)
66
- [Language Reference](/book/index)
7-
- [Vein Package Gallery](https://gallery.vein-lang.org)
7+
- [Vein Package Gallery](https://gallery.vein-lang.org)
8+
9+
<!--
10+
<PackageReference packageName="vein.runtime" val="workload install vein.runtime"/>
11+
12+
13+
14+
<script setup>
15+
import PackageReference from './.vitepress/theme/PackageReference.vue';
16+
</script> -->

0 commit comments

Comments
 (0)