From e8e3b75f686ff7aa30f27cb8104f09c589e53c3b Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Fri, 18 Apr 2025 22:54:01 +0200
Subject: [PATCH] update readme, small fixes

---
 README.md                                | 31 +++++++++++++++++++++---
 src/lib/{oauth => }/UI/Button.svelte     |  0
 src/lib/{oauth => }/UI/LoginModal.svelte |  2 +-
 src/lib/oauth/index.ts                   |  4 +--
 4 files changed, 30 insertions(+), 7 deletions(-)
 rename src/lib/{oauth => }/UI/Button.svelte (100%)
 rename src/lib/{oauth => }/UI/LoginModal.svelte (98%)

diff --git a/README.md b/README.md
index d7fea79..d0326c4 100644
--- a/README.md
+++ b/README.md
@@ -20,9 +20,9 @@ useful when you want people to login to your static sveltekit site.
 
 ### or manually install in your own project
 
-- copy the `src/lib/oauth` folder into your own project
-- also copy the `src/routes/client-metadata.json` folder into your project
-- add the following to your `src/routes/+layout.svelte`
+1. copy the `src/lib/oauth` folder into your own project
+2. also copy the `src/routes/client-metadata.json` folder into your project
+3. add the following to your `src/routes/+layout.svelte`
 
 ```svelte
 <script>
@@ -36,6 +36,28 @@ useful when you want people to login to your static sveltekit site.
 {@render children()}
 ```
 
+4. add server and port to your `vite.config.ts`
+
+```js
+export default defineConfig({
+	server: {
+		host: '127.0.0.1',
+		port: 5179
+	}
+});
+```
+
+5. install the dependencies
+
+```bash
+npm install @atcute/oauth-browser-client @atcute/client
+```
+
+6. for deployment change the `SITE_URL` variable in `src/lib/oauth/const.ts` 
+(e.g. for github pages: `https://your-username.github.io`) and set your base in `svelte.config.js` 
+(e.g. for github pages: `base: '/your-repo-name/'`)
+
+
 ## how to use
 
 ### login flow
@@ -52,7 +74,8 @@ client.isLoggedIn; // check if the user is logged in
 client.logout(); // logout the user
 ```
 
-LoginModal is a component that renders a login modal, add it for a quick login flow.
+LoginModal is a component that renders a login modal, add it for a quick login flow. 
+(copy the `src/lib/UI` folder into your projects `src/lib` folder)
 
 ```svelte
 <script>
diff --git a/src/lib/oauth/UI/Button.svelte b/src/lib/UI/Button.svelte
similarity index 100%
rename from src/lib/oauth/UI/Button.svelte
rename to src/lib/UI/Button.svelte
diff --git a/src/lib/oauth/UI/LoginModal.svelte b/src/lib/UI/LoginModal.svelte
similarity index 98%
rename from src/lib/oauth/UI/LoginModal.svelte
rename to src/lib/UI/LoginModal.svelte
index 33e76be..9f6bb69 100644
--- a/src/lib/oauth/UI/LoginModal.svelte
+++ b/src/lib/UI/LoginModal.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { login } from '../auth.svelte';
+	import { login } from '$lib/oauth/auth.svelte';
 	import Button from './Button.svelte';
 	import { tick } from 'svelte';
 
diff --git a/src/lib/oauth/index.ts b/src/lib/oauth/index.ts
index 15c653b..05c0fb9 100644
--- a/src/lib/oauth/index.ts
+++ b/src/lib/oauth/index.ts
@@ -1,6 +1,6 @@
 import { client, login, logout, initClient } from './auth.svelte';
-import LoginModal, { loginModalState } from './UI/LoginModal.svelte';
-import Button from './UI/Button.svelte';
+import LoginModal, { loginModalState } from '../UI/LoginModal.svelte';
+import Button from '../UI/Button.svelte';
 import { metadata } from './const';
 
 export { metadata, client, login, logout, initClient, LoginModal, Button, loginModalState };
-- 
2.51.2