Skip to content

Commit 24d0c65

Browse files
zoey-kaiserzoey-kaiser
authored
feat: Redesign start page (#30)
1 parent 5999c51 commit 24d0c65

File tree

10 files changed

+794
-616
lines changed

10 files changed

+794
-616
lines changed

‎.github/workflows/ci.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,4 @@ jobs:
4848
- run: "export AUTH_ORIGIN=http://localhost:3000 && export AUTH_SECRET=test123 && cd my-sidebase-app && npm run build && timeout 30 npm run preview || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"
4949

5050
# start dev-app and curl from it
51-
- run: "cd my-sidebase-app && timeout 30 npm run dev & (sleep 10 && curl --fail localhost:3000) || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"
51+
- run: "cd my-sidebase-app && timeout 30 npm run dev & (sleep 20 && curl --fail localhost:3000) || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"

‎src/steps/2.addModules/generateIndexVue.ts‎

Lines changed: 159 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,46 @@ const getModulesSnippet = (selectedModules: Modules[], key: "html" | "css" | "js
66
}
77
export const generateIndexVue = (selectedModules: Modules[]) => {
88
const html = getModulesSnippet(selectedModules, "html")
9-
const css = getModulesSnippet(selectedModules, "css")
10-
const js = getModulesSnippet(selectedModules, "js")
119

1210
return `<template>
13-
<div class="main-container">
14-
<div class="heading">
15-
<h1 class="heading__title">
16-
Welcome to your new <span class="gradient__text">sidebase</span> app!
17-
</h1>
18-
<p class="heading__credits">
19-
Read our documentation <a href="https://sidebase.io/sidebase/welcome" target="_blank">here</a>.
20-
${selectedModules.length > 0 ? "Get started in no time with the following amazing modules:" : "Add some of our amazing modules <a href='https://sidebase.io' target='_blank'>here</a>."}
21-
</p>
11+
<div class="wrapper">
12+
<div class="margins" style="padding-top: 3rem; ">
13+
<div class="content">
14+
<h1 class="heading">
15+
Welcome to your new <span class="gradient__text">sidebase</span> app!
16+
</h1>
17+
<p class="description">
18+
Read our documentation <a class="hover-underline-animation" href="https://sidebase.io/sidebase/welcome" target="_blank">here</a>.
19+
${selectedModules.length > 0 ? "Get started in no time with the following amazing modules:" : "Add some of our amazing modules <a href='https://sidebase.io' target='_blank'>here</a>."}
20+
</p>
21+
</div>
22+
23+
<div class="modules_grid">${html}
24+
</div>
2225
</div>
23-
<div class="cards">${html}
26+
27+
<div class="margins footer">
28+
<div style="color: #D1D5DB">
29+
Developed with love by
30+
<NuxtLink href="https://sidestream.tech" target="_blank" class="hover-underline-animation">
31+
Sidestream
32+
</NuxtLink>
33+
</div>
34+
<div class="social">
35+
<NuxtLink href="https://discord.gg/VzABbVsqAc" target="_blank" class="hover-underline-animation">
36+
Discord
37+
</NuxtLink>
38+
<NuxtLink href="https://twitter.com/sidebase_io" target="_blank" class="hover-underline-animation">
39+
Twitter
40+
</NuxtLink>
41+
<NuxtLink href="https://github.com/sidebase" target="_blank" class="hover-underline-animation">
42+
Github
43+
</NuxtLink>
44+
</div>
2445
</div>
2546
</div>
2647
</template>
27-
${js && `
28-
<script>
29-
${js}
30-
</script>\n`}
31-
<style scoped>
48+
<style>
3249
* {
3350
margin: 0;
3451
padding: 0;
@@ -42,116 +59,166 @@ ${js}
4259
color: #484848;
4360
}
4461
45-
.main-container {
46-
max-width: 45vw;
47-
margin: auto;
48-
padding-top: 60px;
49-
}
50-
51-
/* HEADING */
52-
53-
.heading {
54-
text-align: center;
62+
/* Layout */
63+
.wrapper {
64+
display: flex;
65+
flex-direction: column;
66+
justify-content: space-between;
67+
width: 100%;
68+
min-height: 100vh;
69+
color: #ffffff;
70+
background-color: #0E0E10;
5571
}
72+
.margins {
73+
padding-left: 1rem;
74+
padding-right: 1rem;
5675
57-
.heading__title {
58-
font-weight: 600;
59-
font-size: 40px;
76+
@media (min-width: 1024px) {
77+
padding-left: 5rem;
78+
padding-right: 5rem;
79+
}
6080
}
6181
62-
.gradient__text {
63-
background: linear-gradient(to right, #7bceb6 10%, #12a87b 40%, #0FCF97 60%, #7bceb6 90%);
64-
background-size: 200% auto;
65-
color: #000;
66-
background-clip: text;
67-
text-fill-color: transparent;
68-
-webkit-background-clip: text;
69-
-webkit-text-fill-color: transparent;
70-
animation: shine 1s linear infinite;
82+
/* Heading */
83+
.content {
84+
display: flex;
85+
flex-direction: column;
86+
gap: 0.5rem;
7187
}
88+
.content .heading {
89+
font-size: 2.4rem;
90+
line-height: 2.25rem;
91+
font-weight: 700;
7292
73-
@keyframes shine {
74-
to {
75-
background-position: 200% center;
93+
@media (min-width: 1280px) {
94+
font-size: 3rem;
95+
line-height: 1;
7696
}
7797
}
7898
79-
.heading__credits {
80-
color: #888888;
81-
font-size: 25px;
82-
transition: all 0.5s;
83-
}
99+
.content .description {
100+
font-size: 1.125rem;
101+
line-height: 1.75rem;
102+
color: #9CA3AF;
84103
85-
.heading__credits a {
86-
text-decoration: underline;
104+
@media (min-width: 1280px) {
105+
font-size: 1.25rem;
106+
line-height: 1.75rem;
107+
}
87108
}
88109
89-
/* CARDS */
90-
.cards {
110+
/* Modules */
111+
.modules_grid {
91112
display: grid;
92-
gap: 20px;
93-
grid-template-columns: repeat(2, minmax(0, 1fr));
94-
margin-top: 30px;
95-
}
113+
margin-top: 2.5rem;
114+
gap: 2rem;
96115
116+
@media (min-width: 768px) {
117+
grid-template-columns: repeat(2, minmax(0, 1fr));
118+
}
119+
120+
@media (min-width: 1280px) {
121+
grid-template-columns: repeat(3, minmax(0, 1fr));
122+
}
123+
}
97124
.card {
98-
padding: 20px;
99-
width: 100%;
100-
min-height: 200px;
101-
display: grid;
102-
grid-template-rows: 20px 50px 1fr 50px;
125+
position: relative;
126+
padding: 30px;
103127
border-radius: 10px;
104-
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
105-
transition: all 0.2s;
106-
cursor: default;
128+
transition: 0.5s;
129+
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
130+
inset -5px -5px 15px rgba(255, 255, 255, 0.1),
131+
5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
107132
}
108133
109-
.card:hover {
110-
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
111-
transform: scale(1.01);
134+
.card .layout {
135+
display: flex;
136+
flex-direction: column;
137+
gap: 2rem;
138+
justify-content: space-between;
139+
height: 100%;
112140
}
113141
114-
.card__link {
115-
position: relative;
116-
text-decoration: underline;
117-
color: rgba(255, 255, 255, 0.9);
142+
.card .layout .group {
143+
display: flex;
144+
flex-direction: column;
145+
gap: 0.75rem;
118146
}
119147
120-
.card__title {
121-
font-weight: 400;
122-
color: #ffffff;
123-
font-size: 30px;
148+
.card .layout .heading {
149+
font-size: 1.5rem;
150+
line-height: 2rem;
151+
font-weight: 700;
124152
}
125153
126-
.card__body {
127-
grid-row: 2/4;
154+
.card .layout .description {
155+
color: #D1D5DB;
128156
}
129157
130-
.card__body p {
131-
color: #ffffff;
158+
.card .layout .group .actions {
159+
display: flex;
160+
gap: 0.5rem;
132161
}
133162
134-
.card__action {
135-
grid-row: 5/6;
136-
align-self: center;
163+
/* Footer */
164+
.footer {
137165
display: flex;
138-
gap: 20px
166+
padding-top: 1rem;
167+
padding-bottom: 1rem;
168+
margin-top: 2.5rem;
169+
justify-content: space-between;
170+
align-items: center;
171+
border-top-width: 1px;
172+
border-color: #1F2937;
173+
width: 100%;
139174
}
140175
141-
/* RESPONSIVE */
176+
.footer .social {
177+
display: flex;
178+
gap: 1.25rem;
179+
align-items: center;
180+
}
142181
143-
@media (max-width: 1600px) {
144-
.main-container {
145-
max-width: 100vw;
146-
padding: 50px;
147-
}
182+
/* Special */
183+
.gradient__text {
184+
background: linear-gradient(to right, #7bceb6 10%, #12a87b 40%, #0FCF97 60%, #7bceb6 90%);
185+
background-size: 200% auto;
186+
color: #000;
187+
background-clip: text;
188+
-webkit-background-clip: text;
189+
-webkit-text-fill-color: transparent;
190+
animation: shine 1s linear infinite;
191+
}
148192
149-
.cards {
150-
justify-content: center;
151-
grid-template-columns: repeat(1, minmax(0, 1fr));
193+
@keyframes shine {
194+
to {
195+
background-position: 200% center;
152196
}
153197
}
154-
${css}
198+
.hover-underline-animation {
199+
display: inline-block;
200+
position: relative;
201+
color: #5BF3C7;
202+
text-decoration: none;
203+
}
204+
205+
.hover-underline-animation::after {
206+
content: '';
207+
position: absolute;
208+
width: 100%;
209+
transform: scaleX(0);
210+
height: 2px;
211+
bottom: 0;
212+
left: 0;
213+
background-color: #5BF3C7;
214+
transform-origin: bottom right;
215+
transition: transform 0.25s ease-out;
216+
}
217+
218+
.hover-underline-animation:hover::after {
219+
transform: scaleX(1);
220+
transform-origin: bottom left;
221+
}
155222
</style>
156223
`
157224
}

‎src/steps/2.addModules/generateModuleComponents.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
export function generateModuleHTMLComponent (
2+
title: string,
3+
description: string,
4+
documentationLink: string,
5+
demo: string,
6+
actions: string
7+
): {html: string} {
8+
const html = `<div class="layout">
9+
<div class="group">
10+
<h1 class="heading">
11+
${title}
12+
</h1>
13+
<p class="description">
14+
${description}
15+
</p>
16+
</div>
17+
<div class="group">
18+
${demo}
19+
<div class="actions">
20+
<WelcomeButtonLink href="${documentationLink}" :blank="true">
21+
Documentation
22+
</WelcomeButtonLink>
23+
${actions}
24+
</div>
25+
</div>
26+
</div>`
27+
return {
28+
html,
29+
}
30+
}
31+
32+
export function generateModuleHTMLSnippet (componentName: string) {
33+
const html = ` <div class="card">
34+
<${componentName} />
35+
</div>`
36+
return {
37+
html,
38+
}
39+
}
40+
41+
export const buttonLink = `<script setup lang="ts">
42+
defineProps({
43+
blank: {
44+
type: Boolean,
45+
required: false,
46+
default: false
47+
},
48+
href: {
49+
type: String,
50+
default: ''
51+
},
52+
})
53+
</script>
54+
55+
<template>
56+
<NuxtLink class="ButtonLink" :to="href" :target="blank ? '_blank' : undefined">
57+
<slot />
58+
</NuxtLink>
59+
</template>
60+
61+
<style scoped>
62+
.ButtonLink {
63+
position: relative;
64+
padding: 5px 15px;
65+
color: white;
66+
background-image: linear-gradient(160deg, #059669, #059669);
67+
border-radius: 0.3rem;
68+
cursor: pointer;
69+
user-select: none;
70+
transition: box-shadow 0.6s;
71+
}
72+
.ButtonLink:hover {
73+
box-shadow: 0 0 60px 2px #059669, 0.5rem 0.5rem 30px #059669;
74+
}
75+
.ButtonLink:after {
76+
content: '';
77+
position: absolute;
78+
top: 2px;
79+
right: 2px;
80+
bottom: 2px;
81+
left: 2px;
82+
border-radius: 0.75rem;
83+
pointer-events: none;
84+
}
85+
</style>
86+
`

0 commit comments

Comments
 (0)