Compare commits
2 Commits
542cc5a0ee
...
72f31aff63
| Author | SHA1 | Date |
|---|---|---|
 Adam Veldhousen
|
72f31aff63
|
3 years ago |
|
Adam Veldhousen
|
02b0f00cea
|
3 years ago |
@ -0,0 +1,25 @@
|
||||
version: "3.9"
|
||||
|
||||
services:
|
||||
db:
|
||||
image: postgres:13-alpine
|
||||
volumes:
|
||||
- ./data:/var/lib/postgresql/data
|
||||
- ./schema:/docker-entrypoint-initdb.d:ro
|
||||
environment:
|
||||
- POSTGRES_DB=bodytrack
|
||||
- POSTGRES_USER=postgres
|
||||
- POSTGRES_PASSWORD=admin
|
||||
ports:
|
||||
- 5432:5432
|
||||
graphql:
|
||||
image: hasura/graphql-engine
|
||||
environment:
|
||||
- HASURA_GRAPHQL_DATABASE_URL=postgres://hasura:hasura-user@db:5432/bodytrack
|
||||
- HASURA_GRAPHQL_ENABLE_CONSOLE=true
|
||||
- HASURA_GRAPHQL_ADMIN_SECRET=bodytrack-graphql
|
||||
- HASURA_GRAPHQL_UNAUTHORIZED_ROLE=anonymous
|
||||
ports:
|
||||
- 8080:8080
|
||||
depends_on:
|
||||
- db
|
||||
@ -0,0 +1,22 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2019,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": ["svelte3"],
|
||||
"extends": ["eslint:recommended"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["**/*.svelte"],
|
||||
"processor": "svelte3/svelte3"
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"prettier/prettier": "error",
|
||||
"svelte3/lint-template": 2
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,3 @@
|
||||
/node_modules/
|
||||
/public/build/
|
||||
.vscode/
|
||||
.DS_Store
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
.cache
|
||||
node_modules
|
||||
dist
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"svelteSortOrder": "styles-scripts-markup",
|
||||
"svelteStrictMode": true,
|
||||
"svelteBracketNewLine": true,
|
||||
"svelteAllowShorthand": true
|
||||
}
|
||||
@ -1,10 +1,41 @@
|
||||
# Svelte TypeScript Tailwindcss Setup
|
||||
# svelte-tailwind-parcel-starter
|
||||
|
||||
svelte template based on the default svelte/template with enabled typescript and tailwindcss support.
|
||||
Svelte.js starter pack with [Yarn](https://yarnpkg.com/),
|
||||
[Tailwind](https://tailwindcss.com/) and [Parcel](https://parceljs.org/). Yummy mummy!
|
||||
|
||||
```bash
|
||||
npx degit munxar/svelte-template my-svelte-project
|
||||
cd my-svelte-project
|
||||
npm i
|
||||
npm run dev
|
||||
The starter pack also includes
|
||||
[tailwindcss-font-inter](https://github.com/semencov/tailwindcss-font-inter)
|
||||
plugin for Tailwind plus Prettier and Eslint plugins with opinionated settings.
|
||||
|
||||
This is the code for my article [Svelte + Tailwind + Parcel = Awesome!](https://codechips.me/svelte-tailwind-parcel-awesome/).
|
||||
|
||||
## Getting started
|
||||
|
||||
```
|
||||
# create new project
|
||||
$ npx degit codechips/svelte-tailwind-parcel-starter facebook-killer
|
||||
$ cd facebook-killer
|
||||
|
||||
# install required packages
|
||||
$ yarn
|
||||
|
||||
# run the app
|
||||
$ yarn start
|
||||
|
||||
# build the app
|
||||
$ yarn build
|
||||
```
|
||||
|
||||
## Testing
|
||||
|
||||
Yep. You should definitely test your code.
|
||||
|
||||
## Disclaimer
|
||||
|
||||
I take no responsibility if you get paid less because you have become more
|
||||
productive with these awesome tools and suddenly started getting things done
|
||||
faster.
|
||||
|
||||
## There is more!
|
||||
|
||||
For more interesting stuff like this follow me on [Twitter](https://twitter.com/codechips) or check out my blog https://codechips.me
|
||||
|
||||
@ -1,37 +1,32 @@
|
||||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"build": "NODE_ENV=production rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public",
|
||||
"validate": "svelte-check"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"@rollup/plugin-replace": "^2.4.2",
|
||||
"@rollup/plugin-typescript": "^8.1.0",
|
||||
"@tsconfig/svelte": "^1.0.0",
|
||||
"autoprefixer": "^10.2.3",
|
||||
"postcss": "^8.2.4",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-check": "^1.0.0",
|
||||
"svelte-preprocess": "^4.6.3",
|
||||
"tailwindcss": "^2.0.2",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^4.1.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@urql/svelte": "^1.2.1",
|
||||
"graphql": "^15.5.0",
|
||||
"sirv-cli": "^1.0.0",
|
||||
"svelte-router-spa": "^6.0.2",
|
||||
"urql": "^2.0.2"
|
||||
}
|
||||
"name": "svelte-parcel-talwind-starter",
|
||||
"version": "1.0.0",
|
||||
"description": "Svelte with Tailwind and Parcel",
|
||||
"main": "./src/main.js",
|
||||
"author": "codechips",
|
||||
"license": "MIT",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"start": "parcel src/index.html -p 5000",
|
||||
"build": "rm -rf dist && parcel build src/index.html --no-source-maps"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 1 chrome versions"
|
||||
],
|
||||
"devDependencies": {
|
||||
"eslint-plugin-svelte3": "^2.7.3",
|
||||
"parcel-bundler": "^1.12.4",
|
||||
"parcel-plugin-svelte": "^4.0.6",
|
||||
"postcss-load-config": "^3.0.0",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"prettier": "^2.1.2",
|
||||
"prettier-plugin-svelte": "^1.4.0",
|
||||
"svelte": "^3.29.0",
|
||||
"tailwindcss": "^1.8.10",
|
||||
"tailwindcss-font-inter": "^1.0.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@urql/svelte": "^1.2.1",
|
||||
"graphql": "^15.5.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
const postcssPresetEnv = require('postcss-preset-env');
|
||||
|
||||
const presetEnv = postcssPresetEnv({
|
||||
/* use stage 3 features + css nesting rules */
|
||||
stage: 3,
|
||||
features: {
|
||||
'nesting-rules': true,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
plugins: [require('tailwindcss'), presetEnv],
|
||||
};
|
||||
|
Before Width: | Height: | Size: 3.1 KiB |
@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
|
||||
<title>Svelte app</title>
|
||||
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link rel="stylesheet" href="/build/bundle.css" />
|
||||
|
||||
<!-- <script> window.process = { env: "development"}; </script> -->
|
||||
<script defer src="/build/bundle.js"></script>
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
</html>
|
||||
@ -1,79 +0,0 @@
|
||||
import svelte from "rollup-plugin-svelte";
|
||||
import commonjs from "@rollup/plugin-commonjs";
|
||||
import replace from "@rollup/plugin-replace";
|
||||
import resolve from "@rollup/plugin-node-resolve";
|
||||
import livereload from "rollup-plugin-livereload";
|
||||
import { terser } from "rollup-plugin-terser";
|
||||
import sveltePreprocess from "svelte-preprocess";
|
||||
import typescript from "@rollup/plugin-typescript";
|
||||
import css from "rollup-plugin-css-only";
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
function serve() {
|
||||
let server;
|
||||
|
||||
function toExit() {
|
||||
if (server) server.kill(0);
|
||||
}
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (server) return;
|
||||
server = require("child_process").spawn(
|
||||
"npm",
|
||||
["run", "start", "--", "--dev"],
|
||||
{
|
||||
stdio: ["ignore", "inherit", "inherit"],
|
||||
shell: true,
|
||||
}
|
||||
);
|
||||
|
||||
process.on("SIGTERM", toExit);
|
||||
process.on("exit", toExit);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
input: "src/main.ts",
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: "iife",
|
||||
name: "app",
|
||||
file: "public/build/bundle.js",
|
||||
},
|
||||
plugins: [
|
||||
replace({
|
||||
"process.env": production ? '"production"' : '"dev"',
|
||||
"window.process.env": production ? '"production"' : '"dev"',
|
||||
}),
|
||||
svelte({
|
||||
// add postcss config with tailwind
|
||||
preprocess: sveltePreprocess({
|
||||
postcss: {
|
||||
plugins: [require("tailwindcss"), require("autoprefixer")],
|
||||
},
|
||||
}),
|
||||
compilerOptions: {
|
||||
dev: !production,
|
||||
},
|
||||
}),
|
||||
css({ output: "bundle.css" }),
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ["svelte"],
|
||||
}),
|
||||
commonjs(),
|
||||
typescript({
|
||||
sourceMap: !production,
|
||||
inlineSources: !production,
|
||||
}),
|
||||
!production && serve(),
|
||||
!production && livereload("public"),
|
||||
production && terser(),
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false,
|
||||
},
|
||||
};
|
||||
@ -1,17 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { initClient } from "@urql/svelte";
|
||||
initClient({ url: "http://localhost:8080/v1/graphql" });
|
||||
<script>
|
||||
import { initClient, query, operationStore } from '@urql/svelte';
|
||||
import ExerciseCard from './components/ExerciseCard.svelte';
|
||||
|
||||
import Button from "./Button.svelte";
|
||||
import Logo from "./Logo.svelte";
|
||||
import Tailwind from "./Tailwind.svelte";
|
||||
import ExerciseList from "./components/ExerciseList.svelte";
|
||||
initClient({
|
||||
url: 'http://localhost:8080/v1/graphql',
|
||||
});
|
||||
|
||||
const exdata = operationStore(`
|
||||
query {
|
||||
workouts_exercises {
|
||||
name
|
||||
instructions
|
||||
muscletarget
|
||||
tutoriallink
|
||||
}
|
||||
}`);
|
||||
query(exdata);
|
||||
</script>
|
||||
|
||||
<Tailwind />
|
||||
<main class="container mx-auto">
|
||||
<div class="bg-gray-200 px-4 py-2 rounded">Hello Tailwind!</div>
|
||||
<Button>A Button</Button>
|
||||
<Logo name={"A Logo"} />
|
||||
</main>
|
||||
<ExerciseList />
|
||||
<div class="font-inter flex flex-grow h-screen justify-center items-center">
|
||||
{#if $exdata.fetching}
|
||||
<p>Loading...</p>
|
||||
{:else if $exdata.error}
|
||||
<p>{$exdata.error.message}</p>
|
||||
{:else}
|
||||
<ul>
|
||||
{#each $exdata.data.workouts_exercises as ex}
|
||||
<li>
|
||||
<ExerciseCard exercise="{ex}" />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<button>
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
<style lang="postcss">
|
||||
button {
|
||||
@apply bg-blue-800 text-white px-3 py-2 rounded hover:bg-blue-900;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let name = "Logo";
|
||||
</script>
|
||||
|
||||
<div class:bg-purple-100={true}>{name}</div>
|
||||
@ -1,5 +0,0 @@
|
||||
<style global lang="postcss">
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let exercise;
|
||||
console.log(exercise);
|
||||
</script>
|
||||
|
||||
<a href="{exercise.tutoriallink}" target="_blank">
|
||||
<article>
|
||||
<header>{exercise.name}</header>
|
||||
<section>
|
||||
<p>target: <span>{exercise.muscletarget}</span></p>
|
||||
<p>{exercise.instructions}</p>
|
||||
</section>
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
</article>
|
||||
</a>
|
||||
@ -1,29 +0,0 @@
|
||||
<script>
|
||||
import { operationStore, query } from "@urql/svelte";
|
||||
|
||||
const exercises = operationStore(`
|
||||
query exercises {
|
||||
workouts_exercises {
|
||||
name,
|
||||
instructions,
|
||||
muscletarget,
|
||||
tutoriallink,
|
||||
videolink
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
query(exercises);
|
||||
</script>
|
||||
|
||||
{#if $exercises.fetching}
|
||||
<p>Loading...</p>
|
||||
{:else if $exercises.error}
|
||||
<p>Oh no... {$exercises.error.message}</p>
|
||||
{:else}
|
||||
<ul>
|
||||
{#each $exercises.data.exercises as ex}
|
||||
<li>{ex.name}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>svelte.js + tailwind.css + parcel.js</title>
|
||||
<link rel="stylesheet" href="./global.pcss" />
|
||||
</head>
|
||||
|
||||
<body class="font-inter bg-white antialiased text-gray-800">
|
||||
<script defer src="./main.js"></script>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,10 @@
|
||||
if (module.hot) {
|
||||
module.hot.accept()
|
||||
}
|
||||
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({ target: document.body });
|
||||
|
||||
export default app;
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
});
|
||||
|
||||
export default app;
|
||||
@ -1,24 +1,28 @@
|
||||
const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
|
||||
|
||||
module.exports = {
|
||||
future: {
|
||||
removeDeprecatedGapUtilities: true,
|
||||
},
|
||||
// experimental: {
|
||||
// uniformColorPalette: true,
|
||||
// extendedFontSizeScale: true,
|
||||
// applyComplexClasses: true,
|
||||
// },
|
||||
purge: {
|
||||
content: ["src/**/*.svelte", "public/index.html"],
|
||||
options: {
|
||||
defaultExtractor: (content) => [
|
||||
...tailwindExtractor(content),
|
||||
...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
|
||||
([_match, group, ..._rest]) => group
|
||||
),
|
||||
],
|
||||
keyframes: true,
|
||||
},
|
||||
content: ['./src/index.html', './src/**/*.svelte'],
|
||||
whitelistPatterns: [/svelte-/],
|
||||
},
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
interFontFeatures: {
|
||||
default: ['calt', 'liga', 'kern'],
|
||||
numeric: ['tnum', 'salt', 'ss02'],
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
variants: {},
|
||||
plugins: [
|
||||
require('tailwindcss-font-inter')({
|
||||
importFontFace: true,
|
||||
disableUnusedFeatures: true,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue