diff options
Diffstat (limited to '_www')
| -rw-r--r-- | _www/admin.tmpl | 20 | ||||
| -rw-r--r-- | _www/assets/github.svg.license | 2 | ||||
| -rw-r--r-- | _www/assets/linux.svg.license | 2 | ||||
| -rw-r--r-- | _www/assets/macos.svg.license | 2 | ||||
| -rw-r--r-- | _www/assets/windows.svg.license | 2 | ||||
| -rw-r--r-- | _www/index.html | 354 | ||||
| -rw-r--r-- | _www/index.js | 169 | ||||
| -rw-r--r-- | _www/kamusku.js | 48 |
8 files changed, 309 insertions, 290 deletions
diff --git a/_www/admin.tmpl b/_www/admin.tmpl index a275053..02f6ffc 100644 --- a/_www/admin.tmpl +++ b/_www/admin.tmpl @@ -1,15 +1,19 @@ +<!-- +SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info> +SPDX-License-Identifier: GPL-3.0-or-later +--> + <!DOCTYPE html lang="id"> <html> -<head> - <title>Project KBBI - Admin</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> +<head> + <title>Project KBBI - Admin</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> -<body> -<h2>Tembolok kamus</h2> - - +<body> + <h2>Tembolok kamus</h2> </body> + </html> diff --git a/_www/assets/github.svg.license b/_www/assets/github.svg.license new file mode 100644 index 0000000..5ac044d --- /dev/null +++ b/_www/assets/github.svg.license @@ -0,0 +1,2 @@ +SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info> +SPDX-License-Identifier: CC0-1.0 diff --git a/_www/assets/linux.svg.license b/_www/assets/linux.svg.license new file mode 100644 index 0000000..5ac044d --- /dev/null +++ b/_www/assets/linux.svg.license @@ -0,0 +1,2 @@ +SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info> +SPDX-License-Identifier: CC0-1.0 diff --git a/_www/assets/macos.svg.license b/_www/assets/macos.svg.license new file mode 100644 index 0000000..5ac044d --- /dev/null +++ b/_www/assets/macos.svg.license @@ -0,0 +1,2 @@ +SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info> +SPDX-License-Identifier: CC0-1.0 diff --git a/_www/assets/windows.svg.license b/_www/assets/windows.svg.license new file mode 100644 index 0000000..5ac044d --- /dev/null +++ b/_www/assets/windows.svg.license @@ -0,0 +1,2 @@ +SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info> +SPDX-License-Identifier: CC0-1.0 diff --git a/_www/index.html b/_www/index.html index ce76842..1bfb45e 100644 --- a/_www/index.html +++ b/_www/index.html @@ -1,133 +1,154 @@ +<!-- +SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info> +SPDX-License-Identifier: GPL-3.0-or-later +--> + <!DOCTYPE html lang="id"> <html> - <head> - <title>Project Kamusku</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> +<head> + <title>Project Kamusku</title> + + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + + <script type="text/javascript" src="/kamusku.js"></script> + <script type="text/javascript" src="/index.js"></script> + + <!-- Global site tag (gtag.js) - Google Analytics --> + <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2502278-8"></script> + <script> + window.dataLayer = window.dataLayer || [] + + function gtag() { + dataLayer.push(arguments) + } + gtag("js", new Date()) + + gtag("config", "UA-2502278-8") + </script> + + <style> + a { + text-decoration: none; + } + + body { + font-family: sans-serif; + margin: 0px auto; + width: 800px; + padding: 0px; + line-height: 1.25em; + } + + h2 { + border-bottom: 1px solid silver; + } + + input, + button { + height: 32px; + } - <script type="text/javascript" src="/kamusku.js"></script> - <script type="text/javascript" src="/index.js"></script> + pre { + overflow: auto; + background-color: cornsilk; + color: black; + padding: 1.25em; + border-radius: 5px; + line-height: 1em; + } - <!-- Global site tag (gtag.js) - Google Analytics --> - <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2502278-8"></script> - <script> - window.dataLayer = window.dataLayer || [] - function gtag() { - dataLayer.push(arguments) - } - gtag("js", new Date()) + .topbar { + background: aliceblue; + font-size: 24px; + padding: 1em; + height: 24px; + } - gtag("config", "UA-2502278-8") - </script> + .topbar .title { + float: left; + } - <style> - a { - text-decoration: none; - } - body { - font-family: sans-serif; - margin: 0px auto; - width: 800px; - padding: 0px; - line-height: 1.25em; - } - h2 { - border-bottom: 1px solid silver; - } - input, - button { - height: 32px; - } - pre { - overflow: auto; - background-color: cornsilk; - color: black; - padding: 1.25em; - border-radius: 5px; - line-height: 1em; - } - .topbar { - background: aliceblue; - font-size: 24px; - padding: 1em; - height: 24px; - } - .topbar .title { - float: left; - } - .topbar .menu-item { - float: right; - } - .unduh { - display: inline-block; - } - .unduh-item { - float: left; - border: 1px solid silver; - border-radius: 5px; - padding: 6px; - margin: 10px 10px; - } - .row { - width: 100%; - display: flex; - } - .f-left { - width: 100%; - display: flex; - flex-flow: column; - height: 32px; - } - .b-right { - width: 200px; - display: flex; - flex-flow: column; - margin-left: 10px; - height: 32px; - } - .kelas-kata, - .contoh { - margin-left: 2em; - } + .topbar .menu-item { + float: right; + } - @media only screen and (max-width: 992px) { - body { - width: 90%; - } - .unduh-item { - text-align: center; - min-width: 200px; - max-width: 50%; - } - } - </style> - </head> - <body> - <div class="topbar"> - <div class="title">Proyek Kamusku</div> - <div class="menu"></div> - </div> + .unduh { + display: inline-block; + } - <p> - Proyek sumber terbuka implementasi HTTP API dan antar-muka perintah untuk Kamus Besar Bahasa - Indonesia. - </p> + .unduh-item { + float: left; + border: 1px solid silver; + border-radius: 5px; + padding: 6px; + margin: 10px 10px; + } - <h2>HTTP API</h2> + .row { + width: 100%; + display: flex; + } - <p>Kamusku HTTP API adalah jantung dari semua implementasi klien.</p> + .f-left { + width: 100%; + display: flex; + flex-flow: column; + height: 32px; + } - <h3>API Definisi</h3> - <p>HTTP API untuk mencari definisi dari satu atau lebih kata.</p> - <p>Format permintaan,</p> - <pre> + .b-right { + width: 200px; + display: flex; + flex-flow: column; + margin-left: 10px; + height: 32px; + } + + .kelas-kata, + .contoh { + margin-left: 2em; + } + + @media only screen and (max-width: 992px) { + body { + width: 90%; + } + + .unduh-item { + text-align: center; + min-width: 200px; + max-width: 50%; + } + } + </style> +</head> + +<body> + <div class="topbar"> + <div class="title">Proyek Kamusku</div> + <div class="menu"></div> + </div> + + <p> + Proyek sumber terbuka implementasi HTTP API dan antar-muka perintah untuk Kamus Besar Bahasa + Indonesia. + </p> + + <h2>HTTP API</h2> + + <p>Kamusku HTTP API adalah jantung dari semua implementasi klien.</p> + + <h3>API Definisi</h3> + <p>HTTP API untuk mencari definisi dari satu atau lebih kata.</p> + <p>Format permintaan,</p> + <pre> GET /definisi?kata=<string>,... -</pre - > +</pre> - <p>Format respons dalam JSON,</p> - <pre> + <p>Format respons dalam JSON,</p> + <pre> { "<string>": { "dasar": "<string>", @@ -141,65 +162,62 @@ GET /definisi?kata=<string>,... ] } } -</pre - > +</pre> - <p> - Jika kata tidak ditemukan atau bila kata bukan kata baku, bagian "pesan" akan berisi keterangan yang - menjelaskan galat dari pencarian. - </p> - <p> - Berikut contoh pemanggilan API untuk mencari definisi dari kata "kamus", "bahaza" (kata tidak - ditemukan), dan "analisa" (kata tidak baku): - <a href="/api/definisi?kata=kamus,bahaza,analisa" target="_blank"> - /api/definisi?kata=kamus,bahaza,analisa - </a> - </p> + <p> + Jika kata tidak ditemukan atau bila kata bukan kata baku, bagian "pesan" akan berisi keterangan yang + menjelaskan galat dari pencarian. + </p> + <p> + Berikut contoh pemanggilan API untuk mencari definisi dari kata "kamus", "bahaza" (kata tidak + ditemukan), dan "analisa" (kata tidak baku): + <a href="/api/definisi?kata=kamus,bahaza,analisa" target="_blank"> + /api/definisi?kata=kamus,bahaza,analisa + </a> + </p> - <h2>Definisi kata</h2> + <h2>Definisi kata</h2> - <div class="row"> - <div class="f-left"> - <input type="text" id="kata" maxlength="64" value="kamus,bahaza,analisa" /> - </div> - <div class="b-right"> - <button onclick="cariDefinisi()">Cari definisi</button> - </div> - </div> + <div class="row"> + <div class="f-left"> + <input type="text" id="kata" maxlength="64" value="kamus,bahaza,analisa" /> + </div> + <div class="b-right"> + <button onclick="cariDefinisi()">Cari definisi</button> + </div> + </div> - <p class="note">Catatan: Pisahkan kata dengan koma untuk mencari lebih dari satu kata.</p> + <p class="note">Catatan: Pisahkan kata dengan koma untuk mencari lebih dari satu kata.</p> - <div id="definisi-result"></div> + <div id="definisi-result"></div> - <h2>Bot Telegram</h2> + <h2>Bot Telegram</h2> - <p> - Dengan tersedianya API, membuka banyak implementasi terbuka lain, salah satunya yaitu Bot untuk - aplikasi Telegram: - <a href="https://t.me/KamuskuBot" target="_blank"> https://t.me/KamuskuBot </a> - </p> - <p> - Untuk saat ini, KamuskuBot hanya punya satu perintah yaitu "/definisi". Cara menggunakan perintah - ini hampir sama dengan program kamusku yaitu dengan memberikan kata yang dicari, contohnya, - </p> - <pre> + <p> + Dengan tersedianya API, membuka banyak implementasi terbuka lain, salah satunya yaitu Bot untuk + aplikasi Telegram: + <a href="https://t.me/KamuskuBot" target="_blank"> https://t.me/KamuskuBot </a> + </p> + <p> + Untuk saat ini, KamuskuBot hanya punya satu perintah yaitu "/definisi". Cara menggunakan perintah + ini hampir sama dengan program kamusku yaitu dengan memberikan kata yang dicari, contohnya, + </p> + <pre> /definisi kamus,bahasa -</pre - > +</pre> - <h2>Program kamusku</h2> + <h2>Program kamusku</h2> - <p>Program kamusku yaitu antar-muka untuk mencari definisi dari kata lewat baris perintah.</p> - <p> - Program ini sangat sederhana, cara menggunakannya cukup dengan memberikan kata yang dicari setelah - nama program, misalnya, - </p> - <pre> + <p>Program kamusku yaitu antar-muka untuk mencari definisi dari kata lewat baris perintah.</p> + <p> + Program ini sangat sederhana, cara menggunakannya cukup dengan memberikan kata yang dicari setelah + nama program, misalnya, + </p> + <pre> $ kamusku kamus,bahasa -</pre - > - <p>maka akan mencetak definisi dari kata "kamus" dan "bahasa" ke layar,</p> - <pre> +</pre> + <p>maka akan mencetak definisi dari kata "kamus" dan "bahasa" ke layar,</p> + <pre> === bahasa Definisi #1: sistem lambang bunyi yang arbitrer, yang digunakan oleh anggota suatu masyarakat untuk bekerja sama, berinteraksi, dan @@ -221,9 +239,9 @@ $ kamusku kamus,bahasa Kelas #1: Nomina: kata benda ... -</pre - > +</pre> + + <div class="unduh"></div> +</body> - <div class="unduh"></div> - </body> </html> diff --git a/_www/index.js b/_www/index.js index 0ab0b10..2e0bd05 100644 --- a/_www/index.js +++ b/_www/index.js @@ -1,126 +1,121 @@ -/** - * Copyright 2020, Shulhan <ms@kilabit.info>. All rights reserved. - * Use of this source code is governed by a BSD-style - * license that can be found in the LICENSE file. - */ +// SPDX-FileCopyrightText: 2020 M. Shulhan <ms@kilabit.info> +// SPDX-License-Identifier: GPL-3.0-or-later -let kamusku = new Kamusku("") +let kamusku = new Kamusku(""); function cariDefinisi() { - let kata = document.getElementById("kata").value - kamusku.getDefinitions(kata, cariDefinisiCallback) + let kata = document.getElementById("kata").value; + kamusku.getDefinitions(kata, cariDefinisiCallback); } function cariDefinisiCallback(res) { - let out = document.getElementById("definisi-result") - out.innerHTML = "" + let out = document.getElementById("definisi-result"); + out.innerHTML = ""; - for (let kata in res) { - let root = document.createElement("div") - printResultKata(root, kata, res[kata]) - out.appendChild(root) - } + for (let kata in res) { + let root = document.createElement("div"); + printResultKata(root, kata, res[kata]); + out.appendChild(root); + } } function printResultKata(out, kata, defKata) { - let el = document.createElement("h3") - el.appendChild(document.createTextNode(kata)) - out.appendChild(el) + let el = document.createElement("h3"); + el.appendChild(document.createTextNode(kata)); + out.appendChild(el); - if (typeof defKata.pesan !== "undefined" && defKata.pesan !== "") { - printPesan(out, defKata.pesan) - return - } + if (typeof defKata.pesan !== "undefined" && defKata.pesan !== "") { + printPesan(out, defKata.pesan); + return; + } - printKataDasar(out, defKata.dasar) - printDefinitions(out, defKata.definisi) + printKataDasar(out, defKata.dasar); + printDefinitions(out, defKata.definisi); } function printPesan(out, pesan) { - let root = document.createElement("div") - root.appendChild(document.createTextNode(pesan)) - out.appendChild(root) + let root = document.createElement("div"); + root.appendChild(document.createTextNode(pesan)); + out.appendChild(root); } function printKataDasar(out, kataDasar) { - // Seriously, JavaScript? - if ( - typeof kataDasar === "undefined" || - kataDasar === null || - kataDasar === "" - ) { - return - } + // Seriously, JavaScript? + if ( + typeof kataDasar === "undefined" || + kataDasar === null || + kataDasar === "" + ) { + return; + } - let root = document.createElement("div") - root.appendChild(document.createTextNode("Kata dasar: ")) + let root = document.createElement("div"); + root.appendChild(document.createTextNode("Kata dasar: ")); - let italic = document.createElement("i") - italic.appendChild(document.createTextNode(kataDasar)) - root.appendChild(italic) + let italic = document.createElement("i"); + italic.appendChild(document.createTextNode(kataDasar)); + root.appendChild(italic); - out.appendChild(root) + out.appendChild(root); } function printDefinitions(out, definitions) { - if (typeof definitions === "undefined" || definitions === null) { - return - } + if (typeof definitions === "undefined" || definitions === null) { + return; + } - for (let x = 0; x < definitions.length; x++) { - let def = definitions[x] + for (let x = 0; x < definitions.length; x++) { + let def = definitions[x]; - let root = document.createElement("div") - let el = document.createElement("p") - el.classList.add("definisi") - el.appendChild( - document.createTextNode( - "Definisi #" + (x + 1) + ": " + def.isi + ".", - ), - ) - root.appendChild(el) + let root = document.createElement("div"); + let el = document.createElement("p"); + el.classList.add("definisi"); + el.appendChild( + document.createTextNode("Definisi #" + (x + 1) + ": " + def.isi + "."), + ); + root.appendChild(el); - printKelasKata(root, def.kelas) - printContoh(root, def.contoh) - out.appendChild(root) - } + printKelasKata(root, def.kelas); + printContoh(root, def.contoh); + out.appendChild(root); + } } function printKelasKata(out, daftarKelas) { - if (typeof daftarKelas === "undefined") { - return - } + if (typeof daftarKelas === "undefined") { + return; + } - let root = document.createElement("div") - root.classList.add("kelas-kata") - root.appendChild(document.createTextNode("Kelas,")) + let root = document.createElement("div"); + root.classList.add("kelas-kata"); + root.appendChild(document.createTextNode("Kelas,")); - let el = document.createElement("ul") - for (let x = 0; x < daftarKelas.length; x++) { - let li = document.createElement("li") - li.appendChild(document.createTextNode(daftarKelas[x])) - el.appendChild(li) - } - root.appendChild(el) - out.appendChild(root) + let el = document.createElement("ul"); + for (let x = 0; x < daftarKelas.length; x++) { + let li = document.createElement("li"); + li.appendChild(document.createTextNode(daftarKelas[x])); + el.appendChild(li); + } + root.appendChild(el); + out.appendChild(root); } function printContoh(out, examples) { - if (typeof examples === "undefined") { - return - } + if (typeof examples === "undefined") { + return; + } - let root = document.createElement("div") - root.classList.add("contoh") - root.appendChild(document.createTextNode("Contoh,")) + let root = document.createElement("div"); + root.classList.add("contoh"); + root.appendChild(document.createTextNode("Contoh,")); - let ul = document.createElement("ul") + let ul = document.createElement("ul"); - for (let x = 0; x < examples.length; x++) { - let li = document.createElement("li") - li.appendChild(document.createTextNode(examples[x])) - ul.appendChild(li) - } - root.appendChild(ul) - out.appendChild(root) + for (let x = 0; x < examples.length; x++) { + let li = document.createElement("li"); + li.appendChild(document.createTextNode(examples[x])); + ul.appendChild(li); + } + root.appendChild(ul); + out.appendChild(root); } diff --git a/_www/kamusku.js b/_www/kamusku.js index 364fa1b..0152337 100644 --- a/_www/kamusku.js +++ b/_www/kamusku.js @@ -1,35 +1,29 @@ -/** - * Copyright 2020, Shulhan <ms@kilabit.info>. All rights reserved. - * Use of this source code is governed by a BSD-style - * license that can be found in the LICENSE file. - */ +// SPDX-FileCopyrightText: 2020 M. Shulhan <ms@kilabit.info> +// SPDX-License-Identifier: GPL-3.0-or-later class Kamusku { - constructor(baseURL) { - if (baseURL.length === 0) { - baseURL = "" - } - this.baseURL = baseURL - } + constructor(baseURL) { + if (baseURL.length === 0) { + baseURL = ""; + } + this.baseURL = baseURL; + } - getDefinitions(words, cb) { - if (words.length === 0) { - return - } + getDefinitions(words, cb) { + if (words.length === 0) { + return; + } - let params = "kata=" + words - let xhr = new XMLHttpRequest() + let params = "kata=" + words; + let xhr = new XMLHttpRequest(); - xhr.addEventListener("load", function() { - cb(JSON.parse(xhr.responseText)) - }) + xhr.addEventListener("load", function () { + cb(JSON.parse(xhr.responseText)); + }); - xhr.open("GET", this.baseURL + "/api/definisi?" + params) - xhr.setRequestHeader( - "Content-Type", - "application/x-www-form-urlencoded", - ) + xhr.open("GET", this.baseURL + "/api/definisi?" + params); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - xhr.send(null) - } + xhr.send(null); + } } |
