mleku/flotilla
1
1
Fork 0
mirror of https://github.com/coracle-social/flotilla.git synced 2025-12-09 18:37:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Autoformat

Browse Source
This commit is contained in:
Jon Staab
2024-08-05 15:28:46 -07:00
parent 856a5cecc4
commit 4172b2d91f
20 changed files with 362 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.prettierrc
View File

@@ -1,8 +1,10 @@
{ {
"useTabs": true, "semi": false,
"singleQuote": true, "printWidth": 100,
"trailingComma": "none", "bracketSameLine": true,
"printWidth": 100, "svelteSortOrder": "options-styles-scripts-markup",
"plugins": ["prettier-plugin-svelte"], "arrowParens": "avoid",
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] "bracketSpacing": false,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [{"files": "*.svelte", "options": {"parser": "svelte"}}]
} }

81
eslint.config.js
View File

@@ -1,33 +1,54 @@
import js from '@eslint/js'; import js from "@eslint/js"
import ts from 'typescript-eslint'; import ts from "typescript-eslint"
import svelte from 'eslint-plugin-svelte'; import svelte from "eslint-plugin-svelte"
import prettier from 'eslint-config-prettier'; import prettier from "eslint-config-prettier"
import globals from 'globals'; import globals from "globals"
/** @type {import('eslint').Linter.Config[]} */ /** @type {import('eslint').Linter.Config[]} */
export default [ export default [
js.configs.recommended, js.configs.recommended,
...ts.configs.recommended, ...ts.configs.recommended,
...svelte.configs['flat/recommended'], ...svelte.configs["flat/recommended"],
prettier, prettier,
...svelte.configs['flat/prettier'], ...svelte.configs["flat/prettier"],
{ {
languageOptions: { languageOptions: {
globals: { globals: {
...globals.browser, ...globals.browser,
...globals.node ...globals.node,
} },
} },
}, },
{ {
files: ['**/*.svelte'], files: ["**/*.svelte"],
languageOptions: { languageOptions: {
parserOptions: { parserOptions: {
parser: ts.parser parser: ts.parser,
} },
} },
}, },
{ {
ignores: ['build/', '.svelte-kit/', 'dist/'] ignores: ["build/", ".svelte-kit/", "dist/"],
} },
]; {
rules: {
"a11y-click-events-have-key-events": "off",
"a11y-autofocus": "off",
"no-constant-condition": "off",
"no-unused-vars": "off",
"no-useless-escape": "off",
"no-extra-semi": "off",
"no-async-promise-executor": "off",
"prefer-const": ["error", {destructuring: "all"}],
"svelte/valid-compile": "off",
"svelte/no-at-html-tags": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-extra-semi": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{args: "none", destructuredArrayIgnorePattern: "^_d?$"},
],
},
},
]

79
package-lock.json generated
View File

@@ -11,7 +11,8 @@
"@poppanator/sveltekit-svg": "^4.2.1", "@poppanator/sveltekit-svg": "^4.2.1",
"@welshman/lib": "^0.0.12", "@welshman/lib": "^0.0.12",
"daisyui": "^4.12.10", "daisyui": "^4.12.10",
"nostr-login": "^1.5.2" "nostr-login": "^1.5.2",
"prettier-plugin-tailwindcss": "^0.6.5"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-auto": "^3.0.0",
@@ -3779,7 +3780,6 @@
"version": "3.3.3", "version": "3.3.3",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
"dev": true,
"bin": { "bin": {
"prettier": "bin/prettier.cjs" "prettier": "bin/prettier.cjs"
}, },
@@ -3794,12 +3794,85 @@
"version": "3.2.6", "version": "3.2.6",
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.6.tgz", "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.6.tgz",
"integrity": "sha512-Y1XWLw7vXUQQZmgv1JAEiLcErqUniAF2wO7QJsw8BVMvpLET2dI5WpEIEJx1r11iHVdSMzQxivyfrH9On9t2IQ==", "integrity": "sha512-Y1XWLw7vXUQQZmgv1JAEiLcErqUniAF2wO7QJsw8BVMvpLET2dI5WpEIEJx1r11iHVdSMzQxivyfrH9On9t2IQ==",
"dev": true, "devOptional": true,
"peerDependencies": { "peerDependencies": {
"prettier": "^3.0.0", "prettier": "^3.0.0",
"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0" "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
} }
}, },
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.6.5",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz",
"integrity": "sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==",
"engines": {
"node": ">=14.21.3"
},
"peerDependencies": {
"@ianvs/prettier-plugin-sort-imports": "*",
"@prettier/plugin-pug": "*",
"@shopify/prettier-plugin-liquid": "*",
"@trivago/prettier-plugin-sort-imports": "*",
"@zackad/prettier-plugin-twig-melody": "*",
"prettier": "^3.0",
"prettier-plugin-astro": "*",
"prettier-plugin-css-order": "*",
"prettier-plugin-import-sort": "*",
"prettier-plugin-jsdoc": "*",
"prettier-plugin-marko": "*",
"prettier-plugin-organize-attributes": "*",
"prettier-plugin-organize-imports": "*",
"prettier-plugin-sort-imports": "*",
"prettier-plugin-style-order": "*",
"prettier-plugin-svelte": "*"
},
"peerDependenciesMeta": {
"@ianvs/prettier-plugin-sort-imports": {
"optional": true
},
"@prettier/plugin-pug": {
"optional": true
},
"@shopify/prettier-plugin-liquid": {
"optional": true
},
"@trivago/prettier-plugin-sort-imports": {
"optional": true
},
"@zackad/prettier-plugin-twig-melody": {
"optional": true
},
"prettier-plugin-astro": {
"optional": true
},
"prettier-plugin-css-order": {
"optional": true
},
"prettier-plugin-import-sort": {
"optional": true
},
"prettier-plugin-jsdoc": {
"optional": true
},
"prettier-plugin-marko": {
"optional": true
},
"prettier-plugin-organize-attributes": {
"optional": true
},
"prettier-plugin-organize-imports": {
"optional": true
},
"prettier-plugin-sort-imports": {
"optional": true
},
"prettier-plugin-style-order": {
"optional": true
},
"prettier-plugin-svelte": {
"optional": true
}
}
},
"node_modules/punycode": { "node_modules/punycode": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

81
package.json
View File

@@ -1,42 +1,43 @@
{ {
"name": "flotilla", "name": "flotilla",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .", "lint": "prettier --check . && eslint .",
"format": "prettier --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^9.6.0", "@types/eslint": "^9.6.0",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"eslint": "^9.0.0", "eslint": "^9.0.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0", "eslint-plugin-svelte": "^2.36.0",
"globals": "^15.0.0", "globals": "^15.0.0",
"postcss": "^8.4.40", "postcss": "^8.4.40",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7", "svelte": "^4.2.7",
"svelte-check": "^3.6.0", "svelte-check": "^3.6.0",
"tailwindcss": "^3.4.7", "tailwindcss": "^3.4.7",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"typescript-eslint": "^8.0.0", "typescript-eslint": "^8.0.0",
"vite": "^5.0.3" "vite": "^5.0.3"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@poppanator/sveltekit-svg": "^4.2.1", "@poppanator/sveltekit-svg": "^4.2.1",
"@welshman/lib": "^0.0.12", "@welshman/lib": "^0.0.12",
"daisyui": "^4.12.10", "daisyui": "^4.12.10",
"nostr-login": "^1.5.2" "nostr-login": "^1.5.2",
} "prettier-plugin-tailwindcss": "^0.6.5"
}
} }

3
src/app.css
View File

@@ -13,7 +13,8 @@
transition-duration: 150ms; transition-duration: 150ms;
} }
.button:active:hover, .button:active:focus { .button:active:hover,
.button:active:focus {
animation: button-pop 0s ease-out; animation: button-pop 0s ease-out;
transform: scale(var(--btn-focus-scale, 0.97)); transform: scale(var(--btn-focus-scale, 0.97));
} }

22
src/app.d.ts vendored
View File

@@ -1,17 +1,17 @@
import '@poppanator/sveltekit-svg/dist/svg' import "@poppanator/sveltekit-svg/dist/svg"
// See https://kit.svelte.dev/docs/types#app // See https://kit.svelte.dev/docs/types#app
// for information about these interfaces // for information about these interfaces
declare global { declare global {
namespace App { namespace App {
// interface Error {} // interface Error {}
// interface Locals {} // interface Locals {}
// interface PageData {} // interface PageData {}
interface PageState { interface PageState {
modal?: string, modal?: string
} }
// interface Platform {} // interface Platform {}
} }
} }
export {}; export {}

18
src/app.html
View File

@@ -1,12 +1,12 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

38
src/app/components/PrimaryNav.svelte
View File

@@ -1,19 +1,28 @@
<style>
.z-nav-active {
-webkit-mask-image: url("/nav-active.svg");
mask-image: url("/nav-active.svg");
}
</style>
<script lang="ts"> <script lang="ts">
import Icon from 'lib/components/Icon.svelte' import Icon from "lib/components/Icon.svelte"
import PrimaryNavItem from 'lib/components/PrimaryNavItem.svelte' import PrimaryNavItem from "lib/components/PrimaryNavItem.svelte"
import {spaces} from 'app/state' import {spaces} from "app/state"
</script> </script>
<div class="w-14 bg-base-100 relative"> <div class="relative w-14 bg-base-100">
<div class="absolute z-nav-active ml-2 w-12 h-[144px] bg-base-300 -top-[44px]" /> <div class="absolute -top-[44px] z-nav-active ml-2 h-[144px] w-12 bg-base-300" />
<div class="flex flex-col justify-between h-full"> <div class="flex h-full flex-col justify-between">
<div> <div>
<PrimaryNavItem title="Hodlbod"> <PrimaryNavItem title="Hodlbod">
<div class="w-10 rounded-full border border-solid border-base-300"> <div class="w-10 rounded-full border border-solid border-base-300">
<img alt="" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" /> <img
alt=""
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div> </div>
</PrimaryNavItem> </PrimaryNavItem>
{#each $spaces as {id, name, picture} (id)} {#each $spaces as { id, name, picture } (id)}
<PrimaryNavItem title={name}> <PrimaryNavItem title={name}>
<div class="w-10 rounded-full border border-solid border-base-300"> <div class="w-10 rounded-full border border-solid border-base-300">
<img alt={name} src={picture} /> <img alt={name} src={picture} />
@@ -21,29 +30,22 @@
</PrimaryNavItem> </PrimaryNavItem>
{/each} {/each}
<PrimaryNavItem title="Add Space"> <PrimaryNavItem title="Add Space">
<div class="w-10 !flex justify-center items-center"> <div class="!flex w-10 items-center justify-center">
<Icon size={7} icon="add-circle" /> <Icon size={7} icon="add-circle" />
</div> </div>
</PrimaryNavItem> </PrimaryNavItem>
<PrimaryNavItem title="Browse Spaces"> <PrimaryNavItem title="Browse Spaces">
<div class="w-10 !flex justify-center items-center"> <div class="!flex w-10 items-center justify-center">
<Icon size={6} icon="compass-big" /> <Icon size={6} icon="compass-big" />
</div> </div>
</PrimaryNavItem> </PrimaryNavItem>
</div> </div>
<div> <div>
<PrimaryNavItem title="Settings"> <PrimaryNavItem title="Settings">
<div class="w-10 !flex justify-center items-center"> <div class="!flex w-10 items-center justify-center">
<Icon size={7} icon="settings" /> <Icon size={7} icon="settings" />
</div> </div>
</PrimaryNavItem> </PrimaryNavItem>
</div> </div>
</div> </div>
</div> </div>
<style>
.z-nav-active {
-webkit-mask-image: url('/nav-active.svg');
mask-image: url('/nav-active.svg');
}
</style>

10
src/app/components/SecondaryNav.svelte
View File

@@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import Icon from 'lib/components/Icon.svelte' import Icon from "lib/components/Icon.svelte"
import SecondaryNavItem from 'lib/components/SecondaryNavItem.svelte' import SecondaryNavItem from "lib/components/SecondaryNavItem.svelte"
</script> </script>
<div class="w-60 bg-base-300 flex flex-col gap-1 px-2 py-4"> <div class="flex w-60 flex-col gap-1 bg-base-300 px-2 py-4">
<SecondaryNavItem href="/"> <SecondaryNavItem href="/">
<Icon icon="home-smile" /> Home <Icon icon="home-smile" /> Home
</SecondaryNavItem> </SecondaryNavItem>
@@ -13,11 +13,11 @@
<SecondaryNavItem href="/notes"> <SecondaryNavItem href="/notes">
<Icon icon="clipboard-text" /> Saved Notes <Icon icon="clipboard-text" /> Saved Notes
</SecondaryNavItem> </SecondaryNavItem>
<div class="uppercase text-sm font-bold flex justify-between items-center text-stark-content px-4 py-2"> <div
class="text-stark-content flex items-center justify-between px-4 py-2 text-sm font-bold uppercase">
Conversations Conversations
<div class="cursor-pointer"> <div class="cursor-pointer">
<Icon icon="add-circle" class="bg-stark-content" /> <Icon icon="add-circle" class="bg-stark-content" />
</div> </div>
</div> </div>
</div> </div>

31
src/app/state.ts
View File

@@ -1,13 +1,14 @@
import type {ComponentType} from 'svelte' import type {ComponentType} from "svelte"
import {readable, writable} from 'svelte/store' import {readable, writable} from "svelte/store"
import type {FlyParams} from 'svelte/transition' import type {FlyParams} from "svelte/transition"
import {fly as baseFly} from 'svelte/transition' import {fly as baseFly} from "svelte/transition"
import {randomId} from '@welshman/lib' import {randomId} from "@welshman/lib"
import {pushState} from '$app/navigation' import {pushState} from "$app/navigation"
// Animations // Animations
export const fly = (node: Element, params?: FlyParams | undefined) => baseFly(node, {y: 20, ...params}) export const fly = (node: Element, params?: FlyParams | undefined) =>
baseFly(node, {y: 20, ...params})
// Toast // Toast
@@ -23,7 +24,10 @@ export type ToastOptions = {
export const toast = writable<Toast | null>(null) export const toast = writable<Toast | null>(null)
export const pushToast = ({message = "", id = Math.random()}: Partial<Toast>, options: ToastOptions) => { export const pushToast = (
{message = "", id = Math.random()}: Partial<Toast>,
options: ToastOptions,
) => {
toast.set({id, message, options}) toast.set({id, message, options})
setTimeout(() => popToast(id), options.timeout || 5000) setTimeout(() => popToast(id), options.timeout || 5000)
@@ -31,7 +35,7 @@ export const pushToast = ({message = "", id = Math.random()}: Partial<Toast>, op
return id return id
} }
export const popToast = (id: number) => toast.update($t => $t?.id === id ? null : $t) export const popToast = (id: number) => toast.update($t => ($t?.id === id ? null : $t))
// Modals // Modals
@@ -42,7 +46,7 @@ export const pushModal = (component: ComponentType, props: Record<string, any>)
// TODO: fix memory leak here by listening to history somehow // TODO: fix memory leak here by listening to history somehow
modals.set(id, {component, props}) modals.set(id, {component, props})
pushState('', {modal: id}) pushState("", {modal: id})
return id return id
} }
@@ -56,8 +60,9 @@ export const popModal = (id: string) => {
export const spaces = readable([ export const spaces = readable([
{ {
id: 'test', id: "test",
name: "Test", name: "Test",
picture: "https://images.unsplash.com/photo-1721853046219-209921be684e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8" picture:
} "https://images.unsplash.com/photo-1721853046219-209921be684e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8",
},
]) ])

66
src/lib/components/Icon.svelte
View File

@@ -1,18 +1,25 @@
<style>
div {
mask-repeat: none;
mask-size: 100% 100%;
}
</style>
<script lang="ts"> <script lang="ts">
import cx from 'classnames' import cx from "classnames"
import {switcher} from '@welshman/lib' import {switcher} from "@welshman/lib"
import AddSquare from 'assets/icons/Add Square.svg?dataurl' import AddSquare from "assets/icons/Add Square.svg?dataurl"
import AddCircle from 'assets/icons/Add Circle.svg?dataurl' import AddCircle from "assets/icons/Add Circle.svg?dataurl"
import AltArrowRight from 'assets/icons/Alt Arrow Right.svg?dataurl' import AltArrowRight from "assets/icons/Alt Arrow Right.svg?dataurl"
import ClipboardText from 'assets/icons/Clipboard Text.svg?dataurl' import ClipboardText from "assets/icons/Clipboard Text.svg?dataurl"
import Compass from 'assets/icons/Compass.svg?dataurl' import Compass from "assets/icons/Compass.svg?dataurl"
import CompassBig from 'assets/icons/Compass Big.svg?dataurl' import CompassBig from "assets/icons/Compass Big.svg?dataurl"
import HandPills from 'assets/icons/Hand Pills.svg?dataurl' import HandPills from "assets/icons/Hand Pills.svg?dataurl"
import HomeSmile from 'assets/icons/Home Smile.svg?dataurl' import HomeSmile from "assets/icons/Home Smile.svg?dataurl"
import Plain from 'assets/icons/Plain.svg?dataurl' import Plain from "assets/icons/Plain.svg?dataurl"
import Settings from 'assets/icons/Settings.svg?dataurl' import Settings from "assets/icons/Settings.svg?dataurl"
import UFO3 from 'assets/icons/UFO 3.svg?dataurl' import UFO3 from "assets/icons/UFO 3.svg?dataurl"
import UserHeart from 'assets/icons/User Heart.svg?dataurl' import UserHeart from "assets/icons/User Heart.svg?dataurl"
export let icon export let icon
export let size = 5 export let size = 5
@@ -20,18 +27,18 @@
const px = size * 4 const px = size * 4
const data = switcher(icon, { const data = switcher(icon, {
'add-square': AddSquare, "add-square": AddSquare,
'add-circle': AddCircle, "add-circle": AddCircle,
'alt-arrow-right': AltArrowRight, "alt-arrow-right": AltArrowRight,
'clipboard-text': ClipboardText, "clipboard-text": ClipboardText,
'compass': Compass, compass: Compass,
'compass-big': CompassBig, "compass-big": CompassBig,
'hand-pills': HandPills, "hand-pills": HandPills,
'home-smile': HomeSmile, "home-smile": HomeSmile,
'plain': Plain, plain: Plain,
'settings': Settings, settings: Settings,
'ufo-3': UFO3, "ufo-3": UFO3,
'user-heart': UserHeart, "user-heart": UserHeart,
}) })
if (!data) { if (!data) {
@@ -42,10 +49,3 @@
<div <div
class={cx($$props.class, "bg-base-content")} class={cx($$props.class, "bg-base-content")}
style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px;" /> style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px;" />
<style>
div {
mask-repeat: none;
mask-size: 100% 100%;
}
</style>

6
src/lib/components/PrimaryNavItem.svelte
View File

@@ -2,8 +2,10 @@
export let title export let title
</script> </script>
<div class="relative z-nav-item flex justify-center items-center w-14 h-14"> <div class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div class="avatar rounded-full p-1 bg-base-300 cursor-pointer tooltip tooltip-right" data-tip={title}> <div
class="avatar tooltip tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
data-tip={title}>
<slot /> <slot />
</div> </div>
</div> </div>

6
src/lib/components/SecondaryNavItem.svelte
View File

@@ -3,8 +3,10 @@
export let active export let active
</script> </script>
<a {href} class="button group hover:bg-base-100 transition-all justify-start border-none"> <a {href} class="button group justify-start border-none transition-all hover:bg-base-100">
<div class="flex items-center gap-3 group-hover:brightness=[1.5]" class:group-hover:brightness-[1.4]={active}> <div
class="group-hover:brightness=[1.5] flex items-center gap-3"
class:group-hover:brightness-[1.4]={active}>
<slot /> <slot />
</div> </div>
</a> </a>

26
src/routes/+layout.svelte
View File

@@ -1,24 +1,24 @@
<script lang="ts"> <script lang="ts">
import "src/app.css" import "src/app.css"
import {onMount} from 'svelte' import {onMount} from "svelte"
import {page} from '$app/stores' import {page} from "$app/stores"
import {onNavigate} from '$app/navigation' import {onNavigate} from "$app/navigation"
import Icon from 'lib/components/Icon.svelte' import Icon from "lib/components/Icon.svelte"
import PrimaryNav from 'app/components/PrimaryNav.svelte' import PrimaryNav from "app/components/PrimaryNav.svelte"
import SecondaryNav from 'app/components/SecondaryNav.svelte' import SecondaryNav from "app/components/SecondaryNav.svelte"
import {fly, toast, modals, pushModal} from 'app/state' import {fly, toast, modals, pushModal} from "app/state"
const login = async () => { const login = async () => {
const nl = await import('nostr-login') const nl = await import("nostr-login")
nl.init({ nl.init({
noBanner: true, noBanner: true,
title: 'Welcome to Flotilla!', title: "Welcome to Flotilla!",
description: 'Log in with your Nostr account or sign up to join.', description: "Log in with your Nostr account or sign up to join.",
methods: ['connect', 'extension', 'local'], methods: ["connect", "extension", "local"],
onAuth(npub: string) { onAuth(npub: string) {
console.log(npub) console.log(npub)
} },
}) })
nl.launch() nl.launch()
@@ -38,7 +38,7 @@
<div class="flex h-screen" data-theme="dark"> <div class="flex h-screen" data-theme="dark">
<PrimaryNav /> <PrimaryNav />
<SecondaryNav /> <SecondaryNav />
<div class="bg-base-200 flex-grow"> <div class="flex-grow bg-base-200">
<slot /> <slot />
</div> </div>
</div> </div>

32
src/routes/+page.svelte
View File

@@ -1,42 +1,46 @@
<script lang="ts"> <script lang="ts">
import Icon from 'lib/components/Icon.svelte' import Icon from "lib/components/Icon.svelte"
</script> </script>
<div class="hero bg-base-200 min-h-screen"> <div class="hero min-h-screen bg-base-200">
<div class="hero-content"> <div class="hero-content">
<div class="max-w-xl flex flex-col gap-4"> <div class="flex max-w-xl flex-col gap-4">
<h1 class="text-5xl text-center text-stark-content">Welcome to</h1> <h1 class="text-stark-content text-center text-5xl">Welcome to</h1>
<h1 class="text-5xl font-bold uppercase text-center mb-4 text-stark-content">Flotilla</h1> <h1 class="text-stark-content mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
<div class="grid gap-3 grid-cols-2"> <div class="grid grid-cols-2 gap-3">
<div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200"> <div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="add-circle" /> <Icon class="bg-accent" size={7} icon="add-circle" />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="text-stark-content">Create a group</p> <p class="text-stark-content">Create a group</p>
<p class="text-xs">Invite all your friends, do life together.<p> <p class="text-xs">Invite all your friends, do life together.</p>
<p></p>
</div> </div>
<Icon size={7} icon="alt-arrow-right" /> <Icon size={7} icon="alt-arrow-right" />
</div> </div>
<div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200"> <div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="compass" /> <Icon class="bg-accent" size={7} icon="compass" />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="text-stark-content">Discover groups</p> <p class="text-stark-content">Discover groups</p>
<p class="text-xs">Find a community based on your hobbies or interests.<p> <p class="text-xs">Find a community based on your hobbies or interests.</p>
<p></p>
</div> </div>
<Icon size={7} icon="alt-arrow-right" /> <Icon size={7} icon="alt-arrow-right" />
</div> </div>
<div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200"> <div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="plain" /> <Icon class="bg-accent" size={7} icon="plain" />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="text-stark-content">Leave feedback</p> <p class="text-stark-content">Leave feedback</p>
<p class="text-xs">Let us know how we can improve by giving us feedback.<p> <p class="text-xs">Let us know how we can improve by giving us feedback.</p>
<p></p>
</div> </div>
<Icon size={7} icon="alt-arrow-right" /> <Icon size={7} icon="alt-arrow-right" />
</div> </div>
<div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200"> <div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="hand-pills" /> <Icon class="bg-accent" size={7} icon="hand-pills" />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="text-stark-content">Donate to Flotilla</p> <p class="text-stark-content">Donate to Flotilla</p>
<p class="text-xs">Support the project by donating to the developer.<p> <p class="text-xs">Support the project by donating to the developer.</p>
<p></p>
</div> </div>
<Icon size={7} icon="alt-arrow-right" /> <Icon size={7} icon="alt-arrow-right" />
</div> </div>

1
src/routes/friends/+page.svelte
View File

@@ -1 +0,0 @@

37
svelte.config.js
View File

@@ -1,26 +1,25 @@
import * as path from "path" import * as path from "path"
import adapter from '@sveltejs/adapter-auto'; import adapter from "@sveltejs/adapter-auto"
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; import {vitePreprocess} from "@sveltejs/vite-plugin-svelte"
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors // Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors // for more information about preprocessors
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter. // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters. // See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter(), adapter: adapter(),
alias: { alias: {
'src': "src", src: "src",
'app': "src/app", app: "src/app",
'lib': "src/lib", lib: "src/lib",
'assets': "src/assets", assets: "src/assets",
}, },
} },
}; }
export default config;
export default config

8
tailwind.config.js
View File

@@ -1,15 +1,15 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ["./src/**/*.{html,js,svelte,ts}"],
theme: { theme: {
extend: {}, extend: {},
zIndex: { zIndex: {
none: 0, none: 0,
'nav-active': 1, "nav-active": 1,
'nav-item': 2, "nav-item": 2,
}, },
}, },
plugins: [require('daisyui')], plugins: [require("daisyui")],
daisyui: { daisyui: {
themes: [ themes: [
"light", "light",

34
tsconfig.json
View File

@@ -1,19 +1,19 @@
{ {
"extends": "./.svelte-kit/tsconfig.json", "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": true,
"esModuleInterop": true, "esModuleInterop": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"skipLibCheck": true, "skipLibCheck": true,
"sourceMap": true, "sourceMap": true,
"strict": true, "strict": true,
"moduleResolution": "bundler" "moduleResolution": "bundler"
} }
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
// //
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in // from the referenced tsconfig.json - TypeScript does not merge them in
} }

20
vite.config.ts
View File

@@ -1,16 +1,16 @@
import {sveltekit} from '@sveltejs/kit/vite' import {sveltekit} from "@sveltejs/kit/vite"
import svg from '@poppanator/sveltekit-svg' import svg from "@poppanator/sveltekit-svg"
import {defineConfig} from 'vite' import {defineConfig} from "vite"
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
sveltekit(), sveltekit(),
svg({ svg({
svgoOptions: { svgoOptions: {
multipass: true, multipass: true,
plugins: [ plugins: [
{ {
name: 'preset-default', name: "preset-default",
params: { params: {
overrides: { overrides: {
removeViewBox: false, removeViewBox: false,
@@ -20,6 +20,6 @@ export default defineConfig({
"removeDimensions", "removeDimensions",
], ],
}, },
}) }),
], ],
}); })