add readme && fix mobile layout

.env.example

@@ -1,3 +1,2 @@
-PASSWORD="test"
-SECRET_KEY="secret"
-ORIGIN=http://localhost:5050
+PASSWORD="password"
+SECRET_KEY="6ft0ryZAeb3DdFIeEwi4uv5zI69GE2ez"

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 codewec
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,56 @@
-# DashLit
+<h1 align="center">DashLit</h1>
+<p align="center">
+  <i>DashLit is a simple, self-hosted Startpage solution. It’s incredibly easy to set up and use, and its built-in editors let you quickly create your own application hub – even with a convenient drag-and-drop interface. You don’t even need to edit any files!</i>
+  <br/><br/>
+  <img width="130" alt="DashLit" src="https://raw.githubusercontent.com/codewec/dashlit/main/static/favicon.svg"/>
+  <br/> <br/>
+<img src="https://img.shields.io/github/package-json/v/codewec/dashlit?logo=hackthebox&color=609966&logoColor=fff" alt="Current Version"/>
+<img src="https://img.shields.io/github/last-commit/codewec/dashlit?logo=github&color=609966&logoColor=fff" alt="Last commit"/>
+  <a href="https://github.com/codewec/dashlit/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-609966?logo=opensourceinitiative&logoColor=fff" alt="License MIT"/></a>
+  <br/><br/>
+  <img src="https://raw.githubusercontent.com/codewec/dashlit/main/.github/main_page.png" alt="DashLit" width="100%"/>
+</p>
+
+## 🚀 Getting started
+
+### Docker
+
+This Docker image is published on the GitHub container registry - `ghcr.io/codewec/dashlit`.
+
+#### Minimal configuration without password
+
+```yaml
+services:
+  app:
+    container_name: dashlit-app
+    image: ghcr.io/codewec/dashlit:latest
+    restart: unless-stopped
+    environment:
+      ORIGIN: '${ORIGIN:-http://localhost:3000}' # please provide URL if different
+    ports:
+      - '3000:3000'
+    volumes:
+      - ./data:/app/data
+```
+
+#### Full configuration with password
+
+```yaml
+services:
+  app:
+    container_name: dashlit-app
+    image: ghcr.io/codewec/dashlit:latest
+    environment:
+      ORIGIN: '${ORIGIN:-http://localhost:3000}' # please provide URL if different
+      NODE_ENV: '${NODE_ENV:-production}' # optional for production environment
+      HOST_HEADER: '${HOST_HEADER:-HOST}' # optional for nginx reverse proxy
+      ADDRESS_HEADER: '${ADDRESS_HEADER:-X-Real-IP}' # optional for nginx reverse proxy
+      PROTOCOL_HEADER: '${PROTOCOL_HEADER:-X-Forwarded-Proto}' # optional for nginx reverse proxy
+      PASSWORD: '${PASSWORD:-password}'
+      SECRET_KEY: '${SECRET_KEY:-any-secret-string-for-jwt-auth}' # optional key for JWT authentication
+    restart: unless-stopped
+    ports:
+      - '3000:3000'
+    volumes:
+      - ./data:/app/data
+```

docker-compose.yml

@@ -1,18 +1,9 @@
 services:
   app:
-    container_name: dashlit-app
-    image: ghcr.io/codewec/dashlit:latest
-    environment:
-      HOST_HEADER: '${HOST_HEADER:-HOST}'
-      NODE_ENV: '${NODE_ENV:-production}'
-      ADDRESS_HEADER: '${ADDRESS_HEADER:-X-Real-IP}'
-      PROTOCOL_HEADER: '${PROTOCOL_HEADER:-X-Forwarded-Proto}'
-    env_file:
-      - .env
+    container_name: dashlit
+    image: dashlit:latest
     restart: unless-stopped
     ports:
-      - '5050:3000'
-    labels:
-      - 'com.centurylinklabs.watchtower.enable=false'
+      - '3000:3000'
     volumes:
-      - ./data:/data
+      - ./data:/app/data

src/hooks.server.ts

@@ -2,26 +2,30 @@ import type { Handle } from '@sveltejs/kit';
 import { env } from '$env/dynamic/private';
 import * as jose from 'jose';
 import { hashString } from '$lib/helpers';
+import { cookie_token_key } from '$lib';
+import { getSecretKey } from '$lib/server/helper';
 
 export const handle: Handle = async ({ event, resolve }) => {
-	if (env.PASSWORD.length === 0) {
+	if (!env.PASSWORD || env.PASSWORD?.length === 0) {
 		event.locals.userAuthenticated = true;
 		return resolve(event);
 	}
 
-	const token = event.cookies.get('token');
+	const token = event.cookies.get(cookie_token_key);
 	if (!token) {
+		console.log('!!!!! not has token', token);
 		return resolve(event);
 	}
 
-	const secret = env.SECRET_KEY?.length > 0 ? env.SECRET_KEY : await hashString(env.PASSWORD);
+	const secret = await getSecretKey(env.PASSWORD);
 	await jose
 		.jwtVerify(token, new TextEncoder().encode(secret))
 		.then(() => {
 			event.locals.userAuthenticated = true;
 		})
 		.catch(() => {
-			event.cookies.delete('token', { path: '/' });
+			console.log('!!!!! cant check jwt', token);
+			event.cookies.delete(cookie_token_key, { path: '/' });
 		});
 
 	return resolve(event);

src/lib/components/dashboard.svelte

@@ -162,7 +162,7 @@
 				{/if}
 			</div>
 
-			<div class="grid grid-cols-4 gap-2">
+			<div class="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
 				{#each group.items as item (`i_${item.id}`)}
 					<div
 						tabindex="0"

src/lib/index.ts

@@ -1,3 +1,4 @@
-// place files you want to import through the `$lib` alias in this folder.
-export const version = '0.0.1';
-export const file_path = './data';
+export const version = '0.0.2';
+export const default_dashboard = 'dashboard.json';
+export const data_path = '/app/data';
+export const cookie_token_key = 'token';

src/lib/server/helper.ts

@@ -0,0 +1,6 @@
+import { env } from '$env/dynamic/private';
+import { hashString } from '$lib/helpers';
+
+export const getSecretKey = async (password: string) => {
+	return (env.SECRET_KEY?.length ?? 0 > 0) ? env.SECRET_KEY : await hashString(password);
+};

src/routes/(auth)/login/+page.server.ts

@@ -2,7 +2,8 @@ import type { PageServerLoad } from './$types';
 import { fail, redirect } from '@sveltejs/kit';
 import { env } from '$env/dynamic/private';
 import * as jose from 'jose';
-import { hashString } from '$lib/helpers';
+import { cookie_token_key } from '$lib';
+import { getSecretKey } from '$lib/server/helper';
 
 export const load: PageServerLoad = async (event) => {
 	if (event.locals.userAuthenticated) {
@@ -25,19 +26,19 @@ export const actions = {
 			return fail(401, { error: 'Invalid password' });
 		}
 
-		const secret = env.SECRET_KEY?.length > 0 ? env.SECRET_KEY : await hashString(password);
-		const secretKey = new TextEncoder().encode(secret);
+		const secretKey = await getSecretKey(password);
+		const sign = new TextEncoder().encode(secretKey);
 
 		const token = await new jose.SignJWT()
 			.setProtectedHeader({ alg: 'HS256' })
 			.setIssuedAt()
 			.setExpirationTime('4weeks')
-			.sign(secretKey);
+			.sign(sign);
 
-		cookies.set('token', token, {
+		cookies.set(cookie_token_key, token, {
 			path: '/',
 			httpOnly: true,
-			sameSite: 'strict',
+			sameSite: 'lax',
 			secure: process.env.NODE_ENV === 'production',
 			maxAge: 60 * 60 * 24 * 30
 		});

src/routes/(auth)/login/+page.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <div
-	class="flex h-screen items-center justify-center bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200"
+	class="flex h-screen items-center justify-center bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 p-4"
 >
 	<Card class="p-4 sm:p-6 md:p-8">
 		<form

src/routes/(auth)/logout/+page.server.ts

@@ -1,8 +1,9 @@
+import { cookie_token_key } from '$lib';
 import type { PageServerLoad } from './$types';
 import { redirect } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async (event) => {
-	event.cookies.delete('token', { path: '/' });
+	event.cookies.delete(cookie_token_key, { path: '/' });
 	event.locals.userAuthenticated = false;
 	return redirect(302, '/login');
 };

src/routes/+page.server.ts

@@ -3,19 +3,26 @@ import { fail, redirect } from '@sveltejs/kit';
 import fs from 'node:fs/promises';
 import { env } from '$env/dynamic/private';
 import type { Dashboard } from '$lib/types';
-import { file_path, version } from '$lib';
+import { default_dashboard, data_path, version } from '$lib';
+
+const dataPath = () => {
+	return env.DATA_PATH ?? data_path;
+};
+
+const filePath = () => {
+	return `${dataPath()}/${default_dashboard}`;
+};
 
 export const load: PageServerLoad = async (event) => {
 	if (!event.locals.userAuthenticated) {
 		return redirect(302, '/login');
 	}
-	const path = `${file_path}/dashboard.json`;
-	const data = await fs.readFile(path, { encoding: 'utf8' }).catch((error) => {
-		console.log(error);
+	const data = await fs.readFile(filePath(), { encoding: 'utf8' }).catch(() => {
+		console.log(`File ${filePath()} not found`);
 		return '{}';
 	});
 	const dashboard: Dashboard = JSON.parse(data);
-	return { groups: dashboard.groups, canLogout: env.PASSWORD?.length > 0 };
+	return { groups: dashboard.groups, canLogout: env.PASSWORD?.length ?? 0 > 0 };
 };
 
 export const actions = {
@@ -25,12 +32,13 @@ export const actions = {
 		}
 		const json = await request.json();
 
-		const path = `${file_path}/dashboard.json`;
-		await fs.mkdir(file_path, { recursive: true }).catch(console.error);
-		await fs.writeFile(path, JSON.stringify({ version: version, groups: json })).catch((error) => {
-			console.log(error);
-			return fail(500);
-		});
+		await fs.mkdir(dataPath(), { recursive: true }).catch(console.error);
+		await fs
+			.writeFile(filePath(), JSON.stringify({ version: version, groups: json }))
+			.catch((error) => {
+				console.log(`Cant write ${filePath()}`);
+				return fail(500);
+			});
 		return { status: 'ok' };
 	}
 };