Skip to content

Commit c0575f0

Browse files
posvaposva
committed
docs: initial version
1 parent dcbc269 commit c0575f0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+5168
-35
lines changed

‎docs/.vitepress/components/FirebaseExample.vue

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
<template>
2+
<div class="tab-container" :id="id">
3+
<nav ref="nav">
4+
<button
5+
:id="id + '_rtdb'"
6+
:class="!selectedTab && 'is-selected'"
7+
title="Realtime Database example"
8+
@focus="selectOnFocus(0, $event)"
9+
@click="select(0)"
10+
:disabled="disable === '0'"
11+
>
12+
<rtdb-logo />
13+
</button>
14+
<button
15+
:id="id + '_firestore'"
16+
:class="selectedTab && 'is-selected'"
17+
title="Firestore example"
18+
@focus="selectOnFocus(1, $event)"
19+
@click="select(1)"
20+
:disabled="disable === '1'"
21+
>
22+
<firestore-logo />
23+
</button>
24+
</nav>
25+
<section>
26+
<!-- the key forces recreation of the slot child instead of reusing it -->
27+
<keep-alive>
28+
<div class="tab-content" :key="selectedTab">
29+
{{ selectedTab }}
30+
<!-- <SlotSelector :slot="$slots.default[selectedTab]" /> -->
31+
</div>
32+
</keep-alive>
33+
</section>
34+
</div>
35+
</template>
36+
37+
<script>
38+
import 'focus-visible'
39+
import RtdbLogo from './RtdbLogo.vue'
40+
import FirestoreLogo from './FirestoreLogo.vue'
41+
42+
const sharedState = {
43+
selectedTab: 1, // defaults to Firestore examples
44+
}
45+
46+
export default {
47+
props: ['id', 'disable'],
48+
data() {
49+
return sharedState
50+
},
51+
52+
methods: {
53+
selectOnFocus(i, event) {
54+
if (!event.relatedTarget || event.relatedTarget.tagName !== 'A') return
55+
this.selectedTab = i
56+
// NOTE: only works on Chrome. using $nextTick doesn't change anything
57+
window.scrollBy(0, -70)
58+
},
59+
60+
// select a tab and keep the scroll position
61+
async select(i) {
62+
this.selectedTab = i
63+
const offset = this.$refs.nav.offsetTop - window.scrollY
64+
await this.$nextTick()
65+
window.scrollTo(0, this.$refs.nav.offsetTop - offset)
66+
},
67+
},
68+
69+
components: {
70+
FirestoreLogo,
71+
RtdbLogo,
72+
SlotSelector: {
73+
functional: true,
74+
render: (h, { props }) => props.slot,
75+
},
76+
},
77+
}
78+
</script>
79+
80+
<style scoped>
81+
/* $bgColor = #fff;
82+
$lightGray = #ddd; */
83+
84+
::root {
85+
--bgColor: #fff;
86+
--lightGray: #ddd;
87+
}
88+
89+
.tab-container {
90+
& > nav {
91+
display: flex;
92+
align-items: flex-end;
93+
justify-content: flex-end;
94+
height: 2.5rem;
95+
96+
@media (max-width: 419px) {
97+
& {
98+
margin: 0 -1.5rem -0.85rem;
99+
}
100+
}
101+
102+
& > button {
103+
display: flex;
104+
align-items: center;
105+
height: 100%;
106+
/* padding: 4.6rem 0.7rem 0; */
107+
padding: 0 0.7rem;
108+
margin: 0;
109+
border: solid 1px $codeBgColor;
110+
border-bottom: none;
111+
background-color: lighten($codeBgColor, 10%);
112+
113+
&:not(:first-child) {
114+
border-left: none;
115+
}
116+
117+
&:not(:last-child) {
118+
border-right: none;
119+
}
120+
121+
&:first-child {
122+
border-radius: 6px 0 0;
123+
}
124+
125+
&:last-child {
126+
border-radius: 0 6px 0 0;
127+
}
128+
129+
& /deep/ svg {
130+
width: 32px;
131+
height: 32px;
132+
/* margin-top: -3.5rem; */
133+
fill: darken($bgColor, 10%);
134+
}
135+
136+
&:not([disabled]):hover {
137+
cursor: pointer;
138+
background-color: lighten($codeBgColor, 30%);
139+
140+
& /deep/ svg {
141+
fill: $bgColor;
142+
}
143+
}
144+
145+
&.is-selected:hover {
146+
background-color: $codeBgColor;
147+
}
148+
149+
&[disabled] {
150+
border-color: lighten($codeBgColor, 60%);
151+
152+
& svg {
153+
fill: lighten($codeBgColor, 60%);
154+
}
155+
}
156+
157+
&.is-selected {
158+
background-color: $codeBgColor;
159+
160+
& svg {
161+
fill: $bgColor;
162+
}
163+
}
164+
}
165+
}
166+
167+
.tab-content {
168+
@media (min-width: 420px) {
169+
& >>> div[class^='language-'] {
170+
border-radius: 6px 0 6px 6px;
171+
}
172+
}
173+
174+
& >>> pre[class^='language'] {
175+
margin-top: 0;
176+
border-radius: 6px 0 6px 6px;
177+
}
178+
}
179+
}
180+
</style>

‎docs/.vitepress/components/FirestoreLogo.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" width="32" height="32">
3+
<path
4+
d="M96 104l-72 32v-32l72-32 72 32v28-6 10zm0-88l72 32v32L96 48 24 80V48zm27 116l36 16-63 28v-32z"
5+
fill-rule="evenodd"
6+
></path>
7+
</svg>
8+
</template>

‎docs/.vitepress/components/HomeSponsors.vue

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<div id="sponsors">
3+
<div class="inner">
4+
<template v-if="sponsors.platinum">
5+
<h3>Platinum Sponsors</h3>
6+
7+
<a
8+
v-for="sponsor in sponsors.platinum"
9+
:key="sponsor.href"
10+
:href="sponsor.href"
11+
target="_blank"
12+
rel="sponsored noopener"
13+
style="width: 160px"
14+
>
15+
<img :src="sponsor.imgSrc" style="width: 160px" :alt="sponsor.alt" />
16+
</a>
17+
<br />
18+
<br />
19+
</template>
20+
21+
<template v-if="sponsors.silver">
22+
<h3>Silver Sponsors</h3>
23+
24+
<a
25+
v-for="sponsor in sponsors.silver"
26+
:href="sponsor.href"
27+
target="_blank"
28+
rel="sponsored noopener"
29+
style="width: 120px"
30+
>
31+
<img :src="sponsor.imgSrc" style="width: 120px" :alt="sponsor.alt" />
32+
</a>
33+
34+
<br />
35+
<br />
36+
</template>
37+
38+
<a
39+
class="become-sponsor button white"
40+
href="https://github.com/sponsors/posva"
41+
>Become a Sponsor!</a
42+
>
43+
</div>
44+
</div>
45+
</template>
46+
47+
<script>
48+
import sponsors from './sponsors.json'
49+
50+
export default {
51+
name: 'HomeSponsors',
52+
53+
created() {
54+
this.sponsors = sponsors
55+
},
56+
}
57+
</script>
58+
59+
<style>
60+
#sponsors {
61+
text-align: center;
62+
padding: 35px 40px 45px;
63+
margin: 0 -2.5rem;
64+
background-color: #f6f6f6;
65+
}
66+
67+
#sponsors h3 {
68+
color: #999;
69+
margin: 0 0 10px;
70+
}
71+
72+
#sponsors a,
73+
#sponsors img {
74+
width: 100px;
75+
text-decoration: none;
76+
display: inline-block;
77+
vertical-align: middle;
78+
}
79+
80+
#sponsors img {
81+
transition: all 0.3s ease;
82+
filter: grayscale(100%);
83+
opacity: 0.66;
84+
}
85+
86+
#sponsors img:hover {
87+
filter: none;
88+
opacity: 1;
89+
}
90+
91+
#sponsors .become-sponsor {
92+
margin-top: 40px;
93+
font-size: 0.9em;
94+
font-weight: 700;
95+
width: auto;
96+
background-color: transparent;
97+
padding: 0.75em 2em;
98+
border-radius: 2em;
99+
transition: all 0.15s ease;
100+
box-sizing: border-box;
101+
border: 1px solid #4fc08d;
102+
}
103+
104+
#sponsors .become-sponsor:hover {
105+
background-color: #4fc08d;
106+
color: white;
107+
}
108+
</style>

‎docs/.vitepress/components/RtdbLogo.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" width="32" hegiht="32">
3+
<path
4+
d="M24 120h144v32.016c0 8.832-7.144 15.984-15.96 15.984H39.96C31.144 168 24 160.816 24 152.016zm0-80.064C24 31.136 31.144 24 39.96 24h112.08c8.816 0 15.96 7.2 15.96 15.936v56.128c0 8.8-7.144 15.936-15.96 15.936H39.96C31.144 112 24 104.8 24 96.064zM40 40h112v24H40zm0 44.04C40 81.8 41.712 80 44.04 80h7.92C54.2 80 56 81.712 56 84.04v7.92C56 94.2 54.288 96 51.96 96h-7.92C41.8 96 40 94.288 40 91.96zm0 56c0-2.24 1.712-4.04 4.04-4.04h7.92c2.24 0 4.04 1.712 4.04 4.04v7.92c0 2.24-1.712 4.04-4.04 4.04h-7.92c-2.24 0-4.04-1.712-4.04-4.04z"
5+
fill-rule="evenodd"
6+
></path>
7+
</svg>
8+
</template>

‎docs/.vitepress/components/sponsors.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"silver": [
3+
{
4+
"href": "https://www.vuemastery.com/",
5+
"alt": "VueMastery",
6+
"imgSrc": "https://www.vuemastery.com/images/vuemastery.svg"
7+
},
8+
{
9+
"imgSrc": "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-light-text.svg",
10+
"href": "https://www.vuetifyjs.com/",
11+
"alt": "Vuetify"
12+
}
13+
]
14+
}

0 commit comments

Comments
 (0)