"403 fixes"

README.md

@@ -1,38 +1 @@
-# create-svelte
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+https://nmd.mov

package-lock.json

@@ -12,7 +12,6 @@
         "bits-ui": "^0.21.7",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
-				"drag-drop-touch": "^1.3.1",
         "firebase": "^10.11.1",
         "firebase-admin": "^12.1.0",
         "lucide-react": "^0.378.0",
@@ -23,7 +22,6 @@
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
-				"@jhubbardsf/svelte-sortablejs": "^1.1.0",
         "@sveltejs/adapter-auto": "^3.0.0",
         "@sveltejs/adapter-node": "^5.0.1",
         "@sveltejs/kit": "^2.0.0",
@@ -1164,15 +1162,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-		"node_modules/@jhubbardsf/svelte-sortablejs": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@jhubbardsf/svelte-sortablejs/-/svelte-sortablejs-1.1.0.tgz",
-			"integrity": "sha512-5hA0vsdGjChpuaacNSnwr20TesKIwRcSaKFUe3tR0mz1i7AFcyrjKtOqS+MZVy2I1yWv6Exz81fvb3ABd0Ligw==",
-			"dev": true,
-			"dependencies": {
-				"sortablejs": "^1.15.0"
-			}
-		},
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -2808,11 +2797,6 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
-		"node_modules/drag-drop-touch": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmjs.org/drag-drop-touch/-/drag-drop-touch-1.3.1.tgz",
-			"integrity": "sha512-Q0/ZgsnW7VUjn+YqSnp1rvxjjPnZX5YLyVaw28einood+eTMcLzgOgHk8nyqIF9O18J68l+2htlEnbw5GsyTvQ=="
-		},
     "node_modules/dragdroptouch-bug-fixed": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/dragdroptouch-bug-fixed/-/dragdroptouch-bug-fixed-1.0.8.tgz",
@@ -4849,12 +4833,6 @@
         "sorcery": "bin/sorcery"
       }
     },
-		"node_modules/sortablejs": {
-			"version": "1.15.2",
-			"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz",
-			"integrity": "sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==",
-			"dev": true
-		},
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",

package.json

@@ -10,7 +10,6 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-		"@jhubbardsf/svelte-sortablejs": "^1.1.0",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-node": "^5.0.1",
     "@sveltejs/kit": "^2.0.0",
@@ -32,7 +31,6 @@
     "bits-ui": "^0.21.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-		"drag-drop-touch": "^1.3.1",
     "firebase": "^10.11.1",
     "firebase-admin": "^12.1.0",
     "lucide-react": "^0.378.0",

src/lib/components/Myerror.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let username = 'userdata.username'
+</script>
+<div class="text-center">
+    <h1 class=" text-warning text-4xl">403</h1>
+<span class="text-gray-500">The Profile of <strong class="text-xl text-warning">@{username}</strong> is not public!</span>
+</div>
+<div class=" my-4">
+    <img src="403.png" alt="forbidden"/>
+</div>

src/lib/firebase.ts

@@ -0,0 +1,99 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { doc, getFirestore, onSnapshot } from "firebase/firestore";
+import { getAuth, onAuthStateChanged, type User } from "firebase/auth";
+import { getStorage } from "firebase/storage";
+import { writable, type Readable, derived } from "svelte/store";
+import { env } from "$env/dynamic/public";
+
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: env.PUBLIC_API_KEY,
+  authDomain: env.PUBLIC_AUTH_DOMAIN,
+  projectId: env.PUBLIC_PROJECT_ID,
+  storageBucket: env.PUBLIC_STORAGE_BUCKET,
+  messagingSenderId: env.PUBLIC_MESSAGING_SENDER_ID,
+  appId: env.PUBLIC_APP_ID,
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+export const db = getFirestore();
+export const auth = getAuth();
+export const storage = getStorage();
+
+/**
+ * @returns a store with the current firebase user
+ */
+
+function userStore() {
+  let unsubscribe: () => void;
+
+  if (!auth || !globalThis.window) {
+    console.warn("Auth is not initialized or not in browser");
+    const { subscribe } = writable<User | null>(null);
+    return {
+      subscribe,
+    };
+  }
+
+  const { subscribe } = writable(auth?.currentUser ?? null, (set) => {
+    unsubscribe = onAuthStateChanged(auth, (user) => {
+      set(user);
+    });
+
+    return () => unsubscribe();
+  });
+
+  return {
+    subscribe,
+  };
+}
+
+export const user = userStore();
+
+/**
+ * @param  {string} path document path or reference
+ * @returns a store with realtime updates on document data
+ */
+export function docStore<T>(path: string) {
+  let unsubscribe: () => void;
+
+  const docRef = doc(db, path);
+
+  const { subscribe } = writable<T | null>(null, (set) => {
+    unsubscribe = onSnapshot(docRef, (snapshot) => {
+      set((snapshot.data() as T) ?? null);
+    });
+
+    return () => unsubscribe();
+  });
+
+  return {
+    subscribe,
+    ref: docRef,
+    id: docRef.id,
+  };
+}
+
+interface UserData {
+  username: string;
+  bio: string;
+  photoURL: string;
+  links: any[];
+  published: boolean;
+}
+
+export const userData: Readable<UserData | null> = derived(
+  user,
+  ($user, set) => {
+    if ($user) {
+      return docStore<UserData>(`users/${$user.uid}`).subscribe(set);
+    } else {
+      set(null);
+    }
+  },
+);

src/routes/+page.svelte

@@ -1,4 +1,46 @@
 <script lang="ts">
-</script>
+    import { userData, user, auth} from "$lib/firebase";
+    import { goto } from '$app/navigation';
+    import { onMount } from "svelte";
+
+    function getLogged() {
+        if ($userData?.username != undefined) {
+            goto(`/${$userData?.username}`)
+            console.log(user)
+        }
+        else {
+            goto(`/login`)
+        }
+
+    }
+    
+   onMount(() => {
+            setTimeout(getLogged, 2000)
+        })
+
+</script>
+<head>
+  <title>Linky</title>
+  <meta name="description" content="Your web tree!" />
+  <meta property="og:image" content="https://nmd.mov/favicon.png" />
+  <meta property="og:title" content="Linky" />
+  <meta property="og:description" content="Your web tree!" />
+  <meta property="og:url" content="https://nmd.mov" />
+</head>
+
+{#if $userData == undefined}
+<div class="mx-auto my-auto">
+<a href="/login" class="btn btn-outline">/Start</a>
+</div>
+{/if}
+
+{#if $userData != undefined}
+<div class="m-auto">
+<span class="loading loading-spinner text-success"></span>
+</div>
+{/if}
+
+
+
+
 
-<a href="/login" class="btn btn-outline mx-auto my-auto">/Start</a>

src/routes/[username]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import UserLink from "$lib/components/UserLink.svelte";
   import type { PageData } from "./$types";
-  import { userData, auth } from "$lib/firebase";
+  import { userData, auth} from "$lib/firebase";
   import {
     signInWithPopup,
     GoogleAuthProvider,
@@ -9,9 +9,10 @@
   } from "firebase/auth";
     import { goto } from "$app/navigation";
     import { toasts, ToastContainer, FlatToast }  from "svelte-toasts";
-    import { page } from "$app/stores";
+    import Myerror from "$lib/components/Myerror.svelte"
 
   export let data: PageData;
+
   async function signInWithGoogle() {
     const provider = new GoogleAuthProvider();
     const user = await signInWithPopup(auth, provider);
@@ -37,6 +38,10 @@
     navigator.clipboard.writeText(copytext)
     showToast()
   }
+
+
+  let unpublished = data.published
+  let username = data.username
 </script>
 
 <svelte:head>
@@ -48,13 +53,18 @@
   <meta property="og:url" content="https://nmd.mov/{data.username}" />
 </svelte:head>
 
+{#if unpublished == false && data.username != $userData?.username}
+<div class="card card-body m-auto">
+<Myerror {username}></Myerror>
+</div>
+{:else}
 <main class=" prose text-center mx-auto mt-8">
   <h1 class="text-4xl text-teal-700">
     @{data.username}
   </h1>
   <img
     src={data.photoURL ?? "/user.png"}
-    alt="photoURL"
+    alt="profile"
     width="128"
     class="mx-auto rounded-2xl mt-8"
   />
@@ -91,6 +101,9 @@
 		<FlatToast {data}  />
 	</ToastContainer>
   </div>
+  {#if $userData?.published == false}
+  <h2 class="text-center text-background">Your profile is not published!</h2>
+  {/if}
 
 {:else}
   <div class="top-0 right-0 absolute">
@@ -100,3 +113,4 @@
     >
   </div>
 {/if}
+{/if}

src/routes/[username]/+page.ts

@@ -1,6 +1,6 @@
 import { collection, getDocs, limit, query, where } from 'firebase/firestore';
 import type { PageLoad } from './$types';
-import { db } from '$lib/firebase';
+import { db, userData} from '$lib/firebase';
 import { error } from '@sveltejs/kit';
 
 export const load = (async ({ params }) => {
@@ -20,14 +20,11 @@ export const load = (async ({ params }) => {
         throw error(404, "that user does not exists")
     }
 
-    if (!data.published) {
-        throw error(403, `The Profile of @${data.username} is not public!`)
-    }
-
     return {
         username: data.username,
         photoURL: data.photoURL,
         bio: data.bio,
         links: data.links ?? [],
+        published: data.published
     }
 }) satisfies PageLoad;

src/routes/[username]/edit/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from "$app/stores";
   import { db, user, userData } from "$lib/firebase";
   import {
     arrayRemove,
@@ -91,6 +90,15 @@
     });
   }
 
+  let publish = $userData?.published
+  function togglePublish() {
+    publish == !publish
+    const userRef = doc(db, "users", $user!.uid);
+    updateDoc(userRef, {
+      published: publish
+    });
+  }
+  
 
   function moveUp(index: any) {
     const userRef = doc(db, "users", $user!.uid)
@@ -222,6 +230,12 @@
       >
         Add a Link
       </button>
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">Published</span> 
+          <input type="checkbox" class="toggle" bind:checked={publish} on:change={togglePublish}/>
+        </label>
+      </div>
     {/if}
   {/if}
 

tailwind.config.js

@@ -14,8 +14,8 @@ const config = {
       center: true,
       padding: "2rem",
       screens: {
-				"2xl": "1400px"
-			}
+        "2xl": "1400px",
+      },
     },
     extend: {
       colors: {
@@ -26,42 +26,42 @@ const config = {
         foreground: "hsl(var(--foreground) / <alpha-value>)",
         primary: {
           DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
         },
         secondary: {
           DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
         },
         destructive: {
           DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
         },
         muted: {
           DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
         },
         accent: {
           DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
         },
         popover: {
           DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
         },
         card: {
           DEFAULT: "hsl(var(--card) / <alpha-value>)",
-					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
-				}
+          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)"
+        sm: "calc(var(--radius) - 4px)",
       },
       fontFamily: {
-				sans: [...fontFamily.sans]
-			}
-		}
+        sans: [...fontFamily.sans],
+      },
+    },
   },
 };