Skip to content

Commit 33815c5

Browse files
zoey-kaiserBracketJohn
zoey-kaiser
and
BracketJohn
authored
feat: Add new Landing Page design for merino (#16)
* Added new Landing Page design * Fixed a broken link * Refactored index vue generation * Fixed Linting issues * Added new line at the end of index.vue * Modified things to make things more thingy * Removed a thingy that did not thing correctly * Updated ModuleConfig and CI/CD * Updated CI/CD * Removed CD * Small design changes * Fixed text if no module was selected * Fixed CSS style indentation * Fixed text link --------- Co-authored-by: Nils <[email protected]>
1 parent 57ee84b commit 33815c5

File tree

4 files changed

+224
-49
lines changed

4 files changed

+224
-49
lines changed

‎.github/workflows/ci.yaml

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -53,21 +53,3 @@ jobs:
5353
# build prod-app, start it in prod mode and curl from it
5454
- run: "export AUTH_ORIGIN=http://localhost:3000 && cd my-sidebase-app && npm run build && timeout 30 npm run preview & (sleep 10 && curl --fail localhost:3000) || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"
5555

56-
57-
publish:
58-
needs: [testCli, testCodebase]
59-
runs-on: ubuntu-latest
60-
steps:
61-
- uses: actions/checkout@v3
62-
63-
- name: Use Node.js 16.14.2
64-
uses: actions/setup-node@v3
65-
with:
66-
node-version: 16.14.2
67-
68-
- run: npm ci
69-
70-
- uses: JS-DevTools/npm-publish@v1
71-
with:
72-
token: ${{ secrets.NPM_TOKEN }}
73-
access: public

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import { moduleConfigs, Modules } from "./moduleConfigs"
2+
3+
const getModulesSnippet = (selectedModules: Modules[], key: "html" | "css" | "js") => {
4+
const moduleIndexSnippets = selectedModules.map((module) => moduleConfigs[module].indexVue?.[key]).filter(snippet => typeof snippet !== "undefined")
5+
return moduleIndexSnippets.length > 0 ? "\n " + moduleIndexSnippets.join("\n ") : ""
6+
}
7+
export const generateIndexVue = (selectedModules: Modules[]) => {
8+
const html = getModulesSnippet(selectedModules, "html")
9+
const css = getModulesSnippet(selectedModules, "css")
10+
const js = getModulesSnippet(selectedModules, "js")
11+
12+
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>
22+
</div>
23+
<div class="cards">${html}
24+
</div>
25+
</div>
26+
</template>
27+
${js && `
28+
<script>
29+
${js}
30+
</script>\n`}
31+
<style scoped>
32+
* {
33+
margin: 0;
34+
padding: 0;
35+
box-sizing: border-box;
36+
}
37+
38+
body {
39+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
40+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
41+
background-color: #eefbfc;
42+
color: #484848;
43+
}
44+
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;
55+
}
56+
57+
.heading__title {
58+
font-weight: 600;
59+
font-size: 40px;
60+
}
61+
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;
71+
}
72+
73+
@keyframes shine {
74+
to {
75+
background-position: 200% center;
76+
}
77+
}
78+
79+
.heading__credits {
80+
color: #888888;
81+
font-size: 25px;
82+
transition: all 0.5s;
83+
}
84+
85+
.heading__credits a {
86+
text-decoration: underline;
87+
}
88+
89+
/* CARDS */
90+
.cards {
91+
display: grid;
92+
gap: 20px;
93+
grid-template-columns: repeat(2, minmax(0, 1fr));
94+
margin-top: 30px;
95+
}
96+
97+
.card {
98+
padding: 20px;
99+
width: 100%;
100+
min-height: 200px;
101+
display: grid;
102+
grid-template-rows: 20px 50px 1fr 50px;
103+
border-radius: 10px;
104+
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
105+
transition: all 0.2s;
106+
cursor: default;
107+
}
108+
109+
.card:hover {
110+
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
111+
transform: scale(1.01);
112+
}
113+
114+
.card__link {
115+
position: relative;
116+
text-decoration: underline;
117+
color: rgba(255, 255, 255, 0.9);
118+
}
119+
120+
.card__title {
121+
font-weight: 400;
122+
color: #ffffff;
123+
font-size: 30px;
124+
}
125+
126+
.card__body {
127+
grid-row: 2/4;
128+
}
129+
130+
.card__body p {
131+
color: #ffffff;
132+
}
133+
134+
.card__action {
135+
grid-row: 5/6;
136+
align-self: center;
137+
display: flex;
138+
gap: 20px
139+
}
140+
141+
/* RESPONSIVE */
142+
143+
@media (max-width: 1600px) {
144+
.main-container {
145+
max-width: 100vw;
146+
padding: 50px;
147+
}
148+
149+
.cards {
150+
justify-content: center;
151+
grid-template-columns: repeat(1, minmax(0, 1fr));
152+
}
153+
}
154+
${css}
155+
</style>
156+
`
157+
}

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import path from "node:path"
77
import { NuxtConfig } from "@nuxt/schema"
88
import defu from "defu"
99
import { inspect } from "node:util"
10+
import { generateIndexVue } from "./generateIndexVue"
1011

1112
export default async (preferences: Preferences, templateDir: string) => {
1213
const selectedModules: Modules[] = preferences.addModules || []
@@ -60,16 +61,7 @@ export default defineNuxtConfig(${inspect(nuxtConfig, { compact: false })})
6061
await writeFile(resolver("app.vue"), nuxtAppVue)
6162

6263
// 6. Write index.vue with a nice welcome message as well as links to sub-pages
63-
const moduleIndexHtmlSnippets = selectedModules.map((module) => moduleConfigs[module].htmlForIndexVue).filter(html => typeof html !== "undefined")
64-
const moduleIndexHtml = moduleIndexHtmlSnippets.length > 0 ? "\n " + moduleIndexHtmlSnippets.join("\n ") : ""
65-
const nuxtPagesIndexVue = `<template>
66-
<div>
67-
<h1${selectedModules.includes("tailwind") ? " class=\"text-4xl\"" : ""}>
68-
Welcome to your sidebase app!
69-
</h1>${moduleIndexHtml}
70-
</div>
71-
</template>
72-
`
64+
const nuxtPagesIndexVue = generateIndexVue(selectedModules)
7365
await mkdir(resolver("pages"), { recursive: true })
7466
await writeFile(resolver("pages/index.vue"), nuxtPagesIndexVue)
7567
}

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

Lines changed: 65 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
11
import { NuxtConfig } from "@nuxt/schema"
22
import { Dependency } from "../../utils/addPackageDependency"
33

4+
const generateModuleHTMLSnippet = (title: string, description: string, cardClass: string, documentationLink: string, styles: string): {html: string, css: string} => {
5+
const html = ` <div class="card ${cardClass}">
6+
<div class="card__body">
7+
<h2 class="card__title">
8+
${title}
9+
</h2>
10+
<p>
11+
${description}
12+
</p>
13+
</div>
14+
<p class="card__action">
15+
<a class="card__link" href="${documentationLink}" target="_blank">
16+
Read documentation
17+
</a>
18+
</p>
19+
</div>`
20+
const css = `.${cardClass} { ${styles} }`
21+
return {
22+
html,
23+
css
24+
}
25+
}
26+
427
/**
528
* PRISMA FILE CONTENTS
629
*/
@@ -309,7 +332,11 @@ declare interface ModuleConfig {
309332
nuxtConfig: NuxtConfig
310333
files: File[]
311334
tasksPostInstall: string[]
312-
htmlForIndexVue?: string
335+
indexVue?: {
336+
html: string,
337+
css?: string
338+
js?: string,
339+
}
313340
}
314341

315342
// TODO: Improve files approach: It will fail as soon as the content of a file depends on two dependencies at the same time!
@@ -355,12 +382,13 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
355382
"- [ ] Prisma: Run `npx prisma db push` to sync the schema to your database after changing the schema",
356383
"- [ ] Prisma: Run `npx prisma generate` to re-generate the client after changing the schema"
357384
],
358-
htmlForIndexVue: `<p>
359-
Checkout the Prisma ORM demo page here:
360-
<nuxt-link to="/prisma" class="underline text-blue">
361-
Click me to test the Prisma ORM setup!
362-
</nuxt-link>
363-
</p>`
385+
indexVue: generateModuleHTMLSnippet(
386+
"Prisma ORM",
387+
"Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.",
388+
"prisma__card",
389+
"https://sidebase.io/sidebase/components/prisma",
390+
"background: radial-gradient(#3fbafe, #5A67D8FF);"
391+
),
364392
},
365393
"auth": {
366394
humanReadableName: "nuxt-auth",
@@ -386,12 +414,13 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
386414
"- [ ] Auth: Configure your auth providers to the [NuxtAuthHandler](./server/api/auth/[...].ts)",
387415
"- [ ] Auth, optional: Enable global protection by setting `enableGlobalAppMiddleware: true` in [your nuxt.config.ts](./nuxt.config.ts). Delete the local middleware in the [protected.vue](./pages/protected.vue) page if you do"
388416
],
389-
htmlForIndexVue: `<p>
390-
Checkout the page protected by \`nuxt-auth\` here:
391-
<nuxt-link to="/protected" class="underline text-blue">
392-
Click me to test the auth setup!
393-
</nuxt-link>
394-
</p>`
417+
indexVue: generateModuleHTMLSnippet(
418+
"Authentication",
419+
"Nuxt user authentication and sessions through nuxt-auth. nuxt-auth wraps NextAuth.js to offer the reliability & convenience of a 12k star library to the nuxt 3 ecosystem with a native developer experience (DX)",
420+
"auth__card",
421+
"https://sidebase.io/nuxt-auth/getting-started",
422+
"background: radial-gradient(#0FCF97, #0B9A71);"
423+
),
395424
},
396425
"trpc": {
397426
humanReadableName: "tRPC 10",
@@ -449,12 +478,13 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
449478
},
450479
],
451480
tasksPostInstall: [],
452-
htmlForIndexVue: `<p>
453-
Checkout the tRPC demo page here:
454-
<nuxt-link to="/trpc" class="underline text-blue">
455-
Click me to test the tRPC setup!
456-
</nuxt-link>
457-
</p>`
481+
indexVue: generateModuleHTMLSnippet(
482+
"tRPC",
483+
"tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.",
484+
"trpc__card",
485+
"https://sidebase.io/sidebase/components/trpc",
486+
"background: radial-gradient(#a07ccf, #926dc2);"
487+
),
458488
},
459489
"tailwind": {
460490
humanReadableName: "Tailwind CSS",
@@ -468,7 +498,14 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
468498
modules: ["@nuxtjs/tailwindcss"]
469499
},
470500
files: [],
471-
tasksPostInstall: []
501+
tasksPostInstall: [],
502+
indexVue: generateModuleHTMLSnippet(
503+
"TailwindCSS",
504+
"Rapidly build modern websites without ever leaving your HTML.",
505+
"tailwind__card",
506+
"https://sidebase.io/sidebase/components/tailwindcss",
507+
"background: radial-gradient(#7466e3, #5a4ad9);"
508+
),
472509
},
473510
"naiveui": {
474511
humanReadableName: "Naive UI",
@@ -482,6 +519,13 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
482519
modules: ["@huntersofbook/naive-ui-nuxt"],
483520
},
484521
files: [],
485-
tasksPostInstall: []
522+
tasksPostInstall: [],
523+
indexVue: generateModuleHTMLSnippet(
524+
"NaiveUI",
525+
"Fairly Complete, Theme Customizable, Uses TypeScript, Fast, Kinda Interesting.",
526+
"naiveui__card",
527+
"https://www.naiveui.com/en-US/os-theme",
528+
"background: radial-gradient(#ad6434, #995020);"
529+
),
486530
}
487531
}

0 commit comments

Comments
 (0)