switch from next to vue
This commit is contained in:
+3
@@ -0,0 +1,3 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
Generated
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="AndroidProjectSystem">
|
||||
<option name="providerId" value="com.android.tools.idea.GradleProjectSystem" />
|
||||
</component>
|
||||
</project>
|
||||
Generated
+10
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectMigrations">
|
||||
<option name="MigrateToGradleLocalJavaHome">
|
||||
<set>
|
||||
<option value="$PROJECT_DIR$" />
|
||||
</set>
|
||||
</option>
|
||||
</component>
|
||||
</project>
|
||||
Generated
+9
@@ -0,0 +1,9 @@
|
||||
<project version="4">
|
||||
<component name="ExternalStorageConfigurationManager" enabled="true" />
|
||||
<component name="ProjectRootManager">
|
||||
<output url="file://$PROJECT_DIR$/build/classes" />
|
||||
</component>
|
||||
<component name="ProjectType">
|
||||
<option name="id" value="Android" />
|
||||
</component>
|
||||
</project>
|
||||
Generated
+17
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="RunConfigurationProducerService">
|
||||
<option name="ignoredProducers">
|
||||
<set>
|
||||
<option value="com.intellij.execution.junit.AbstractAllInDirectoryConfigurationProducer" />
|
||||
<option value="com.intellij.execution.junit.AllInPackageConfigurationProducer" />
|
||||
<option value="com.intellij.execution.junit.PatternConfigurationProducer" />
|
||||
<option value="com.intellij.execution.junit.TestInClassConfigurationProducer" />
|
||||
<option value="com.intellij.execution.junit.UniqueIdConfigurationProducer" />
|
||||
<option value="com.intellij.execution.junit.testDiscovery.JUnitTestDiscoveryConfigurationProducer" />
|
||||
<option value="org.jetbrains.kotlin.idea.junit.KotlinJUnitRunConfigurationProducer" />
|
||||
<option value="org.jetbrains.kotlin.idea.junit.KotlinPatternConfigurationProducer" />
|
||||
</set>
|
||||
</option>
|
||||
</component>
|
||||
</project>
|
||||
Generated
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="StudioBotProjectSettings">
|
||||
<option name="shareContext" value="OptedIn" />
|
||||
</component>
|
||||
</project>
|
||||
@@ -1,9 +1,9 @@
|
||||
{
|
||||
"appId": "com.example.app",
|
||||
"appName": "nextjs-tailwind-capacitor",
|
||||
"appId": "app.sanasto",
|
||||
"appName": "Sanasto",
|
||||
"bundledWebRuntime": false,
|
||||
"npmClient": "npm",
|
||||
"webDir": "out",
|
||||
"webDir": "dist",
|
||||
"plugins": {
|
||||
"SplashScreen": {
|
||||
"launchShowDuration": 0
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
#Fri Feb 06 00:46:15 CET 2026
|
||||
distributionBase=GRADLE_USER_HOME
|
||||
distributionPath=wrapper/dists
|
||||
distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.2-all.zip
|
||||
networkTimeout=10000
|
||||
distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip
|
||||
zipStoreBase=GRADLE_USER_HOME
|
||||
zipStorePath=wrapper/dists
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import dynamic from 'next/dynamic';
|
||||
import { lists } from '../../mock';
|
||||
|
||||
const App = dynamic(() => import('../../components/AppShell'), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return [
|
||||
{ all: ['feed'] },
|
||||
{ all: ['lists'] },
|
||||
...lists.map(list => ({ all: ['lists', list.id] })),
|
||||
{ all: ['settings'] },
|
||||
];
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
return <App />;
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import type { Metadata, Viewport } from 'next';
|
||||
import Script from 'next/script';
|
||||
|
||||
import 'tailwindcss/tailwind.css';
|
||||
/* Core CSS required for Ionic components to work properly */
|
||||
import '@ionic/react/css/core.css';
|
||||
|
||||
/* Basic CSS for apps built with Ionic */
|
||||
import '@ionic/react/css/normalize.css';
|
||||
import '@ionic/react/css/structure.css';
|
||||
import '@ionic/react/css/typography.css';
|
||||
|
||||
/* Optional CSS utils that can be commented out */
|
||||
import '@ionic/react/css/padding.css';
|
||||
import '@ionic/react/css/float-elements.css';
|
||||
import '@ionic/react/css/text-alignment.css';
|
||||
import '@ionic/react/css/text-transformation.css';
|
||||
import '@ionic/react/css/flex-utils.css';
|
||||
import '@ionic/react/css/display.css';
|
||||
|
||||
import '../styles/global.css';
|
||||
import '../styles/variables.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
initialScale: 1,
|
||||
width: 'device-width',
|
||||
viewportFit: 'cover',
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
<Script
|
||||
type="module"
|
||||
src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.esm.js"
|
||||
strategy="lazyOnload"
|
||||
/>
|
||||
<Script
|
||||
noModule
|
||||
src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.js"
|
||||
strategy="lazyOnload"
|
||||
/>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const App = dynamic(() => import('../components/AppShell'), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
export default function Page() {
|
||||
return <App />;
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
{
|
||||
"appId": "com.example.app",
|
||||
"appName": "nextjs-tailwind-capacitor",
|
||||
"appId": "app.sanasto",
|
||||
"appName": "Sanasto",
|
||||
"bundledWebRuntime": false,
|
||||
"npmClient": "npm",
|
||||
"webDir": "out",
|
||||
"webDir": "dist",
|
||||
"plugins": {
|
||||
"SplashScreen": {
|
||||
"launchShowDuration": 0
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
'use client';
|
||||
import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
|
||||
import { StatusBar, Style } from '@capacitor/status-bar';
|
||||
import { IonReactRouter } from '@ionic/react-router';
|
||||
import { Route } from 'react-router-dom';
|
||||
|
||||
import Tabs from './pages/Tabs';
|
||||
|
||||
setupIonicReact({});
|
||||
|
||||
window
|
||||
.matchMedia('(prefers-color-scheme: dark)')
|
||||
.addEventListener('change', async status => {
|
||||
try {
|
||||
await StatusBar.setStyle({
|
||||
style: status.matches ? Style.Dark : Style.Light,
|
||||
});
|
||||
} catch {}
|
||||
});
|
||||
|
||||
const AppShell = () => {
|
||||
return (
|
||||
<IonApp>
|
||||
<IonReactRouter>
|
||||
<IonRouterOutlet id="main">
|
||||
<Route path="/" render={() => <Tabs />} />
|
||||
</IonRouterOutlet>
|
||||
</IonReactRouter>
|
||||
</IonApp>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppShell;
|
||||
@@ -1,111 +0,0 @@
|
||||
import Image from 'next/image';
|
||||
import Card from '../ui/Card';
|
||||
|
||||
import {
|
||||
IonPage,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonButtons,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
IonContent,
|
||||
IonMenuButton,
|
||||
} from '@ionic/react';
|
||||
import Notifications from './Notifications';
|
||||
import { useState } from 'react';
|
||||
import { notificationsOutline } from 'ionicons/icons';
|
||||
import { selectHomeItems } from '../../store/selectors';
|
||||
import Store from '../../store';
|
||||
|
||||
type FeedCardProps = {
|
||||
title: string;
|
||||
type: string;
|
||||
text: string;
|
||||
author: string;
|
||||
authorAvatar: string;
|
||||
image: string;
|
||||
};
|
||||
|
||||
const FeedCard = ({
|
||||
title,
|
||||
type,
|
||||
text,
|
||||
author,
|
||||
authorAvatar,
|
||||
image,
|
||||
}: FeedCardProps) => (
|
||||
<Card className="my-4 mx-auto">
|
||||
<div className="h-32 w-full relative">
|
||||
<Image
|
||||
className="rounded-t-xl object-cover min-w-full min-h-full max-w-full max-h-full"
|
||||
src={image}
|
||||
alt=""
|
||||
fill
|
||||
/>
|
||||
</div>
|
||||
<div className="px-4 py-4 bg-white rounded-b-xl dark:bg-gray-900">
|
||||
<h4 className="font-bold py-0 text-s text-gray-400 dark:text-gray-500 uppercase">
|
||||
{type}
|
||||
</h4>
|
||||
<h2 className="font-bold text-2xl text-gray-800 dark:text-gray-100">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="sm:text-sm text-s text-gray-500 mr-1 my-3 dark:text-gray-400">
|
||||
{text}
|
||||
</p>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-10 h-10 relative">
|
||||
<Image
|
||||
src={authorAvatar}
|
||||
className="rounded-full object-cover min-w-full min-h-full max-w-full max-h-full"
|
||||
alt=""
|
||||
fill
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-gray-500 dark:text-gray-200 m-l-8 text-sm font-medium">
|
||||
{author}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const Feed = () => {
|
||||
const homeItems = Store.useState(selectHomeItems);
|
||||
const [showNotifications, setShowNotifications] = useState(false);
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Feed</IonTitle>
|
||||
<IonButtons slot="start">
|
||||
<IonMenuButton />
|
||||
</IonButtons>
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={() => setShowNotifications(true)}>
|
||||
<IonIcon icon={notificationsOutline} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent className="ion-padding" fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Feed</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<Notifications
|
||||
open={showNotifications}
|
||||
onDidDismiss={() => setShowNotifications(false)}
|
||||
/>
|
||||
{homeItems.map((i, index) => (
|
||||
<FeedCard {...i} key={index} />
|
||||
))}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Feed;
|
||||
@@ -1,73 +0,0 @@
|
||||
import {
|
||||
IonBackButton,
|
||||
IonButtons,
|
||||
IonCheckbox,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonList,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import Store from '../../store';
|
||||
import * as actions from '../../store/actions';
|
||||
import * as selectors from '../../store/selectors';
|
||||
import { ListItem, TodoListItem } from '../../mock';
|
||||
|
||||
type ListDetailParams = {
|
||||
listId: string;
|
||||
};
|
||||
|
||||
const ListItems = ({ list }: { list: TodoListItem }) => {
|
||||
return (
|
||||
<IonList>
|
||||
{(list?.items || []).map((item, key) => (
|
||||
<ListItemEntry list={list} item={item} key={key} />
|
||||
))}
|
||||
</IonList>
|
||||
);
|
||||
};
|
||||
|
||||
const ListItemEntry = ({
|
||||
list,
|
||||
item,
|
||||
}: {
|
||||
list: TodoListItem;
|
||||
item: ListItem;
|
||||
}) => (
|
||||
<IonItem onClick={() => actions.setDone(list, item, !item.done)}>
|
||||
<IonLabel>{item.name}</IonLabel>
|
||||
<IonCheckbox
|
||||
aria-label={item.name}
|
||||
checked={item.done || false}
|
||||
slot="end"
|
||||
/>
|
||||
</IonItem>
|
||||
);
|
||||
|
||||
const ListDetail = () => {
|
||||
const lists = Store.useState(selectors.selectLists);
|
||||
const params = useParams<ListDetailParams>();
|
||||
const { listId } = params;
|
||||
const loadedList = lists.find(l => l.id === listId);
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton defaultHref="/lists" />
|
||||
</IonButtons>
|
||||
<IonTitle>{loadedList?.name}</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>{loadedList && <ListItems list={loadedList} />}</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListDetail;
|
||||
@@ -1,57 +0,0 @@
|
||||
import { TodoListItem } from '../../mock';
|
||||
import Store from '../../store';
|
||||
import * as selectors from '../../store/selectors';
|
||||
import {
|
||||
IonPage,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonContent,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonList,
|
||||
} from '@ionic/react';
|
||||
|
||||
const ListEntry = ({ list }: { list: TodoListItem }) => {
|
||||
return (
|
||||
<IonItem routerLink={`/lists/${list.id}`} className="list-entry">
|
||||
<IonLabel>{list.name}</IonLabel>
|
||||
</IonItem>
|
||||
);
|
||||
};
|
||||
|
||||
const AllLists = () => {
|
||||
const lists = Store.useState(selectors.selectLists);
|
||||
|
||||
return (
|
||||
<>
|
||||
{lists.map((list, i) => (
|
||||
<ListEntry list={list} key={i} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Lists = () => {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader translucent={true}>
|
||||
<IonToolbar>
|
||||
<IonTitle>Lists</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen={true}>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Lists</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonList>
|
||||
<AllLists />
|
||||
</IonList>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Lists;
|
||||
@@ -1,74 +0,0 @@
|
||||
import {
|
||||
IonModal,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonContent,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
IonList,
|
||||
IonItem,
|
||||
IonNote,
|
||||
IonLabel,
|
||||
} from '@ionic/react';
|
||||
import Store from '../../store';
|
||||
import { selectNotifications } from '../../store/selectors';
|
||||
|
||||
import { close } from 'ionicons/icons';
|
||||
import { type NotificationItem } from '../../mock';
|
||||
|
||||
const NotificationItem = ({
|
||||
notification,
|
||||
}: {
|
||||
notification: NotificationItem;
|
||||
}) => (
|
||||
<IonItem>
|
||||
<IonLabel>{notification.title}</IonLabel>
|
||||
<IonNote slot="end">{notification.when}</IonNote>
|
||||
<IonButton slot="end" fill="clear" color="dark">
|
||||
<IonIcon icon={close} />
|
||||
</IonButton>
|
||||
</IonItem>
|
||||
);
|
||||
|
||||
const Notifications = ({
|
||||
open,
|
||||
onDidDismiss,
|
||||
}: {
|
||||
open: boolean;
|
||||
onDidDismiss: () => void;
|
||||
}) => {
|
||||
const notifications = Store.useState(selectNotifications);
|
||||
|
||||
return (
|
||||
<IonModal isOpen={open} onDidDismiss={onDidDismiss}>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Notifications</IonTitle>
|
||||
<IonButton
|
||||
slot="end"
|
||||
fill="clear"
|
||||
color="dark"
|
||||
onClick={onDidDismiss}
|
||||
>
|
||||
<IonIcon icon={close} />
|
||||
</IonButton>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Notifications</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonList>
|
||||
{notifications.map((notification, i) => (
|
||||
<NotificationItem notification={notification} key={i} />
|
||||
))}
|
||||
</IonList>
|
||||
</IonContent>
|
||||
</IonModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notifications;
|
||||
@@ -1,46 +0,0 @@
|
||||
import {
|
||||
IonPage,
|
||||
IonHeader,
|
||||
IonItem,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonContent,
|
||||
IonList,
|
||||
IonToggle,
|
||||
} from '@ionic/react';
|
||||
|
||||
import Store from '../../store';
|
||||
import * as selectors from '../../store/selectors';
|
||||
import { setSettings } from '../../store/actions';
|
||||
|
||||
const Settings = () => {
|
||||
const settings = Store.useState(selectors.selectSettings);
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>
|
||||
<IonList>
|
||||
<IonItem>
|
||||
<IonToggle
|
||||
checked={settings.enableNotifications}
|
||||
onIonChange={e => {
|
||||
setSettings({
|
||||
...settings,
|
||||
enableNotifications: e.target.checked,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Enable Notifications
|
||||
</IonToggle>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -1,51 +0,0 @@
|
||||
import { Redirect, Route, Switch } from 'react-router-dom';
|
||||
import {
|
||||
IonRouterOutlet,
|
||||
IonTabs,
|
||||
IonTabBar,
|
||||
IonTabButton,
|
||||
IonIcon,
|
||||
IonLabel,
|
||||
} from '@ionic/react';
|
||||
import { cog, flash, list } from 'ionicons/icons';
|
||||
|
||||
import Home from './Feed';
|
||||
import Lists from './Lists';
|
||||
import ListDetail from './ListDetail';
|
||||
import Settings from './Settings';
|
||||
|
||||
const Tabs = () => {
|
||||
return (
|
||||
<IonTabs>
|
||||
<IonRouterOutlet>
|
||||
<Switch>
|
||||
<Route path="/feed" render={() => <Home />} exact={true} />
|
||||
<Route path="/lists" render={() => <Lists />} exact={true} />
|
||||
<Route
|
||||
path="/lists/:listId"
|
||||
render={() => <ListDetail />}
|
||||
exact={true}
|
||||
/>
|
||||
<Route path="/settings" render={() => <Settings />} exact={true} />
|
||||
<Route path="" render={() => <Redirect to="/feed" />} exact={true} />
|
||||
</Switch>
|
||||
</IonRouterOutlet>
|
||||
<IonTabBar slot="bottom">
|
||||
<IonTabButton tab="tab1" href="/feed">
|
||||
<IonIcon icon={flash} />
|
||||
<IonLabel>Feed</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="tab2" href="/lists">
|
||||
<IonIcon icon={list} />
|
||||
<IonLabel>Lists</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="tab3" href="/settings">
|
||||
<IonIcon icon={cog} />
|
||||
<IonLabel>Settings</IonLabel>
|
||||
</IonTabButton>
|
||||
</IonTabBar>
|
||||
</IonTabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tabs;
|
||||
@@ -1,17 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
|
||||
const Card = ({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactElement[];
|
||||
className: string;
|
||||
}) => (
|
||||
<div className={classNames('max-w-xl', className)}>
|
||||
<div className="bg-white shadow-md rounded-b-xl dark:bg-black">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Card;
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+32
File diff suppressed because one or more lines are too long
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,2 @@
|
||||
try{self["workbox:window:7.3.0"]&&_()}catch{}function b(n,r){return new Promise((function(t){var o=new MessageChannel;o.port1.onmessage=function(f){t(f.data)},n.postMessage(r,[o.port2])}))}function P(n,r){(r==null||r>n.length)&&(r=n.length);for(var t=0,o=Array(r);t<r;t++)o[t]=n[t];return o}function j(n,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,W(o.key),o)}}function S(n,r){var t=typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(t)return(t=t.call(n)).next.bind(t);if(Array.isArray(n)||(t=(function(f,c){if(f){if(typeof f=="string")return P(f,c);var a={}.toString.call(f).slice(8,-1);return a==="Object"&&f.constructor&&(a=f.constructor.name),a==="Map"||a==="Set"?Array.from(f):a==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?P(f,c):void 0}})(n))||r){t&&(n=t);var o=0;return function(){return o>=n.length?{done:!0}:{done:!1,value:n[o++]}}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
|
||||
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function w(n,r){return w=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,o){return t.__proto__=o,t},w(n,r)}function W(n){var r=(function(t,o){if(typeof t!="object"||!t)return t;var f=t[Symbol.toPrimitive];if(f!==void 0){var c=f.call(t,o);if(typeof c!="object")return c;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)})(n,"string");return typeof r=="symbol"?r:r+""}try{self["workbox:core:7.3.0"]&&_()}catch{}var m=function(){var n=this;this.promise=new Promise((function(r,t){n.resolve=r,n.reject=t}))};function y(n,r){var t=location.href;return new URL(n,t).href===new URL(r,t).href}var d=function(n,r){this.type=n,Object.assign(this,r)};function l(n,r,t){return t?r?r(n):n:(n&&n.then||(n=Promise.resolve(n)),r?n.then(r):n)}function k(){}var L={type:"SKIP_WAITING"};function E(n,r){return n&&n.then?n.then(k):Promise.resolve()}var O=(function(n){function r(c,a){var e,i;return a===void 0&&(a={}),(e=n.call(this)||this).nn={},e.tn=0,e.rn=new m,e.en=new m,e.on=new m,e.un=0,e.an=new Set,e.cn=function(){var u=e.fn,s=u.installing;e.tn>0||!y(s.scriptURL,e.sn.toString())||performance.now()>e.un+6e4?(e.vn=s,u.removeEventListener("updatefound",e.cn)):(e.hn=s,e.an.add(s),e.rn.resolve(s)),++e.tn,s.addEventListener("statechange",e.ln)},e.ln=function(u){var s=e.fn,v=u.target,h=v.state,p=v===e.vn,g={sw:v,isExternal:p,originalEvent:u};!p&&e.mn&&(g.isUpdate=!0),e.dispatchEvent(new d(h,g)),h==="installed"?e.wn=self.setTimeout((function(){h==="installed"&&s.waiting===v&&e.dispatchEvent(new d("waiting",g))}),200):h==="activating"&&(clearTimeout(e.wn),p||e.en.resolve(v))},e.yn=function(u){var s=e.hn,v=s!==navigator.serviceWorker.controller;e.dispatchEvent(new d("controlling",{isExternal:v,originalEvent:u,sw:s,isUpdate:e.mn})),v||e.on.resolve(s)},e.gn=(i=function(u){var s=u.data,v=u.ports,h=u.source;return l(e.getSW(),(function(){e.an.has(h)&&e.dispatchEvent(new d("message",{data:s,originalEvent:u,ports:v,sw:h}))}))},function(){for(var u=[],s=0;s<arguments.length;s++)u[s]=arguments[s];try{return Promise.resolve(i.apply(this,u))}catch(v){return Promise.reject(v)}}),e.sn=c,e.nn=a,navigator.serviceWorker.addEventListener("message",e.gn),e}var t,o;o=n,(t=r).prototype=Object.create(o.prototype),t.prototype.constructor=t,w(t,o);var f=r.prototype;return f.register=function(c){var a=(c===void 0?{}:c).immediate,e=a!==void 0&&a;try{var i=this;return l((function(u,s){var v=u();return v&&v.then?v.then(s):s(v)})((function(){if(!e&&document.readyState!=="complete")return E(new Promise((function(u){return window.addEventListener("load",u)})))}),(function(){return i.mn=!!navigator.serviceWorker.controller,i.dn=i.pn(),l(i.bn(),(function(u){i.fn=u,i.dn&&(i.hn=i.dn,i.en.resolve(i.dn),i.on.resolve(i.dn),i.dn.addEventListener("statechange",i.ln,{once:!0}));var s=i.fn.waiting;return s&&y(s.scriptURL,i.sn.toString())&&(i.hn=s,Promise.resolve().then((function(){i.dispatchEvent(new d("waiting",{sw:s,wasWaitingBeforeRegister:!0}))})).then((function(){}))),i.hn&&(i.rn.resolve(i.hn),i.an.add(i.hn)),i.fn.addEventListener("updatefound",i.cn),navigator.serviceWorker.addEventListener("controllerchange",i.yn),i.fn}))})))}catch(u){return Promise.reject(u)}},f.update=function(){try{return this.fn?l(E(this.fn.update())):l()}catch(c){return Promise.reject(c)}},f.getSW=function(){return this.hn!==void 0?Promise.resolve(this.hn):this.rn.promise},f.messageSW=function(c){try{return l(this.getSW(),(function(a){return b(a,c)}))}catch(a){return Promise.reject(a)}},f.messageSkipWaiting=function(){this.fn&&this.fn.waiting&&b(this.fn.waiting,L)},f.pn=function(){var c=navigator.serviceWorker.controller;return c&&y(c.scriptURL,this.sn.toString())?c:void 0},f.bn=function(){try{var c=this;return l((function(a,e){try{var i=a()}catch(u){return e(u)}return i&&i.then?i.then(void 0,e):i})((function(){return l(navigator.serviceWorker.register(c.sn,c.nn),(function(a){return c.un=performance.now(),a}))}),(function(a){throw a})))}catch(a){return Promise.reject(a)}},(function(c,a,e){return a&&j(c.prototype,a),Object.defineProperty(c,"prototype",{writable:!1}),c})(r,[{key:"active",get:function(){return this.en.promise}},{key:"controlling",get:function(){return this.on.promise}}])})((function(){function n(){this.Pn=new Map}var r=n.prototype;return r.addEventListener=function(t,o){this.jn(t).add(o)},r.removeEventListener=function(t,o){this.jn(t).delete(o)},r.dispatchEvent=function(t){t.target=this;for(var o,f=S(this.jn(t.type));!(o=f()).done;)(0,o.value)(t)},r.jn=function(t){return this.Pn.has(t)||this.Pn.set(t,new Set),this.Pn.get(t)},n})());export{O as Workbox,d as WorkboxEvent,b as messageSW};
|
||||
Vendored
+14
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#4f46e5" />
|
||||
<stop offset="1" stop-color="#06b6d4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="512" height="512" fill="url(#g)" />
|
||||
<g fill="#ffffff">
|
||||
<path d="M144 170h224v36H144z" />
|
||||
<path d="M144 238h144v36H144z" />
|
||||
<path d="M144 306h224v36H144z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 454 B |
Vendored
+14
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#4f46e5" />
|
||||
<stop offset="1" stop-color="#06b6d4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="512" height="512" rx="112" fill="url(#g)" />
|
||||
<g fill="#ffffff">
|
||||
<path d="M168 170h176v36H168z" />
|
||||
<path d="M168 238h120v36H168z" />
|
||||
<path d="M168 306h176v36H168z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 463 B |
Vendored
+16
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
||||
<link rel="apple-touch-icon" href="/icon.svg" />
|
||||
<meta name="theme-color" content="#4f46e5" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sanasto</title>
|
||||
<script type="module" crossorigin src="/assets/index-E314AbIc.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DFjWKkpb.css">
|
||||
<link rel="manifest" href="/manifest.webmanifest"></head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"name":"Sanasto","short_name":"Sanasto","description":"Sanasto Wiki glossary, available offline.","start_url":"/","display":"standalone","background_color":"#f8fafc","theme_color":"#4f46e5","lang":"en","scope":"/","icons":[{"src":"/icon.svg","sizes":"any","type":"image/svg+xml","purpose":"any"},{"src":"/icon-maskable.svg","sizes":"any","type":"image/svg+xml","purpose":"maskable"}]}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
if(!self.define){let e,s={};const i=(i,n)=>(i=new URL(i+".js",n).href,s[i]||new Promise(s=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=s,document.head.appendChild(e)}else e=i,importScripts(i),s()}).then(()=>{let e=s[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e}));self.define=(n,r)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(s[o])return;let l={};const t=e=>i(e,o),c={module:{uri:o},exports:l,require:t};s[o]=Promise.all(n.map(e=>c[e]||t(e))).then(e=>(r(...e),l))}}define(["./workbox-8c29f6e4"],function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"index.html",revision:"7979cc20fe4207e7ead76582183913a9"},{url:"assets/workbox-window.prod.es5-BIl4cyR9.js",revision:null},{url:"assets/sql-wasm-C1U8OeUW.wasm",revision:null},{url:"assets/index-E314AbIc.js",revision:null},{url:"assets/index-DFjWKkpb.css",revision:null},{url:"icon-maskable.svg",revision:"b5bdfd2e8b27d40ffd2ecec18df40399"},{url:"icon.svg",revision:"9c8737138b1ae42fe741cfa733870adf"},{url:"manifest.webmanifest",revision:"2ba70cf48495a11a3499135943788be6"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))});
|
||||
Vendored
+1
@@ -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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,40 @@
|
||||
# AGENTS.md
|
||||
|
||||
## Project intent
|
||||
Build a Vue-based PWA in the project root named **Sanasto**. The UI should mirror the look and feel of the Rails app in `../sanasto.wiki`.
|
||||
|
||||
## Design alignment (from `../sanasto.wiki`)
|
||||
- Use a light, airy UI with slate neutrals and indigo/emerald accents.
|
||||
- Typography: clean, sans-serif with bold headlines and uppercase micro-labels.
|
||||
- Layout: full-height table view, sticky header row, sticky first column, and scrollable grid.
|
||||
- UI motifs: rounded pills/tags, soft borders, subtle shadows, and inline badges.
|
||||
- Primary colors:
|
||||
- Indigo for primary actions and highlights.
|
||||
- Emerald for positive states (e.g., "complete").
|
||||
- Amber for warnings (e.g., "unverified").
|
||||
- Red tint for rows with missing translations.
|
||||
|
||||
## Data/API
|
||||
- Swagger: `https://sanasto.rin.no/api/swagger`
|
||||
- Endpoint: `GET /api/entries?since=ISO8601`
|
||||
- Entry fields: `id`, `category`, `fi`, `en`, `sv`, `no`, `ru`, `de`, `updated_at`.
|
||||
|
||||
## Offline + sync
|
||||
- Use SQLite for storage (web-friendly: `sql.js` or a similar WASM-backed SQLite).
|
||||
- Keep a `meta` table for sync state (`last_sync_at` in ISO8601).
|
||||
- On app start and when online:
|
||||
1) Fetch `GET /api/entries?since=<last_sync_at>`.
|
||||
2) Upsert entries by `id`.
|
||||
3) Update `last_sync_at` to the max `updated_at` seen.
|
||||
- The public API is read-only; any local edits should be treated as local-only unless a write API is added.
|
||||
|
||||
## PWA requirements
|
||||
- Installable manifest with name `Sanasto`.
|
||||
- Service worker for asset caching + offline shell.
|
||||
- Clear offline/online indicator and last sync time.
|
||||
|
||||
## Implementation constraints
|
||||
- App location: project root.
|
||||
- Build output: `dist`.
|
||||
- Prefer clear, maintainable components over excessive abstraction.
|
||||
- Preserve the Rails app visual language; avoid introducing a new design system.
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
||||
<link rel="apple-touch-icon" href="/icon.svg" />
|
||||
<meta name="theme-color" content="#4f46e5" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sanasto</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
-105
@@ -1,105 +0,0 @@
|
||||
export type HomeItem = {
|
||||
id: number;
|
||||
title: string;
|
||||
type: string;
|
||||
text: string;
|
||||
author: string;
|
||||
authorAvatar: string;
|
||||
image: string;
|
||||
};
|
||||
|
||||
export const homeItems: HomeItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Exploring Maui',
|
||||
type: 'Blog',
|
||||
text: 'We just got back from a trip to Maui, and we had a great time...',
|
||||
author: 'Max Lynch',
|
||||
authorAvatar: '/img/max.jpg',
|
||||
image: '/img/c1.avif',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Arctic Adventures',
|
||||
type: 'Blog',
|
||||
text: 'Last month we took a trek to the Arctic Circle. The isolation was just what we needed after...',
|
||||
author: 'Nathan Chapman',
|
||||
authorAvatar: '/img/nathan.jpg',
|
||||
image: '/img/c2.avif',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Frolicking in the Faroe Islands',
|
||||
type: 'Blog',
|
||||
text: 'The Faroe Islands are a North Atlantic archipelago located 320 kilometres (200 mi) north-northwest of Scotland...',
|
||||
author: 'Leo Giovanetti',
|
||||
authorAvatar: '/img/leo.jpg',
|
||||
image: '/img/c3.avif',
|
||||
},
|
||||
];
|
||||
|
||||
export type NotificationItem = {
|
||||
id: number;
|
||||
title: string;
|
||||
when: string;
|
||||
};
|
||||
|
||||
export const notifications: NotificationItem[] = [
|
||||
{ id: 1, title: 'New friend request', when: '6 hr' },
|
||||
{ id: 2, title: 'Please change your password', when: '1 day' },
|
||||
{ id: 3, title: 'You have a new message', when: '2 weeks' },
|
||||
{ id: 4, title: 'Welcome to the app!', when: '1 month' },
|
||||
];
|
||||
|
||||
export type ListItem = {
|
||||
name: string;
|
||||
done?: boolean;
|
||||
};
|
||||
|
||||
export type TodoListItem = {
|
||||
name: string;
|
||||
id: string;
|
||||
items?: ListItem[];
|
||||
};
|
||||
|
||||
// Some fake lists
|
||||
export const lists: TodoListItem[] = [
|
||||
{
|
||||
name: 'Groceries',
|
||||
id: '01HRCYTYED31N83MJ0WK97WC02',
|
||||
items: [
|
||||
{ name: 'Apples' },
|
||||
{ name: 'Bananas' },
|
||||
{ name: 'Milk' },
|
||||
{ name: 'Ice Cream' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Hardware Store',
|
||||
id: '01HRCYV2KPNJQJ43Y7X526BHVX',
|
||||
items: [
|
||||
{ name: 'Circular Saw' },
|
||||
{ name: 'Tack Cloth' },
|
||||
{ name: 'Drywall' },
|
||||
{ name: 'Router' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Work',
|
||||
id: '01HRCYV6C3YWAJRF2ZE7AZ17K7',
|
||||
items: [{ name: 'TPS Report' }, { name: 'Set up email' }],
|
||||
},
|
||||
{
|
||||
name: 'Reminders',
|
||||
id: '01HRCYVADRPCM5SYV5BH98C7HS',
|
||||
items: [{ name: 'Get car inspection', done: true }],
|
||||
},
|
||||
];
|
||||
|
||||
export type Settings = {
|
||||
enableNotifications: boolean;
|
||||
};
|
||||
|
||||
export const settings: Settings = {
|
||||
enableNotifications: true,
|
||||
};
|
||||
Vendored
-5
@@ -1,5 +0,0 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
@@ -1,22 +0,0 @@
|
||||
module.exports = {
|
||||
basePath: '',
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'images.unsplash.com',
|
||||
port: '',
|
||||
pathname: '**',
|
||||
},
|
||||
],
|
||||
unoptimized: true,
|
||||
},
|
||||
output: 'export',
|
||||
swcMinify: true,
|
||||
transpilePackages: [
|
||||
'@ionic/react',
|
||||
'@ionic/core',
|
||||
'@stencil/core',
|
||||
'ionicons',
|
||||
],
|
||||
};
|
||||
Generated
+3877
-3843
File diff suppressed because it is too large
Load Diff
+15
-38
@@ -1,19 +1,12 @@
|
||||
{
|
||||
"name": "nextjs-tailwind-ionic-capacitor-starter",
|
||||
"version": "5.1.0",
|
||||
"name": "sanasto",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=18.17"
|
||||
},
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"compile": "tsc",
|
||||
"compile:watch": "tsc -w",
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"lint": "eslint . --ext .ts,.tsx",
|
||||
"prettify": "prettier --write **/*.tsx",
|
||||
"preserve": "npm run build",
|
||||
"serve": "npx serve out",
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview",
|
||||
"presync": "npm run build",
|
||||
"sync": "npx cap sync",
|
||||
"android": "npx cap run android",
|
||||
@@ -24,33 +17,17 @@
|
||||
"@capacitor/core": "5.7.2",
|
||||
"@capacitor/ios": "5.7.2",
|
||||
"@capacitor/status-bar": "5.0.7",
|
||||
"@ionic/react": "7.7.4",
|
||||
"@ionic/react-router": "7.7.4",
|
||||
"classnames": "2.5.1",
|
||||
"next": "14.2.32",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-router": "5.3.4",
|
||||
"react-router-dom": "5.3.4",
|
||||
"react-virtuoso": "4.7.1"
|
||||
"sql.js": "^1.13.0",
|
||||
"vite-plugin-pwa": "^1.2.0",
|
||||
"vue": "^3.5.24"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/cli": "5.7.2",
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/node": "20.11.25",
|
||||
"@types/react": "18.2.64",
|
||||
"@types/react-dom": "18.2.21",
|
||||
"@types/react-router-dom": "5.3.3",
|
||||
"@types/react-router": "5.1.20",
|
||||
"autoprefixer": "10.4.18",
|
||||
"eslint": "8.57.0",
|
||||
"eslint-config-next": "14.1.3",
|
||||
"ionicons": "7.2.2",
|
||||
"postcss": "8.4.35",
|
||||
"prettier": "3.2.5",
|
||||
"pullstate": "1.25",
|
||||
"reselect": "5.1.0",
|
||||
"tailwindcss": "3.4.1",
|
||||
"typescript": "5.4.2"
|
||||
"@types/node": "^24.10.1",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.2.4",
|
||||
"vue-tsc": "^3.1.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#4f46e5" />
|
||||
<stop offset="1" stop-color="#06b6d4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="512" height="512" fill="url(#g)" />
|
||||
<g fill="#ffffff">
|
||||
<path d="M144 170h224v36H144z" />
|
||||
<path d="M144 238h144v36H144z" />
|
||||
<path d="M144 306h224v36H144z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 454 B |
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#4f46e5" />
|
||||
<stop offset="1" stop-color="#06b6d4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="512" height="512" rx="112" fill="url(#g)" />
|
||||
<g fill="#ffffff">
|
||||
<path d="M168 170h176v36H168z" />
|
||||
<path d="M168 238h120v36H168z" />
|
||||
<path d="M168 306h176v36H168z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 463 B |
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 209 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@@ -1,4 +0,0 @@
|
||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
+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" />
|
||||
@@ -1,46 +0,0 @@
|
||||
import Store from '.';
|
||||
import { ListItem, Settings, TodoListItem } from '../mock';
|
||||
|
||||
export const setMenuOpen = (open: boolean) => {
|
||||
Store.update(s => {
|
||||
s.menuOpen = open;
|
||||
});
|
||||
};
|
||||
|
||||
export const setNotificationsOpen = (open: boolean) => {
|
||||
Store.update(s => {
|
||||
s.notificationsOpen = open;
|
||||
});
|
||||
};
|
||||
|
||||
export const setSettings = (settings: Settings) => {
|
||||
Store.update(s => {
|
||||
s.settings = settings;
|
||||
});
|
||||
};
|
||||
|
||||
// App-specific actions
|
||||
|
||||
export const setDone = (
|
||||
list: TodoListItem,
|
||||
listItem: ListItem,
|
||||
done: boolean,
|
||||
) => {
|
||||
Store.update((s, o) => {
|
||||
const listIndex = o.lists.findIndex(l => l === list);
|
||||
if (listIndex === -1) return;
|
||||
|
||||
const items = o.lists[listIndex].items;
|
||||
const itemIndex = items?.findIndex(i => i === listItem);
|
||||
if (itemIndex === undefined || itemIndex < 0) return;
|
||||
|
||||
const draftItem = s.lists[listIndex].items?.[itemIndex];
|
||||
if (!draftItem) return;
|
||||
|
||||
draftItem.done = done;
|
||||
|
||||
if (list === o.selectedList) {
|
||||
s.selectedList = s.lists[listIndex];
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -1,31 +0,0 @@
|
||||
import { Store as PullStateStore } from 'pullstate';
|
||||
|
||||
import { lists, homeItems, notifications, settings, TodoListItem, HomeItem, NotificationItem, Settings } from '../mock';
|
||||
|
||||
type StoreProps = {
|
||||
safeAreaTop: number;
|
||||
safeAreaBottom: number;
|
||||
menuOpen: boolean;
|
||||
notificationsOpen: boolean;
|
||||
currentPage: number | null;
|
||||
homeItems: HomeItem[];
|
||||
lists: TodoListItem[];
|
||||
notifications: NotificationItem[];
|
||||
settings: Settings;
|
||||
selectedList: TodoListItem | undefined;
|
||||
}
|
||||
|
||||
const Store = new PullStateStore<StoreProps>({
|
||||
safeAreaTop: 0,
|
||||
safeAreaBottom: 0,
|
||||
menuOpen: false,
|
||||
notificationsOpen: false,
|
||||
currentPage: null,
|
||||
homeItems,
|
||||
lists,
|
||||
notifications,
|
||||
settings,
|
||||
selectedList: undefined,
|
||||
});
|
||||
|
||||
export default Store;
|
||||
@@ -1,39 +0,0 @@
|
||||
import { createSelector } from 'reselect';
|
||||
import { HomeItem, NotificationItem, Settings, TodoListItem } from '../mock';
|
||||
|
||||
export interface RootState {
|
||||
homeItems: HomeItem[]
|
||||
lists: TodoListItem[]
|
||||
notifications: NotificationItem[]
|
||||
settings: Settings
|
||||
}
|
||||
|
||||
export const createAppSelector = createSelector.withTypes<RootState>()
|
||||
|
||||
export const selectHomeItems = createAppSelector(
|
||||
[
|
||||
state => state.homeItems
|
||||
],
|
||||
homeItems => homeItems
|
||||
)
|
||||
|
||||
export const selectLists = createAppSelector(
|
||||
[
|
||||
state => state.lists
|
||||
],
|
||||
lists => lists
|
||||
)
|
||||
|
||||
export const selectNotifications = createAppSelector(
|
||||
[
|
||||
state => state.notifications
|
||||
],
|
||||
notifications => notifications
|
||||
)
|
||||
|
||||
export const selectSettings = createAppSelector(
|
||||
[
|
||||
state => state.settings
|
||||
],
|
||||
settings => settings
|
||||
)
|
||||
@@ -1,195 +0,0 @@
|
||||
:root {
|
||||
--safe-area-top: env(safe-area-inset-top);
|
||||
--safe-area-bottom: env(safe-area-inset-bottom, 0);
|
||||
--safe-area-left: env(safe-area-inset-left, 0);
|
||||
--safe-area-right: env(safe-area-inset-right, 0);
|
||||
}
|
||||
body {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles for the Icon UI component.
|
||||
*
|
||||
* TODO: Move these into a styled component or similar system if desired
|
||||
*/
|
||||
.ui-icon {
|
||||
display: inline-block;
|
||||
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
contain: strict;
|
||||
|
||||
fill: currentColor;
|
||||
|
||||
box-sizing: content-box !important;
|
||||
}
|
||||
|
||||
.ui-icon .ionicon {
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
.ui-icon .ionicon-fill-none {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.ui-icon .ionicon-stroke-width {
|
||||
stroke-width: 32px;
|
||||
stroke-width: var(--ionicon-stroke-width, 32px);
|
||||
}
|
||||
|
||||
.ui-icon .icon-inner,
|
||||
.ui-icon .ionicon,
|
||||
.ui-icon svg {
|
||||
display: block;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/** Styles for React Toggle */
|
||||
|
||||
.react-toggle {
|
||||
touch-action: pan-x;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.react-toggle--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0.25s;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: #4d4d4d;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track {
|
||||
background-color: #19ab27;
|
||||
}
|
||||
|
||||
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: #128d15;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
left: 8px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-check {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #4d4d4d;
|
||||
border-radius: 50%;
|
||||
background-color: #fafafa;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 27px;
|
||||
border-color: #19ab27;
|
||||
}
|
||||
|
||||
.react-toggle--focus .react-toggle-thumb {
|
||||
-webkit-box-shadow: 0px 0px 3px 2px #0099e0;
|
||||
-moz-box-shadow: 0px 0px 3px 2px #0099e0;
|
||||
box-shadow: 0px 0px 2px 3px #0099e0;
|
||||
}
|
||||
|
||||
.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
|
||||
-webkit-box-shadow: 0px 0px 5px 5px #0099e0;
|
||||
-moz-box-shadow: 0px 0px 5px 5px #0099e0;
|
||||
box-shadow: 0px 0px 5px 5px #0099e0;
|
||||
}
|
||||
@@ -1,231 +0,0 @@
|
||||
/* Ionic Variables and Theming. For more info, please see:
|
||||
http://ionicframework.com/docs/theming/ */
|
||||
|
||||
/** Ionic CSS Variables **/
|
||||
:root {
|
||||
/** primary **/
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
|
||||
/** secondary **/
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
|
||||
/** tertiary **/
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
|
||||
/** success **/
|
||||
--ion-color-success: #2dd36f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
|
||||
/** warning **/
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
|
||||
/** danger **/
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
|
||||
/** dark **/
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
/** medium **/
|
||||
--ion-color-medium: #92949c;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
|
||||
/** light **/
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/*
|
||||
* Dark Colors
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
body {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66, 140, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80, 200, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106, 100, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47, 223, 117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255, 213, 52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255, 73, 97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244, 245, 248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152, 154, 162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34, 36, 40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.ios body {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0, 0, 0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-toolbar-background: #0d0d0d;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
/*
|
||||
* Material Design Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.md body {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18, 18, 18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-card-background: #1e1e1e;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx}',
|
||||
],
|
||||
darkMode: 'media',
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"types": ["vite/client"],
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
+4
-35
@@ -1,38 +1,7 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"display": "Next.js",
|
||||
"_version": "2.0.0",
|
||||
"compilerOptions": {
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
includeAssets: ['icon.svg', 'icon-maskable.svg'],
|
||||
manifest: {
|
||||
name: 'Sanasto',
|
||||
short_name: 'Sanasto',
|
||||
description: 'Sanasto Wiki glossary, available offline.',
|
||||
theme_color: '#4f46e5',
|
||||
background_color: '#f8fafc',
|
||||
display: 'standalone',
|
||||
start_url: '/',
|
||||
icons: [
|
||||
{
|
||||
src: '/icon.svg',
|
||||
sizes: 'any',
|
||||
type: 'image/svg+xml',
|
||||
purpose: 'any',
|
||||
},
|
||||
{
|
||||
src: '/icon-maskable.svg',
|
||||
sizes: 'any',
|
||||
type: 'image/svg+xml',
|
||||
purpose: 'maskable',
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
})
|
||||
Reference in New Issue
Block a user