Merge pull request #13 from coolaj86/chore-fmt

chore: add fmt to github actions

.github/workflows/node.js.yaml

@@ -0,0 +1,25 @@
+name: Node.js CI
+on:
+  push:
+    branches: ['main']
+  pull_request:
+jobs:
+  build:
+    name: 'Fmt, Lint, & Build'
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version:
+          - latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: node --version
+      - run: npm clean-install
+      - run: npm run fmt
+        #- run: npm run lint
+        #- run: npm run lint:types
+      - run: npm run build

package.json

@@ -8,8 +8,12 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"lint": "npm run eslint",
+		"lint:types": "npm run check",
+		"fmt": "npm run prettier:svelte && npm run prettier",
+		"eslint": "npx -p eslint@8 -- eslint .",
+		"prettier:svelte": "npx -p prettier@2 -- prettier --plugin-search-dir . --write .",
+		"prettier": "npx -p prettier@2 -- prettier --write '**/*.{js,css,md,html,json}'"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

src/lib/components/common/Overlay.svelte

@@ -1,33 +1,33 @@
-<script>
-	import Spinner from './Spinner.svelte';
-
-	export let show = false;
-	export let content = '';
-
-	export let opacity = 1;
-</script>
-
-<div class="relative">
-	{#if show}
-		<div class="absolute w-full h-full flex">
-			<div
-				class="absolute rounded"
-				style="inset: -10px; opacity: {opacity}; backdrop-filter: blur(5px);"
-			/>
-
-			<div class="flex w-full flex-col justify-center">
-				<div class=" py-3">
-					<Spinner className="ml-2" />
-				</div>
-
-				{#if content !== ''}
-					<div class="text-center text-gray-100 text-xs font-medium z-50">
-						{content}
-					</div>
-				{/if}
-			</div>
-		</div>
-	{/if}
-
-	<slot />
-</div>
+<script>
+	import Spinner from './Spinner.svelte';
+
+	export let show = false;
+	export let content = '';
+
+	export let opacity = 1;
+</script>
+
+<div class="relative">
+	{#if show}
+		<div class="absolute w-full h-full flex">
+			<div
+				class="absolute rounded"
+				style="inset: -10px; opacity: {opacity}; backdrop-filter: blur(5px);"
+			/>
+
+			<div class="flex w-full flex-col justify-center">
+				<div class=" py-3">
+					<Spinner className="ml-2" />
+				</div>
+
+				{#if content !== ''}
+					<div class="text-center text-gray-100 text-xs font-medium z-50">
+						{content}
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<slot />
+</div>

src/lib/components/common/Spinner.svelte

@@ -1,24 +1,24 @@
-<script lang="ts">
-	export let className: string = 'text-white';
-	export let theme: 'blue' | 'white' | 'black' = 'white';
-</script>
-
-<div class="flex justify-center text-center {className}">
-	<svg
-		class="animate-spin -ml-1 mr-3 h-5 w-5 {theme === 'blue'
-			? 'text-sky-600'
-			: theme === 'white'
-			? 'text-white'
-			: 'text-gray-600'} "
-		xmlns="http://www.w3.org/2000/svg"
-		fill="none"
-		viewBox="0 0 24 24"
-	>
-		<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-		<path
-			class="opacity-75"
-			fill="currentColor"
-			d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-		/>
-	</svg>
-</div>
+<script lang="ts">
+	export let className: string = 'text-white';
+	export let theme: 'blue' | 'white' | 'black' = 'white';
+</script>
+
+<div class="flex justify-center text-center {className}">
+	<svg
+		class="animate-spin -ml-1 mr-3 h-5 w-5 {theme === 'blue'
+			? 'text-sky-600'
+			: theme === 'white'
+			? 'text-white'
+			: 'text-gray-600'} "
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+		<path
+			class="opacity-75"
+			fill="currentColor"
+			d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		/>
+	</svg>
+</div>