|
|
@@ -1,30 +1,44 @@
|
|
|
+<script context="module">
|
|
|
+ export async function preload(page, session) {
|
|
|
+ const res = await this.fetch(`stats.json`);
|
|
|
+ const stats = await res.json();
|
|
|
+ return { stats };
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
<script>
|
|
|
- let term = ''
|
|
|
- let lemmas = []
|
|
|
- let translations = []
|
|
|
- let selectedItem
|
|
|
- let persian
|
|
|
- $: if (term.length > 1) {
|
|
|
- persian = checkPersian(term)
|
|
|
- const normalized = persian ? term.replace(/([\u064B-\u0655])/g, '') : term
|
|
|
- const uri = encodeURI(`https://api.farhang.im/a/${normalized}`)
|
|
|
- fetch(uri)
|
|
|
- .then(res => res.json())
|
|
|
- .then(json => setLemmas(json))
|
|
|
- }
|
|
|
- $: if (term.length < 2) lemmas = []
|
|
|
- function setLemmas(res) { lemmas = res }
|
|
|
- async function showLemma (id) {
|
|
|
- translations = []
|
|
|
- selectedItem = id;
|
|
|
- const uri = encodeURI(`https://api.farhang.im/g/${selectedItem}`)
|
|
|
- const res = await fetch(uri)
|
|
|
- translations = await res.json()
|
|
|
- }
|
|
|
- function checkPersian (string) {
|
|
|
- const regex = /[\u0622\u0627\u0628\u067E\u062A-\u0632\u0686\u0698\u0633-\u063A\u0641\u0642\u06A9\u06AF\u0644-\u0648\u06CC]/
|
|
|
- return regex.test(string)
|
|
|
- }
|
|
|
+ export let stats
|
|
|
+ let term = ''
|
|
|
+ let lemmas = []
|
|
|
+ let translations = []
|
|
|
+ let selected_item
|
|
|
+ let persian
|
|
|
+ $: if (term.length > 1) {
|
|
|
+ persian = is_persian(term)
|
|
|
+ const normalized = persian ? term.replace(/([\u064B-\u0655])/g, '') : term
|
|
|
+ const uri = encodeURI(`a/${normalized}`)
|
|
|
+ fetch(uri)
|
|
|
+ .then(res => {
|
|
|
+ if (res.ok) return res.json()
|
|
|
+ else throw "nichts gefunden"
|
|
|
+ })
|
|
|
+ .then(json => set_lemmas(json))
|
|
|
+ .catch(e => lemmas=[{id:null,lemma:e}])
|
|
|
+ }
|
|
|
+ $: if (term.length < 2) lemmas = []
|
|
|
+ function set_lemmas(res) { lemmas = res }
|
|
|
+ async function show_lemma (id) {
|
|
|
+ if (!id) return
|
|
|
+ translations = []
|
|
|
+ selected_item = id;
|
|
|
+ const uri = encodeURI(`g/${selected_item}`)
|
|
|
+ const res = await fetch(uri)
|
|
|
+ translations = await res.json()
|
|
|
+ }
|
|
|
+ function is_persian (string) {
|
|
|
+ const regex = /[\u0622\u0627\u0628\u067E\u062A-\u0632\u0686\u0698\u0633-\u063A\u0641\u0642\u06A9\u06AF\u0644-\u0648\u06CC]/
|
|
|
+ return regex.test(string)
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
@@ -33,17 +47,31 @@
|
|
|
text-decoration: none;
|
|
|
color: #333; }
|
|
|
.hero-body, .subtitle { transition: padding 0.5s;}
|
|
|
+ul {
|
|
|
+ list-style: none;
|
|
|
+ margin-top: 0;
|
|
|
+}
|
|
|
+.card-content {padding:0.5em;}
|
|
|
+ul li::before {
|
|
|
+ content: "\200B";
|
|
|
+}
|
|
|
+.paddingfix {
|
|
|
+ padding: 0 .3em 1em .3em !important;
|
|
|
+}
|
|
|
+.full-height {
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Overlock:900italic" rel="stylesheet" type="text/css"/>
|
|
|
<svelte:head><title>Farhang</title></svelte:head>
|
|
|
-<section class="hero is-info is-bold is-large">
|
|
|
- <div class={lemmas.length>0 ? 'hero-body is-paddingless':'hero-body'}>
|
|
|
+<section class="hero is-info is-bold full-height">
|
|
|
+ <div class:paddingfix={lemmas.length>0} class="hero-body">
|
|
|
<div class="container has-text-centered">
|
|
|
- <p class="">
|
|
|
+ <p>
|
|
|
<span class="brand is-size-1">Farhang</span><br>
|
|
|
</p>
|
|
|
- <p class={lemmas.length>0 ? 'subtitle is-hidden':'subtitle'}>
|
|
|
+ <p class={lemmas.length>0 ? 'is-hidden':'subtitle'}>
|
|
|
<span class="is-size-4">deutsch-persisches Lexikon</span>
|
|
|
</p>
|
|
|
<div class="columns is-centered">
|
|
|
@@ -53,9 +81,7 @@
|
|
|
</div>
|
|
|
{#if lemmas<1}
|
|
|
<p class="is-size-5 has-text-left-mobile">
|
|
|
- Mit 31629 Einträgen und 80192 Übersetzungen ist <span class="brand">Farhang</span>
|
|
|
- eines der größten deutsch-persischen Wörterbücher, die online verfügbar sind. Dazu sind alle
|
|
|
- Einträge frei zugänglich und können beliebig verwendet werden.
|
|
|
+ Aktuell sind {stats.lemmas} Einträge und {stats.translations} Übersetzungen in der Datenbank
|
|
|
</p>
|
|
|
<p class="is-size-5 has-text-right-mobile">
|
|
|
فرهنگ فارسی - آلمانی
|
|
|
@@ -71,34 +97,51 @@
|
|
|
</a>
|
|
|
{/if}
|
|
|
</div>
|
|
|
- </div>
|
|
|
- {#if lemmas<1}
|
|
|
- <div class="hero-foot">Some footer stuff</div>
|
|
|
- {/if}
|
|
|
-</section>
|
|
|
-{#if lemmas.length > 0}
|
|
|
- <div class="columns is-centered">
|
|
|
- <div class="column is-half">
|
|
|
- {#each lemmas as l}
|
|
|
- <div class="card">
|
|
|
- <header class="card-header">
|
|
|
- <p class="card-header-title" on:click={()=>showLemma(l.id)}>{l.lemma}</p>
|
|
|
- </header>
|
|
|
- {#if l.id === selectedItem}
|
|
|
- <div class="card-content">
|
|
|
- <div class="content">
|
|
|
- <ul>
|
|
|
- {#each translations as t}
|
|
|
- <li>
|
|
|
- {t.source} - {t.target}
|
|
|
- </li>
|
|
|
- {/each}
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ {#if lemmas.length > 0}
|
|
|
+ <div class="columns is-centered">
|
|
|
+ <div class="column is-half">
|
|
|
+ {#each lemmas as l}
|
|
|
+ <div class={`card ${persian ? 'has-text-right':''}`}>
|
|
|
+ <header class="card-header">
|
|
|
+ <p class="card-header-title" style="cursor: pointer" on:click={()=>show_lemma(l.id)}>{l.lemma}</p>
|
|
|
+ </header>
|
|
|
+ {#if l.id === selected_item}
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="content">
|
|
|
+ <ul style={persian ? 'margin-left:0; margin-right:1em':''}>
|
|
|
+ {#each translations as t}
|
|
|
+ <li>
|
|
|
+ {#if persian}
|
|
|
+ {t.target} - {t.source}
|
|
|
+ {:else}
|
|
|
+ {t.source} - {t.target}
|
|
|
+ {/if}
|
|
|
+ </li>
|
|
|
+ {/each}
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
</div>
|
|
|
- {/if}
|
|
|
+ {/each}
|
|
|
</div>
|
|
|
- {/each}
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
</div>
|
|
|
-{/if}
|
|
|
+ <div class="hero-foot is-size-7">
|
|
|
+ <nav class="level has-text-grey-darker">
|
|
|
+ <div class="level-item has-text-centered">
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">
|
|
|
+ <img alt="Creative Commons Lizenzvertrag" src="by-sa.png">
|
|
|
+ </a>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Farhang.im © <a class="has-text-grey-darker" href="https://github.com/ckh/farhang">ckh</a> & <a class="has-text-grey-darker" href="https://github.com/hmt">hmt</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+</section>
|
burningTyger
