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