Compare commits
2 Commits
542cc5a0ee
...
72f31aff63
| Author | SHA1 | Date |
|---|---|---|
 Adam Veldhousen
|
72f31aff63
|
|
|
Adam Veldhousen
|
02b0f00cea
|
|
|
@ -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
|
||||||
|
|
@ -300,6 +300,23 @@
|
||||||
"name": "exercises"
|
"name": "exercises"
|
||||||
},
|
},
|
||||||
"select_permissions": [
|
"select_permissions": [
|
||||||
|
{
|
||||||
|
"role": "anonymous",
|
||||||
|
"permission": {
|
||||||
|
"columns": [
|
||||||
|
"id",
|
||||||
|
"name",
|
||||||
|
"muscletarget",
|
||||||
|
"forcetype",
|
||||||
|
"mechanicstype",
|
||||||
|
"instructions",
|
||||||
|
"videolink",
|
||||||
|
"tutoriallink"
|
||||||
|
],
|
||||||
|
"filter": {},
|
||||||
|
"limit": 64
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"role": "user",
|
"role": "user",
|
||||||
"permission": {
|
"permission": {
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ start-db: .data
|
||||||
stop-db:
|
stop-db:
|
||||||
@docker rm -f -v bodytrack-db
|
@docker rm -f -v bodytrack-db
|
||||||
|
|
||||||
start-graphql: stop-graphql
|
start-graphql:
|
||||||
@docker run -it -d --name=bodytrack-graphql \
|
@docker run -it -d --name=bodytrack-graphql \
|
||||||
-p 8080:8080 \
|
-p 8080:8080 \
|
||||||
-e HASURA_GRAPHQL_DATABASE_URL=postgres://hasura:hasura-user@bodytrack-db:5432/bodytrack \
|
-e HASURA_GRAPHQL_DATABASE_URL=postgres://hasura:hasura-user@bodytrack-db:5432/bodytrack \
|
||||||
|
|
|
||||||
|
|
@ -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/
|
.cache
|
||||||
/public/build/
|
node_modules
|
||||||
.vscode/
|
dist
|
||||||
.DS_Store
|
|
||||||
package-lock.json
|
|
||||||
yarn.lock
|
|
||||||
|
|
|
||||||
|
|
@ -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!
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
```bash
|
|
||||||
npx degit munxar/svelte-template my-svelte-project
|
|
||||||
cd my-svelte-project
|
|
||||||
npm i
|
|
||||||
npm run dev
|
|
||||||
```
|
```
|
||||||
|
# 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",
|
"name": "svelte-parcel-talwind-starter",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
|
"description": "Svelte with Tailwind and Parcel",
|
||||||
|
"main": "./src/main.js",
|
||||||
|
"author": "codechips",
|
||||||
|
"license": "MIT",
|
||||||
|
"private": false,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "NODE_ENV=production rollup -c",
|
"start": "parcel src/index.html -p 5000",
|
||||||
"dev": "rollup -c -w",
|
"build": "rm -rf dist && parcel build src/index.html --no-source-maps"
|
||||||
"start": "sirv public",
|
|
||||||
"validate": "svelte-check"
|
|
||||||
},
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"last 1 chrome versions"
|
||||||
|
],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-commonjs": "^17.0.0",
|
"eslint-plugin-svelte3": "^2.7.3",
|
||||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
"parcel-bundler": "^1.12.4",
|
||||||
"@rollup/plugin-replace": "^2.4.2",
|
"parcel-plugin-svelte": "^4.0.6",
|
||||||
"@rollup/plugin-typescript": "^8.1.0",
|
"postcss-load-config": "^3.0.0",
|
||||||
"@tsconfig/svelte": "^1.0.0",
|
"postcss-preset-env": "^6.7.0",
|
||||||
"autoprefixer": "^10.2.3",
|
"prettier": "^2.1.2",
|
||||||
"postcss": "^8.2.4",
|
"prettier-plugin-svelte": "^1.4.0",
|
||||||
"rollup": "^2.3.4",
|
"svelte": "^3.29.0",
|
||||||
"rollup-plugin-css-only": "^3.1.0",
|
"tailwindcss": "^1.8.10",
|
||||||
"rollup-plugin-livereload": "^2.0.0",
|
"tailwindcss-font-inter": "^1.0.8"
|
||||||
"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": {
|
"dependencies": {
|
||||||
"@urql/svelte": "^1.2.1",
|
"@urql/svelte": "^1.2.1",
|
||||||
"graphql": "^15.5.0",
|
"graphql": "^15.5.0"
|
||||||
"sirv-cli": "^1.0.0",
|
|
||||||
"svelte-router-spa": "^6.0.2",
|
|
||||||
"urql": "^2.0.2"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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],
|
||||||
|
};
|
||||||
Binary file not shown.
|
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">
|
<script>
|
||||||
import { initClient } from "@urql/svelte";
|
import { initClient, query, operationStore } from '@urql/svelte';
|
||||||
initClient({ url: "http://localhost:8080/v1/graphql" });
|
import ExerciseCard from './components/ExerciseCard.svelte';
|
||||||
|
|
||||||
import Button from "./Button.svelte";
|
initClient({
|
||||||
import Logo from "./Logo.svelte";
|
url: 'http://localhost:8080/v1/graphql',
|
||||||
import Tailwind from "./Tailwind.svelte";
|
});
|
||||||
import ExerciseList from "./components/ExerciseList.svelte";
|
|
||||||
|
const exdata = operationStore(`
|
||||||
|
query {
|
||||||
|
workouts_exercises {
|
||||||
|
name
|
||||||
|
instructions
|
||||||
|
muscletarget
|
||||||
|
tutoriallink
|
||||||
|
}
|
||||||
|
}`);
|
||||||
|
query(exdata);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Tailwind />
|
<div class="font-inter flex flex-grow h-screen justify-center items-center">
|
||||||
<main class="container mx-auto">
|
{#if $exdata.fetching}
|
||||||
<div class="bg-gray-200 px-4 py-2 rounded">Hello Tailwind!</div>
|
<p>Loading...</p>
|
||||||
<Button>A Button</Button>
|
{:else if $exdata.error}
|
||||||
<Logo name={"A Logo"} />
|
<p>{$exdata.error.message}</p>
|
||||||
</main>
|
{:else}
|
||||||
<ExerciseList />
|
<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 = {
|
module.exports = {
|
||||||
|
future: {
|
||||||
|
removeDeprecatedGapUtilities: true,
|
||||||
|
},
|
||||||
|
// experimental: {
|
||||||
|
// uniformColorPalette: true,
|
||||||
|
// extendedFontSizeScale: true,
|
||||||
|
// applyComplexClasses: true,
|
||||||
|
// },
|
||||||
purge: {
|
purge: {
|
||||||
content: ["src/**/*.svelte", "public/index.html"],
|
content: ['./src/index.html', './src/**/*.svelte'],
|
||||||
options: {
|
whitelistPatterns: [/svelte-/],
|
||||||
defaultExtractor: (content) => [
|
|
||||||
...tailwindExtractor(content),
|
|
||||||
...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
|
|
||||||
([_match, group, ..._rest]) => group
|
|
||||||
),
|
|
||||||
],
|
|
||||||
keyframes: true,
|
|
||||||
},
|
},
|
||||||
},
|
|
||||||
darkMode: false, // or 'media' or 'class'
|
|
||||||
theme: {
|
theme: {
|
||||||
|
interFontFeatures: {
|
||||||
|
default: ['calt', 'liga', 'kern'],
|
||||||
|
numeric: ['tnum', 'salt', 'ss02'],
|
||||||
|
},
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {},
|
||||||
extend: {},
|
plugins: [
|
||||||
},
|
require('tailwindcss-font-inter')({
|
||||||
plugins: [],
|
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