use public ipfs gateway, dynamic catalog, fix hrefs

4 years ago · b132acf4ad
parent 51608c2201
commit b132acf4ad
8 changed files with 40 additions and 42 deletions
--- a/zhetic-poc/db.json
+++ b/zhetic-poc/db.json
@ -2,5 +2,4 @@
    { "id" : "0", "title" : "Boku no Kokoro no Yabai Yatsu", "cid" : "bafybeihnoou2av5w2bzmwkl6hi25scyzz6sjwdfqp4cwq2ikf6dfmev3ta", "pageNo" : "18" },
    { "id" : "1", "title" : "Otoyomegatari", "cid" : "bafybeigfivshobq4h5x5qwmttgqimaufmcjl6hpjcrsedj7wxxduphp7g4", "pageNo" : "39" },
    { "id" : "2", "title" : "Spy X Family", "cid" : "bafybeibgnpbredeofwp364qomqpth55a6ui3oiy2ucm35fo3eimquoeob4", "pageNo" : "71" }
-]
+]
--- a/zhetic-poc/img/bokuyaba_cover.jpg
+++ b/zhetic-poc/img/bokuyaba_cover.jpg
--- a/zhetic-poc/img/otoyomegatari_cover.jpg
+++ b/zhetic-poc/img/otoyomegatari_cover.jpg
--- a/zhetic-poc/img/spyxfamily_cover.jpg
+++ b/zhetic-poc/img/spyxfamily_cover.jpg
--- a/zhetic-poc/index.html
+++ b/zhetic-poc/index.html
@ -13,9 +13,6 @@
        | <a href="contributing.html">Contributing</a>
        | <a href="contact.html">Contact</a> |
    </center>
    <center>
        <h2 style="color:#FF0000">This service requires an IPFS client</h2>
    </center>
    <p>
    &nbsp&nbsp&nbsp&nbsp
    <b>This service is 99% distributed.</b> This means you should start seeding before you start reading and accessing the content. Install an ipfs client and connect through the http gateway it provides for you. This website is just a list of files hosted on a distributed network, a tracker, if you will. For the best possible experience we also recommend that you install the ipfs-companion browser plugin. This does not mean you should rely on the public gateway, because this site would not be able to stay up. <br>
--- a/zhetic-poc/js/catalog.js
+++ b/zhetic-poc/js/catalog.js
@ -0,0 +1,30 @@
 $(document).ready(function () {
    $.ajax({
        dataType: "json",
        url: "http://"+window.location.hostname+"/db.json",
        headers: { "Accept": "application/json"},
        success: function (res) {
            let strCatalog = "";
            res.forEach(manga => {
                strCatalog += '<tr>\
                    <td class="cover">\
                        <img class="thumbnail" src="img/covers/'+manga["id"]+'.jpg"/>\
                    </td>\
                    <td class="description">\
                        <p><b>'+manga["title"]+'</b></p>\
                        <p>Scanlation: ?</p>\
                        <p>Status: ?</p>\
                        <p>Chapters: ?</p>\
                        <p>Last update: ?</p>\
                        <p>\
                            Link:\
                            <a href="reader.html?id='+manga["id"]+'">reader</a>\
                        </p>\
                    </td>\
                </tr>';
            });
            document.getElementById("titles").innerHTML = strCatalog;
        }
    });
 });
--- a/zhetic-poc/js/reader.js
+++ b/zhetic-poc/js/reader.js
@ -97,9 +97,10 @@ $(document).ready(function () {
    let url = new URL(window.location.href);
    let id = url.searchParams.get("id");
    let domain = window.location.hostname;
    $.ajax({
        dataType: "json",
-        url: "https://amangathing.ddns.net/db.json",
+        url: "http://"+domain+"/db.json",
        headers: { "Accept": "application/json"},
        success: function (res) {
            pageNo = res[id]["pageNo"];
@ -109,7 +110,7 @@ $(document).ready(function () {
            $("#titlebarText").html(`${title}`);
            $("title").html(`${title}`);
            for (let i = 1; i <= pageNo; i++) {
-                $("#pageView").append(`<img draggable="false" class="imageView" id="image${i}" src="http://${cid}.ipfs.localhost:8080/${i}.jpg">`);
+                $("#pageView").append(`<img draggable="false" class="imageView" id="image${i}" src="https://ipfs.io/ipfs/${cid}/${i}.jpg">`);
                $(`#image${i}`).hide();
            }
            loadPage();
--- a/zhetic-poc/manga.html
+++ b/zhetic-poc/manga.html
@ -3,6 +3,8 @@
    <title>/a/ manga thing</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/catalog.js"></script>
 </head>
 <body>
    <center>
@ -13,19 +15,16 @@
        | <a href="contributing.html">Contributing</a>
        | <a href="contact.html">Contact</a> |
    </center>
    <center>
        <h2 style="color:#FF0000">This service requires an IPFS client</h2>
    </center>
    <p>
    &nbsp&nbsp&nbsp&nbsp
-    This part could be js driven and pull the metadata from some kind of database, alternatively from ipfs through the public gateway at ipfs.io. The manga pages would be pulled from localhost and displayed in a built-in manga reader.</p>
+    Generated from /db.json
    <center>
        <input id="search" type="text" placeholder="Search">
    </center>
-    <table>
+    <table id="titles">
        <tr>
            <td class="cover">
-                <img class="thumbnail" src="img/bokuyaba_cover.jpg"/>
+                <img class="thumbnail" src="img/covers/0.jpg"/>
            </td>
            <td class="description">
                <p><b>Boku no Kokoro no Yabai Yatsu</b></p>
@ -34,35 +33,7 @@
                <p>Chapters: x</p>
                <p>Last update: recently</p>
                <p>Link:
-                <a href="https://amangathing.ddns.net/reader.html?id=0">QmeKZdHoERmKUekcRxb3ao4ZuLDcF9qNbjYr3ZmeKAjC2s</a></p>
+                <a href="reader.html?id=0">reader</a></p>
            </td>
        </tr>
        <tr>
            <td class="cover">
                <img class="thumbnail" src="img/otoyomegatari_cover.jpg"/>
            </td>
            <td class="description">
                <p><b>Otoyomegatari</b></p>
                <p>Scanlation: idgaf</p>
                <p>Status: ongoing</p>
                <p>Chapters: x</p>
                <p>Last update: recently</p>
                <p>Link:
                <a href="https://amangathing.ddns.net/reader.html?id=1">QmbciPyqhjrbkrJVAkWFaUMSS9BXS7MH34ibhErnzzKEtN</a></p>
            </td>
        </tr>
        <tr>
            <td class="cover">
                <img class="thumbnail" src="img/spyxfamily_cover.jpg"/>
            </td>
            <td class="description">
                <p><b>Spy x Family</b></p>
                <p>Scanlation: idgaf</p>
                <p>Status: ongoing</p>
                <p>Chapters: x</p>
                <p>Last update: recently</p>
                <p>Link:
                <a href="https://amangathing.ddns.net/reader.html?id=2">QmQvdWNqGU8q5c2DyqwxhVfYZt8Cw8PFxAQD6zHfR49ojc</a></p>
            </td>
        </tr>
    </table>