feat: Add self-hosting version

.env.example

@@ -0,0 +1,7 @@
+# WebAuthn
+WEBAUTHN_RP_ID=localhost
+WEBAUTHN_RP_ORIGIN=http://localhost:5173
+WEBAUTHN_RP_NAME=keyhub
+
+# FileDB
+FILEDB_PATH=$HOME/.keyhub/db

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
     'prettier'
   ],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
+  plugins: ['@typescript-eslint', 'import'],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020,
@@ -28,6 +28,21 @@ module.exports = {
     }
   ],
   rules: {
-    indent: ['error', 2]
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    'import/order': [
+      'error',
+      {
+        groups: ['type', 'builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true
+        },
+        'newlines-between': 'never'
+      }
+    ],
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/prefer-default-export': 'off',
+    'import/no-useless-path-segments': ['error', { noUselessIndex: true }]
   }
 };

.gitignore

@@ -35,4 +35,5 @@ package-lock.json
 vite.config.js.timestamp-*
 vite.config.ts.timestamp*
 
-static/app.css
+/static/app.css
+/static/smui.css

README.md

@@ -1,38 +1,13 @@
-# create-svelte
+# Keyhub
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+[Keyhub](https://keyhub.id) is the universal key registry for decentralized identity and digital wallet.
 
-## Creating a project
+## Self-hosting
 
-If you're seeing this, you've probably already done this step. Congrats!
+You can run a self-hosting Keyhub instance for personal use or local development.
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+- Install Node.js [[ref]](https://github.com/nodesource/distributions#installation-instructions)
+- Install dependencies with `npm install`
+- Run the server with `npm run dev`
 
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+Keyhub will now be available at [https://localhost:5173](https://localhost:5173)

package.json

@@ -1,35 +1,65 @@
 {
-  "name": "wallet",
-  "version": "0.0.0",
-  "private": true,
+  "name": "keyhub",
+  "version": "0.1.0",
+  "license": "AGPL-3.0-or-later",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "build:theme": "sass --no-source-map -I src/theme -I node_modules src/app.scss static/app.css",
-    "prepare": "npm run build:theme",
+    "build:dev": "NODE_ENV=development vite build",
+    "build:theme": "smui-theme compile static/smui.css -i src/theme && sass --no-source-map -I src/lib -I node_modules src/app.scss static/app.css",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
+    "format": "prettier --plugin-search-dir . --write .",
+    "prepare": "npm run build:theme"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/adapter-static": "^2.0.2",
+    "@github/webauthn-json": "^2.1.1",
+    "@material/material-color-utilities": "^0.2.6",
+    "@noble/curves": "^1.1.0",
+    "@pinot/api": "^0.1.0",
+    "@pinot/util": "^0.1.2",
+    "@simplewebauthn/server": "^7.4.0",
+    "@simplewebauthn/typescript-types": "^7.4.0",
+    "@smui/button": "^7.0.0-beta.14",
+    "@smui/card": "^7.0.0-beta.14",
+    "@smui/checkbox": "^7.0.0-beta.14",
+    "@smui/common": "^7.0.0-beta.14",
+    "@smui/dialog": "^7.0.0-beta.14",
+    "@smui/drawer": "^7.0.0-beta.14",
+    "@smui/fab": "^7.0.0-beta.14",
+    "@smui/form-field": "^7.0.0-beta.14",
+    "@smui/icon-button": "^7.0.0-beta.14",
+    "@smui/list": "^7.0.0-beta.14",
+    "@smui/radio": "^7.0.0-beta.14",
+    "@smui/ripple": "^7.0.0-beta.14",
+    "@smui/snackbar": "^7.0.0-beta.14",
+    "@smui/textfield": "^7.0.0-beta.14",
+    "@smui/top-app-bar": "^7.0.0-beta.14",
+    "@splidejs/svelte-splide": "^0.2.9",
+    "@sveltejs/adapter-static": "^2.0.1",
     "@sveltejs/kit": "^1.20.4",
+    "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
+    "cbor": "^9.0.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte": "^2.30.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-svelte": "^2.32.4",
+    "html5-qrcode": "^2.3.8",
     "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.10.1",
-    "sass": "^1.64.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "smui-theme": "^7.0.0-beta.0",
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.3",
+    "svelte-i18n": "^3.6.0",
+    "svelte-qr": "^1.0.0",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
-    "vite": "^4.4.2"
+    "uuid": "^9.0.0",
+    "vite": "^4.2.0"
   },
   "type": "module"
 }

src/app.html

@@ -2,12 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <link rel="stylesheet" href="app.css" />
+    <title>Keyhub</title>
+    <meta
+      name="description"
+      content="Keyhub is the universal key registry for decentralized identity and digital wallet."
+    />
+    <link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
+    <link rel="stylesheet" href="/smui.css" />
+    <link rel="stylesheet" href="/app.css" />
     <meta name="viewport" content="width=device-width" />
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
+    <div class="body-wrapper">%sveltekit.body%</div>
   </body>
 </html>

src/app.scss

@@ -0,0 +1,26 @@
+@use 'ui/m3';
+
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
+
+html,
+body,
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  box-sizing: border-box;
+  background-color: var(--mdc-theme-background);
+  color: var(--mdc-theme-on-background);
+  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
+    Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+}
+
+a {
+  color: var(--mdc-theme-primary);
+  text-decoration: none;
+}

src/hooks.server.ts

@@ -0,0 +1,10 @@
+import type { Handle } from '@sveltejs/kit';
+import { locale } from 'svelte-i18n';
+
+export const handle: Handle = async ({ event, resolve }) => {
+  const lang = event.request.headers.get('accept-language')?.split(',')[0];
+  if (lang) {
+    locale.set(lang);
+  }
+  return resolve(event);
+};

src/lib/components/Alert.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { classMap } from '@smui/common/internal';
+  import IconButton from '@smui/icon-button';
+  import Snackbar, { Label, Actions } from '@smui/snackbar';
+  import Icon from '$lib/ui/icon';
+
+  let snackbar: Snackbar;
+
+  export let variant: '' | 'success' | 'error' = '';
+
+  let className = '';
+  export { className as class };
+
+  export let message = '';
+  export let timeoutMs = 4000;
+
+  export function open() {
+    snackbar.open();
+  }
+
+  export function setMessage(text: string) {
+    message = text;
+  }
+</script>
+
+<Snackbar
+  class={classMap({
+    [className]: true,
+    'alert--success': variant === 'success',
+    'alert--error': variant === 'error'
+  })}
+  bind:this={snackbar}
+  labelText={message}
+  {timeoutMs}
+>
+  <Label />
+  <Actions>
+    <IconButton title="Dismiss"><Icon name="close" variant="rounded" /></IconButton>
+  </Actions>
+</Snackbar>
+
+<style lang="scss">
+  :global(.alert--success) {
+    :global(.mdc-snackbar__surface) {
+      background-color: var(--mdc-theme-tertiary);
+    }
+
+    :global(.mdc-icon-button),
+    :global(.mdc-snackbar__label) {
+      color: var(--mdc-theme-on-tertiary);
+    }
+  }
+
+  :global(.alert--error) {
+    :global(.mdc-snackbar__surface) {
+      background-color: var(--mdc-theme-error);
+    }
+
+    :global(.mdc-icon-button),
+    :global(.mdc-snackbar__label) {
+      color: var(--mdc-theme-on-error);
+    }
+  }
+</style>

src/lib/components/CardLayout.svelte

@@ -0,0 +1,80 @@
+<script>
+  export let divider = true;
+  export let width = 450;
+  export let height = 500;
+  let innerWidth = 0;
+
+  let style = '';
+  $: style =
+    innerWidth < 600
+      ? ''
+      : (width > 0 ? `width: ${width}px;` : '') + (height > 0 ? `height: ${height}px;` : '');
+</script>
+
+<svelte:window bind:innerWidth />
+
+<div class="main">
+  <div class="card" {style}>
+    <div class="card-header" style={divider ? '' : 'border-bottom: none;'}>
+      <slot name="header" />
+    </div>
+    <div class="card-body">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .main {
+    width: 100%;
+    height: 100%;
+    background: var(--mdc-theme-surface, #f3f3f8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    color: var(--mdc-theme-on-background, #5f6368);
+  }
+
+  .card-header {
+    background: var(--mdc-theme-background, #fff);
+    font-size: 0.875rem;
+    border: 1px solid var(--mdc-theme-outline, #d2d2d7);
+    border-radius: 12px 12px 0 0;
+  }
+
+  .card-body {
+    background: var(--mdc-theme-background, #fff);
+    border: 1px solid var(--mdc-theme-outline, #d2d2d7);
+    border-top: none;
+    border-radius: 0 0 12px 12px;
+    flex-grow: 1;
+
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    text-align: center;
+  }
+
+  @media screen and (max-width: 599px) {
+    .card {
+      width: 100%;
+      height: 100%;
+    }
+
+    .card-header {
+      border: none;
+      border-bottom: 1px solid var(--mdc-theme-outline, #d2d2d7);
+      border-radius: 0;
+    }
+
+    .card-body {
+      border: none;
+      border-radius: 0;
+    }
+  }
+</style>

src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.svelte';
+export { default as CardLayout } from './CardLayout.svelte';

src/lib/i18n/index.ts

@@ -0,0 +1,12 @@
+import { init, register } from 'svelte-i18n';
+import { browser } from '$app/environment';
+
+const defaultLocale = 'ko';
+
+register('en', () => import('./locales/en.json'));
+register('ko', () => import('./locales/ko.json'));
+
+init({
+  fallbackLocale: defaultLocale,
+  initialLocale: browser ? navigator.language : defaultLocale
+});