Merge pull request #1 from kurisufriend/main

dynamic catalog, public ipfs gateway, removed hardcoded links

zhetic-poc/contact.html

@@ -14,8 +14,6 @@
         | <a href="contact.html">Contact</a> |
     </center>
     <p>
-    &nbsp&nbsp&nbsp&nbsp
-    The project lives on irc.rizon.net#a-manga-thing
     </p>
 </body>
 </html>

zhetic-poc/contributing.html

@@ -14,8 +14,6 @@
         | <a href="contact.html">Contact</a> |
     </center>
     <p>
-    &nbsp&nbsp&nbsp&nbsp
-    This service relies on a distributed network of hosts to serve content. The easiest way to help is to keep your ipfs daemon on in the background and use the dashboard on <a href="https://localhost:5001/webui">port 5001</a> to pin content you are interested in. If you have bandwidth to spare, consider consolidating your config files with ours and become a more permanent part of the network.
     </p>
 
 </body>

zhetic-poc/db.json

@@ -1,6 +1,5 @@
 [
-    { "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" }
+    { "id" : "0", "title" : "Boku no Kokoro no Yabai Yatsu", "cid" : "bafybeihnoou2av5w2bzmwkl6hi25scyzz6sjwdfqp4cwq2ikf6dfmev3ta"},
+    { "id" : "1", "title" : "Otoyomegatari", "cid" : "bafybeigfivshobq4h5x5qwmttgqimaufmcjl6hpjcrsedj7wxxduphp7g4"},
+    { "id" : "2", "title" : "Spy X Family", "cid" : "bafybeibgnpbredeofwp364qomqpth55a6ui3oiy2ucm35fo3eimquoeob4"}
 ]
-

zhetic-poc/index.html

@@ -13,16 +13,7 @@
         | <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>
-    &nbsp&nbsp&nbsp&nbsp
-    You have the option of either a <a href="https://github.com/ipfs-shipyard/ipfs-desktop">GUI client</a> or an assortment of other <a href="https://ipfs.io/ipns/dist.ipfs.io/">CLI-based tools</a>. Once you have the service running in the background it will translate the content and allow you to view it in your browser. <br>
-    &nbsp&nbsp&nbsp&nbsp
-    Make sure to pin your favorite manga to make sure that it sticks around. This tells ipfs to always keep a local copy and help out with content distribution. <br>
     </p>
 
 </body>

zhetic-poc/js/catalog.js

@@ -0,0 +1,35 @@
+function load() {
+    $.ajax({
+        dataType: "json",
+        url: "/db.json",
+        headers: { "Accept": "application/json"},
+        success: function (res) {
+            let strCatalog = "";
+            let strSearch = document.getElementById("search").value;
+            res.forEach(manga => {
+                if (strSearch != "" && !manga["title"].toLowerCase().includes(strSearch.toLowerCase()))
+                    return;
+                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;
+        }
+    });
+}
+$(document).ready(function () {
+    load();
+});

zhetic-poc/js/reader.js

@@ -97,24 +97,33 @@ $(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: "/db.json",
         headers: { "Accept": "application/json"},
         success: function (res) {
-            pageNo = res[id]["pageNo"];
+            pageNo = 0;
+            $.ajax({
+                dataType: "json",
+                url: "https://ipfs.io/api/v0/ls/"+res[id]["cid"],
+                headers: { "Accept": "application/json"},
+                success: function (r) {
+                    pageNo = r["Objects"][0]["Links"].length;
                     title = res[id]["title"];
                     cid = res[id]["cid"];
                     $("#pageCounter").html(`${pageCurrent}/${pageNo}`);
                     $("#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();
                 }
             });
+        }
+    });
 
     fitHeight();
     layoutSingle();

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,58 +15,14 @@
         | <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">
+        <button id="loadButton" type="button" onclick="load();">load</button>
     </center>
-    <table>
-        <tr>
-            <td class="cover">
-                <img class="thumbnail" src="img/bokuyaba_cover.jpg"/>
-            </td>
-            <td class="description">
-                <p><b>Boku no Kokoro no Yabai Yatsu</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=0">QmeKZdHoERmKUekcRxb3ao4ZuLDcF9qNbjYr3ZmeKAjC2s</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 id="titles">
     </table>
 </body>
 </html>