Skip to content

New 'Hello World' templates #1007

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/itchy-beers-burn.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'create-svelte': patch
---

Adding new Hello World templates (default with enhanced style and skeleton) to create-svelte
11 changes: 10 additions & 1 deletion packages/create-svelte/cli/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,15 @@ async function main() {
}

const options = /** @type {import('./types').Options} */ (await prompts([
{
type: 'select',
name: 'template',
message: 'Which app Svelte template?',
choices: [
{ title: 'Default App (Counter + Route)', value: 'default' },
{ title: 'Skeleton App', value: 'skeleton' }
]
},
{
type: 'confirm',
name: 'typescript',
Expand All @@ -59,7 +68,7 @@ async function main() {

const name = path.basename(path.resolve(cwd));

write_template_files(`default-${options.typescript ? 'ts' : 'js'}`, name, cwd);
write_template_files(`${options.template}-${options.typescript ? 'ts' : 'js'}`, name, cwd);
write_common_files(cwd, options);

console.log(bold(green('✔ Copied project files')));
Expand Down
1 change: 1 addition & 0 deletions packages/create-svelte/cli/types.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export type Options = {
template: 'default' | 'skeleton';
typescript: boolean;
prettier: boolean;
eslint: boolean;
Expand Down
79 changes: 77 additions & 2 deletions packages/create-svelte/templates/default/src/app.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,79 @@
:root {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--pure-white: #ffffff;
--primary-color: #b9c6d2;
--secondary-color: #d0dde9;
--tertiary-color: #edf0f8;
--accent-color: #ff3e00;
--heading-color: rgba(0, 0, 0, 0.7);
--text-color: #444444;
--background-without-opacity: rgba(255, 255, 255, 0.7);
}

:root[data-theme='dark'] {
--primary-color: #1f272e;
--secondary-color: #2e3a44;
--tertiary-color: #393d45;
--heading-color: #ffffff;
--text-color: #ffffff;
--secondary-text-color: #676778;
--background-without-opacity: rgba(255, 255, 255, 0.2);
}

body {
min-height: 100vh;
margin: 0;
background-color: var(--primary-color);
background: linear-gradient(
180deg,
var(--primary-color) 0%,
var(--secondary-color) 10.45%,
var(--tertiary-color) 41.35%
);
}

body::before {
content: '';
width: 80vw;
height: 100vh;
position: absolute;
top: 0;
left: 10vw;
z-index: -1;
background: radial-gradient(
50% 50% at 50% 50%,
var(--pure-white) 0%,
rgba(255, 255, 255, 0) 100%
);
opacity: 0.05;
}

#svelte {
min-height: 100vh;
display: flex;
flex-direction: column;
}

h1,
h2,
p {
font-weight: 400;
text-align: center;
color: var(--heading-color);
}

h1 {
font-size: 2rem;
margin-bottom: 0;
}

h2 {
font-size: 1rem;
}

@media (min-width: 480px) {
h1 {
font-size: 3rem;
}
}
161 changes: 135 additions & 26 deletions packages/create-svelte/templates/default/src/lib/Counter.svelte
Original file line number Diff line number Diff line change
@@ -1,36 +1,145 @@
<script lang="ts">
import { backIn } from 'svelte/easing';

const action: { operation?: 'ADD' | 'REMOVE' } = { operation: undefined };
let count = 0;

const increment = () => {
count += 1;
$: isDeniedOperation = !action.operation || (action.operation === 'REMOVE' && count === 0);

const updateCountValue = () => {
if (isDeniedOperation) return;

count += action.operation === 'ADD' ? 1 : -1;
};

const counterTransition = (_, { duration }: { duration: number }) => {
return {
duration,
delay: 300,
tick: (t) => {
if (t === 1 && !isDeniedOperation) updateCountValue();
},
css: (t) => {
if (isDeniedOperation) return '';

const easedDistance = backIn(t) * 74;

return `
transform: translateY(${
action.operation === 'REMOVE' ? `-${easedDistance}px` : `${easedDistance}px`
});
`;
}
};
};
</script>

<button on:click={increment}>
Clicks: {count}
</button>
<div class="counter-container">
{#key action}
<div in:counterTransition={{ duration: 500 }}>
<h1>{count + 1}</h1>
<h1>{count}</h1>
<h1>{count - 1}</h1>
</div>
{/key}
</div>

<p>Counts so far</p>

<div class="counter-controls">
<button
class:disabled={count === 0}
on:click={() => (action.operation = 'REMOVE')}
aria-label="Decrease the counter by one"
>
<svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.25 1H15.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<div>{count}</div>
<button on:click={() => (action.operation = 'ADD')} aria-label="Increase the counter by one">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
<path
fill-rule="evenodd"
d="M9,0 L9,8 L16,8 L16,9 L9,9 L9,17 L8,17 L8,9 L0,9 L0,8 L8,8 L8,0 L9,0 Z"
transform="translate(3 3)"
/>
</svg>
</button>
</div>

<style>
button {
font-family: inherit;
font-size: inherit;
padding: 1em 2em;
color: #ff3e00;
background-color: rgba(255, 62, 0, 0.1);
border-radius: 2em;
border: 2px solid #ff3e00;
outline: none;
width: 200px;
height: 60px;
font-variant-numeric: tabular-nums;
}

button:focus,
button:hover {
border: 3px solid #ff3e00;
}

button:active {
background-color: rgba(255, 62, 0, 0.2);
.counter-controls {
display: flex;
}

.counter-controls button.disabled {
opacity: 0.3;
}

.counter-controls button {
width: 36px;
margin: 0 6px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 4px;
background-color: transparent;
color: var(--text-color);
font-size: 2rem;
transition: background-color 0.2s linear;
}

.counter-controls button:hover {
background-color: var(--secondary-color);
}

.counter-controls button svg path {
stroke: var(--text-color);
fill: var(--text-color);
}

.counter-controls div {
min-width: 32px;
padding: 8px 16px;
border-radius: 4px;
background-color: var(--pure-white);
font-weight: bold;
text-align: center;
color: var(--secondary-text-color);
}

p {
font-size: 0.75rem;
color: var(--text-color);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.1em;
}

.counter-container {
width: 100%;
height: 90px;
overflow: hidden;
text-align: center;
position: relative;
}

.counter-container h1 {
font-weight: 400;
transform: translateY(-60px);
color: var(--accent-color);
font-size: 4rem;
margin: 0;
}

.counter-container:after {
content: '';
width: 100%;
height: 140px;
position: absolute;
top: -25px;
left: 0;
}
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<script lang="ts">
import { afterUpdate } from 'svelte';
import { isDarkModeStore } from '../stores';

let isDarkMode = false;

afterUpdate(() => {
window.document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
});

$: {
isDarkModeStore.set(isDarkMode);
}

const toggleMode = () => {
isDarkMode = !isDarkMode;
};
</script>

<button on:click={toggleMode} aria-label="Toggle theme mode between light and dark">
{#if isDarkMode}
<img src="sun-icon.svg" alt="Toggle theme mode to light" />
{:else}
<img src="moon-icon.svg" alt="Toggle theme mode to dark" />
{/if}
</button>

<style>
button {
background-color: transparent;
border: 0;
position: absolute;
top: 16px;
right: 10px;
}

@media (min-width: 480px) {
button {
top: 24px;
right: 32px;
}
}
</style>
Loading