Modal about (#5)

* Custom port

* Format

* Modal for about

* logo

* Brand title and about modal

* Release test

* test

* Update

* Create release on PR

* Fetch version

.github/workflows/release.yml

@@ -0,0 +1,19 @@
+on:
+  pull_request:
+    branches: ['master']
+
+jobs:
+  create-release-on-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: read
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - uses: rymndhng/release-on-push-action@master
+        with:
+          bump_version_scheme: minor
+          tag_prefix: 'v'
+          release_name: 'Release <RELEASE_VERSION>'
+          max_commits: 20

README.md

@@ -1,6 +1,5 @@
 # Determine Paper Cost
 
-
 ## Tech Stack
 
 ```bash
@@ -13,6 +12,7 @@
 Tools
 
 ```bash
+
 ```
 
 ## After Cloning this project

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "paper-cost",
-	"version": "0.0.1",
+	"version": "1.2.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
 }

src/app.d.ts

@@ -9,4 +9,4 @@ declare global {
 	}
 }
 
-export {};
+export {}

src/index.test.ts

@@ -1,7 +1,7 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from 'vitest'
 
 describe('sum test', () => {
 	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});
+		expect(1 + 2).toBe(3)
+	})
+})

src/lib/app.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.brand-name {
+	background-image: url('./giphy.gif');
+	background-position: top;
+	background-clip: text;
+	-webkit-background-clip: text;
+}

src/lib/elements/About.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { version } from '$app/environment'
+</script>
+
+<div class="flex flex-col text-center items-center">
+	<img class="h-10 w-10 rounded-full" src="/logo.jpeg" alt="logo" />
+	<p class="text-lg font-bold">Paper Cost</p>
+
+	<p class="mt-5">Developed by</p>
+	<div class="text-sm flex flex-col">
+		<p>Sheba Queue</p>
+		<p>Kawsar Ahmed</p>
+		<p class="text-[13px]">+880 1915983757</p>
+	</div>
+	<p class="mt-10 text-slate-500 text-xs">Version: {version}</p>
+</div>

src/lib/elements/BrandTitle.svelte

@@ -0,0 +1,3 @@
+<p class="brand-name text-center text-[26px] text-transparent font-bold tracking-wide">
+	Molla Printing & Packaging
+</p>

src/lib/elements/Modal.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { makeid, receive, send } from '$lib/utils/tools'
+	import Icon from '@iconify/svelte'
+
+	export let show = false
+	const id = makeid(6)
+</script>
+
+<div class="absolute bg-black bg-opacity-20 flex h-full w-full items-center justify-center z-10">
+	<div
+		in:receive={{ key: id, duration: 200 }}
+		out:send={{ key: id, duration: 200 }}
+		class="bg-white p-2 rounded relative flex flex-col w-3/4"
+	>
+		<button
+			class="absolute top-0 right-0 p-[3px] rounded-full w-fit"
+			on:click|stopPropagation|preventDefault={() => (show = false)}
+		>
+			<Icon icon="majesticons:multiply" width="20px" />
+		</button>
+		<slot />
+	</div>
+</div>

src/lib/utils/tools.ts

@@ -18,7 +18,7 @@ export const [send, receive] = crossfade({
 		const transform = style.transform === 'none' ? '' : style.transform
 
 		return {
-			duration: 300,
+			duration: params.duration,
 			easing: params.easing,
 			css: (t) => `
 				transform: ${transform} scale(${t});

src/lib/utils/tooltip.ts

@@ -1,6 +1,6 @@
-import tippy from 'tippy.js';
-import 'tippy.js/dist/tippy.css';
-import 'tippy.js/animations/scale.css';
+import tippy from 'tippy.js'
+import 'tippy.js/dist/tippy.css'
+import 'tippy.js/animations/scale.css'
 
 tippy('[data-tippy]', {
 	content: (reference) => reference.getAttribute('data-tippy') || '',
@@ -9,4 +9,4 @@ tippy('[data-tippy]', {
 	arrow: true,
 	delay: 100,
 	animation: 'scale'
-});
+})

src/routes/(app)/+layout.svelte

@@ -10,6 +10,9 @@
 	import { supabase } from '$lib/db/supabaseClient'
 	import { Toaster } from 'svelte-sonner'
 	import Icon from '@iconify/svelte'
+	import Modal from '$lib/elements/Modal.svelte'
+	import BrandTitle from '$lib/elements/BrandTitle.svelte'
+	import About from '$lib/elements/About.svelte'
 
 	//Import Mixpanel SDK
 	mixpanel.init(PUBLIC_MIX_TOKEN, {
@@ -19,6 +22,7 @@
 	})
 
 	let showSettings = false
+	let showAbout = false
 
 	const handleLogout = async () => {
 		await supabase.auth.signOut()
@@ -40,10 +44,15 @@
 			<Loader />
 		</div>
 	{/if}
+	{#if showAbout}
+		<Modal bind:show={showAbout}>
+			<About />
+		</Modal>
+	{/if}
 	<div class="flex flex-col h-[92%]">
 		<nav class="max-w-6xl mx-auto w-full">
 			<div class="flex justify-center py-2">
-				<p class="text-center text-2xl text-red-600 font-semibold">Molla Printing & Packaging</p>
+				<BrandTitle />
 			</div>
 			<div class="bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]" />
 		</nav>
@@ -85,7 +94,11 @@
 			class="absolute w-20 right-3 bottom-11 flex flex-col items-start divide-y divide-orange-400 gap-1 bg-slate-50 p-2 rounded"
 		>
 			<!-- <button on:click={() => handleLogout()}>Logout</button> -->
-			<button>About</button>
+			<button
+				on:click={() => {
+					;(showAbout = true), (showSettings = false)
+				}}>About</button
+			>
 		</div>
 	{/if}
 </main>

src/routes/(app)/history/[id]/+page.svelte

@@ -14,7 +14,7 @@
 	<title>History</title>
 </svelte:head>
 
-<section class="max-w-6xl mx-auto flex w-full max-h-[90%] flex-col gap-4 px-4 pt-5">
+<section class="max-w-6xl mx-auto flex w-full max-h-[90%] flex-col gap-3 px-4 pt-3">
 	<h1 class="text-xl text-center">Cost Details</h1>
 	<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
 	{#if history}
@@ -30,7 +30,7 @@
 			</h1>
 		</div>
 
-		<div class="flex flex-col w-full justify-between gap-3 h-[80%] items-center">
+		<div class="flex flex-col w-full justify-between gap-3 h-[85%] items-center">
 			<div class="flex flex-col overflow-y-auto w-full max-w-3xl py-2">
 				{#if history.papers.length}
 					{#each history.papers as { length, width, thickness, rate, id }}

src/routes/auth/+layout.svelte

@@ -2,6 +2,7 @@
 	import { page } from '$app/stores'
 	import { PUBLIC_MIX_TOKEN } from '$env/static/public'
 	import '$lib/app.css'
+	import BrandTitle from '$lib/elements/BrandTitle.svelte'
 	import '@fontsource/jost'
 
 	//Import Mixpanel SDK
@@ -16,7 +17,7 @@
 <main class="h-[100svh] flex flex-col">
 	<nav>
 		<div class="flex justify-center py-2">
-			<p class="text-center text-2xl text-red-600 font-semibold">Molla Printing & Packaging</p>
+			<BrandTitle />
 		</div>
 		<div
 			class="w-full max-w-6xl mx-auto bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]"

svelte.config.js

@@ -1,6 +1,12 @@
 // import adapter from '@sveltejs/adapter-auto';
-import adapter from '@sveltejs/adapter-vercel';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import adapter from '@sveltejs/adapter-vercel'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+import { readFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+
+const file = fileURLToPath(new URL('package.json', import.meta.url))
+const json = readFileSync(file, 'utf8')
+const pkg = JSON.parse(json)
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -12,8 +18,11 @@ const config = {
 		// 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.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		version: {
+			name: pkg.version
+		}
 	}
-};
+}
 
-export default config;
+export default config

tests/test.ts

@@ -1,6 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '@playwright/test'
 
 test('index page has expected h1', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
-});
+	await page.goto('/')
+	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible()
+})

vite.config.ts

@@ -1,9 +1,12 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vitest/config';
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
 	plugins: [sveltekit()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
+	},
+	server: {
+		port: 2000
 	}
-});
+})