switch from next to vue
This commit is contained in:
+352
@@ -0,0 +1,352 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import type { Database } from 'sql.js'
|
||||
import { getMeta, initDb, listEntries } from './lib/db'
|
||||
import { syncEntries } from './lib/sync'
|
||||
import type { Entry, Language } from './lib/types'
|
||||
|
||||
const languages: Language[] = [
|
||||
{ code: 'fi', name: 'Finnish' },
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'no', name: 'Norwegian' },
|
||||
{ code: 'sv', name: 'Swedish' },
|
||||
{ code: 'de', name: 'German' },
|
||||
{ code: 'ru', name: 'Russian' },
|
||||
]
|
||||
|
||||
const db = ref<Database | null>(null)
|
||||
const entries = ref<Entry[]>([])
|
||||
const searchQuery = ref('')
|
||||
const categoryFilter = ref<string | null>(null)
|
||||
const languageFilter = ref<Language['code'] | null>(null)
|
||||
const startsWith = ref<string | null>(null)
|
||||
const preferredLanguage = ref<Language['code']>('fi')
|
||||
const lastSyncAt = ref<string | null>(null)
|
||||
const isOnline = ref(navigator.onLine)
|
||||
const isSyncing = ref(false)
|
||||
const syncError = ref<string | null>(null)
|
||||
|
||||
const displayLanguages = computed(() => {
|
||||
const others = languages.filter((lang) => lang.code !== preferredLanguage.value)
|
||||
if (preferredLanguage.value === 'en') {
|
||||
return others
|
||||
}
|
||||
const english = others.find((lang) => lang.code === 'en')
|
||||
const rest = others.filter((lang) => lang.code !== 'en')
|
||||
return english ? [english, ...rest] : rest
|
||||
})
|
||||
|
||||
const categories = computed(() => {
|
||||
const set = new Set<string>()
|
||||
entries.value.forEach((entry) => {
|
||||
if (entry.category) {
|
||||
set.add(entry.category)
|
||||
}
|
||||
})
|
||||
return Array.from(set).sort((a, b) => a.localeCompare(b))
|
||||
})
|
||||
|
||||
const filteredEntries = computed(() => {
|
||||
const query = searchQuery.value.trim().toLowerCase()
|
||||
return entries.value.filter((entry) => {
|
||||
if (categoryFilter.value && entry.category !== categoryFilter.value) {
|
||||
return false
|
||||
}
|
||||
if (languageFilter.value) {
|
||||
const value = entry[languageFilter.value]
|
||||
if (!value) {
|
||||
return false
|
||||
}
|
||||
if (startsWith.value && !value.toLowerCase().startsWith(startsWith.value.toLowerCase())) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
if (query.length) {
|
||||
const fields = [
|
||||
entry.category,
|
||||
entry.fi,
|
||||
entry.en,
|
||||
entry.no,
|
||||
entry.sv,
|
||||
entry.de,
|
||||
entry.ru,
|
||||
]
|
||||
const matches = fields.some((field) => field?.toLowerCase().includes(query))
|
||||
if (!matches) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
const completionByLanguage = computed(() => {
|
||||
const totals: Record<string, number> = {}
|
||||
const counts: Record<string, number> = {}
|
||||
languages.forEach((lang) => {
|
||||
totals[lang.code] = entries.value.length
|
||||
counts[lang.code] = entries.value.filter((entry) => !!entry[lang.code]).length
|
||||
})
|
||||
return (code: Language['code']) => {
|
||||
const total = totals[code] || 0
|
||||
const count = counts[code] || 0
|
||||
if (!total) {
|
||||
return 0
|
||||
}
|
||||
return Math.round((count / total) * 100)
|
||||
}
|
||||
})
|
||||
|
||||
const hasMissingTranslations = (entry: Entry) => {
|
||||
return languages.some((lang) => !entry[lang.code])
|
||||
}
|
||||
|
||||
const filteredMissingCount = computed(() => {
|
||||
return filteredEntries.value.filter((entry) => hasMissingTranslations(entry)).length
|
||||
})
|
||||
|
||||
const lastSyncLabel = computed(() => {
|
||||
if (!lastSyncAt.value) {
|
||||
return 'Never synced'
|
||||
}
|
||||
return new Date(lastSyncAt.value).toLocaleString()
|
||||
})
|
||||
|
||||
const alphaLetters = computed(() => {
|
||||
return Array.from({ length: 26 }, (_, index) => String.fromCharCode(65 + index))
|
||||
})
|
||||
|
||||
const clearFilters = () => {
|
||||
categoryFilter.value = null
|
||||
languageFilter.value = null
|
||||
startsWith.value = null
|
||||
}
|
||||
|
||||
const setLanguageFilter = (code: Language['code'] | null) => {
|
||||
languageFilter.value = code
|
||||
startsWith.value = null
|
||||
}
|
||||
|
||||
const syncNow = async () => {
|
||||
if (!db.value) {
|
||||
return
|
||||
}
|
||||
isSyncing.value = true
|
||||
syncError.value = null
|
||||
try {
|
||||
const result = await syncEntries(db.value)
|
||||
lastSyncAt.value = result.lastSyncAt ?? lastSyncAt.value
|
||||
entries.value = listEntries(db.value)
|
||||
} catch (error) {
|
||||
syncError.value = error instanceof Error ? error.message : 'Sync failed'
|
||||
} finally {
|
||||
isSyncing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnline = () => {
|
||||
isOnline.value = true
|
||||
void syncNow()
|
||||
}
|
||||
|
||||
const handleOffline = () => {
|
||||
isOnline.value = false
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
db.value = await initDb()
|
||||
entries.value = listEntries(db.value)
|
||||
lastSyncAt.value = db.value ? getMeta(db.value, 'last_sync_at') : null
|
||||
|
||||
window.addEventListener('online', handleOnline)
|
||||
window.addEventListener('offline', handleOffline)
|
||||
|
||||
if (isOnline.value) {
|
||||
await syncNow()
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('online', handleOnline)
|
||||
window.removeEventListener('offline', handleOffline)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app">
|
||||
<header class="header">
|
||||
<div class="header-inner">
|
||||
<div class="brand">
|
||||
<span class="brand-strong">Sanasto</span>
|
||||
<span class="brand-light">Wiki</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<div class="status-pill" :class="{ offline: !isOnline }">
|
||||
<span class="status-dot" />
|
||||
<span>{{ isOnline ? 'Online' : 'Offline' }}</span>
|
||||
</div>
|
||||
<button class="btn btn-primary" :disabled="isSyncing" @click="syncNow">
|
||||
{{ isSyncing ? 'Syncing…' : 'Sync now' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-sub">
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Last sync</span>
|
||||
<span class="meta-value">{{ lastSyncLabel }}</span>
|
||||
</div>
|
||||
<div v-if="syncError" class="meta-error">{{ syncError }}</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<section class="search-area">
|
||||
<div class="search-field">
|
||||
<span class="search-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
type="search"
|
||||
placeholder="Search words, phrases, or biblical terms..."
|
||||
aria-label="Search glossary"
|
||||
/>
|
||||
<button v-if="searchQuery" class="search-clear" type="button" @click="searchQuery = ''">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div class="filters-row">
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">Category</span>
|
||||
<button
|
||||
class="chip"
|
||||
:class="{ active: !categoryFilter }"
|
||||
@click="categoryFilter = null"
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
v-for="category in categories"
|
||||
:key="category"
|
||||
class="chip"
|
||||
:class="{ active: categoryFilter === category }"
|
||||
@click="categoryFilter = category"
|
||||
>
|
||||
{{ category }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">Language</span>
|
||||
<button class="chip dark" :class="{ active: !languageFilter }" @click="setLanguageFilter(null)">
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
v-for="language in languages"
|
||||
:key="language.code"
|
||||
class="chip dark"
|
||||
:class="{ active: languageFilter === language.code }"
|
||||
@click="setLanguageFilter(language.code)"
|
||||
>
|
||||
{{ language.name }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">Primary column</span>
|
||||
<select v-model="preferredLanguage" class="select">
|
||||
<option v-for="language in languages" :key="language.code" :value="language.code">
|
||||
{{ language.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-ghost" @click="clearFilters">Reset filters</button>
|
||||
</div>
|
||||
|
||||
<div v-if="languageFilter" class="alphabet-row">
|
||||
<button
|
||||
class="chip mini"
|
||||
:class="{ active: !startsWith }"
|
||||
@click="startsWith = null"
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
v-for="letter in alphaLetters"
|
||||
:key="letter"
|
||||
class="chip mini"
|
||||
:class="{ active: startsWith === letter }"
|
||||
@click="startsWith = letter"
|
||||
>
|
||||
{{ letter }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats-row">
|
||||
<div>
|
||||
<h2 class="section-title">Translation Table</h2>
|
||||
<p class="section-subtitle">
|
||||
{{ filteredEntries.length }} of {{ entries.length }} entries
|
||||
</p>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span class="badge">Missing: {{ filteredMissingCount }}</span>
|
||||
<span class="badge success">Complete: {{ filteredEntries.length - filteredMissingCount }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="table-shell">
|
||||
<div class="table-scroll">
|
||||
<table class="glossary">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sticky-col">
|
||||
<div class="th-title">
|
||||
{{ languages.find((lang) => lang.code === preferredLanguage)?.name || 'Primary' }}
|
||||
<span class="th-code">{{ preferredLanguage.toUpperCase() }}</span>
|
||||
</div>
|
||||
<div class="th-sub">Category / Status</div>
|
||||
</th>
|
||||
<th v-for="language in displayLanguages" :key="language.code">
|
||||
<div class="th-title">
|
||||
{{ language.name }}
|
||||
<span class="th-code">{{ language.code.toUpperCase() }}</span>
|
||||
</div>
|
||||
<div class="th-sub completion">{{ completionByLanguage(language.code) }}% complete</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="!filteredEntries.length">
|
||||
<td :colspan="displayLanguages.length + 1" class="empty-cell">
|
||||
No entries matched your filters.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="entry in filteredEntries"
|
||||
:key="entry.id"
|
||||
:class="{ 'row-missing': hasMissingTranslations(entry) }"
|
||||
>
|
||||
<td class="sticky-col">
|
||||
<div class="entry-title">{{ entry[preferredLanguage] || 'Untitled' }}</div>
|
||||
<div class="entry-meta">
|
||||
<span class="meta-tag">{{ entry.category || 'General' }}</span>
|
||||
<span class="meta-pill" :class="entry[preferredLanguage] ? 'verified' : 'unverified'">
|
||||
{{ entry[preferredLanguage] ? 'Verified' : 'Unverified' }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td v-for="language in displayLanguages" :key="language.code">
|
||||
<span v-if="entry[language.code]">{{ entry[language.code] }}</span>
|
||||
<span v-else class="missing">—</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
import initSqlJs, { type Database } from 'sql.js'
|
||||
import wasmUrl from 'sql.js/dist/sql-wasm.wasm?url'
|
||||
import type { Entry } from './types'
|
||||
|
||||
const DB_NAME = 'sanasto-sqlite'
|
||||
const STORE_NAME = 'sqlite'
|
||||
const DB_KEY = 'db'
|
||||
|
||||
let sqlInit: ReturnType<typeof initSqlJs> | null = null
|
||||
|
||||
function initSql(): ReturnType<typeof initSqlJs> {
|
||||
if (!sqlInit) {
|
||||
sqlInit = initSqlJs({ locateFile: () => wasmUrl })
|
||||
}
|
||||
return sqlInit
|
||||
}
|
||||
|
||||
export async function initDb(): Promise<Database> {
|
||||
const SQL = await initSql()
|
||||
const stored = await loadDbFromIdb()
|
||||
const db = stored ? new SQL.Database(new Uint8Array(stored)) : new SQL.Database()
|
||||
ensureSchema(db)
|
||||
return db
|
||||
}
|
||||
|
||||
function ensureSchema(db: Database) {
|
||||
db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS entries (
|
||||
id INTEGER PRIMARY KEY,
|
||||
category TEXT,
|
||||
fi TEXT,
|
||||
en TEXT,
|
||||
sv TEXT,
|
||||
no TEXT,
|
||||
ru TEXT,
|
||||
de TEXT,
|
||||
updated_at TEXT
|
||||
);
|
||||
`)
|
||||
db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS meta (
|
||||
key TEXT PRIMARY KEY,
|
||||
value TEXT
|
||||
);
|
||||
`)
|
||||
}
|
||||
|
||||
export function listEntries(db: Database): Entry[] {
|
||||
const result = db.exec(
|
||||
`SELECT id, category, fi, en, sv, no, ru, de, updated_at
|
||||
FROM entries
|
||||
ORDER BY COALESCE(fi, en, no, sv, de, ru, '') ASC`
|
||||
)
|
||||
const [first] = result
|
||||
if (!first) {
|
||||
return []
|
||||
}
|
||||
const { columns, values } = first
|
||||
return values.map((row: unknown[]) => {
|
||||
const entry: Record<string, unknown> = {}
|
||||
columns.forEach((column: string, index: number) => {
|
||||
entry[column] = row[index] ?? null
|
||||
})
|
||||
return entry as Entry
|
||||
})
|
||||
}
|
||||
|
||||
export function upsertEntries(db: Database, entries: Entry[]) {
|
||||
const statement = db.prepare(
|
||||
`INSERT INTO entries (id, category, fi, en, sv, no, ru, de, updated_at)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||
ON CONFLICT(id) DO UPDATE SET
|
||||
category=excluded.category,
|
||||
fi=excluded.fi,
|
||||
en=excluded.en,
|
||||
sv=excluded.sv,
|
||||
no=excluded.no,
|
||||
ru=excluded.ru,
|
||||
de=excluded.de,
|
||||
updated_at=excluded.updated_at`
|
||||
)
|
||||
entries.forEach((entry) => {
|
||||
statement.run([
|
||||
entry.id,
|
||||
entry.category ?? null,
|
||||
entry.fi ?? null,
|
||||
entry.en ?? null,
|
||||
entry.sv ?? null,
|
||||
entry.no ?? null,
|
||||
entry.ru ?? null,
|
||||
entry.de ?? null,
|
||||
entry.updated_at ?? null,
|
||||
])
|
||||
})
|
||||
statement.free()
|
||||
}
|
||||
|
||||
export function getMeta(db: Database, key: string): string | null {
|
||||
const result = db.exec(`SELECT value FROM meta WHERE key = ?`, [key])
|
||||
const first = result[0]
|
||||
if (!first || !first.values.length || !first.values[0]?.length) {
|
||||
return null
|
||||
}
|
||||
const value = first.values[0][0]
|
||||
return typeof value === 'string' ? value : null
|
||||
}
|
||||
|
||||
export function setMeta(db: Database, key: string, value: string) {
|
||||
db.exec(`INSERT INTO meta (key, value) VALUES (?, ?)
|
||||
ON CONFLICT(key) DO UPDATE SET value=excluded.value`, [key, value])
|
||||
}
|
||||
|
||||
export async function persistDb(db: Database) {
|
||||
const data = db.export()
|
||||
await saveDbToIdb(data)
|
||||
}
|
||||
|
||||
function openIdb(): Promise<IDBDatabase> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const request = indexedDB.open(DB_NAME, 1)
|
||||
request.onupgradeneeded = () => {
|
||||
const db = request.result
|
||||
if (!db.objectStoreNames.contains(STORE_NAME)) {
|
||||
db.createObjectStore(STORE_NAME)
|
||||
}
|
||||
}
|
||||
request.onsuccess = () => resolve(request.result)
|
||||
request.onerror = () => reject(request.error)
|
||||
})
|
||||
}
|
||||
|
||||
function loadDbFromIdb(): Promise<ArrayBuffer | null> {
|
||||
return openIdb().then(
|
||||
(db) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction(STORE_NAME, 'readonly')
|
||||
const store = transaction.objectStore(STORE_NAME)
|
||||
const request = store.get(DB_KEY)
|
||||
request.onsuccess = () => {
|
||||
resolve((request.result as ArrayBuffer | undefined) ?? null)
|
||||
}
|
||||
request.onerror = () => reject(request.error)
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
function saveDbToIdb(data: Uint8Array): Promise<void> {
|
||||
return openIdb().then(
|
||||
(db) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction(STORE_NAME, 'readwrite')
|
||||
const store = transaction.objectStore(STORE_NAME)
|
||||
const request = store.put(data, DB_KEY)
|
||||
request.onsuccess = () => resolve()
|
||||
request.onerror = () => reject(request.error)
|
||||
})
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import type { Database } from 'sql.js'
|
||||
import type { Entry } from './types'
|
||||
import { getMeta, persistDb, setMeta, upsertEntries } from './db'
|
||||
|
||||
const LAST_SYNC_KEY = 'last_sync_at'
|
||||
|
||||
export async function syncEntries(db: Database) {
|
||||
const lastSyncAt = getMeta(db, LAST_SYNC_KEY)
|
||||
const url = new URL('https://sanasto.rin.no/api/entries')
|
||||
if (lastSyncAt) {
|
||||
url.searchParams.set('since', lastSyncAt)
|
||||
}
|
||||
|
||||
const response = await fetch(url.toString(), {
|
||||
headers: {
|
||||
'X-Sanasto-App': 'app.sanasto',
|
||||
},
|
||||
})
|
||||
if (!response.ok) {
|
||||
throw new Error(`Sync failed with ${response.status}`)
|
||||
}
|
||||
|
||||
const entries = (await response.json()) as Entry[]
|
||||
if (entries.length === 0) {
|
||||
return { updated: 0, lastSyncAt }
|
||||
}
|
||||
|
||||
upsertEntries(db, entries)
|
||||
|
||||
const newest = entries.reduce<Date | null>((current, entry) => {
|
||||
if (!entry.updated_at) {
|
||||
return current
|
||||
}
|
||||
const date = new Date(entry.updated_at)
|
||||
if (!current || date > current) {
|
||||
return date
|
||||
}
|
||||
return current
|
||||
}, lastSyncAt ? new Date(lastSyncAt) : null)
|
||||
|
||||
if (newest) {
|
||||
setMeta(db, LAST_SYNC_KEY, newest.toISOString())
|
||||
}
|
||||
|
||||
await persistDb(db)
|
||||
|
||||
return { updated: entries.length, lastSyncAt: newest?.toISOString() ?? lastSyncAt }
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
export type Entry = {
|
||||
id: number
|
||||
category: string | null
|
||||
fi: string | null
|
||||
en: string | null
|
||||
sv: string | null
|
||||
no: string | null
|
||||
ru: string | null
|
||||
de: string | null
|
||||
updated_at: string | null
|
||||
}
|
||||
|
||||
export type Language = {
|
||||
code: keyof Pick<Entry, 'fi' | 'en' | 'sv' | 'no' | 'ru' | 'de'>
|
||||
name: string
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import { registerSW } from 'virtual:pwa-register'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
||||
registerSW({ immediate: true })
|
||||
Vendored
+28
@@ -0,0 +1,28 @@
|
||||
declare module 'sql.js' {
|
||||
export type QueryExecResult = {
|
||||
columns: string[]
|
||||
values: unknown[][]
|
||||
}
|
||||
|
||||
export type Statement = {
|
||||
run: (params?: unknown[]) => void
|
||||
free: () => void
|
||||
}
|
||||
|
||||
export type Database = {
|
||||
exec: (sql: string, params?: unknown[]) => QueryExecResult[]
|
||||
prepare: (sql: string) => Statement
|
||||
export: () => Uint8Array
|
||||
}
|
||||
|
||||
type SqlJsInitOptions = {
|
||||
locateFile?: (file: string) => string
|
||||
}
|
||||
|
||||
type SqlJsModule = {
|
||||
Database: new (data?: Uint8Array) => Database
|
||||
}
|
||||
|
||||
const initSqlJs: (config?: SqlJsInitOptions) => Promise<SqlJsModule>
|
||||
export default initSqlJs
|
||||
}
|
||||
+525
@@ -0,0 +1,525 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: 'Manrope', 'Segoe UI', sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
--slate-50: #f8fafc;
|
||||
--slate-100: #f1f5f9;
|
||||
--slate-200: #e2e8f0;
|
||||
--slate-300: #cbd5e1;
|
||||
--slate-600: #475569;
|
||||
--slate-700: #334155;
|
||||
--slate-900: #0f172a;
|
||||
--indigo-600: #4f46e5;
|
||||
--indigo-700: #4338ca;
|
||||
--emerald-600: #059669;
|
||||
--amber-500: #f59e0b;
|
||||
--red-100: #fee2e2;
|
||||
--red-500: #ef4444;
|
||||
--shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(circle at 10% 20%, #eef2ff 0%, #f8fafc 45%, #f1f5f9 100%);
|
||||
color: var(--slate-900);
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid var(--slate-200);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 20px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-sub {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.brand-strong {
|
||||
font-weight: 700;
|
||||
color: var(--indigo-600);
|
||||
}
|
||||
|
||||
.brand-light {
|
||||
font-weight: 300;
|
||||
color: var(--slate-300);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #bbf7d0;
|
||||
background: #ecfdf3;
|
||||
color: var(--emerald-600);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.status-pill.offline {
|
||||
border-color: #fecaca;
|
||||
background: #fef2f2;
|
||||
color: var(--red-500);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--slate-600);
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-weight: 700;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.meta-error {
|
||||
color: var(--red-500);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 20px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.search-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 18px 44px 18px 50px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--slate-200);
|
||||
background: #ffffff;
|
||||
font-size: 16px;
|
||||
color: var(--slate-700);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: 2px solid rgba(79, 70, 229, 0.2);
|
||||
border-color: var(--indigo-600);
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 24px;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filters-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--slate-600);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chip {
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--slate-200);
|
||||
background: #ffffff;
|
||||
color: var(--slate-600);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 6px 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip.active {
|
||||
background: #e0e7ff;
|
||||
border-color: #c7d2fe;
|
||||
color: var(--indigo-700);
|
||||
}
|
||||
|
||||
.chip.dark {
|
||||
text-transform: none;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chip.dark.active {
|
||||
background: var(--slate-900);
|
||||
color: #ffffff;
|
||||
border-color: var(--slate-900);
|
||||
}
|
||||
|
||||
.chip.mini {
|
||||
padding: 4px 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.alphabet-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.select {
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--slate-200);
|
||||
background: #ffffff;
|
||||
font-weight: 600;
|
||||
color: var(--slate-700);
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 12px;
|
||||
border: 1px solid transparent;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--indigo-600);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: var(--slate-200);
|
||||
color: var(--slate-600);
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--slate-900);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--slate-600);
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--slate-200);
|
||||
background: #ffffff;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--slate-600);
|
||||
}
|
||||
|
||||
.badge.success {
|
||||
border-color: #bbf7d0;
|
||||
color: var(--emerald-600);
|
||||
}
|
||||
|
||||
.table-shell {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--slate-200);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
max-height: 68vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.glossary {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-size: 13px;
|
||||
color: var(--slate-700);
|
||||
}
|
||||
|
||||
.glossary thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--slate-50);
|
||||
border-bottom: 1px solid var(--slate-200);
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
padding: 12px 16px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.glossary tbody td {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--slate-100);
|
||||
background: #ffffff;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.glossary .sticky-col {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
background: #ffffff;
|
||||
min-width: 240px;
|
||||
border-right: 1px solid var(--slate-100);
|
||||
}
|
||||
|
||||
.glossary thead .sticky-col {
|
||||
background: var(--slate-50);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.row-missing td {
|
||||
background: rgba(254, 226, 226, 0.45);
|
||||
}
|
||||
|
||||
.th-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--slate-700);
|
||||
}
|
||||
|
||||
.th-code {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.th-sub {
|
||||
margin-top: 4px;
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.th-sub.completion {
|
||||
color: var(--emerald-600);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-weight: 700;
|
||||
color: var(--slate-900);
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 11px;
|
||||
color: var(--slate-600);
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.meta-pill {
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.meta-pill.verified {
|
||||
color: var(--emerald-600);
|
||||
}
|
||||
|
||||
.meta-pill.unverified {
|
||||
color: var(--amber-500);
|
||||
}
|
||||
|
||||
.empty-cell {
|
||||
padding: 24px;
|
||||
color: var(--slate-600);
|
||||
}
|
||||
|
||||
.missing {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.header-inner,
|
||||
.header-sub,
|
||||
.content {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.header-sub {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.filters-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.header-inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.glossary thead th,
|
||||
.glossary tbody td {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.glossary .sticky-col {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-pwa/client" />
|
||||
Reference in New Issue
Block a user