Skip to content

Commit 950b7d4

Browse files
NabilSnigdhoNabilSnigdho
authored
Webapp (#4)
* feat: webapp * fix: remove top level await * fix: change base * fix: file save in firefox * chore: make webapp main branch
1 parent 2fac9f6 commit 950b7d4

File tree

13 files changed

+3446
-1905
lines changed

13 files changed

+3446
-1905
lines changed

‎.github/workflows/gh.page.yml

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Simple workflow for deploying static content to GitHub Pages
2+
name: Deploy static content to Pages
3+
4+
on:
5+
# Runs on pushes targeting the default branch
6+
push:
7+
branches: ['main']
8+
9+
# Allows you to run this workflow manually from the Actions tab
10+
workflow_dispatch:
11+
12+
# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
13+
permissions:
14+
contents: read
15+
pages: write
16+
id-token: write
17+
18+
# Allow one concurrent deployment
19+
concurrency:
20+
group: 'pages'
21+
cancel-in-progress: true
22+
23+
jobs:
24+
# Single deploy job since we're just deploying
25+
deploy:
26+
environment:
27+
name: github-pages
28+
url: ${{ steps.deployment.outputs.page_url }}
29+
runs-on: ubuntu-latest
30+
steps:
31+
- name: Checkout
32+
uses: actions/checkout@v4
33+
- name: Install pnpm
34+
uses: pnpm/action-setup@v4
35+
with:
36+
version: 10
37+
- name: Set up Node
38+
uses: actions/setup-node@v4
39+
with:
40+
node-version: 20
41+
cache: 'pnpm'
42+
- name: Install dependencies
43+
run: pnpm install
44+
- name: Build
45+
run: pnpm run build
46+
- name: Setup Pages
47+
uses: actions/configure-pages@v4
48+
- name: Upload artifact
49+
uses: actions/upload-pages-artifact@v3
50+
with:
51+
# Upload dist folder
52+
path: './dist'
53+
- name: Deploy to GitHub Pages
54+
id: deployment
55+
uses: actions/deploy-pages@v4

‎index.html

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -11,6 +11,92 @@
1111
<main
1212
class="mx-auto flex min-h-screen max-w-[calc(400vh/3)] flex-col gap-2 bg-gray-200 p-2 font-serif"
1313
>
14+
<div class="flex gap-2">
15+
<div
16+
x-data="{ isOpened: false, openedWithKeyboard: false }"
17+
x-on:keydown.esc.window="isOpened = false, openedWithKeyboard = false"
18+
class="relative w-fit"
19+
>
20+
<!-- Toggle Button -->
21+
<button
22+
type="button"
23+
x-on:click="isOpened = ! isOpened"
24+
x-on:keydown.space.prevent="openedWithKeyboard = true"
25+
x-on:keydown.enter.prevent="openedWithKeyboard = true"
26+
x-on:keydown.down.prevent="openedWithKeyboard = true"
27+
class="inline-flex items-center gap-2 whitespace-nowrap rounded-sm border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-800 dark:border-neutral-700 dark:bg-neutral-900 dark:focus-visible:outline-neutral-300"
28+
x-bind:class="isOpened || openedWithKeyboard ? 'text-neutral-900 dark:text-white' : 'text-neutral-600 dark:text-neutral-300'"
29+
x-bind:aria-expanded="isOpened || openedWithKeyboard"
30+
aria-haspopup="true"
31+
>
32+
New
33+
<svg
34+
aria-hidden="true"
35+
fill="none"
36+
xmlns="http://www.w3.org/2000/svg"
37+
viewBox="0 0 24 24"
38+
stroke-width="2"
39+
stroke="currentColor"
40+
class="h-4 w-4 rotate-0"
41+
>
42+
<path
43+
stroke-linecap="round"
44+
stroke-linejoin="round"
45+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
46+
/>
47+
</svg>
48+
</button>
49+
<!-- Dropdown Menu -->
50+
<div
51+
x-cloak
52+
x-show="isOpened || openedWithKeyboard"
53+
x-transition
54+
x-trap="openedWithKeyboard"
55+
x-on:click.outside="isOpened = false, openedWithKeyboard = false"
56+
x-on:keydown.down.prevent="$focus.wrap().next()"
57+
x-on:keydown.up.prevent="$focus.wrap().previous()"
58+
class="absolute top-11 flex w-fit min-w-48 flex-col divide-y divide-neutral-300 overflow-hidden rounded-sm border border-neutral-300 bg-neutral-50 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-900"
59+
role="menu"
60+
>
61+
<div class="flex flex-col py-1.5">
62+
<button
63+
class="focus-visible:outline-hidden bg-neutral-50 px-4 py-2 text-start text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white"
64+
role="menuitem"
65+
@click="$store.main.handleMenuAction('new')"
66+
>
67+
Blank
68+
</button>
69+
</div>
70+
<div class="flex flex-col py-1.5">
71+
<div class="px-4 py-1 text-xs text-neutral-400">
72+
From examples
73+
</div>
74+
<template x-for="example in $store.main.examples">
75+
<button
76+
class="focus-visible:outline-hidden bg-neutral-50 px-4 py-2 text-start text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white"
77+
role="menuitem"
78+
x-text="example.label"
79+
@click="$store.main.handleMenuAction(example.key)"
80+
></button>
81+
</template>
82+
</div>
83+
</div>
84+
</div>
85+
<button
86+
x-data
87+
@click="$store.main.handleMenuAction('open')"
88+
class="inline-flex items-center gap-2 whitespace-nowrap rounded-sm border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-800 dark:border-neutral-700 dark:bg-neutral-900 dark:focus-visible:outline-neutral-300"
89+
>
90+
Open
91+
</button>
92+
<button
93+
x-data
94+
@click="$store.main.handleMenuAction('save-as')"
95+
class="inline-flex items-center gap-2 whitespace-nowrap rounded-sm border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-800 dark:border-neutral-700 dark:bg-neutral-900 dark:focus-visible:outline-neutral-300"
96+
>
97+
Save
98+
</button>
99+
</div>
14100
<div id="kb-layout">
15101
<svg width="900px" height="300px" class="block h-auto w-full"></svg>
16102
</div>

‎package.json

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,47 @@
11
{
22
"name": "obk-layout-editor",
3-
"license": "MPL-2.0",
3+
"license": "MPL-2.0",
44
"private": true,
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
88
"build": "tsc && vite build",
9-
"preview": "vite preview",
10-
"tauri": "tauri"
9+
"preview": "vite preview"
1110
},
1211
"devDependencies": {
13-
"@tauri-apps/api": "^1.3.0",
14-
"@tauri-apps/cli": "^1.3.1",
15-
"@types/alpinejs": "^3.7.1",
16-
"@types/json-stable-stringify": "^1.0.34",
17-
"@types/node": "^20.1.2",
18-
"@typescript-eslint/eslint-plugin": "^5.59.5",
19-
"@typescript-eslint/parser": "^5.59.5",
20-
"@unocss/eslint-config": "^0.51.12",
21-
"@unocss/preset-icons": "^0.51.12",
22-
"eslint": "^8.40.0",
23-
"eslint-config-prettier": "^8.8.0",
24-
"prettier": "^2.8.8",
25-
"prettier-plugin-tailwindcss": "^0.2.8",
26-
"sass": "^1.62.1",
27-
"typescript": "^5.0.4",
28-
"unocss": "^0.51.12",
29-
"unplugin-fonts": "^1.0.3",
30-
"vite": "^4.3.5"
12+
"@types/alpinejs": "^3.13.11",
13+
"@types/alpinejs__focus": "^3.13.4",
14+
"@types/node": "^22.13.10",
15+
"@typescript-eslint/eslint-plugin": "^8.26.1",
16+
"@typescript-eslint/parser": "^8.26.1",
17+
"@unocss/eslint-config": "^66.0.0",
18+
"@unocss/preset-icons": "^66.0.0",
19+
"eslint": "^9.22.0",
20+
"eslint-config-prettier": "^10.1.1",
21+
"prettier": "^3.5.3",
22+
"prettier-plugin-tailwindcss": "^0.6.11",
23+
"sass": "^1.86.0",
24+
"typescript": "^5.8.2",
25+
"unocss": "^66.0.0",
26+
"unplugin-fonts": "^1.3.1",
27+
"vite": "^6.2.2"
3128
},
3229
"dependencies": {
33-
"@svgdotjs/svg.js": "^3.1.2",
34-
"@unocss/reset": "^0.51.12",
35-
"alpinejs": "^3.12.0",
36-
"hotkeys-js": "^3.10.2",
37-
"json-stable-stringify": "^1.0.2",
38-
"remove": "^0.1.5"
30+
"@alpinejs/focus": "^3.14.9",
31+
"@hpcc-js/wasm-base91": "^1.3.1",
32+
"@oneidentity/zstd-js": "^1.0.3",
33+
"@svgdotjs/svg.js": "^3.2.4",
34+
"@unocss/reset": "^66.0.0",
35+
"alpinejs": "^3.14.9",
36+
"browser-fs-access": "^0.35.0",
37+
"hotkeys-js": "^3.13.9",
38+
"json-stable-stringify": "^1.2.1",
39+
"remove": "^0.1.5",
40+
"svg2png-wasm": "^1.4.1"
41+
},
42+
"pnpm": {
43+
"onlyBuiltDependencies": [
44+
"esbuild"
45+
]
3946
}
4047
}

0 commit comments

Comments
 (0)