Add minimal to starters
#27
Conversation
minimal/main.wasp
Outdated
| @@ -0,0 +1,14 @@ | |||
| app __waspAppName__ { | |||
| wasp: { | |||
| version: "^0.16.3" | |||
There was a problem hiding this comment.
I suppose will update this version to the latest version when we release a new Wasp version
There was a problem hiding this comment.
we could also support some special keyword like "latest" to stop this requirement for us
There was a problem hiding this comment.
We wanted to pin the version of Wasp (that's why we tag the starters repo and open-saas repo) because the Wasp CLI changes over time and we have breaking changes sometimes.
There was a problem hiding this comment.
In my head it was like, we always want to keep them up to date so it doesn't matter, but this way is definitely safer.
There was a problem hiding this comment.
@FranjoMindek somebody might have odler version of Wasp CLI and wants to pull in the starter -> in that case they want the older one!
There was a problem hiding this comment.
I forgot we could dynamically pull this. Changed to __waspVersion__
| @@ -0,0 +1,89 @@ | |||
| * { | |||
There was a problem hiding this comment.
It would be maybe cool to upgrade these styles, maybe to make the button look more modern or smth like that
There was a problem hiding this comment.
Here are some styles from Bolt that are a drop in replacement:
Styles
:root {
--primary-color: #ffcc00;
--primary-hover: #e6b800;
--background-color: #ffffff;
--text-color: #1f2937;
--border-radius: 12px;
--transition-speed: 0.3s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
main {
max-width: 800px;
text-align: center;
padding: 3rem;
}
.logo {
margin-bottom: 2.5rem;
}
.logo img {
max-width: 180px;
height: auto;
}
.welcome-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--text-color);
letter-spacing: -0.02em;
line-height: 1.2;
}
.welcome-subtitle {
font-size: 1.25rem;
font-weight: 400;
margin-bottom: 2.5rem;
color: var(--text-color);
opacity: 0.8;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
code {
background-color: rgba(255, 204, 0, 0.1);
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.9em;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
color: #1a1a1a;
border: 1px solid rgba(255, 204, 0, 0.2);
}
.buttons {
display: flex;
gap: 1.25rem;
justify-content: center;
margin-top: 2.5rem;
}
.button {
display: inline-flex;
align-items: center;
padding: 0.875rem 2rem;
border-radius: var(--border-radius);
font-weight: 600;
text-decoration: none;
transition: all var(--transition-speed) ease;
}
.button-filled {
background-color: var(--primary-color);
color: #1a1a1a;
}
.button-filled:hover {
background-color: var(--primary-hover);
}
.button-outline {
border: 2px solid var(--primary-color);
color: #1a1a1a;
background-color: transparent;
}
.button-outline:hover {
background-color: rgba(255, 204, 0, 0.1);
}
@media (max-width: 640px) {
main {
padding: 2rem;
}
.buttons {
flex-direction: column;
gap: 1rem;
}
.welcome-title {
font-size: 2rem;
}
.welcome-subtitle {
font-size: 1.1rem;
padding: 0 1rem;
}
.button {
width: 100%;
justify-content: center;
}
}There was a problem hiding this comment.
I did this:
Hover state:
There was a problem hiding this comment.
If we want to do hover animation on buttons, it looks weird when outlined and solid button are next to each other.
If they were in different sections yes, but next to each other they look weird, so I discarded that idea.
There was a problem hiding this comment.
Looks nice!
it looks weird when outlined and solid button are next to each other.
It looked nice to me, but I'm no designer expert, so let's keep it simple :)
There was a problem hiding this comment.
But without this on hover animation problem different buttons do make sense.
There was a problem hiding this comment.
We can drop the on hover transition, I think that's fine 👍 or you can just put opacity to 90% to get a bit of an effect, that's a trick I use sometimes.
There was a problem hiding this comment.
Personally I would remove the: "You just started a new app." subtitle.
minimal/src/MainPage.tsx
Outdated
| export function MainPage() { | ||
| return ( | ||
| <main className="container"> | ||
| <img className="logo" src="logo.svg" alt="wasp" /> |
There was a problem hiding this comment.
Why not import it from src like we had before? I guess the benefit is that Vite will warn you if the file is missing.
There was a problem hiding this comment.
@FranjoMindek one extra note on the public dir, it's unconventional to have stuff in the public dir and import it like this. Read on this in the Vite's docs: https://vite.dev/guide/assets#the-public-directory
There was a problem hiding this comment.
Moved it to assets folder
| @@ -0,0 +1,11 @@ | |||
| .wasp/ | |||
There was a problem hiding this comment.
We have .gitignore file in skeleton, why not use that one? Ah, because this is on the starters repo? Ok got it.
There was a problem hiding this comment.
Actually since this repo will have multiple repos with same gititgnore, I should move it to root, and then skeleton takes care of that for templates. Then we won't be bothered by unstaged files, while also working fine.
But I will do that in a separate PR.
minimal/main.wasp
Outdated
| @@ -0,0 +1,14 @@ | |||
| app __waspAppName__ { | |||
| wasp: { | |||
| version: "^0.16.3" | |||
There was a problem hiding this comment.
@FranjoMindek somebody might have odler version of Wasp CLI and wants to pull in the starter -> in that case they want the older one!
The starter is currently broken due to non-starter related issue.
The contents is the same as old "basic" from
waspctemplates.