Merge Staging into Main (#160)

* Bring Staging up to date with Main (#143) * Merge Staging into Main (#139) * news carousel adjustments * adjust explore and tag pages * work header fixes * profile header updates * adjust profile home page * sizes down work stats on smaller displays * adjusting works and blogs lists * Update +layout.svelte * adding optimizations to section list * Update +page.svelte * Update +page.svelte * Feat/email and recovery (#136) * feat: password resets and email confirmations * updating controllers with confirmation guard * API routes for features now in place * password resets are in * email confirmations are now in * update readme * Feat/work and comments features (#138) * Feat/fixing profile forms (#142) * chore: add beta badge to nav * chore: fix display of beta badge * chore: update about panel and version * adding placeholder for messages panel * profile forms now work * fix: redirect approval/rejection notifications to their intended recipient * adding links form to profile setitngs * feat: adding links to profile pages * fix: address issue with layout of admin badge on mobile * chore: adds unique constraint to the approval queue (#123) adds a `UNIQUE` constraint to the approval queue table on `work_id`, guaranteeing that works can only ever be submitted to the queue once. closes #78 * fix: testing new method of obtaining client IP address * Update Functions.swift * Update Functions.swift * fix: addresses issues with pagination on profile pages * fix: address issue of width on mobile devices for profile pages * fix: remove more tags button when less than 2 tags * fix: one last fix for tags display * fix: make sure transactions are actually being committed * fix: pagination on works and blogs pages * Update version.ts * Update Paginator.svelte * Update version.ts * [FIX] Addresses access token expiry issue (#152) * fix: include parent tags when fetching approval queue * fix: addresses issue with sessions expiring early * chore: remove debug lines * feat: update site version * feat: adding svelte query * chore: update swift dependencies * chore: update client packages * fix: prevent unauthorized users from creating newsposts * chore: update readme with latest version of swift * chore: update version * chore: update API packages to latest versions * chore: update sailfish version * Enhancement/navigation (#157) * chore: update swift dependencies to 5.8 * chore: updating sveltekit * chore: update editor to latest version * chore: updates vapor and related packages to latest * chore: updating client packages to latest * feat: adding dropdowns to topnav * feat: adding basic guide functionality to topbar * chore: replace user dropdown with separate buttons * Update NavTopBar.svelte * feat: login/sign up pages now in working order * Update NavTopBar.svelte * feat: add better tab navigation to search * chore: update packages * fix: update docs links * fix: adding back notifications * feat: show library and feed pages without being logged in * fix: prevent undefined behavior in queue claims * chore: update packages * feat: search functionality in big dropdown now works * fix: address some issues rendering on mobile * fix: mobile fixed * feat: added back buttons to all subpanels * chore: update sailfish version * fix: attempts to address compilation issues in docker * fix: address issue with SSL config * fix: addresses issue connecting to local database * chore: remove debug line
OffprintStudios · Jun 10, 2023 · 032976d · 032976d
1 parent 9b5173c
commit 032976d
Show file tree

Hide file tree

Showing 41 changed files with 1,719 additions and 891 deletions.
diff --git a/Client/.idea/inspectionProfiles/Project_Default.xml b/Client/.idea/inspectionProfiles/Project_Default.xml
diff --git a/Client/package.json b/Client/package.json
@@ -14,16 +14,15 @@
     "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
-    "@floating-ui/dom": "^1.2.6",
-    "@playwright/test": "^1.32.3",
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/adapter-node": "^1.2.3",
-    "@sveltejs/kit": "^1.15.7",
+    "@floating-ui/dom": "^1.2.9",
+    "@playwright/test": "^1.34.3",
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/adapter-node": "^1.2.4",
+    "@sveltejs/kit": "^1.20.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.9",
-    "@tanstack/svelte-query": "^4.29.1",
+    "@tanstack/svelte-query": "^4.29.11",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-blockquote": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
@@ -55,38 +54,38 @@
     "@tiptap/extension-youtube": "^2.0.3",
     "@tiptap/pm": "^2.0.3",
     "@types/slug": "^5.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "autoprefixer": "^10.4.14",
-    "axios": "^1.3.5",
-    "dayjs": "^1.11.7",
-    "eslint": "^8.38.0",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.8",
+    "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "felte": "^1.2.7",
     "lodash": "^4.17.21",
     "numbro": "^2.3.6",
-    "postcss": "^8.4.22",
+    "postcss": "^8.4.24",
     "postcss-load-config": "^4.0.1",
-    "prettier": "^2.8.7",
-    "prettier-plugin-svelte": "^2.10.0",
-    "sass": "^1.62.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.1",
+    "sass": "^1.62.1",
     "slug": "^8.2.2",
-    "string-strip-html": "^13.2.3",
-    "svelte": "^3.58.0",
-    "svelte-check": "^3.2.0",
+    "string-strip-html": "^13.4.1",
+    "svelte": "^3.59.1",
+    "svelte-check": "^3.4.3",
     "svelte-easy-crop": "^2.0.1",
     "svelte-french-toast": "^1.0.3",
     "svelte-markdown": "^0.2.3",
-    "svelte-preprocess": "^5.0.3",
-    "svelte-remixicon": "^1.1.0",
-    "svelte-select": "^5.6.0",
+    "svelte-preprocess": "^5.0.4",
+    "svelte-remixicon": "^1.3.0",
+    "svelte-select": "^5.6.1",
     "svelte-tiptap": "^0.7.0",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.2",
     "tailwindcss-opentype": "^1.1.0",
-    "tslib": "^2.5.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.2.2"
+    "tslib": "^2.5.3",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
   },
   "type": "module"
 }
diff --git a/Client/src/app.html b/Client/src/app.html
@@ -6,7 +6,9 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body>
+	<body data-sveltekit-preload-data="hover" class="light">
+	<div style="display: contents">
 		%sveltekit.body%
+	</div>
 	</body>
 </html>
diff --git a/Client/src/lib/ui/content/BlogCard.svelte b/Client/src/lib/ui/content/BlogCard.svelte
@@ -11,6 +11,7 @@
 	export let showAvatar = false;
 	export let hasDropdown = true;
 	export let bigPreview = false;
+	export let showPreview = true;
 </script>
 
 <div
@@ -49,13 +50,15 @@
 			</Dropdown>
 		{/if}
 	</div>
-	<div
-		class="blog-preview blog-body"
-		class:small-preview={!bigPreview}
-		class:big-preview={bigPreview}
-	>
-		{@html blog.body}
-	</div>
+	{#if showPreview}
+		<div
+			class="hidden blog-preview blog-body"
+			class:small-preview={!bigPreview}
+			class:big-preview={bigPreview}
+		>
+			{@html blog.body}
+		</div>
+	{/if}
 	<div class="blog-stats bg-zinc-300 dark:bg-zinc-600">
 		<div class="flex-1"><!--spacer--></div>
 		<span class="flex items-center relative z-[2]" title="Views">

diff --git a/Client/src/lib/ui/content/NewsCarousel.svelte b/Client/src/lib/ui/content/NewsCarousel.svelte
@@ -60,34 +60,6 @@
 </script>
 
 <div class="carousel-container bg-zinc-200 dark:bg-zinc-700 dark:highlight-shadowed">
-	<div class="home-header">
-		<div class="hidden lg:block w-1/4">
-			<div class="deco-box flex-col">
-				<span class="relative top-2 left-[0.075rem] text-4xl"
-					>{today.toLocaleString("default", { month: "short" })}</span
-				>
-				<span class="relative bottom-1.5 left-[0.075rem] text-xl"
-					>{today.getFullYear()}</span
-				>
-			</div>
-		</div>
-		<div class="lg:w-2/4 flex flex-col items-center justify-center">
-			<img
-				src="/images/logo.png"
-				alt="offprint logo"
-				class="max-w-[12rem] lg:max-w-[18rem] mx-auto"
-			/>
-			<h2 class="block text-white font-light lg:text-lg">
-				{currSlogan}
-			</h2>
-		</div>
-		<div class="hidden w-1/4 lg:flex items-center justify-end">
-			<div class="deco-box flex-row">
-				<span class="relative text-5xl font-normal">25</span>
-				<span class="relative text-3xl bottom-0.5 ml-1">¢</span>
-			</div>
-		</div>
-	</div>
 	<div class="carousel-items">
 		{#if currPost}
 			<a
@@ -183,10 +155,6 @@
 <style lang="scss">
 	div.carousel-container {
 		@apply xl:rounded-xl overflow-hidden mb-6 xl:mt-6 w-full;
-		div.home-header {
-			@apply text-white text-center px-4 py-2 flex items-center justify-center;
-			background: var(--accent);
-		}
 		div.deco-box {
 			@apply h-20 w-20 rounded-full flex items-center justify-center text-white font-semibold all-small-caps;
 			font-family: var(--header-text), sans-serif;

diff --git a/Client/src/lib/ui/guide/Guide.svelte b/Client/src/lib/ui/guide/Guide.svelte
@@ -1,25 +1,6 @@
 <script lang="ts">
 	import { fade, fly } from "svelte/transition";
-	import {
-		QuestionAnswerLine,
-		Group2Line,
-		HistoryLine,
-		LoginCircleLine,
-		Notification3Line,
-		Settings5Line
-	} from "svelte-remixicon";
-	import { closeGuide, guide, GuideTabs, switchTab } from "./guide.state";
-	import { account } from "$lib/state/account.state";
-	import { activity } from "$lib/state/activity.state";
-	import { AccountPanel } from "./account";
-	import { SettingsPanel } from "./settings";
-	import { Avatar } from "../util";
-	import { HistoryPanel } from "./history";
-	import { CountBadge } from "../util";
-	import { ActivityTabsPanel } from "./activity";
-	import { MessagesPanel } from "./messages";
-
-	const iconSize = "24px";
+	import { closeGuide, guide } from "./guide.state";
 
 	function close() {
 		if ($guide.canClose) {
@@ -30,102 +11,18 @@
 
 <div class="flex-1 relative">
 	{#if $guide.open}
-		<div class="absolute z-40 top-0 h-full w-full flex">
+		<div class="absolute z-40 top-0 h-full w-full flex flex-row-reverse">
 			<div
 				class="absolute z-30 bg-black w-full h-full bg-opacity-50"
 				transition:fade|local={{ delay: 0, duration: 100 }}
 				on:click={close}
 			>
 				<!--backdrop-->
 			</div>
-			<div class="guide" transition:fly|local={{ delay: 0, duration: 200, x: -200 }}>
-				<div class="guide-nav">
-					<button
-						title="History"
-						class:active={$guide.currTab === GuideTabs.HistoryTab}
-						class:disabled={$account.account === null || $account.currProfile === null}
-						disabled={$account.account === null || $account.currProfile === null}
-						on:click={() => switchTab(HistoryPanel, GuideTabs.HistoryTab)}
-					>
-						<HistoryLine size={iconSize} />
-					</button>
-					<button
-						title="Activity"
-						class:active={$guide.currTab === GuideTabs.ActivityTab}
-						class:disabled={$account.account === null || $account.currProfile === null}
-						disabled={$account.account === null || $account.currProfile === null}
-						on:click={() => switchTab(ActivityTabsPanel, GuideTabs.ActivityTab)}
-					>
-						<span class="flex items-center relative">
-							{#if $activity.count > 0}
-								<span class="absolute -top-1 -right-1">
-									<CountBadge value={$activity.count} />
-								</span>
-							{/if}
-							<Notification3Line size={iconSize} />
-							<!--<span class="text-sm ml-0.5">0</span>-->
-						</span>
-					</button>
-					{#if $account.account === null && $account.currProfile === null}
-						<button
-							title="Log In or Sign Up"
-							on:click={() => switchTab(AccountPanel, GuideTabs.AccountTab)}
-							class:active={$guide.currTab === GuideTabs.AccountTab}
-						>
-							<LoginCircleLine size={iconSize} />
-						</button>
-					{:else if $account.account !== null && $account.currProfile !== null}
-						<button
-							title="Your Info"
-							on:click={() => switchTab(AccountPanel, GuideTabs.AccountTab)}
-							class:active={$guide.currTab === GuideTabs.AccountTab}
-						>
-							<Avatar
-								src={$account.currProfile.avatar}
-								borderWidth="1px"
-								size="42px"
-							/>
-						</button>
-					{:else}
-						<button
-							title="Select Profile"
-							on:click={() => switchTab(AccountPanel, GuideTabs.AccountTab)}
-							class:active={$guide.currTab === GuideTabs.AccountTab}
-						>
-							<Group2Line size={iconSize} />
-						</button>
-					{/if}
-					<button
-						title="Messages"
-						class:disabled={$account.account === null || $account.currProfile === null}
-						disabled={$account.account === null || $account.currProfile === null}
-						on:click={() => switchTab(MessagesPanel, GuideTabs.MessagesTab)}
-						class:active={$guide.currTab === GuideTabs.MessagesTab}
-					>
-						<span class="flex items-center">
-							<QuestionAnswerLine size={iconSize} />
-							<!--<span class="text-sm ml-0.5">0</span>-->
-						</span>
-					</button>
-					<button
-						title="Settings"
-						class:active={$guide.currTab === GuideTabs.SettingsTab}
-						on:click={() => switchTab(SettingsPanel, GuideTabs.SettingsTab)}
-					>
-						<Settings5Line size={iconSize} />
-					</button>
+			<div class="guide" transition:fly|local={{ delay: 0, duration: 200, x: 200 }}>
+				<div in:fade|local={{ delay: 0, duration: 200 }}>
+					<svelte:component this={$guide.routing[$guide.currPage]} />
 				</div>
-				{#if $guide.routing.length === 1}
-					{#key $guide.currTab}
-						<div in:fade|local={{ delay: 0, duration: 200 }}>
-							<svelte:component this={$guide.routing[$guide.currPage]} />
-						</div>
-					{/key}
-				{:else}
-					<div in:fade|local={{ delay: 0, duration: 200 }}>
-						<svelte:component this={$guide.routing[$guide.currPage]} />
-					</div>
-				{/if}
 			</div>
 		</div>
 	{/if}
@@ -137,7 +34,7 @@
 
 <style lang="scss">
 	div.guide {
-		@apply h-full lg:h-screen z-40 min-w-full max-w-full lg:min-w-[24rem] lg:max-w-[24rem];
+		@apply h-full lg:h-[calc(100vh-60px)] z-40 pt-3 min-w-full max-w-full lg:min-w-[24rem] lg:max-w-[24rem];
 		@apply lg:overflow-hidden lg:overflow-y-auto;
 		box-shadow: var(--dropshadow);
 		background: var(--background);

diff --git a/Client/src/lib/ui/guide/account/AccountPanel.svelte b/Client/src/lib/ui/guide/account/AccountPanel.svelte
@@ -9,16 +9,24 @@
 		BookLine,
 		CupLine,
 		EyeLine,
+		HistoryLine,
 		Link,
 		LogoutCircleRLine,
-		QuillPenLine
+		Notification2Line,
+		QuestionAnswerLine,
+		QuillPenLine,
+		Settings5Line
 	} from "svelte-remixicon";
 	import { nextPage, closeGuide } from "$lib/ui/guide";
 	import { slugify, abbreviate } from "$lib/util/functions";
 	import { openPopup } from "../../popup";
 	import LogOutAlert from "./LogOutAlert.svelte";
 	import toast from "svelte-french-toast";
 	import { activity } from "$lib/state/activity.state";
+	import { SettingsPanel } from "$lib/ui/guide/settings";
+	import { MessagesPanel } from "$lib/ui/guide/messages";
+	import { ActivityPanel } from "$lib/ui/guide/activity";
+	import { HistoryPanel } from "$lib/ui/guide/history";
 
 	async function logOut() {
 		openPopup(LogOutAlert, {
@@ -156,6 +164,32 @@
 				</a>
 			</div>
 
+			<div class="panel-section lg:hidden">
+				<button class="nav-button" on:click={() => nextPage(ActivityPanel)}>
+					<Notification2Line size="24px" />
+					<span>Notifications</span>
+					<ArrowRightSLine class="text-zinc-400" />
+				</button>
+				<button class="nav-button" on:click={() => nextPage(MessagesPanel)}>
+					<QuestionAnswerLine size="24px" />
+					<span>Messages</span>
+					<ArrowRightSLine class="text-zinc-400" />
+				</button>
+				<button class="nav-button" on:click={() => nextPage(HistoryPanel)}>
+					<HistoryLine size="24px" />
+					<span>Reading History</span>
+					<ArrowRightSLine class="text-zinc-400" />
+				</button>
+			</div>
+
+			<div class="panel-section">
+				<button class="nav-button" on:click={() => nextPage(SettingsPanel)}>
+					<Settings5Line size="24px" />
+					<span>Settings</span>
+					<ArrowRightSLine class="text-zinc-400" />
+				</button>
+			</div>
+
 			<div class="panel-section">
 				<button class="nav-button" on:click={() => nextPage(SwitchProfilePanel)}>
 					<ArrowLeftRightLine size="24px" />