Merge pull request 'Update dependency eslint-plugin-svelte3 to v4' (#15) from renovate/eslint-plugin-svelte3-4.x into main

Reviewed-on: #15

CHANGELOG.md

@@ -2,8 +2,37 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.4.5](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.4.4...0.4.5)
+
+- Added missing text styling to button [`b0d8668`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/b0d866873b7871118f664d5955212913aabbb414)
+- Fixed image src for deployment [`06364a0`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/06364a06bfd625e8f255569404892104a3192014)
+
+#### [0.4.4](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.4.3...0.4.4)
+
+> 21 August 2021
+
+- 🚀RELEASE 0.4.4 [`795b166`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/795b166d7f733907662047f1f6eb01bf5ce2eab4)
+- Added logo to sidebar [`adb4bb7`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/adb4bb7f7523e7fd739e93a74837c32eb9b266fa)
+
+#### [0.4.3](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.4.2...0.4.3)
+
+> 21 August 2021
+
+- 🚀RELEASE 0.4.3 [`9589026`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/958902631fe282b378048be8728cb9ec10c97cc4)
+- Added provider to detail vist table [`b0347a9`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/b0347a9d06a21578b4e5263daabf11e5de45ef5c)
+
+#### [0.4.2](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.4.1...0.4.2)
+
+> 21 August 2021
+
+- 🚀RELEASE 0.4.2 [`384354f`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/384354fbac3b58a7e4480a0788d9b079827938b7)
+- Commented search away from sidebar [`ed2e8ef`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/ed2e8ef44650f1c63d38258d7bef84c9e9222364)
+
 #### [0.4.1](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.4.0...0.4.1)
 
+> 21 August 2021
+
+- 🚀RELEASE 0.4.1 [`fa16814`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/fa16814f9165c89caaacfa9d6e042aa9aa77aebb)
 - Applied new sidebar styles to logout button [`735279b`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/735279bc47ef547549e57f6d137c95541e8bdd16)
 
 #### [0.4.0](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.3.2...0.4.0)

Dockerfile

@@ -1,10 +1,10 @@
-FROM registry.odit.services/hub/library/node:16-alpine
+FROM registry.odit.services/hub/library/node:18-alpine
 WORKDIR /app
 COPY package.json ./
 RUN yarn
 COPY ./ ./
 RUN yarn build
 
-FROM registry.odit.services/library/nginx-brotli:3.13
+FROM registry.odit.services/library/nginx-brotli:3.15
 COPY --from=0 /app/build /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf

jsconfig.json

@@ -1,4 +1,5 @@
 {
+	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
 		"baseUrl": ".",
 		"paths": {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/linkylinky-dashboard",
-	"version": "0.4.1",
+	"version": "0.4.5",
 	"scripts": {
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",
@@ -10,25 +10,25 @@
 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "1.0.0-next.147",
+		"@sveltejs/kit": "1.0.0-next.324",
 		"autoprefixer": "^10.3.1",
 		"cssnano": "^5.0.6",
-		"eslint": "^7.22.0",
+		"eslint": "^8.0.0",
 		"eslint-config-prettier": "^8.1.0",
-		"eslint-plugin-svelte3": "^3.2.0",
+		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.3.5",
 		"postcss-load-config": "^3.1.0",
-		"prettier": "~2.2.1",
+		"prettier": "~2.6.0",
 		"prettier-plugin-svelte": "^2.2.0",
-		"release-it": "^14.11.5",
+		"release-it": "^15.0.0",
 		"svelte": "^3.34.0",
 		"svelte-preprocess": "^4.7.4",
-		"tailwindcss": "^2.2.4"
+		"tailwindcss": "^3.0.0"
 	},
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-static": "^1.0.0-next.16",
-		"axios": "^0.21.1",
+		"axios": "^0.27.0",
 		"localforage": "^1.9.0"
 	},
 	"release-it": {

renovate.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "dependencyDashboard": true,
+  "baseBranches": [
+    "main"
+  ],
+  "addLabels": [
+    "status:review_needed",
+    "enhancement",
+    "priority:medium"
+  ],
+  "reviewers": [
+    "niggl",
+    "philipp"
+  ]
+}

src/lib/Sidebar.svelte

@@ -6,7 +6,7 @@
 	import SidebarEntry from './SidebarEntry.svelte';
 
 	$: logged_in = false;
-	$: currentPage = $page.path;
+	$: currentPage = $page.url.pathname;
 
 	const unsubscribe = UserStore.subscribe((value) => {
 		logged_in = value.isLoggedIn;
@@ -23,8 +23,9 @@
 <div
 	class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600"
 >
+	<img class="h-36 w-36" src="/icon_128.png" alt="LinkyLinky Logo (White kauft.es K on red background)">
 	<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">LinkyLinky</h2>
-	<div class="relative mt-6">
+	<!-- <div class="relative mt-6">
 		<span class="absolute inset-y-0 left-0 flex items-center pl-3">
 			<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
 				<path
@@ -42,11 +43,11 @@
 			class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
 			placeholder="Search"
 		/>
-	</div>
+	</div> -->
 
 	<div class="flex flex-col justify-between flex-1 mt-6">
 		<nav>
-			<SidebarEntry title="Dashboard" href="./" pageUrl="/" bind:currentPage>
+			<SidebarEntry title="Dashboard" href="" pageUrl="/" bind:currentPage>
 				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path
 						d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17"
@@ -61,7 +62,7 @@
 			<hr class="my-6 dark:border-gray-600" />
 
 			{#if logged_in}
-				<SidebarEntry title="Manage Links" href="./links" pageUrl="/links" bind:currentPage>
+				<SidebarEntry title="Manage Links" href="/links" pageUrl="/links" bind:currentPage>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
@@ -77,7 +78,7 @@
 						/>
 					</svg>
 				</SidebarEntry>
-				<SidebarEntry title="All visits" href="./visits" pageUrl="/visits" bind:currentPage>
+				<SidebarEntry title="All visits" href="/visits" pageUrl="/visits" bind:currentPage>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
@@ -100,7 +101,7 @@
 					</svg>
 				</SidebarEntry>
 				<button
-					class="flex items-center px-4 py-2 mt-5 transition-colors duration-200 transform rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
+					class="flex items-center px-4 py-2 mt-5 transition-colors duration-200 transform rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700 text-gray-600 dark:text-gray-400"
 					on:click={logout}
 				>
 					<svg
@@ -121,7 +122,7 @@
 					<span class="mx-4 font-medium">Logout</span>
 				</button>
 			{:else}
-				<SidebarEntry title="Login" href="./login" pageUrl="/login" bind:currentPage>
+				<SidebarEntry title="Login" href="/login" pageUrl="/login" bind:currentPage>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"

src/routes/details.svelte

@@ -1,10 +1,7 @@
 <script>
-	import { page } from '$app/stores';
 	import Apiclient from '$lib/Apiclient';
 	import UserStore from '$lib/UserStore';
-	import { onDestroy } from 'svelte';
-
-	let shortcode = $page.query.get('shortcode');
+	import { onDestroy, onMount } from 'svelte';
 
 	$: urlDetails = {
 		shortcode: 'Loading...',
@@ -14,20 +11,27 @@
 	};
 	$: urlVisists = [];
 	let visitQuery;
+	let shortcode;
 
-	// Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
-	const unsubscribe = UserStore.subscribe((value) => {
-		if (value.isLoggedIn) {
-			Apiclient.getUrlDetails(shortcode).then((res) => {
-				urlDetails = res;
-			});
-			visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
-				urlVisists = res;
-			});
-		}
+	onMount(async () => {
+		const params = new URLSearchParams(window.location.search);
+		let shortcode = params.get('shortcode');
+
+		// Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
+		const unsubscribe = UserStore.subscribe((value) => {
+			if (value.isLoggedIn) {
+				Apiclient.getUrlDetails(shortcode).then((res) => {
+					urlDetails = res;
+					unsubscribe();
+				});
+				visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
+					urlVisists = res;
+				});
+			}
+		});
+
+		onDestroy(unsubscribe);
 	});
-
-	onDestroy(unsubscribe);
 </script>
 
 <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Details: {shortcode}</h2>
@@ -50,6 +54,9 @@
 				<th scope="col" class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">
 					Timestamp
 				</th>
+				<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
+					Provider
+				</th>
 			</tr>
 		</thead>
 		<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:text-gray-100" x-max="1">
@@ -60,6 +67,7 @@
 					>
 						Loading data...
 					</td>
+					<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
 				</tr>
 			{:then}
 				{#each urlVisists as visit}
@@ -69,6 +77,7 @@
 						>
 							{visit.timestamp}
 						</td>
+						<td class="px-6 py-4 whitespace-nowrap text-sm"> {visit.provider} </td>
 					</tr>
 				{/each}
 			{/await}

src/routes/links.svelte

@@ -52,7 +52,7 @@
 						Loading data...
 					</td>
 					<td class="px-6 py-4 whitespace-nowrap text-sm">
-						<a href="#">Loading data...</a>
+						<p href="#">Loading data...</p>
 					</td>
 					<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
 					<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">

src/routes/visits.svelte

@@ -11,11 +11,10 @@
 		if (value.isLoggedIn) {
 			visitQuery = Apiclient.getVisits().then((res) => {
 				visits = res;
+				unsubscribe();
 			});
 		}
 	});
-
-	onDestroy(unsubscribe);
 </script>
 
 <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">View all visits</h2>

svelte.config.js

@@ -1,25 +1,29 @@
-import preprocess from 'svelte-preprocess';
-import staticAdapter from '@sveltejs/adapter-static';
-
 /** @type {import('@sveltejs/kit').Config} */
+import preprocess from "svelte-preprocess";
+import adapterStatic from '@sveltejs/adapter-static';
+
 const config = {
 	kit: {
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte',
-		adapter: staticAdapter(),
+		adapter: adapterStatic({
+			// default options are shown
+			pages: 'build',
+			assets: 'build',
+			fallback: null,
+			precompress: false
+		}),
+		prerender: {
+			// This can be false if you're using a fallback (i.e. SPA mode)
+			default: true
+		},
 		files: {
 			assets: 'static'
-		},
-		paths: {
-			base: '/dashboard',
-		},
+		}
 	},
-
 	preprocess: [
 		preprocess({
 			postcss: true
 		})
-	]
+	],
 };
 
 export default config;

tailwind.config.cjs

@@ -1,11 +1,12 @@
 const config = {
-	mode: 'jit',
-	darkMode: 'media',
-	purge: ['./src/**/*.{html,js,svelte,ts}'],
+	mode: "jit",
+	content: [
+		"./src/**/*.{html,js,svelte,ts}",
+	],
 	theme: {
-		extend: {}
+		extend: {},
 	},
-	plugins: []
+	plugins: [],
 };
 
 module.exports = config;