mirror of
https://github.com/apricote/ein-pfeil-am-rechten-fleck.de.git
synced 2026-01-13 13:01:02 +00:00
add sveltekit version
This commit is contained in:
parent
2f522be388
commit
d1c0eb8d17
20 changed files with 3252 additions and 0 deletions
20
.eslintrc.cjs
Normal file
20
.eslintrc.cjs
Normal file
|
|
@ -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: 2019
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
es2017: true,
|
||||||
|
node: true
|
||||||
|
}
|
||||||
|
};
|
||||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/.svelte
|
||||||
|
/build
|
||||||
|
/functions
|
||||||
1
.npmrc
Normal file
1
.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
engine-strict=true
|
||||||
4
.prettierignore
Normal file
4
.prettierignore
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.svelte/**
|
||||||
|
static/**
|
||||||
|
build/**
|
||||||
|
node_modules/**
|
||||||
3
.prettierrc
Normal file
3
.prettierrc
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"printWidth": 100
|
||||||
|
}
|
||||||
38
README.md
Normal file
38
README.md
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
# create-svelte
|
||||||
|
|
||||||
|
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
|
||||||
|
|
||||||
|
## Creating a project
|
||||||
|
|
||||||
|
If you're seeing this, you've probably already done this step. Congrats!
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# create a new project in the current directory
|
||||||
|
npm init svelte@next
|
||||||
|
|
||||||
|
# create a new project in my-app
|
||||||
|
npm init svelte@next my-app
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note: the `@next` is temporary
|
||||||
|
|
||||||
|
## Developing
|
||||||
|
|
||||||
|
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# or start the server and open the app in a new browser tab
|
||||||
|
npm run dev -- --open
|
||||||
|
```
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
|
||||||
2951
package-lock.json
generated
Normal file
2951
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
34
package.json
Normal file
34
package.json
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
{
|
||||||
|
"name": "website",
|
||||||
|
"version": "0.2.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "svelte-kit dev",
|
||||||
|
"build": "svelte-kit build",
|
||||||
|
"preview": "svelte-kit preview",
|
||||||
|
"lint": "prettier --check . && eslint --ignore-path .gitignore .",
|
||||||
|
"format": "prettier --write ."
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@paypal/checkout-server-sdk": "^1.0.2",
|
||||||
|
"@sveltejs/adapter-vercel": "next",
|
||||||
|
"@sveltejs/kit": "next",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^4.19.0",
|
||||||
|
"@typescript-eslint/parser": "^4.19.0",
|
||||||
|
"autoprefixer": "^10.2.5",
|
||||||
|
"cssnano": "^5.0.1",
|
||||||
|
"eslint": "^7.22.0",
|
||||||
|
"eslint-config-prettier": "^8.1.0",
|
||||||
|
"eslint-plugin-svelte3": "^3.1.0",
|
||||||
|
"postcss": "^8.2.10",
|
||||||
|
"postcss-load-config": "^3.0.1",
|
||||||
|
"prettier": "~2.2.1",
|
||||||
|
"prettier-plugin-svelte": "^2.2.0",
|
||||||
|
"svelte": "^3.29.0",
|
||||||
|
"svelte-preprocess": "^4.7.1",
|
||||||
|
"tailwindcss": "^2.1.1",
|
||||||
|
"tslib": "^2.0.0",
|
||||||
|
"typescript": "^4.0.0",
|
||||||
|
"vite": "^2.1.0"
|
||||||
|
},
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
22
postcss.config.cjs
Normal file
22
postcss.config.cjs
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
const tailwindcss = require("tailwindcss");
|
||||||
|
const autoprefixer = require("autoprefixer");
|
||||||
|
const cssnano = require("cssnano");
|
||||||
|
|
||||||
|
const mode = process.env.NODE_ENV;
|
||||||
|
const dev = mode === "development";
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
// Some plugins, like postcss-nested, need to run before Tailwind
|
||||||
|
|
||||||
|
tailwindcss,
|
||||||
|
|
||||||
|
// But others, like autoprefixer, need to run after
|
||||||
|
|
||||||
|
autoprefixer,
|
||||||
|
|
||||||
|
!dev && cssnano({
|
||||||
|
preset: "default",
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
12
src/app.html
Normal file
12
src/app.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
%svelte.head%
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-900">
|
||||||
|
<div id="svelte">%svelte.body%</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4
src/app.postcss
Normal file
4
src/app.postcss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
/* Write your global styles here, in PostCSS syntax */
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
3
src/global.d.ts
vendored
Normal file
3
src/global.d.ts
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
/// <reference types="@sveltejs/kit" />
|
||||||
|
/// <reference types="svelte" />
|
||||||
|
/// <reference types="vite/client" />
|
||||||
14
src/lib/layout/NavLink.svelte
Normal file
14
src/lib/layout/NavLink.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let href: string;
|
||||||
|
export let text: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<li class="block w-1/2 bg-amber-800">
|
||||||
|
<a
|
||||||
|
class="text-gray-300 hover:text-amber-200 focus:text-amber-200 focus:outline-none transition"
|
||||||
|
alt=""
|
||||||
|
{href}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
25
src/routes/$layout.svelte
Normal file
25
src/routes/$layout.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<script>
|
||||||
|
import "../app.postcss";
|
||||||
|
import NavLink from "$lib/layout/NavLink.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header class="flex justify-center pt-4">
|
||||||
|
<img height="150" width="300" />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul class="m-4 text-center justify-center">
|
||||||
|
<NavLink href="/#intro" text="Einführung" />
|
||||||
|
<NavLink href="/#heroes" text="Unsere Helden" />
|
||||||
|
<NavLink href="/#listen" text="Hörprobe" />
|
||||||
|
<NavLink href="/buy" text="Shop" />
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="bg-amber-200 max-w-md">
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<a href="imprint">Impressum & Datenschutz</a>
|
||||||
|
</footer>
|
||||||
0
src/routes/buy.svelte
Normal file
0
src/routes/buy.svelte
Normal file
0
src/routes/download.svelte
Normal file
0
src/routes/download.svelte
Normal file
31
src/routes/index.svelte
Normal file
31
src/routes/index.svelte
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
<h1>Welcome to SvelteKit</h1>
|
||||||
|
<p>
|
||||||
|
Visit <a class="text-blue-600 underline" href="https://kit.svelte.dev">kit.svelte.dev</a> to read the
|
||||||
|
documentation
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p id="intro">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in gravida sem. Fusce tincidunt
|
||||||
|
massa quis mauris posuere dictum. Aenean malesuada odio at congue luctus. Quisque rutrum, est at
|
||||||
|
maximus pretium, justo mi fringilla augue, vel dictum leo elit id arcu. Nullam lacus turpis,
|
||||||
|
sagittis quis egestas a, tincidunt in lectus. Cras porta libero mauris, et condimentum magna
|
||||||
|
venenatis id. Integer eu egestas lacus.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p id="heroes">
|
||||||
|
Quisque ornare tincidunt diam, sit amet sollicitudin turpis porta eu. In maximus vel nunc sit amet
|
||||||
|
congue. Aliquam dignissim ex at sollicitudin placerat. Praesent quis felis eu lacus vehicula
|
||||||
|
rutrum nec vel metus. Maecenas hendrerit posuere ex in tempus. In hendrerit lacinia lacus ut
|
||||||
|
dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
||||||
|
Curabitur vitae enim hendrerit, scelerisque sapien non, facilisis magna. Nunc molestie iaculis
|
||||||
|
dapibus. Donec porttitor vestibulum libero, in auctor sem convallis eu.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p id="listen">
|
||||||
|
Cras luctus commodo pharetra. Integer sollicitudin lectus non nibh congue egestas. Quisque
|
||||||
|
lobortis, magna vitae consectetur mollis, purus dui sollicitudin ligula, vel condimentum nunc
|
||||||
|
justo at tellus. Quisque ut ligula laoreet, pellentesque ligula nec, venenatis lacus. Quisque
|
||||||
|
magna nulla, mattis ac libero in, suscipit consectetur ex. Donec eget sem sollicitudin, varius
|
||||||
|
massa in, sodales neque. Vivamus fermentum tempus nunc, nec ultrices ante faucibus nec. Vivamus
|
||||||
|
vel sollicitudin velit.
|
||||||
|
</p>
|
||||||
21
svelte.config.cjs
Normal file
21
svelte.config.cjs
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
const sveltePreprocess = require('svelte-preprocess');
|
||||||
|
const vercel = require('@sveltejs/adapter-vercel');
|
||||||
|
const pkg = require('./package.json');
|
||||||
|
|
||||||
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
|
module.exports = {
|
||||||
|
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||||
|
// for more information about preprocessors
|
||||||
|
preprocess: [
|
||||||
|
sveltePreprocess({
|
||||||
|
postcss: true
|
||||||
|
})
|
||||||
|
],
|
||||||
|
|
||||||
|
kit: {
|
||||||
|
adapter: vercel(),
|
||||||
|
|
||||||
|
// hydrate the <div id="svelte"> element in src/app.html
|
||||||
|
target: '#svelte'
|
||||||
|
}
|
||||||
|
};
|
||||||
34
tailwind.config.cjs
Normal file
34
tailwind.config.cjs
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
|
||||||
|
const colors = require("tailwindcss/colors");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: "aot",
|
||||||
|
purge: {
|
||||||
|
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||||
|
options: {
|
||||||
|
defaultExtractor: (content) => [
|
||||||
|
// If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
|
||||||
|
...tailwindExtractor(content),
|
||||||
|
// Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
|
||||||
|
...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
|
||||||
|
([_match, group, ..._rest]) => group
|
||||||
|
),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
safelist: [/^svelte-[\d\w]+$/],
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
colors: {
|
||||||
|
transparent: "transparent",
|
||||||
|
current: "currentColor",
|
||||||
|
gray: colors.blueGray,
|
||||||
|
amber: colors.amber,
|
||||||
|
blue: colors.fuchsia,
|
||||||
|
},
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
30
tsconfig.json
Normal file
30
tsconfig.json
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"module": "es2020",
|
||||||
|
"lib": ["es2020"],
|
||||||
|
"target": "es2019",
|
||||||
|
/**
|
||||||
|
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
|
||||||
|
to enforce using \`import type\` instead of \`import\` for Types.
|
||||||
|
*/
|
||||||
|
"importsNotUsedAsValues": "error",
|
||||||
|
"isolatedModules": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
/**
|
||||||
|
To have warnings/errors of the Svelte compiler at the correct position,
|
||||||
|
enable source maps by default.
|
||||||
|
*/
|
||||||
|
"sourceMap": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"paths": {
|
||||||
|
"$lib/*": ["src/lib/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue