Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit e8d29ab
Showing
33 changed files
with
16,130 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
.DS_Store | ||
node_modules | ||
/build | ||
/.svelte-kit | ||
/package | ||
.env | ||
.env.* | ||
!.env.example | ||
|
||
# Ignore files for PNPM, NPM and YARN | ||
pnpm-lock.yaml | ||
package-lock.json | ||
yarn.lock |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
module.exports = { | ||
root: true, | ||
parser: '@typescript-eslint/parser', | ||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], | ||
plugins: ['svelte3', '@typescript-eslint'], | ||
ignorePatterns: ['*.cjs'], | ||
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], | ||
settings: { | ||
'svelte3/typescript': () => require('typescript') | ||
}, | ||
parserOptions: { | ||
sourceType: 'module', | ||
ecmaVersion: 2020 | ||
}, | ||
env: { | ||
browser: true, | ||
es2017: true, | ||
node: true | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
.DS_Store | ||
node_modules | ||
/build | ||
/.svelte-kit | ||
/package | ||
.env | ||
.env.* | ||
!.env.example | ||
.vercel | ||
.output | ||
.idea |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
engine-strict=true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
.DS_Store | ||
node_modules | ||
/build | ||
/.svelte-kit | ||
/package | ||
.env | ||
.env.* | ||
!.env.example | ||
|
||
# Ignore files for PNPM, NPM and YARN | ||
pnpm-lock.yaml | ||
package-lock.json | ||
yarn.lock |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"useTabs": true, | ||
"singleQuote": true, | ||
"trailingComma": "none", | ||
"printWidth": 100, | ||
"plugins": ["prettier-plugin-svelte"], | ||
"pluginSearchDirs": ["."], | ||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
A hello world app for Svelte + 100ms. Built with SvelteKit. | ||
|
||
### Steps I followed | ||
|
||
1. Svelte kit create, git init | ||
```sh | ||
> npm create svelte@latest svelte-hms-world | ||
> cd svelte-hms-world | ||
> yarn install | ||
> yarn dev --open | ||
> git init && git add -A && git commit -m "Initial commit" | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
{ | ||
"name": "svelte-hms-world", | ||
"version": "0.0.1", | ||
"scripts": { | ||
"dev": "vite dev", | ||
"build": "vite build", | ||
"preview": "vite preview", | ||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", | ||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", | ||
"lint": "prettier --plugin-search-dir . --check . && eslint .", | ||
"format": "prettier --plugin-search-dir . --write ." | ||
}, | ||
"devDependencies": { | ||
"@fontsource/fira-mono": "^4.5.0", | ||
"@neoconfetti/svelte": "^1.0.0", | ||
"@sveltejs/adapter-auto": "next", | ||
"@sveltejs/kit": "next", | ||
"@types/cookie": "^0.5.1", | ||
"@typescript-eslint/eslint-plugin": "^5.27.0", | ||
"@typescript-eslint/parser": "^5.27.0", | ||
"eslint": "^8.16.0", | ||
"eslint-config-prettier": "^8.3.0", | ||
"eslint-plugin-svelte3": "^4.0.0", | ||
"prettier": "^2.6.2", | ||
"prettier-plugin-svelte": "^2.7.0", | ||
"svelte": "^3.46.0", | ||
"svelte-check": "^2.7.1", | ||
"svelte-preprocess": "^4.10.6", | ||
"tslib": "^2.3.1", | ||
"typescript": "^4.7.4", | ||
"vite": "^3.1.0" | ||
}, | ||
"type": "module" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
// See https://kit.svelte.dev/docs/types#app | ||
// for information about these interfaces | ||
// and what to do when importing types | ||
declare namespace App {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> | ||
<meta name="viewport" content="width=device-width" /> | ||
%sveltekit.head% | ||
</head> | ||
<body data-sveltekit-prefetch> | ||
<div>%sveltekit.body%</div> | ||
</body> | ||
</html> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<script> | ||
import Header from './Header.svelte'; | ||
import './styles.css'; | ||
</script> | ||
|
||
<div class="app"> | ||
<Header /> | ||
|
||
<main> | ||
<slot /> | ||
</main> | ||
|
||
<footer> | ||
<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p> | ||
</footer> | ||
</div> | ||
|
||
<style> | ||
.app { | ||
display: flex; | ||
flex-direction: column; | ||
min-height: 100vh; | ||
} | ||
main { | ||
flex: 1; | ||
display: flex; | ||
flex-direction: column; | ||
padding: 1rem; | ||
width: 100%; | ||
max-width: 64rem; | ||
margin: 0 auto; | ||
box-sizing: border-box; | ||
} | ||
footer { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
padding: 12px; | ||
} | ||
footer a { | ||
font-weight: bold; | ||
} | ||
@media (min-width: 480px) { | ||
footer { | ||
padding: 12px 0; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
<script> | ||
import Counter from './Counter.svelte'; | ||
import welcome from '$lib/images/svelte-welcome.webp'; | ||
import welcome_fallback from '$lib/images/svelte-welcome.png'; | ||
</script> | ||
|
||
<svelte:head> | ||
<title>Home</title> | ||
<meta name="description" content="Svelte demo app" /> | ||
</svelte:head> | ||
|
||
<section> | ||
<h1> | ||
<span class="welcome"> | ||
<picture> | ||
<source srcset={welcome} type="image/webp" /> | ||
<img src={welcome_fallback} alt="Welcome" /> | ||
</picture> | ||
</span> | ||
|
||
to your new<br />SvelteKit app | ||
</h1> | ||
|
||
<h2> | ||
try editing <strong>src/routes/+page.svelte</strong> | ||
</h2> | ||
|
||
<Counter /> | ||
</section> | ||
|
||
<style> | ||
section { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
flex: 0.6; | ||
} | ||
h1 { | ||
width: 100%; | ||
} | ||
.welcome { | ||
display: block; | ||
position: relative; | ||
width: 100%; | ||
height: 0; | ||
padding: 0 0 calc(100% * 495 / 2048) 0; | ||
} | ||
.welcome img { | ||
position: absolute; | ||
width: 100%; | ||
height: 100%; | ||
top: 0; | ||
display: block; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// since there's no dynamic data here, we can prerender | ||
// it so that it gets served as a static asset in production | ||
export const prerender = true; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
<script lang="ts"> | ||
import { spring } from 'svelte/motion'; | ||
let count = 0; | ||
const displayed_count = spring(); | ||
$: displayed_count.set(count); | ||
$: offset = modulo($displayed_count, 1); | ||
function modulo(n: number, m: number) { | ||
// handle negative numbers | ||
return ((n % m) + m) % m; | ||
} | ||
</script> | ||
|
||
<div class="counter"> | ||
<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one"> | ||
<svg aria-hidden="true" viewBox="0 0 1 1"> | ||
<path d="M0,0.5 L1,0.5" /> | ||
</svg> | ||
</button> | ||
|
||
<div class="counter-viewport"> | ||
<div class="counter-digits" style="transform: translate(0, {100 * offset}%)"> | ||
<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong> | ||
<strong>{Math.floor($displayed_count)}</strong> | ||
</div> | ||
</div> | ||
|
||
<button on:click={() => (count += 1)} aria-label="Increase the counter by one"> | ||
<svg aria-hidden="true" viewBox="0 0 1 1"> | ||
<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" /> | ||
</svg> | ||
</button> | ||
</div> | ||
|
||
<style> | ||
.counter { | ||
display: flex; | ||
border-top: 1px solid rgba(0, 0, 0, 0.1); | ||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); | ||
margin: 1rem 0; | ||
} | ||
.counter button { | ||
width: 2em; | ||
padding: 0; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
border: 0; | ||
background-color: transparent; | ||
touch-action: manipulation; | ||
font-size: 2rem; | ||
} | ||
.counter button:hover { | ||
background-color: var(--color-bg-1); | ||
} | ||
svg { | ||
width: 25%; | ||
height: 25%; | ||
} | ||
path { | ||
vector-effect: non-scaling-stroke; | ||
stroke-width: 2px; | ||
stroke: #444; | ||
} | ||
.counter-viewport { | ||
width: 8em; | ||
height: 4em; | ||
overflow: hidden; | ||
text-align: center; | ||
position: relative; | ||
} | ||
.counter-viewport strong { | ||
position: absolute; | ||
display: flex; | ||
width: 100%; | ||
height: 100%; | ||
font-weight: 400; | ||
color: var(--color-theme-1); | ||
font-size: 4rem; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
.counter-digits { | ||
position: absolute; | ||
width: 100%; | ||
height: 100%; | ||
} | ||
.hidden { | ||
top: -100%; | ||
user-select: none; | ||
} | ||
</style> |
Oops, something went wrong.