db/docker-compose.yml

@@ -1,25 +0,0 @@
-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

db/hasura_metadata.json

@@ -300,23 +300,6 @@
         "name": "exercises"
       },
       "select_permissions": [
-        {
-          "role": "anonymous",
-          "permission": {
-            "columns": [
-              "id",
-              "name",
-              "muscletarget",
-              "forcetype",
-              "mechanicstype",
-              "instructions",
-              "videolink",
-              "tutoriallink"
-            ],
-            "filter": {},
-            "limit": 64
-          }
-        },
         {
           "role": "user",
           "permission": {

db/makefile

@@ -21,7 +21,7 @@ start-db: .data
 stop-db:
 	@docker rm -f -v bodytrack-db
 
-start-graphql: 
+start-graphql: stop-graphql
 	@docker run -it -d --name=bodytrack-graphql \
 		-p 8080:8080 \
 		-e HASURA_GRAPHQL_DATABASE_URL=postgres://hasura:hasura-user@bodytrack-db:5432/bodytrack \

webclient/.eslintrc.json

@@ -1,22 +0,0 @@
-{
-  "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
-  }
-}

webclient/.gitignore

@@ -1,3 +1,6 @@
-.cache
+/node_modules/
-node_modules
+/public/build/
-dist
+.vscode/
+.DS_Store
+package-lock.json
+yarn.lock

webclient/.prettierrc.json

@@ -1,10 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "plugins": ["prettier-plugin-svelte"],
-  "svelteSortOrder": "styles-scripts-markup",
-  "svelteStrictMode": true,
-  "svelteBracketNewLine": true,
-  "svelteAllowShorthand": true
-}

webclient/README.md

@@ -1,41 +1,10 @@
-# svelte-tailwind-parcel-starter
+# Svelte TypeScript Tailwindcss Setup
 
-Svelte.js starter pack with [Yarn](https://yarnpkg.com/),
+svelte template based on the default svelte/template with enabled typescript and tailwindcss support.
-[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

webclient/package.json

@@ -1,32 +1,37 @@
 {
-  "name": "svelte-parcel-talwind-starter",
+    "name": "svelte-app",
     "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": "NODE_ENV=production rollup -c",
-    "build": "rm -rf dist && parcel build src/index.html --no-source-maps"
+        "dev": "rollup -c -w",
+        "start": "sirv public",
+        "validate": "svelte-check"
     },
-  "browserslist": [
-    "last 1 chrome versions"
-  ],
     "devDependencies": {
-    "eslint-plugin-svelte3": "^2.7.3",
+        "@rollup/plugin-commonjs": "^17.0.0",
-    "parcel-bundler": "^1.12.4",
+        "@rollup/plugin-node-resolve": "^11.0.0",
-    "parcel-plugin-svelte": "^4.0.6",
+        "@rollup/plugin-replace": "^2.4.2",
-    "postcss-load-config": "^3.0.0",
+        "@rollup/plugin-typescript": "^8.1.0",
-    "postcss-preset-env": "^6.7.0",
+        "@tsconfig/svelte": "^1.0.0",
-    "prettier": "^2.1.2",
+        "autoprefixer": "^10.2.3",
-    "prettier-plugin-svelte": "^1.4.0",
+        "postcss": "^8.2.4",
-    "svelte": "^3.29.0",
+        "rollup": "^2.3.4",
-    "tailwindcss": "^1.8.10",
+        "rollup-plugin-css-only": "^3.1.0",
-    "tailwindcss-font-inter": "^1.0.8"
+        "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"
+        "graphql": "^15.5.0",
+        "sirv-cli": "^1.0.0",
+        "svelte-router-spa": "^6.0.2",
+        "urql": "^2.0.2"
     }
 }

webclient/postcss.config.js

@@ -1,13 +0,0 @@
-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],
-};

webclient/public/index.html

@@ -0,0 +1,17 @@
+<!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>

webclient/rollup.config.js

@@ -0,0 +1,79 @@
+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,
+    },
+};

webclient/src/App.svelte

@@ -1,35 +1,17 @@
-<script>
+<script lang="ts">
-  import { initClient, query, operationStore } from '@urql/svelte';
+    import { initClient } from "@urql/svelte";
-  import ExerciseCard from './components/ExerciseCard.svelte';
+    initClient({ url: "http://localhost:8080/v1/graphql" });
 
-  initClient({
+    import Button from "./Button.svelte";
-    url: 'http://localhost:8080/v1/graphql',
+    import Logo from "./Logo.svelte";
-  });
+    import Tailwind from "./Tailwind.svelte";
-
+    import ExerciseList from "./components/ExerciseList.svelte";
-  const exdata = operationStore(`
-  query {
-    workouts_exercises {
-      name
-      instructions
-      muscletarget
-      tutoriallink
-    }
-  }`);
-  query(exdata);
 </script>
 
-<div class="font-inter flex flex-grow h-screen justify-center items-center">
+<Tailwind />
-  {#if $exdata.fetching}
+<main class="container mx-auto">
-    <p>Loading...</p>
+    <div class="bg-gray-200 px-4 py-2 rounded">Hello Tailwind!</div>
-  {:else if $exdata.error}
+    <Button>A Button</Button>
-    <p>{$exdata.error.message}</p>
+    <Logo name={"A Logo"} />
-  {:else}
+</main>
-    <ul>
+<ExerciseList />
-      {#each $exdata.data.workouts_exercises as ex}
-        <li>
-          <ExerciseCard exercise="{ex}" />
-        </li>
-      {/each}
-    </ul>
-  {/if}
-</div>

webclient/src/Button.svelte

@@ -0,0 +1,9 @@
+<button>
+  <slot />
+</button>
+
+<style lang="postcss">
+  button {
+    @apply bg-blue-800 text-white px-3 py-2 rounded hover:bg-blue-900;
+  }
+</style>

webclient/src/Logo.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let name = "Logo";
+</script>
+
+<div class:bg-purple-100={true}>{name}</div>

webclient/src/Tailwind.svelte

@@ -0,0 +1,5 @@
+<style global lang="postcss">
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+</style>

webclient/src/components/ExerciseCard.svelte

@@ -1,15 +0,0 @@
-<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>

webclient/src/components/ExerciseList.svelte

@@ -0,0 +1,29 @@
+<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}

webclient/src/global.pcss

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

webclient/src/index.html

@@ -1,15 +0,0 @@
-<!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>

webclient/src/main.js

@@ -1,10 +0,0 @@
-if (module.hot) {
-  module.hot.accept()
-}
-
-import App from './App.svelte';
-
-const app = new App({ target: document.body });
-
-export default app;
-

webclient/src/main.ts

@@ -0,0 +1,7 @@
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

webclient/tailwind.config.js

@@ -1,28 +1,24 @@
+const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
+
 module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-  },
-  // experimental: {
-  //   uniformColorPalette: true,
-  //   extendedFontSizeScale: true,
-  //   applyComplexClasses: true,
-  // },
   purge: {
-    content: ['./src/index.html', './src/**/*.svelte'],
+    content: ["src/**/*.svelte", "public/index.html"],
-    whitelistPatterns: [/svelte-/],
+    options: {
+      defaultExtractor: (content) => [
+        ...tailwindExtractor(content),
+        ...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
+          ([_match, group, ..._rest]) => group
+        ),
+      ],
+      keyframes: true,
     },
+  },
+  darkMode: false, // or 'media' or 'class'
   theme: {
-    interFontFeatures: {
-      default: ['calt', 'liga', 'kern'],
-      numeric: ['tnum', 'salt', 'ss02'],
-    },
     extend: {},
   },
-  variants: {},
+  variants: {
-  plugins: [
+    extend: {},
-    require('tailwindcss-font-inter')({
+  },
-      importFontFace: true,
+  plugins: [],
-      disableUnusedFeatures: true,
-    }),
-  ],
 };

webclient/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}