├── .npmrc
├── bun.lockb
├── src
    ├── lib
    │   ├── index.ts
    │   ├── components
    │   │   └── ui
    │   │   │   ├── label
    │   │   │       ├── index.ts
    │   │   │       └── label.svelte
    │   │   │   ├── dialog
    │   │   │       ├── dialog-portal.svelte
    │   │   │       ├── dialog-header.svelte
    │   │   │       ├── dialog-footer.svelte
    │   │   │       ├── dialog-title.svelte
    │   │   │       ├── dialog-description.svelte
    │   │   │       ├── dialog-overlay.svelte
    │   │   │       ├── index.ts
    │   │   │       └── dialog-content.svelte
    │   │   │   ├── select
    │   │   │       ├── select-separator.svelte
    │   │   │       ├── select-label.svelte
    │   │   │       ├── index.ts
    │   │   │       ├── select-trigger.svelte
    │   │   │       ├── select-content.svelte
    │   │   │       └── select-item.svelte
    │   │   │   ├── button
    │   │   │       ├── button.svelte
    │   │   │       └── index.ts
    │   │   │   └── input
    │   │   │       ├── index.ts
    │   │   │       └── input.svelte
    │   ├── db
    │   │   └── db.ts
    │   ├── constants.ts
    │   └── utils.ts
    ├── routes
    │   ├── +layout.svelte
    │   ├── +layout.server.ts
    │   ├── +page.server.ts
    │   ├── api
    │   │   ├── get-communities
    │   │   │   └── +server.ts
    │   │   ├── get-community
    │   │   │   └── +server.ts
    │   │   └── create-community
    │   │   │   └── +server.ts
    │   ├── [username]
    │   │   ├── +page.server.ts
    │   │   └── +page.svelte
    │   └── +page.svelte
    ├── app.d.ts
    ├── store
    │   └── store.ts
    ├── app.css
    ├── components
    │   ├── socials.svelte
    │   ├── signInButton.svelte
    │   ├── header.svelte
    │   ├── footer.svelte
    │   ├── eachCommunity.svelte
    │   ├── radioComponent.svelte
    │   └── addCommunity.svelte
    ├── models
    │   └── community.model.ts
    ├── hooks.server.ts
    └── app.html
├── static
    ├── favicon.png
    ├── favicon0.png
    └── Screenshot.jpg
├── .prettierignore
├── postcss.config.js
├── .dockerignore
├── vite.config.ts
├── .gitignore
├── .eslintignore
├── .prettierrc
├── .env.example
├── components.json
├── .vscode
    └── extensions.json
├── Dockerfile
├── .eslintrc.cjs
├── svelte.config.js
├── tsconfig.json
├── LICENSE
├── package.json
├── tailwind.config.js
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dagmawibabi/TelegramCommunityGallery/HEAD/bun.lockb


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import "../app.css";
3 | </script>
4 | 
5 | 
6 | 
7 | <slot />


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dagmawibabi/TelegramCommunityGallery/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Ignore files for PNPM, NPM and YARN
2 | pnpm-lock.yaml
3 | package-lock.json
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/static/favicon0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dagmawibabi/TelegramCommunityGallery/HEAD/static/favicon0.png


--------------------------------------------------------------------------------
/static/Screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dagmawibabi/TelegramCommunityGallery/HEAD/static/Screenshot.jpg


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | .git
2 | .svelte-kit
3 | build
4 | node_modules
5 | .dockerignore
6 | .gitignore
7 | Dockerfile
8 | README.md
9 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/label/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./label.svelte";
2 | 
3 | export {
4 | 	Root,
5 | 	//
6 | 	Root as Label,
7 | };
8 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 | 
4 | export default defineConfig({
5 | 	plugins: [sveltekit()]
6 | });
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | .history


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"singleQuote": true,
4 | 	"trailingComma": "none",
5 | 	"printWidth": 100,
6 | 	"plugins": ["prettier-plugin-svelte"],
7 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/routes/+layout.server.ts:
--------------------------------------------------------------------------------
1 | import type { LayoutServerLoad } from "./$types"
2 | 
3 | // -> load serverside any data we need.
4 | 
5 | export const load: LayoutServerLoad = async (event) =>{
6 |     return {
7 |         session: await event.locals.auth()
8 |     }
9 | }


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-portal.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
3 | 	type $$Props = DialogPrimitive.PortalProps;
4 | </script>
5 | 
6 | <DialogPrimitive.Portal {...$$restProps}>
7 | 	<slot />
8 | </DialogPrimitive.Portal>
9 | 


--------------------------------------------------------------------------------
/src/routes/+page.server.ts:
--------------------------------------------------------------------------------
1 | /** @type {import('./$types').PageServerLoad} */
2 | export async function load({ fetch }) {
3 |     const res = await fetch('/api/get-communities');
4 |     const data = await res.json()
5 |     
6 |     return {		
7 |         allCommunities: data
8 |     };
9 | }


--------------------------------------------------------------------------------
/src/routes/api/get-communities/+server.ts:
--------------------------------------------------------------------------------
1 | import { json } from '@sveltejs/kit';
2 | import { Community } from '../../../models/community.model';
3 | 
4 | export async function GET() {
5 |     const fetchedCommunities = await Community.find().sort({_id: -1})
6 | 	return json(fetchedCommunities);
7 | }


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | LOGLIB_API_KEY= // LogLib.io key
2 | AUTH_SECRET= // mysecret
3 | GITHUB_CLIENT_ID= // your github client id
4 | GITHUB_CLIENT_SECRET= // your github client secret
5 | SECRET_MONGO_URI= // your mongo uri mongodb+srv://USERNAME:PASSWORD@DATABASE/COLLECTION?retryWrites=true&w=majority
6 | 
7 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface PageState {}
 9 | 		// interface Platform {}
10 | 	}
11 | }
12 | 
13 | export {};
14 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "https://shadcn-svelte.com/schema.json",
 3 | 	"style": "default",
 4 | 	"tailwind": {
 5 | 		"config": "tailwind.config.js",
 6 | 		"css": "src\\app.css",
 7 | 		"baseColor": "zinc"
 8 | 	},
 9 | 	"aliases": {
10 | 		"components": "$lib/components",
11 | 		"utils": "$lib/utils"
12 | 	},
13 | 	"typescript": true
14 | }


--------------------------------------------------------------------------------
/src/routes/api/get-community/+server.ts:
--------------------------------------------------------------------------------
 1 | import { json } from '@sveltejs/kit';
 2 | import { Community } from '../../../models/community.model';
 3 | 
 4 | 
 5 | export async function GET({ request, url }) {
 6 | 	const link = url.searchParams.get('link')
 7 |     const fetchedCommunity = await Community.find({ link });
 8 |     // console.log(fetchedCommunity)
 9 | 	return json(fetchedCommunity);
10 | }


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-separator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = SelectPrimitive.SeparatorProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
12 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
 3 |     // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 4 |     // List of extensions which should be recommended for users of this workspace.
 5 |     "recommendations": [
 6 |       "dbaeumer.vscode-eslint",
 7 |       "esbenp.prettier-vscode",
 8 |       "svelte.svelte-vscode"
 9 |     ],
10 |   }


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = SelectPrimitive.LabelProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SelectPrimitive.Label
12 | 	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </SelectPrimitive.Label>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-title.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = DialogPrimitive.TitleProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <DialogPrimitive.Title
12 | 	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </DialogPrimitive.Title>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = DialogPrimitive.DescriptionProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <DialogPrimitive.Description
12 | 	class={cn("text-sm text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </DialogPrimitive.Description>
17 | 


--------------------------------------------------------------------------------
/src/store/store.ts:
--------------------------------------------------------------------------------
 1 | import { writable } from 'svelte/store';
 2 | 
 3 | type Community = {
 4 |     name: string,
 5 |     link: string,
 6 |     description: string,
 7 |     owner: string | null | undefined,
 8 |     tags: string[],
 9 |     type: string,
10 | };
11 | 
12 | export const currentCommunityStore = writable(<Community>{});
13 | export const allCommunitiesStore = writable(<Community[]>[]);
14 | export const filteredTagsStore = writable(<string[]>[]);
15 | export const visitorCountStore = writable(0);
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/src/routes/[username]/+page.server.ts:
--------------------------------------------------------------------------------
 1 | /** @type {import('./$types').PageServerLoad} */
 2 | export async function load({ fetch, params }) {
 3 |     const username = params.username
 4 |     const community = await fetch(`/api/get-community?link=${username}`)
 5 |     const res = await community.json()
 6 | 
 7 |     const allCommunities = await fetch('/api/get-communities');
 8 |     const res2 = await allCommunities.json()
 9 |     
10 |     return ({		
11 |         community: res,
12 |         allCommunities: res2
13 |     });
14 | }


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |     color: aliceblue;
 7 |     background-color: #09090b;
 8 | }
 9 | 
10 | 
11 | @layer utilities {
12 |     /* Hide scrollbar for Chrome, Safari and Opera */
13 |     .no-scrollbar::-webkit-scrollbar {
14 |         display: none;
15 |     }
16 |    /* Hide scrollbar for IE, Edge and Firefox */
17 |     .no-scrollbar {
18 |         -ms-overflow-style: none;  /* IE and Edge */
19 |         scrollbar-width: none;  /* Firefox */
20 |   }
21 | }
22 | 
23 | 
24 | 
25 | 


--------------------------------------------------------------------------------
/src/components/socials.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { Github, Rss, Send, Users } from 'lucide-svelte';
 3 | </script>
 4 | 
 5 | <div class="flex justify-end pt-4 text-zinc-500
 6 |     md:pt-8
 7 | ">
 8 |     <div class="flex ">
 9 |         <a href="https://github.com/dagmawibabi/TelegramCommunityGallery" class="hover:text-blue-500">
10 |             <Github size={20} />
11 |         </a>
12 |         <div class="w-4"></div>
13 |         <a href="https://t.me/Dagmawi_Babi" class="hover:text-blue-500">
14 |             <Send size={20}/>
15 |         </a>
16 |     </div>
17 | </div>


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # Use the official bun image as the base image
 2 | FROM oven/bun:1 as base
 3 | 
 4 | # Set the working directory
 5 | WORKDIR /app
 6 | 
 7 | # Copy the package.json, bun.lockb, and other necessary files
 8 | COPY package.json bun.lockb ./
 9 | COPY .env .env
10 | 
11 | # Copy the rest of the application code
12 | COPY . .
13 | 
14 | # Install dependencies using bun
15 | RUN bun install
16 | 
17 | # Build the SvelteKit app
18 | RUN bun run build
19 | 
20 | # Expose the port the app runs on
21 | EXPOSE 5173
22 | 
23 | # Define the command to run the app
24 | CMD ["bun", "run", "dev"]
25 | 


--------------------------------------------------------------------------------
/src/models/community.model.ts:
--------------------------------------------------------------------------------
 1 | import * as mongoose from 'mongoose';
 2 | 
 3 | 
 4 | const CommunityModel = new mongoose.Schema(
 5 |   {
 6 |     name: {type: String, required: true},
 7 |     link: {type: String, required: true, unique: true},
 8 |     description: {type: String},
 9 |     owner: { type: String, default: ''},
10 |     tags: [
11 |         {type: String}
12 |     ],
13 |     type: { type: String }
14 |   },
15 |   { timestamps: true}
16 | );
17 | 
18 | export type Community = mongoose.InferSchemaType<typeof CommunityModel>;
19 | export const Community = mongoose.model('Community', CommunityModel);


--------------------------------------------------------------------------------
/src/lib/components/ui/label/label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Label as LabelPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = LabelPrimitive.Props;
 6 | 	type $$Events = LabelPrimitive.Events;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <LabelPrimitive.Root
13 | 	class={cn(
14 | 		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
15 | 		className
16 | 	)}
17 | 	{...$$restProps}
18 | 	on:mousedown
19 | >
20 | 	<slot />
21 | </LabelPrimitive.Root>
22 | 


--------------------------------------------------------------------------------
/src/components/signInButton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { signIn, signOut } from '@auth/sveltekit/client';
 3 | 	import { page } from '$app/stores';
 4 | </script>
 5 | 
 6 | {#if $page.data.session}
 7 |  <div class="flex gap-3">
 8 |     {#if $page.data.session.user?.image}
 9 |     <img src={$page.data.session.user.image} alt="profile pic" class="rounded-full w-7 h-7" />
10 | 
11 | 	{/if}
12 | 	<button class="hover:text-blue-500 text-sm" on:click={() => signOut()}>Sign Out</button>
13 |  </div>
14 | 	
15 | {:else}
16 | 	<button class="hover:text-blue-500 text-sm" on:click={() => signIn('github')}>Sign In</button>
17 | {/if}
18 | 


--------------------------------------------------------------------------------
/src/routes/api/create-community/+server.ts:
--------------------------------------------------------------------------------
 1 | import { json } from '@sveltejs/kit';
 2 | import { Community } from '../../../models/community.model';
 3 | 
 4 | export async function POST({ request,  }) {
 5 |     const body = await request.json()
 6 |     body.link = body.link.toString().toLowerCase()
 7 |     // console.log("The body: ",body)
 8 |     const newCommunity = new Community({...body})
 9 | 
10 |     try {
11 |         await newCommunity.save();
12 |         return json({ status: 200, body: "Successfully created community"});
13 |       } catch (error) {
14 |         console.error(error);
15 |         return json({ status: 500, body: "Error creating document"});
16 |       }
17 | }


--------------------------------------------------------------------------------
/src/lib/db/db.ts:
--------------------------------------------------------------------------------
 1 | import mongoose, { Mongoose } from 'mongoose';
 2 | import { SECRET_MONGO_URI } from '$env/static/private';
 3 | 
 4 | interface Connection {
 5 |     isConnected?: number;
 6 | }
 7 | 
 8 | const connection: Connection = {};
 9 | 
10 | const dbConnect: () => Promise<void> = async () => {
11 |     if (connection.isConnected) {
12 |         return;
13 |     }
14 |     if (!SECRET_MONGO_URI) {
15 |         throw new Error('Please define the SECRET_MONGO_URI environment variable inside .env');
16 |     }
17 | 
18 |     const db: Mongoose = await mongoose.connect(SECRET_MONGO_URI);
19 | 
20 |     connection.isConnected = db.connections[0].readyState;
21 | };
22 | 
23 | export { dbConnect };


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { fade } from "svelte/transition";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = DialogPrimitive.OverlayProps;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let transition: $$Props["transition"] = fade;
10 | 	export let transitionConfig: $$Props["transitionConfig"] = {
11 | 		duration: 150,
12 | 	};
13 | 	export { className as class };
14 | </script>
15 | 
16 | <DialogPrimitive.Overlay
17 | 	{transition}
18 | 	{transitionConfig}
19 | 	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)}
20 | 	{...$$restProps}
21 | />
22 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /** @type { import("eslint").Linter.Config } */
 2 | module.exports = {
 3 | 	root: true,
 4 | 	extends: [
 5 | 		'eslint:recommended',
 6 | 		'plugin:@typescript-eslint/recommended',
 7 | 		'plugin:svelte/recommended',
 8 | 		'prettier'
 9 | 	],
10 | 	parser: '@typescript-eslint/parser',
11 | 	plugins: ['@typescript-eslint'],
12 | 	parserOptions: {
13 | 		sourceType: 'module',
14 | 		ecmaVersion: 2020,
15 | 		extraFileExtensions: ['.svelte']
16 | 	},
17 | 	env: {
18 | 		browser: true,
19 | 		es2017: true,
20 | 		node: true
21 | 	},
22 | 	overrides: [
23 | 		{
24 | 			files: ['*.svelte'],
25 | 			parser: 'svelte-eslint-parser',
26 | 			parserOptions: {
27 | 				parser: '@typescript-eslint/parser'
28 | 			}
29 | 		}
30 | 	]
31 | };
32 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/button/button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Button as ButtonPrimitive } from "bits-ui";
 3 | 	import { type Events, type Props, buttonVariants } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = Props;
 7 | 	type $$Events = Events;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let variant: $$Props["variant"] = "default";
11 | 	export let size: $$Props["size"] = "default";
12 | 	export let builders: $$Props["builders"] = [];
13 | 	export { className as class };
14 | </script>
15 | 
16 | <ButtonPrimitive.Root
17 | 	{builders}
18 | 	class={cn(buttonVariants({ variant, size, className }))}
19 | 	type="button"
20 | 	{...$$restProps}
21 | 	on:click
22 | 	on:keydown
23 | >
24 | 	<slot />
25 | </ButtonPrimitive.Root>
26 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | // import adapter from "svelte-adapter-bun";
 3 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 4 | 
 5 | /** @type {import('@sveltejs/kit').Config} */
 6 | const config = {
 7 | 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 8 | 	// for more information about preprocessors
 9 | 	preprocess: vitePreprocess(),
10 | 
11 | 	kit: {
12 | 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
13 | 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
14 | 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
15 | 		adapter: adapter()
16 | 	}
17 | };
18 | 
19 | export default config;
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true,
12 | 		"moduleResolution": "bundler",
13 | 		"allowImportingTsExtensions": true,
14 | 		"noImplicitAny": false
15 | 	}
16 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
17 | 	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
18 | 	//
19 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
20 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
21 | }
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/index.ts:
--------------------------------------------------------------------------------
 1 | import { Select as SelectPrimitive } from "bits-ui";
 2 | 
 3 | import Label from "./select-label.svelte";
 4 | import Item from "./select-item.svelte";
 5 | import Content from "./select-content.svelte";
 6 | import Trigger from "./select-trigger.svelte";
 7 | import Separator from "./select-separator.svelte";
 8 | 
 9 | const Root = SelectPrimitive.Root;
10 | const Group = SelectPrimitive.Group;
11 | const Input = SelectPrimitive.Input;
12 | const Value = SelectPrimitive.Value;
13 | 
14 | export {
15 | 	Root,
16 | 	Group,
17 | 	Input,
18 | 	Label,
19 | 	Item,
20 | 	Value,
21 | 	Content,
22 | 	Trigger,
23 | 	Separator,
24 | 	//
25 | 	Root as Select,
26 | 	Group as SelectGroup,
27 | 	Input as SelectInput,
28 | 	Label as SelectLabel,
29 | 	Item as SelectItem,
30 | 	Value as SelectValue,
31 | 	Content as SelectContent,
32 | 	Trigger as SelectTrigger,
33 | 	Separator as SelectSeparator,
34 | };
35 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/input/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./input.svelte";
 2 | 
 3 | export type FormInputEvent<T extends Event = Event> = T & {
 4 | 	currentTarget: EventTarget & HTMLInputElement;
 5 | };
 6 | export type InputEvents = {
 7 | 	blur: FormInputEvent<FocusEvent>;
 8 | 	change: FormInputEvent<Event>;
 9 | 	click: FormInputEvent<MouseEvent>;
10 | 	focus: FormInputEvent<FocusEvent>;
11 | 	focusin: FormInputEvent<FocusEvent>;
12 | 	focusout: FormInputEvent<FocusEvent>;
13 | 	keydown: FormInputEvent<KeyboardEvent>;
14 | 	keypress: FormInputEvent<KeyboardEvent>;
15 | 	keyup: FormInputEvent<KeyboardEvent>;
16 | 	mouseover: FormInputEvent<MouseEvent>;
17 | 	mouseenter: FormInputEvent<MouseEvent>;
18 | 	mouseleave: FormInputEvent<MouseEvent>;
19 | 	paste: FormInputEvent<ClipboardEvent>;
20 | 	input: FormInputEvent<InputEvent>;
21 | 	wheel: FormInputEvent<WheelEvent>;
22 | };
23 | 
24 | export {
25 | 	Root,
26 | 	//
27 | 	Root as Input,
28 | };
29 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import ChevronDown from "lucide-svelte/icons/chevron-down";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = SelectPrimitive.TriggerProps;
 7 | 	type $$Events = SelectPrimitive.TriggerEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <SelectPrimitive.Trigger
14 | 	class={cn(
15 | 		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | 	let:builder
20 | 	on:click
21 | 	on:keydown
22 | >
23 | 	<slot {builder} />
24 | 	<div>
25 | 		<ChevronDown class="h-4 w-4 opacity-50" />
26 | 	</div>
27 | </SelectPrimitive.Trigger>
28 | 


--------------------------------------------------------------------------------
/src/hooks.server.ts:
--------------------------------------------------------------------------------
 1 | import { type Handle } from "@sveltejs/kit";
 2 | import { dbConnect } from '$lib/db/db';
 3 | import { SvelteKitAuth } from '@auth/sveltekit';
 4 | import GitHub from "@auth/sveltekit/providers/github";
 5 | 
 6 | 
 7 | import { GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } from '$env/static/private';
 8 | 
 9 | // Connect DB
10 | export const handle: Handle = async ({ event, resolve }) => {
11 | 	
12 |     try {
13 |         await dbConnect();
14 |         console.log("DB connected");
15 |     } catch (error) {
16 |         console.error("DB connection error:", error);
17 |     }
18 | 
19 |     const githubProvider = GitHub({
20 |         clientId: GITHUB_CLIENT_ID,
21 |         clientSecret: GITHUB_CLIENT_SECRET
22 |     });
23 | 
24 |     
25 |     const authConfig = {
26 |         providers: [githubProvider],
27 |         trustHost: true,
28 |         secret: "true"
29 |     };
30 | 
31 |     // Initialize authentication middleware
32 |     const auth = SvelteKitAuth(authConfig);
33 | 
34 |     return auth.handle({ event, resolve });
35 | };
36 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/index.ts:
--------------------------------------------------------------------------------
 1 | import { Dialog as DialogPrimitive } from "bits-ui";
 2 | 
 3 | import Title from "./dialog-title.svelte";
 4 | import Portal from "./dialog-portal.svelte";
 5 | import Footer from "./dialog-footer.svelte";
 6 | import Header from "./dialog-header.svelte";
 7 | import Overlay from "./dialog-overlay.svelte";
 8 | import Content from "./dialog-content.svelte";
 9 | import Description from "./dialog-description.svelte";
10 | 
11 | const Root = DialogPrimitive.Root;
12 | const Trigger = DialogPrimitive.Trigger;
13 | const Close = DialogPrimitive.Close;
14 | 
15 | export {
16 | 	Root,
17 | 	Title,
18 | 	Portal,
19 | 	Footer,
20 | 	Header,
21 | 	Trigger,
22 | 	Overlay,
23 | 	Content,
24 | 	Description,
25 | 	Close,
26 | 	//
27 | 	Root as Dialog,
28 | 	Title as DialogTitle,
29 | 	Portal as DialogPortal,
30 | 	Footer as DialogFooter,
31 | 	Header as DialogHeader,
32 | 	Trigger as DialogTrigger,
33 | 	Overlay as DialogOverlay,
34 | 	Content as DialogContent,
35 | 	Description as DialogDescription,
36 | 	Close as DialogClose,
37 | };
38 | 


--------------------------------------------------------------------------------
/src/lib/constants.ts:
--------------------------------------------------------------------------------
 1 | export const TAGS = [
 2 | 	'Spiritual',
 3 | 	'Tech',
 4 | 	'News',
 5 | 	'Coding',
 6 | 	'Books',
 7 | 	'Product',
 8 | 	'Startup',
 9 | 	'Company',
10 | 	'School',
11 | 	'Food',
12 | 	'Pets',
13 | 	'Music',
14 | 	'Crafts',
15 | 	'Travel',
16 | 	'Science',
17 | 	'Fitness',
18 | 	'NSFW',
19 | 	'Education',
20 | 	'Photography',
21 | 	'Humor',
22 | 	'Memes',
23 | 	'Hardware',
24 | 	'Politics',
25 | 	'Nature',
26 | 	'Aesthetics',
27 | 	'Wallpapers',
28 | 	'Esoteric',
29 | 	'Literature',
30 | 	'Quotes',
31 | 	'Poems',
32 | 	'Business',
33 | 	'Crypto',
34 | 	'Dating',
35 | 	'Charity',
36 | 	'NGO',
37 | 	'Club',
38 | 	'FOSS',
39 | 	'Dumps',
40 | 	'Gaming',
41 | 	'Podcast',
42 | 	'Resources',
43 | 	'Language',
44 | 	'Governmental',
45 | 	'e-Commerce',
46 | 	'Cybersecurity',
47 | 	'Hacking',
48 | 	'Competitive Programming',
49 | 	'Bible Study',
50 | 	'Philosphy',
51 | 	'Thoughts',
52 | 	'Opportunities',
53 | 	'Jobs',
54 | 	'AI / ML',
55 | 	'Film / TV',
56 | 	'Fashion / Beauty',
57 | 	'Art / Design',
58 | 	'Games / Apps',
59 | 	'Unsorted',
60 | 	'untagged',
61 | 	'other'
62 | ];
63 | 


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


--------------------------------------------------------------------------------
/src/components/header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { allCommunitiesStore } from '../store/store';
 3 | 	import Footer from './footer.svelte';
 4 | 
 5 |     type Community = {
 6 |         name: string,
 7 |         link: string,
 8 |         description: string,
 9 |         owner: string | null | undefined,
10 |         tags: string[],
11 |         type: string,
12 |     };
13 | 
14 |     let allCommunities = <Community[]>[]
15 |     allCommunitiesStore.subscribe((data) => {
16 |         allCommunities = data;
17 |     })
18 | 
19 | </script>
20 | 
21 | <div class="text-center">
22 |     <p class="text-sm text-orange-500 pt-5
23 |         md:pt-0
24 |     "> 
25 |         #{allCommunities.length} Communities Added! 
26 |     </p>
27 |     <a href="/">
28 |         <p class="text-2xl font-bold pt-1 leading-snug hover:text-blue-500
29 |             md:text-4xl
30 |         "> 
31 |             Discover the Best <br/> Telegram Communities 
32 |         </p>
33 |     </a>
34 |     <div class="pt-3 pb-2">
35 |         <p class="text-sm text-zinc-400"> Here are some of the most incredible channels and groups submitted by the public. 
36 |             <br class="hidden md:block"/>  
37 |             <Footer />
38 |         </p>
39 |     </div>
40 | </div>
41 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { scale } from "svelte/transition";
 4 | 	import { cn, flyAndScale } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = SelectPrimitive.ContentProps;
 7 | 	type $$Events = SelectPrimitive.ContentEvents;
 8 | 
 9 | 	export let sideOffset: $$Props["sideOffset"] = 4;
10 | 	export let inTransition: $$Props["inTransition"] = flyAndScale;
11 | 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
12 | 	export let outTransition: $$Props["outTransition"] = scale;
13 | 	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
14 | 		start: 0.95,
15 | 		opacity: 0,
16 | 		duration: 50,
17 | 	};
18 | 
19 | 	let className: $$Props["class"] = undefined;
20 | 	export { className as class };
21 | </script>
22 | 
23 | <SelectPrimitive.Content
24 | 	{inTransition}
25 | 	{inTransitionConfig}
26 | 	{outTransition}
27 | 	{outTransitionConfig}
28 | 	{sideOffset}
29 | 	class={cn(
30 | 		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
31 | 		className
32 | 	)}
33 | 	{...$$restProps}
34 | 	on:keydown
35 | >
36 | 	<div class="w-full p-1">
37 | 		<slot />
38 | 	</div>
39 | </SelectPrimitive.Content>
40 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<script src="https://cdn.jsdelivr.net/npm/@loglib/tracker@latest/dist/index.global.js"
 6 | 		data-id="telegram_dagmawi"></script>
 7 | 	<meta charset="utf-8" />
 8 | 	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
10 | 
11 | 
12 | 
13 | 	<meta name="twitter:image" content="/Screenshot.jpg" />
14 | 	<meta name="twitter:card" content="summary_large_image" />
15 | 	<meta name="twitter:title" content="Telegram Community Gallery" />
16 | 	<meta name="twitter:description" content="Discover the Best
17 | 	Telegram Communities." />
18 | 	<meta name="twitter:url" content="https://telegram.dagmawi.dev/" />
19 | 
20 | 	<meta property="description" content="Discover the Best
21 | 	Telegram Communities." />
22 | 	<meta property="og:image" content="/Screenshot.jpg" />
23 | 	<meta property="og:title" content="Telegram Community Gallery" />
24 | 	<meta property="og:description" content="Discover the Best
25 | 	Telegram Communities." />
26 | 	<meta property="og:url" content="https://telegram.dagmawi.dev/" />
27 | 
28 | 
29 | 	%sveltekit.head%
30 | </head>
31 | 
32 | <body data-sveltekit-preload-data="hover">
33 | 	<div style="display: contents">%sveltekit.body%</div>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/src/lib/components/ui/input/input.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLInputAttributes } from "svelte/elements";
 3 | 	import type { InputEvents } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = HTMLInputAttributes;
 7 | 	type $$Events = InputEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["value"] = undefined;
11 | 	export { className as class };
12 | 
13 | 	// Workaround for https://github.com/sveltejs/svelte/issues/9305
14 | 	// Fixed in Svelte 5, but not backported to 4.x.
15 | 	export let readonly: $$Props["readonly"] = undefined;
16 | </script>
17 | 
18 | <input
19 | 	class={cn(
20 | 		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
21 | 		className
22 | 	)}
23 | 	bind:value
24 | 	{readonly}
25 | 	on:blur
26 | 	on:change
27 | 	on:click
28 | 	on:focus
29 | 	on:focusin
30 | 	on:focusout
31 | 	on:keydown
32 | 	on:keypress
33 | 	on:keyup
34 | 	on:mouseover
35 | 	on:mouseenter
36 | 	on:mouseleave
37 | 	on:paste
38 | 	on:input
39 | 	on:wheel
40 | 	{...$$restProps}
41 | />
42 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Check from "lucide-svelte/icons/check";
 3 | 	import { Select as SelectPrimitive } from "bits-ui";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = SelectPrimitive.ItemProps;
 7 | 	type $$Events = SelectPrimitive.ItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["value"];
11 | 	export let label: $$Props["label"] = undefined;
12 | 	export let disabled: $$Props["disabled"] = undefined;
13 | 	export { className as class };
14 | </script>
15 | 
16 | <SelectPrimitive.Item
17 | 	{value}
18 | 	{disabled}
19 | 	{label}
20 | 	class={cn(
21 | 		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
22 | 		className
23 | 	)}
24 | 	{...$$restProps}
25 | 	on:click
26 | 	on:keydown
27 | 	on:focusin
28 | 	on:focusout
29 | 	on:pointerleave
30 | 	on:pointermove
31 | >
32 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
33 | 		<SelectPrimitive.ItemIndicator>
34 | 			<Check class="h-4 w-4" />
35 | 		</SelectPrimitive.ItemIndicator>
36 | 	</span>
37 | 	<slot>
38 | 		{label || value}
39 | 	</slot>
40 | </SelectPrimitive.Item>
41 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import X from "lucide-svelte/icons/x";
 4 | 	import * as Dialog from "./index.js";
 5 | 	import { cn, flyAndScale } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = DialogPrimitive.ContentProps;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let transition: $$Props["transition"] = flyAndScale;
11 | 	export let transitionConfig: $$Props["transitionConfig"] = {
12 | 		duration: 200,
13 | 	};
14 | 	export { className as class };
15 | </script>
16 | 
17 | <Dialog.Portal>
18 | 	<Dialog.Overlay />
19 | 	<DialogPrimitive.Content
20 | 		{transition}
21 | 		{transitionConfig}
22 | 		class={cn(
23 | 			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
24 | 			className
25 | 		)}
26 | 		{...$$restProps}
27 | 	>
28 | 		<slot />
29 | 		<DialogPrimitive.Close
30 | 			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
31 | 		>
32 | 			<X class="h-4 w-4" />
33 | 			<span class="sr-only">Close</span>
34 | 		</DialogPrimitive.Close>
35 | 	</DialogPrimitive.Content>
36 | </Dialog.Portal>
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tggallery",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vite dev",
 7 |     "build": "vite build",
 8 |     "preview": "vite preview",
 9 |     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
10 |     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
11 |     "lint": "prettier --check . && eslint .",
12 |     "format": "prettier --write ."
13 |   },
14 |   "devDependencies": {
15 |     "@sveltejs/adapter-auto": "^3.0.0",
16 |     "@sveltejs/kit": "^2.0.0",
17 |     "@sveltejs/vite-plugin-svelte": "^3.0.0",
18 |     "@types/eslint": "^8.56.0",
19 |     "@typescript-eslint/eslint-plugin": "^7.0.0",
20 |     "@typescript-eslint/parser": "^7.0.0",
21 |     "autoprefixer": "^10.4.19",
22 |     "eslint": "^8.56.0",
23 |     "eslint-config-prettier": "^9.1.0",
24 |     "eslint-plugin-svelte": "^2.35.1",
25 |     "postcss": "^8.4.38",
26 |     "prettier": "^3.1.1",
27 |     "prettier-plugin-svelte": "^3.1.2",
28 |     "svelte": "^4.2.7",
29 |     "svelte-adapter-bun": "^0.5.2",
30 |     "svelte-check": "^3.6.0",
31 |     "tailwindcss": "^3.4.3",
32 |     "tslib": "^2.4.1",
33 |     "typescript": "^5.0.0",
34 |     "vite": "^5.0.3"
35 |   },
36 |   "type": "module",
37 |   "trustedDependencies": [
38 |     "svelte-preprocess"
39 |   ],
40 |   "dependencies": {
41 |     "@auth/sveltekit": "^1.0.1",
42 |     "@loglib/tracker": "^0.8.0",
43 |     "axios": "^1.6.8",
44 |     "bits-ui": "^0.21.7",
45 |     "clsx": "^2.1.1",
46 |     "lucide-svelte": "^0.378.0",
47 |     "mongoose": "^8.3.4",
48 |     "tailwind-merge": "^2.3.0",
49 |     "tailwind-variants": "^0.2.1"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/button/index.ts:
--------------------------------------------------------------------------------
 1 | import { type VariantProps, tv } from "tailwind-variants";
 2 | import type { Button as ButtonPrimitive } from "bits-ui";
 3 | import Root from "./button.svelte";
 4 | 
 5 | const buttonVariants = tv({
 6 | 	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 7 | 	variants: {
 8 | 		variant: {
 9 | 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
10 | 			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
11 | 			outline:
12 | 				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
13 | 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
14 | 			ghost: "hover:bg-accent hover:text-accent-foreground",
15 | 			link: "text-primary underline-offset-4 hover:underline",
16 | 		},
17 | 		size: {
18 | 			default: "h-10 px-4 py-2",
19 | 			sm: "h-9 rounded-md px-3",
20 | 			lg: "h-11 rounded-md px-8",
21 | 			icon: "h-10 w-10",
22 | 		},
23 | 	},
24 | 	defaultVariants: {
25 | 		variant: "default",
26 | 		size: "default",
27 | 	},
28 | });
29 | 
30 | type Variant = VariantProps<typeof buttonVariants>["variant"];
31 | type Size = VariantProps<typeof buttonVariants>["size"];
32 | 
33 | type Props = ButtonPrimitive.Props & {
34 | 	variant?: Variant;
35 | 	size?: Size;
36 | };
37 | 
38 | type Events = ButtonPrimitive.Events;
39 | 
40 | export {
41 | 	Root,
42 | 	type Props,
43 | 	type Events,
44 | 	//
45 | 	Root as Button,
46 | 	type Props as ButtonProps,
47 | 	type Events as ButtonEvents,
48 | 	buttonVariants,
49 | };
50 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | import { cubicOut } from "svelte/easing";
 4 | import type { TransitionConfig } from "svelte/transition";
 5 | 
 6 | export function cn(...inputs: ClassValue[]) {
 7 | 	return twMerge(clsx(inputs));
 8 | }
 9 | 
10 | type FlyAndScaleParams = {
11 | 	y?: number;
12 | 	x?: number;
13 | 	start?: number;
14 | 	duration?: number;
15 | };
16 | 
17 | export const flyAndScale = (
18 | 	node: Element,
19 | 	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
20 | ): TransitionConfig => {
21 | 	const style = getComputedStyle(node);
22 | 	const transform = style.transform === "none" ? "" : style.transform;
23 | 
24 | 	const scaleConversion = (
25 | 		valueA: number,
26 | 		scaleA: [number, number],
27 | 		scaleB: [number, number]
28 | 	) => {
29 | 		const [minA, maxA] = scaleA;
30 | 		const [minB, maxB] = scaleB;
31 | 
32 | 		const percentage = (valueA - minA) / (maxA - minA);
33 | 		const valueB = percentage * (maxB - minB) + minB;
34 | 
35 | 		return valueB;
36 | 	};
37 | 
38 | 	const styleToString = (
39 | 		style: Record<string, number | string | undefined>
40 | 	): string => {
41 | 		return Object.keys(style).reduce((str, key) => {
42 | 			if (style[key] === undefined) return str;
43 | 			return str + `${key}:${style[key]};`;
44 | 		}, "");
45 | 	};
46 | 
47 | 	return {
48 | 		duration: params.duration ?? 200,
49 | 		delay: 0,
50 | 		css: (t) => {
51 | 			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
52 | 			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
53 | 			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
54 | 
55 | 			return styleToString({
56 | 				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
57 | 				opacity: t
58 | 			});
59 | 		},
60 | 		easing: cubicOut
61 | 	};
62 | };


--------------------------------------------------------------------------------
/src/components/footer.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import axios from 'axios';
 3 | 
 4 |     import { visitorCountStore } from '../store/store';
 5 | 
 6 |     let LOGLIB_API_KEY = "site_h0ug964ux5"
 7 | 
 8 |     // DateTime
 9 |     let date = new Date();
10 |     let humanReadableDate = date.toDateString();
11 | 
12 |     // Get and Set Visitor Count 
13 |     let visitorCount = 0;
14 |     visitorCountStore.subscribe((data) => {
15 |         visitorCount = data;
16 |     })
17 |     async function getVisitorCount() {
18 |         const currentDate = new Date();
19 |         const year = currentDate.getFullYear();
20 |         const month = String(currentDate.getMonth() + 1).padStart(2, '0'); 
21 |         const day = String(currentDate.getDate() + 1).padStart(2, '0');
22 |         const formattedDate = `${year}-${month}-${day}`;    
23 |         let visitorCountResult = await axios({
24 |             method: 'get',
25 |             url: `https://api.loglib.io/v1/insight?apiKey=${LOGLIB_API_KEY}&startDate=2023-08-10&endDate=${formattedDate}&timeZone=Africa/Addis_Ababa`,
26 |             withCredentials: false,
27 |         });
28 |         visitorCountStore.set(visitorCountResult.data.insight.totalPageViews.current);        
29 |     }
30 |     getVisitorCount()
31 |     
32 | </script>
33 | 
34 | <span class="hidden md:block">
35 |     This gallery has been visited <span class="text-white" > {visitorCount} times </span> and was made with love by <a href="https://www.dagmawibabi.com" class="text-white underline underline-offset-4 hover:text-blue-500 hover:underline"> Dagmawi Babi</a>.
36 | </span>
37 | 
38 | <!-- <div class="absolute left-0 right-0 bottom-0 justify-center text-zinc-300 text-center pb-10 text-lg">
39 |     <span class=""> 
40 |         This gallery has been visited <span > {visitorCount} </span> times. 🤍 
41 |     </span>
42 |     <span>
43 |         {humanReadableDate} &copy; Dagmawi Babi
44 |     </span>
45 | </div> -->


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | import { fontFamily } from "tailwindcss/defaultTheme";
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | const config = {
 5 | 	darkMode: ["class"],
 6 | 	content: ["./src/**/*.{html,js,svelte,ts}"],
 7 | 	safelist: ["dark"],
 8 | 	theme: {
 9 | 		container: {
10 | 			center: true,
11 | 			padding: "2rem",
12 | 			screens: {
13 | 				"2xl": "1400px"
14 | 			}
15 | 		},
16 | 		extend: {
17 | 			colors: {
18 | 				border: "hsl(var(--border) / <alpha-value>)",
19 | 				input: "hsl(var(--input) / <alpha-value>)",
20 | 				ring: "hsl(var(--ring) / <alpha-value>)",
21 | 				background: "hsl(var(--background) / <alpha-value>)",
22 | 				foreground: "hsl(var(--foreground) / <alpha-value>)",
23 | 				primary: {
24 | 					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
25 | 					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
26 | 				},
27 | 				secondary: {
28 | 					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
29 | 					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
30 | 				},
31 | 				destructive: {
32 | 					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
33 | 					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
34 | 				},
35 | 				muted: {
36 | 					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
37 | 					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
38 | 				},
39 | 				accent: {
40 | 					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
41 | 					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
42 | 				},
43 | 				popover: {
44 | 					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
45 | 					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
46 | 				},
47 | 				card: {
48 | 					DEFAULT: "hsl(var(--card) / <alpha-value>)",
49 | 					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
50 | 				}
51 | 			},
52 | 			borderRadius: {
53 | 				lg: "var(--radius)",
54 | 				md: "calc(var(--radius) - 2px)",
55 | 				sm: "calc(var(--radius) - 4px)"
56 | 			},
57 | 			fontFamily: {
58 | 				sans: [...fontFamily.sans]
59 | 			}
60 | 		}
61 | 	},
62 | };
63 | 
64 | export default config;
65 | 


--------------------------------------------------------------------------------
/src/components/eachCommunity.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     export let community;
 3 | 
 4 |     import { Rss, Users } from 'lucide-svelte';
 5 | 
 6 | </script>
 7 | 
 8 | 
 9 | <div class={
10 |     community.type == "channel" ? 
11 |         "group py-4 px-5 h-full rounded-xl border border-zinc-800 bg-zinc-900 flex flex-col justify-between hover:border-emerald-400 hover:scale-105 duration-300" 
12 |         : "group py-4 px-5 h-full rounded-xl border border-zinc-800 bg-zinc-900 flex flex-col justify-between hover:border-cyan-400 hover:scale-105 duration-300"}>
13 |     <div>
14 |         <div class="flex justify-between">
15 |             <!-- NAME -->
16 |             {#if community.type == "channel"}
17 |                 <p class="text-lg w-60 leading-relaxed line-clamp-1 overflow-scroll no-scrollbar group-hover:text-emerald-500 font-semibold"> {community.name} </p>
18 |             {:else}                                
19 |                 <p class="text-lg w-60 leading-relaxed line-clamp-1 overflow-scroll no-scrollbar group-hover:text-cyan-500 font-semibold"> {community.name} </p>
20 |             {/if}
21 | 
22 |             <!-- CHANNEL OR GROUP -->
23 |             {#if community.type == "channel"}
24 |                 <div class="rounded-full border border-emerald-900 bg-emerald-500 text-black p-2 absolute -m-8">
25 |                     <Rss size={14}/>
26 |                 </div>
27 |             {:else}                                
28 |                 <div class="rounded-full bg-cyan-500 p-2 absolute -m-8">
29 |                     <Users size={14} class="text-black"/>
30 |                     <!-- <Users size={18} class="text-cyan-500"/> -->
31 |                 </div>
32 |             {/if}
33 |         </div>
34 | 
35 |         <!-- DESCRIPTION -->
36 |         <p class="pb-1 text-sm text-zinc-400 leading-relaxed line-clamp-3 overflow-scroll no-scrollbar py-2 group-hover:text-white"> {community.description} </p>
37 |     </div>
38 | 
39 |     <div class="flex pt-4 pb-0 pr-40 line-clamp-1 overflow-scroll no-scrollbar">
40 |         {#if community.tags.length > 0}            
41 |             {#each community.tags.slice(0,3) as tag}
42 |                 <div class="pr-1">
43 |                     {#if community.type == "channel"}
44 |                         <div class="rounded-full border border-zinc-700 pb-1 px-3 text-sm line-clamp-1 whitespace-nowrap hover:bg-emerald-500 hover:text-black"> {tag} </div>
45 |                     {:else}
46 |                         <div class="rounded-full border border-zinc-700 pb-1 px-3 text-sm line-clamp-1 whitespace-nowrap hover:bg-cyan-500 hover:text-black"> {tag} </div>
47 |                     {/if}
48 |                 </div>
49 |             {/each}
50 |         {/if}
51 |     </div>
52 |     
53 | </div>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ✨ Telegram Community Gallery ✨
 2 | ![Screenshot](/static/Screenshot.jpg)
 3 | 
 4 | **[Telegram Community Gallery](https://telegram.dagmawi.dev)** is a platform where users can discover and submit their favorite Telegram channels and groups, creating a vibrant space for community exploration. Whether you're a seasoned Telegram user or just diving into the world of Telegram communities, this platform is designed with you in mind. 😊
 5 | 
 6 | ### Features 🎉
 7 | - **Discover Communities**: Explore a wide range of Telegram channels and groups, curated by fellow users.
 8 | - **Submit Your Community**: Share your favorite Telegram communities with the world by submitting them to the gallery.
 9 | - **Tagging and Filtering**: Easily find communities that match your interests with powerful tagging and filtering options.
10 | - **Crowdsourced and Open Source**: The platform thrives on community contributions and is completely open source, ensuring transparency and inclusivity.
11 | 
12 | ### Tech Stack 💻
13 | Telegram Community Gallery is built using the following technologies:
14 | - **Frontend**: [SvelteKit](https://kit.svelte.dev/) and [Tailwind](https://tailwindcss.com/)
15 | - **Icons**: [Lucide Icons](https://lucide.dev/)
16 | - **Component Library**: [Shadcn-Svelte](https://www.shadcn-svelte.com/)
17 | - **Backend**: [HonoJS](https://hono.dev/) 
18 | - **Database**: [MongoDB](https://www.mongodb.com/)
19 | 
20 | ### Getting Started 🚀
21 | To get started with Telegram Community Gallery, simply visit our [Website](https://telegram.dagmawi.dev) and start exploring! If you'd like to contribute to the project or report any issues, check out our [GitHub repository.](https://github.com/dagmawibabi/TelegramCommunityGallery)
22 | 
23 | ### How to Contribute 🤝
24 | We welcome contributions from the community! Follow these steps to contribute:
25 | 1. **Fork the Repository**: Fork the Telegram Community Gallery repository to your GitHub account.
26 | 2. **Make Changes**: Create a new branch, make your changes, and commit them to your branch.
27 | 3. **Create a Pull Request**: Once your changes are ready, create a detailed pull request (PR) explaining the changes you've made.
28 | 4. **Review and Iterate**: Collaborate with the maintainers to review and iterate on your changes until they are ready to be merged.
29 | 5. **That's it!**: Can't wait to see the wonders you'll be doing.
30 | 
31 | For more detailed guidelines on contributing, please refer to our contribution guidelines.
32 | 
33 | ### Feedback and Support 💌
34 | Have any questions, suggestions, or need support? Feel free to reach out to us in our discussions tab or [open an issue](https://github.com/dagmawibabi/TelegramCommunityGallery/issues) on GitHub. Your feedback helps us make Telegram Community Gallery even better!
35 | 
36 | ### License 📝
37 | Telegram Community Gallery is licensed under the [MIT License](https://github.com/dagmawibabi/TelegramCommunityGallery?tab=MIT-1-ov-file).
38 | 
39 | ### Thank You and Enjoy! 🥰


--------------------------------------------------------------------------------
/src/components/radioComponent.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     // based on suggestions from:
  3 |     // Sami Keijonen https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074
  4 |     // and Inclusive Components by Heydon Pickering https://inclusive-components.design/toggle-button/
  5 |   
  6 |     export let options;
  7 |     export let legend;
  8 |     export let userSelected = options[0].value;
  9 |       export let fontSize = 16;
 10 |       export let flexDirection = 'column'
 11 |       
 12 |       const uniqueID = Math.floor(Math.random() * 100)
 13 |   
 14 |     const slugify = (str = "") =>
 15 |       str.toLowerCase().replace(/ /g, "-").replace(/\./g, "");
 16 |   </script>
 17 |   
 18 |   <div role="radiogroup" 
 19 |                    class="group-container"
 20 |                    aria-labelledby={`label-${uniqueID}`}
 21 |                    style="font-size:{fontSize}px; flex-direction:{flexDirection}" 
 22 |                    id={`group-${uniqueID}`}>
 23 |           <div class="legend" 
 24 |                            id={`label-${uniqueID}`}>{legend}
 25 |                   </div>
 26 |     {#each options as { value, label }}
 27 |       <input
 28 |         class="sr-only"
 29 |         type="radio"
 30 |         id={slugify(label)}
 31 |         bind:group={userSelected}
 32 |         value={value} />
 33 |       <label for={slugify(label)}> {label} </label>
 34 |     {/each}
 35 |   </div>
 36 |   
 37 |   <style>
 38 |               :root {
 39 |           --accent-color: CornflowerBlue;
 40 |           --gray: #ccc;
 41 |       }
 42 |       
 43 |      .group-container {
 44 |         border-radius: 2px;
 45 |         display: flex;
 46 |         flex-direction: row;
 47 |       }
 48 |   
 49 |     .legend {
 50 |       font-weight: bold;
 51 |     }
 52 |     label {
 53 |       user-select: none;
 54 |       line-height: 1.2em;
 55 |     }
 56 |   
 57 |     .sr-only {
 58 |       position: absolute;
 59 |       clip: rect(1px, 1px, 1px, 1px);
 60 |       padding: 0;
 61 |       border: 0;
 62 |       height: 1px;
 63 |       width: 1px;
 64 |       overflow: hidden;
 65 |     }
 66 |   
 67 |     input[type="radio"] {
 68 |       position: absolute;
 69 |     }
 70 |   
 71 |     input[type="radio"] + label {
 72 |       display: block;
 73 |       position: relative;
 74 |       text-align: left;
 75 |     }
 76 |   
 77 |     input[type="radio"] + label::before {
 78 |         content: "";
 79 |         position: relative;
 80 |         display: inline-block;
 81 |         margin-right: 0.5em;
 82 |         width: 1em;
 83 |         height: 1em;
 84 |         background: transparent;
 85 |         border: 1px solid var(--gray, #ccc);
 86 |         border-radius: 50%;
 87 |         top: 0.2em;
 88 |     }
 89 |   
 90 |     input[type="radio"]:checked + label::before {
 91 |       border: 1px solid var(--gray, #ccc);
 92 |       border-radius: 50%;
 93 |     }
 94 |   
 95 |     input[type="radio"] + label::after {
 96 |       content: "";
 97 |       position: absolute;
 98 |       display: inline-block;
 99 |       width: 0.5em;
100 |       height: 0.5em;
101 |       top: 0.45em;
102 |       left: 0.25em;
103 |       background: var(--accent-color, #282828);
104 |       border: 1px solid var(--accent-color, #282828);
105 |       border-radius: 50%;
106 |       transform: scale(0);
107 |     }
108 |   
109 |     input[type="radio"]:checked + label::after {
110 |       opacity: 1;
111 |       transform: scale(1);
112 |     }
113 |   
114 |     input[type="radio"]:focus + label::before {
115 |       box-shadow: 0 0 0 1px var(--accent-color, #282828);
116 |       border-radius: 50%;
117 |     }  
118 |     
119 |     input[type="radio"]:disabled + label {
120 |       color: darken(var(--gray, #ccc), 10);
121 |     }
122 |   
123 |     input[type="radio"]:disabled + label::before {
124 |       background: var(--gray, #ccc);
125 |     } 
126 |     /* gravy */
127 |   
128 |   
129 |     input[type="radio"] + label::before {
130 |         transition: background 0.3s ease-out;
131 |     }
132 |   
133 |     input[type="radio"]:checked + label::before {
134 |       transition: background 0.3s ease-in;
135 |     }
136 |   
137 |     input[type="radio"] + label::after {
138 |       transition: transform 0.2s ease-out;
139 |     }
140 |   
141 |     input[type="radio"]:checked + label::after {
142 |       transition: transform 0.2s ease-in;
143 |     }
144 |   
145 |     input[type="radio"]:focus + label::before {
146 |       box-shadow: 0 0px 8px var(--accent-color, #282828);
147 |       border-radius: 50%;
148 |     }
149 |   
150 |   </style>
151 |   


--------------------------------------------------------------------------------
/src/routes/[username]/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import { Rss, Users } from 'lucide-svelte';
  3 | 
  4 | 	import { allCommunitiesStore } from "../../store/store";
  5 | 
  6 | 	import Socials from '../../components/socials.svelte';
  7 | 	import Header from '../../components/header.svelte';
  8 | 	import { onMount } from 'svelte';
  9 |     export let data;
 10 | 
 11 |     type Community = {
 12 |         name: string,
 13 |         link: string,
 14 |         description: string,
 15 |         owner: string | null | undefined,
 16 |         tags: string[],
 17 |         type: string,
 18 |     };
 19 | 
 20 |     let currentCommunity = <Community>{}
 21 |     currentCommunity = data.community[0]
 22 | 
 23 |     let communities: Community[] = []
 24 |     
 25 |     let allCommunities = <Community[]>[]
 26 |     allCommunitiesStore.subscribe((data) => {
 27 |         allCommunities = data;
 28 |         // allCommunitiesStore.set(communities)
 29 |     })
 30 | 
 31 |     onMount(()=>{
 32 |         allCommunitiesStore.set(data.allCommunities)
 33 |     })
 34 | </script>
 35 | 
 36 | <svelte:head>
 37 |     <title> {currentCommunity.name} </title> 
 38 | </svelte:head>
 39 | 
 40 | 
 41 | <div class="relative h-screen w-screen">
 42 |     <!-- BACKGROUND -->
 43 |     <div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]">
 44 |     </div>
 45 |     <div class="absolute inset-0 -z-10 h-full w-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,#000_60%,#63e_100%)]"></div>
 46 | 
 47 |     <!-- MAIN SECTION -->
 48 |     <div class="absolute bottom-0 left-0 right-0 top-0 z-50 w-full h-screen overflow-scroll no-scrollbar">
 49 |         <div class="w-full m-auto
 50 |             md:w-1/2 md:px-0
 51 |         ">
 52 |             <div class="px-5
 53 |                 md:px-0
 54 |             ">            
 55 |                 <!-- SOCIALS -->
 56 |                 <Socials />
 57 | 
 58 |                 <!-- HEADER -->
 59 |                 <Header />
 60 |             </div>
 61 |             
 62 |             <!-- CURRENT COMMUNITY -->
 63 |             <div class="py-10 px-6 pb-40
 64 |                 md:px-20
 65 |             ">
 66 |                 <div class={
 67 |                     currentCommunity.type == "channel" ? 
 68 |                     "w-fit mx-auto px-4 py-3 rounded-2xl border border-emerald-500 bg-zinc-950 md:min-w-[400px] md:px-8 md:py-6" : 
 69 |                     "w-fit mx-auto px-4 py-3 rounded-2xl border border-cyan-500 bg-zinc-950 md:min-w-[400px] md:px-8 md:py-6"}>
 70 | 
 71 |                     {#if currentCommunity.type == "channel"}
 72 |                         <div class="absolute -m-12 text-black rounded-full bg-emerald-500 w-fit p-3 hidden md:visible">
 73 |                             <Rss size={25} />
 74 |                         </div>
 75 |                     {:else}
 76 |                         <div class="absolute -m-12 text-black rounded-full bg-cyan-500 w-fit p-3 hidden md:visible">
 77 |                             <Users size={25}/>
 78 |                         </div>
 79 |                     {/if}
 80 |                     <div class={currentCommunity.type == "channel" ? "text-lg font-bold pb-1 text-emerald-500 md:text-md" : "text-lg font-bold pb-1 text-cyan-500"}>
 81 |                         {currentCommunity.name}
 82 |                     </div>
 83 | 
 84 |                     <a href={`https://t.me/${currentCommunity.link.substring(1)}`}>
 85 |                         <div class={currentCommunity.type == "channel" ? "w-fit text-sm pb-6 text-cyan-500 font-semibold md:text-md" : "text-md pb-6 text-emerald-500 font-semibold"}>
 86 |                             {currentCommunity.link}
 87 |                         </div>
 88 |                     </a>
 89 | 
 90 |                     <!-- {currentCommunity.description} -->
 91 |                     <div class="text-md text-zinc-200 line-clamp-none pb-5 flex flex-wrap md:text-md">
 92 |                         <!-- <p> {currentCommunity.description} </p> -->
 93 |                         {#if currentCommunity.description.includes("\n") == true}
 94 |                             {#each currentCommunity.description.split("\n") as letters}
 95 |                             <span class={currentCommunity.type == "channel" ? "hover:text-emerald-500" : "hover:text-cyan-500"}>
 96 |                                 {letters}&nbsp;
 97 |                             </span>
 98 |                             {/each}
 99 |                         {:else}                            
100 |                             {#each currentCommunity.description.split(" ") as letters}
101 |                             <span class={currentCommunity.type == "channel" ? "hover:text-emerald-500" : "hover:text-cyan-500"}>
102 |                                 {letters}&nbsp;
103 |                             </span>
104 |                         {/each}
105 |                     {/if}
106 |                     </div>
107 | 
108 |                     {#if currentCommunity.owner != ""}
109 |                         <a href={`https://t.me/${currentCommunity.owner?.substring(1)}`}>
110 |                             <div class="text-md font-semibold">
111 |                                 Owner: <span class={currentCommunity.type == "channel" ? "text-cyan-500" : "text-emerald-500"}>{currentCommunity.owner}</span>
112 |                             </div>
113 |                         </a>
114 |                     {/if}
115 | 
116 |                     <div class="flex flex-row flex-wrap pt-6">
117 |                         {#each currentCommunity.tags as tag}
118 |                         <div class="pr-2 pb-3">
119 |                             <div class={currentCommunity.type == "channel" ? "rounded-full px-3 bg-emerald-500 w-fit text-sm text-black font-semibold line-clamp-1 whitespace-nowrap" : "rounded-full px-3 bg-cyan-500 w-fit text-sm text-black font-semibold line-clamp-1 overflow-scroll no-scrollbar whitespace-nowrap"}>
120 |                                 {tag}
121 |                             </div>                            
122 |                         </div>
123 |                         {/each}
124 | 
125 |                     </div>
126 | 
127 |                 </div>
128 |             </div>
129 | 
130 |             
131 |         </div>
132 |     </div>
133 |     <!-- FOOTER -->
134 |     <!-- <Footer /> -->
135 | </div>
136 | 
137 | 
138 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import * as Select from '$lib/components/ui/select';
  3 | 	import Socials from '../components/socials.svelte';
  4 | 	import SignIn from '../components/signInButton.svelte';
  5 | 	import AddCommunity from '../components/addCommunity.svelte';
  6 | 	import EachCommunity from '../components/eachCommunity.svelte';
  7 | 	import Footer from '../components/footer.svelte';
  8 | 	import axios from 'axios';
  9 | 	import { currentCommunityStore, allCommunitiesStore, filteredTagsStore } from '../store/store';
 10 | 	import Header from '../components/header.svelte';
 11 | 	import { CircleX, Search } from 'lucide-svelte';
 12 | 
 13 | 	import { TAGS } from '$lib/constants.js';
 14 | 	import { onMount } from 'svelte';
 15 | 	import { derived, writable } from 'svelte/store';
 16 | 
 17 | 	export let data;
 18 | 
 19 | 	type Community = {
 20 | 		name: string;
 21 | 		link: string;
 22 | 		description: string;
 23 | 		owner: string | null | undefined;
 24 | 		tags: string[];
 25 | 		type: string;
 26 | 	};
 27 | 	let communities: Community[] = [];
 28 | 
 29 | 	let allCommunities = <Community[]>[];
 30 | 	allCommunitiesStore.subscribe((data) => {
 31 | 		allCommunities = data;
 32 | 	});
 33 | 
 34 | 	allCommunitiesStore.set(communities);
 35 | 
 36 | 	onMount(() => {
 37 | 		allCommunitiesStore.set(data.allCommunities);
 38 | 	});
 39 | 
 40 | 	let filterFeedTags = <string[]>[];
 41 | 	filteredTagsStore.subscribe((data) => {
 42 | 		filterFeedTags = data;
 43 | 	});
 44 | 
 45 | 	function filterFeed(tag: string) {
 46 | 		if (filterFeedTags.indexOf(tag) == -1) {
 47 | 			filterFeedTags.push(tag);
 48 | 		} else {
 49 | 			const index = filterFeedTags.indexOf(tag);
 50 | 			if (index > -1) {
 51 | 				filterFeedTags.splice(index, 1);
 52 | 			}
 53 | 		}
 54 | 		filteredTagsStore.set(filterFeedTags);
 55 | 	}
 56 | 
 57 | 	function clearFilter() {
 58 | 		filterFeedTags = [];
 59 | 		filteredTagsStore.set(filterFeedTags);
 60 | 	}
 61 | 
 62 | 	function allElementsInArray(arr1: string[], arr2: string[]) {
 63 | 		const lowerArr1 = arr1.map((item) => item.toLowerCase());
 64 | 		const lowerArr2 = arr2.map((item) => item.toLowerCase());
 65 | 		return lowerArr1.every((item) => lowerArr2.includes(item));
 66 | 	}
 67 | 
 68 | 	// Define isChannels as a writable store
 69 | 	const isChannels = writable('all');
 70 | 	const searchTerm = writable('');
 71 | 
 72 | 	// Define the derived store
 73 | 	const filteredCommunities = derived(
 74 | 		[allCommunitiesStore, filteredTagsStore, searchTerm, isChannels],
 75 | 		([$allCommunities, $filteredTags, $searchTerm, $isChannels]) => {
 76 | 			return $allCommunities.filter((community) => {
 77 | 				const matchesTags =
 78 | 					$filteredTags.length === 0 || allElementsInArray($filteredTags, community.tags);
 79 | 				const matchesType = $isChannels === community.type || $isChannels === 'all';
 80 | 				const matchesSearch =
 81 | 					$searchTerm === '' ||
 82 | 					community.name.toLowerCase().includes($searchTerm.toLowerCase()) ||
 83 | 					community.description.toLowerCase().includes($searchTerm.toLowerCase());
 84 | 
 85 | 				return matchesTags && matchesType && matchesSearch;
 86 | 			});
 87 | 		}
 88 | 	);
 89 | </script>
 90 | 
 91 | <svelte:head>
 92 | 	<title>Telegram Community Gallery</title>
 93 | </svelte:head>
 94 | 
 95 | <div class="relative h-screen w-screen">
 96 | 	<div
 97 | 		class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"
 98 | 	></div>
 99 | 	<div
100 | 		class="absolute inset-0 -z-10 h-full w-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,#000_60%,#63e_100%)]"
101 | 	></div>
102 | 
103 | 	<div
104 | 		class="absolute bottom-0 left-0 right-0 top-0 z-50 w-full h-screen overflow-scroll no-scrollbar"
105 | 	>
106 | 		<div
107 | 			class="w-full m-auto
108 |           md:w-1/2 md:px-0
109 |       "
110 | 		>
111 | 			<div
112 | 				class="px-5
113 |             md:px-0
114 |         "
115 | 			>
116 | 				<div class="flex justify-between items-center">
117 | 					<div>
118 | 						<SignIn />
119 | 					</div>
120 | 
121 | 					<div>
122 | 						<Socials />
123 | 					</div>
124 | 				</div>
125 | 
126 | 				<Header />
127 | 
128 | 				<AddCommunity />
129 | 
130 | 				<div class="relative mt-6">
131 | 					<Search class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" size={20} />
132 | 					<input
133 | 						type="text"
134 | 						class="w-full bg-[#09090b] rounded-full border border-zinc-800 py-2 pl-10 pr-4 text-zinc-400 focus:outline-none focus:border-blue-500"
135 | 						placeholder="Search communities..."
136 | 						bind:value={$searchTerm}
137 | 					/>
138 | 				</div>
139 | 
140 | 				<div class="flex flex-row flex-wrap justify-center gap-1 overflow-scroll no-scrollbar pt-8">
141 | 					{#each TAGS as tag}
142 | 						<div
143 | 							class="pr-0 py-1 cursor-pointer
144 |                   md:pr-2 md:py-1
145 |               "
146 | 						>
147 | 							{#if filterFeedTags.indexOf(tag) == -1}
148 | 								<span
149 | 									on:click={(e) => filterFeed(tag)}
150 | 									class="lowercase pb-1 bg-[#09090b] rounded-full border border-zinc-800 h-fit w-fit px-4 text-sm text-zinc-400 hover:bg-blue-500 cursor-pointer hover:text-black line-clamp-1
151 |                         md:text-base md:px-3
152 |                     "
153 | 								>
154 | 									{tag}
155 | 								</span>
156 | 							{:else}
157 | 								<span
158 | 									on:click={(e) => filterFeed(tag)}
159 | 									class="lowercase pb-1 bg-blue-500 rounded-full border border-zinc-800 h-fit w-fit px-3 text-base text-black font-semibold cursor-pointer hover:text-black line-clamp-1"
160 | 								>
161 | 									{tag}
162 | 								</span>
163 | 							{/if}
164 | 						</div>
165 | 					{/each}
166 | 					<div
167 | 						class="flex items-center text-zinc-500 py-1 hover:text-white"
168 | 						on:click={(e) => clearFilter()}
169 | 					>
170 | 						<CircleX size={17} />
171 | 					</div>
172 | 				</div>
173 | 
174 | 				<div class="pt-6 flex justify-end">
175 | 					<Select.Root>
176 | 						<Select.Trigger class="w-[150px] bg-[#09090b] border-zinc-800 pb-3 pl-4 rounded-full">
177 | 							<Select.Value placeholder="All" />
178 | 						</Select.Trigger>
179 | 						<Select.Content class="bg-zinc-950 border-zinc-800 text-sm">
180 | 							<Select.Item
181 | 								value="All"
182 | 								class="hover:bg-zinc-600 text-sm"
183 | 								on:click={(e) => {
184 | 									isChannels.set('all');
185 | 								}}
186 | 							>
187 | 								All
188 | 							</Select.Item>
189 | 							<Select.Item
190 | 								value="Channels"
191 | 								class="hover:bg-zinc-600 text-sm"
192 | 								on:click={(e) => {
193 | 									isChannels.set('channel');
194 | 								}}
195 | 							>
196 | 								Channels
197 | 							</Select.Item>
198 | 							<Select.Item
199 | 								value="Groups"
200 | 								class="hover:bg-zinc-600 text-sm"
201 | 								on:click={(e) => {
202 | 									isChannels.set('group');
203 | 								}}
204 | 							>
205 | 								Groups
206 | 							</Select.Item>
207 | 						</Select.Content>
208 | 					</Select.Root>
209 | 				</div>
210 | 			</div>
211 | 
212 | 			{#if $allCommunitiesStore.length > 0}
213 | 				{#if $filteredCommunities.length > 0}
214 | 					<div
215 | 						class="grid grid-cols-1 gap-5 pt-14 pb-48 px-10
216 |               md:grid md:grid-cols-3 md:px-0
217 |           "
218 | 					>
219 | 						{#each $filteredCommunities as community}
220 | 							<a href="/{community.link}" on:click={(e) => currentCommunityStore.set(community)}>
221 | 								<EachCommunity {community} />
222 | 							</a>
223 | 						{/each}
224 | 					</div>
225 | 				{:else}
226 | 					<div class="pt-40 pb-60 text-center w-full">
227 | 						<span class="text-md text-zinc-300">
228 | 							No communities found matching your criteria.
229 | 						</span>
230 | 					</div>
231 | 				{/if}
232 | 			{:else}
233 | 				<div class="pt-40 pb-60 text-center w-full">
234 | 					<span class="text-md text-zinc-300"> Loading Communities... </span>
235 | 				</div>
236 | 			{/if}
237 | 		</div>
238 | 	</div>
239 | </div>
240 | 


--------------------------------------------------------------------------------
/src/components/addCommunity.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { Send } from 'lucide-svelte';
  3 | 
  4 | 	import { Button } from '$lib/components/ui/button/index.ts';
  5 | 	import * as Dialog from '$lib/components/ui/dialog/index.ts';
  6 | 
  7 | 	import RadioComponent from './radioComponent.svelte';
  8 | 	// import axios from 'axios';
  9 | 
 10 | 	import { TAGS } from '$lib/constants';
 11 | 	// import { error, redirect } from '@sveltejs/kit';
 12 | 
 13 | 	interface Community {
 14 | 		name: String;
 15 | 		link: String;
 16 | 		description: String;
 17 | 		owner: String | null | undefined;
 18 | 		tags: String[];
 19 | 		type: String;
 20 | 	}
 21 | 
 22 | 	// export let communities: Community[];
 23 | 	let errors: string[] = [];
 24 | 	// let foundDuplicateLink = false
 25 | 
 26 | 	const options = [
 27 | 		{
 28 | 			value: 'channel',
 29 | 			label: 'Channel'
 30 | 		},
 31 | 		{
 32 | 			value: 'group',
 33 | 			label: 'Group'
 34 | 		}
 35 | 	];
 36 | 
 37 | 	let submitting = false;
 38 | 
 39 | 	// export let getCommunities: Function;
 40 | 
 41 | 	function replaceTelegramLink(str: string) {
 42 | 		if (str.startsWith('t.me/')) {
 43 | 			return str.replace('t.me/', '@');
 44 | 		}
 45 | 		if (str.startsWith('https://t.me/')) {
 46 | 			return str.replace('https://t.me/', '@');
 47 | 		}
 48 | 		return str;
 49 | 	}
 50 | 
 51 | 	let name = '';
 52 | 	let link = '';
 53 | 	let owner: string | null | undefined = '';
 54 | 
 55 | 	$: if (name) name = replaceTelegramLink(name!);
 56 | 	$: if (link) link = replaceTelegramLink(link!);
 57 | 	$: if (owner) owner = replaceTelegramLink(owner!);
 58 | 
 59 | 	let description = '';
 60 | 	let selectedTags: String[] = [];
 61 | 	let type = '';
 62 | 
 63 | 	function addRemoveTag(tag: String) {
 64 | 		if (selectedTags.indexOf(tag) == -1) {
 65 | 			selectedTags.push(tag);
 66 | 		} else {
 67 | 			const index = selectedTags.indexOf(tag);
 68 | 			if (index > -1) {
 69 | 				selectedTags.splice(index, 1);
 70 | 			}
 71 | 		}
 72 | 		selectedTags = selectedTags;
 73 | 	}
 74 | 
 75 | 	async function submitCommunity() {
 76 | 		errors = [];
 77 | 		submitting = true;
 78 | 
 79 | 		let newCommunity: Community = {
 80 | 			name,
 81 | 			link,
 82 | 			description,
 83 | 			owner,
 84 | 			tags: selectedTags.length > 0 ? selectedTags : ['untagged'],
 85 | 			type: type
 86 | 		};
 87 | 
 88 | 		// CHECK DIPLICATE USERNAME
 89 | 		let community = await fetch(`/api/get-community?link=${link.toString().toLowerCase()}`);
 90 | 		let res = await community.json();
 91 | 
 92 | 		if (!res.length) {
 93 | 			let results = await fetch('/api/create-community', {
 94 | 				method: 'POST',
 95 | 				headers: {
 96 | 					'Content-Type': 'application/json'
 97 | 				},
 98 | 				body: JSON.stringify(newCommunity)
 99 | 			});
100 | 			const re = await results.json();
101 | 
102 | 			if (re.error) {
103 | 				errors.push('Error creating community');
104 | 				errors = errors;
105 | 				console.log(re.body);
106 | 			} else {
107 | 				// Please find something reasonable
108 | 				window.location.reload();
109 | 				console.log(re);
110 | 			}
111 | 		} else {
112 | 			errors.push('duplicate username');
113 | 			errors = errors;
114 | 		}
115 | 
116 | 		// communities = results["data"]
117 | 		selectedTags = [];
118 | 		submitting = false;
119 | 	}
120 | </script>
121 | 
122 | <div class="text-center pt-3">
123 | 	<Dialog.Root>
124 | 		<!-- TRIGGER -->
125 | 		<Dialog.Trigger>
126 | 			<div
127 | 				class="flex align-middle items-center rounded-full border border-zinc-700 w-fit py-1 px-4 text-center font-semibold mx-auto hover:bg-blue-500 hover:text-black"
128 | 			>
129 | 				<Send size={16} />
130 | 				<p
131 | 					class="pl-2 text-sm pb-1
132 |                 md:text-md
133 |             "
134 | 				>
135 | 					Submit Your Channel / Group
136 | 				</p>
137 | 			</div>
138 | 		</Dialog.Trigger>
139 | 
140 | 		<Dialog.Content
141 | 			class="h-[400px] md:h-3/4 overflow-scroll no-scrollbar w-[350px] sm:max-w-[425px] bg-zinc-900 border-zinc-800 rounded-xl "
142 | 		>
143 | 			<!-- HEADER -->
144 | 			<Dialog.Header class="text-left">
145 | 				<Dialog.Title class="text-md font-semibold">Add Channel / Group</Dialog.Title>
146 | 				<Dialog.Description class="text-zinc-300 text-sm">
147 | 					Add your community and click save when you're done!
148 | 				</Dialog.Description>
149 | 			</Dialog.Header>
150 | 
151 | 			<!-- FORM -->
152 | 			<div class="flex flex-col pt-0">
153 | 				<label for="communityName" class="pb-3 text-sm font-semibold"> Community Name </label>
154 | 				<input
155 | 					id="communityName"
156 | 					class="bg-zinc-800 rounded-xl p-1 pb-2 px-3 outline-none text-sm"
157 | 					placeholder="eg: Pavel Durov"
158 | 					autocomplete="off"
159 | 					bind:value={name}
160 | 					required
161 | 				/>
162 | 				<label for="communityLink" class="pt-3 pb-3 text-sm font-semibold"> Community Link </label>
163 | 				<!-- Check duplicate - api route -->
164 | 				<input
165 | 					id="communityLink"
166 | 					class="bg-zinc-800 rounded-xl p-1 pb-2 px-3 outline-none text-sm"
167 | 					placeholder="eg: @Durov or @+OZ9Ul_rSBAQ0MjNk "
168 | 					autocomplete="off"
169 | 					bind:value={link}
170 | 					required
171 | 				/>
172 | 				<div class="pl-4 pt-1">
173 | 					<ul>
174 | 						{#each errors as error}
175 | 							<li class="text-red-500 text-sm list-disc">{error}</li>
176 | 						{/each}
177 | 					</ul>
178 | 				</div>
179 | 				<label for="communityDescription" class="pt-3 pb-3 text-sm font-semibold">
180 | 					Community Description
181 | 				</label>
182 | 				<textarea
183 | 					id="communityDescription"
184 | 					class="bg-zinc-800 rounded-xl p-1 pb-2 px-3 outline-none text-sm"
185 | 					placeholder="eg: Announcement channel of Telegram's CEO "
186 | 					rows="4"
187 | 					maxlength="1000"
188 | 					bind:value={description}
189 | 					required
190 | 				/>
191 | 				<label for="communityOwner" class="pt-3 pb-3 text-sm font-semibold">
192 | 					Community Owner <span class="font-normal text-zinc-500"> [Optional] </span>
193 | 				</label>
194 | 				<input
195 | 					id="communityOwner"
196 | 					class="bg-zinc-800 rounded-xl p-1 pb-2 px-3 outline-none text-sm"
197 | 					placeholder="eg: @PavelDurov"
198 | 					autocomplete="off"
199 | 					bind:value={owner}
200 | 				/>
201 | 				<label for="communityTypes" class="pt-3 pb-2 text-sm font-semibold"> Community Type </label>
202 | 				<div class="flex" id="communityTypes">
203 | 					<RadioComponent {options} fontSize={16} legend="" bind:userSelected={type} />
204 | 				</div>
205 | 
206 | 				<div class="pt-6 pb-3 text-sm">
207 | 					<span class="text-sm font-semibold"> Community Tags </span>
208 | 					<div class="flex flex-row flex-wrap w-full pt-4">
209 | 						{#each TAGS as tag}
210 | 							<!-- svelte-ignore a11y-click-events-have-key-events -->
211 | 							<!-- svelte-ignore a11y-no-static-element-interactions -->
212 | 							<div class="p-1 lowercase cursor-pointer">
213 | 								{#if type == 'channel'}
214 | 									{#if !selectedTags.includes(tag)}
215 | 										<span
216 | 											on:click={(e) => addRemoveTag(tag)}
217 | 											class="rounded-full border border-zinc-700 w-fit pb-1 px-3 line-clamp-1 whitespace-nowrap hover:bg-emerald-400 hover:text-black overflow-scroll no-scrollbar"
218 | 										>
219 | 											{tag}
220 | 										</span>
221 | 									{:else}
222 | 										<span
223 | 											on:click={(e) => addRemoveTag(tag)}
224 | 											class="rounded-full border border-zinc-700 w-fit pb-1 px-3 line-clamp-1 whitespace-nowrap bg-emerald-400 text-black overflow-scroll no-scrollbar"
225 | 										>
226 | 											{tag}
227 | 										</span>
228 | 									{/if}
229 | 								{:else if !selectedTags.includes(tag)}
230 | 									<span
231 | 										on:click={(e) => addRemoveTag(tag)}
232 | 										class="rounded-full border border-zinc-700 w-fit pb-1 px-3 line-clamp-1 whitespace-nowrap hover:bg-cyan-400 hover:text-black overflow-scroll no-scrollbar"
233 | 									>
234 | 										{tag}
235 | 									</span>
236 | 								{:else}
237 | 									<span
238 | 										on:click={(e) => addRemoveTag(tag)}
239 | 										class="rounded-full border border-zinc-700 w-fit pb-1 px-3 line-clamp-1 whitespace-nowrap bg-cyan-400 text-black overflow-scroll no-scrollbar"
240 | 									>
241 | 										{tag}
242 | 									</span>
243 | 								{/if}
244 | 							</div>
245 | 						{/each}
246 | 					</div>
247 | 				</div>
248 | 				<Button
249 | 					on:click={submitCommunity}
250 | 					disabled={submitting}
251 | 					class={`${type == 'channel' ? ' hover:bg-emerald-400' : 'hover:bg-cyan-400'} rounded-full px-2 py-0 bg-white text-black text-sm font-semibold`}
252 | 				>
253 | 					Save Changes
254 | 				</Button>
255 | 			</div>
256 | 		</Dialog.Content>
257 | 	</Dialog.Root>
258 | </div>
259 | 


--------------------------------------------------------------------------------