add readmore

desujoy · Oct 8, 2023 · 4e01ef0 · 4e01ef0
1 parent e4c5dd0
commit 4e01ef0
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 165 deletions.
diff --git a/index.js b/index.js
@@ -31,18 +31,8 @@ app.get("/", async (req, res) => {
   if (list.length != 0) {
     const random = Math.floor(Math.random() * list.length);
     const response = await axios.get(MAL_URL + 'anime/' + list[random].id + MAL_FIELDS, MAL_HEADER);
-    const data = response.data;
-    const genres = data.genres.map((genre) => genre.name);
-    const anime = {
-      title: data.title,
-      poster: data.main_picture.large,
-      genre: genres,
-      synopsis: data.synopsis,
-      rating: data.mean,
-      status: data.status,
-      episodeCount: data.num_episodes,
-    };
-    res.render("index.ejs", { data: anime, mal: list[random], limit: DISP_LIMIT, err:null });
+    console.log(response.data);
+    res.render("index.ejs", { data: response.data, limit: DISP_LIMIT, err:null });
     list = [];
   } else {
     res.render("index.ejs", { data: null, err:null });

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kushiro",
-  "version": "1.0.1",
+  "version": "1.2.1",
   "description": "",
   "main": "index.js",
   "type": "module",

diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,126 @@
+body {
+  font-family: "Lobster", cursive;
+  margin: 0;
+  padding: 0;
+  background: #eff1f5;
+}
+
+.wrap {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.search form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+h1 {
+  font-size: 24px;
+  text-align: center;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border: 5px solid #2e51a2;
+  border-radius: 12%;
+}
+
+.searchTerm {
+  width: 80%;
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 5px 0 0 5px;
+  outline: none;
+  color: #657789;
+}
+
+.searchButton {
+  width: 20%;
+  height: 47.5px;
+  border: 1px solid #ccc;
+  border-radius: 0 5px 5px 0;
+  background: #2e51a2;
+  text-align: center;
+  cursor: pointer;
+}
+
+.searchButton svg {
+  vertical-align: middle;
+}
+
+.searchButton svg circle {
+  fill: #2e51a2;
+}
+
+.anime-content {
+  width: 80%;
+  margin: 20px auto;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-family: "VT323", monospace;
+  font-size: 20px;
+}
+
+.anime-info {
+  display: flex;
+  align-items: center;
+}
+
+.anime-cover img {
+  max-width: 300px;
+  height: auto;
+  margin-right: 10px;
+}
+
+.anime-details {
+  flex: 1;
+  padding-left: 100px;
+  margin-right: 100px;
+}
+
+.anime-details strong {
+  display: block;
+  margin-bottom: 5px;
+  padding-top: 4px;
+}
+
+@media screen and (max-width: 900px) {
+  .anime-info {
+    flex-direction: column;
+  }
+
+  .anime-details {
+    padding-left: 5%;
+    margin-right: 5%;
+  }
+
+  .anime-details strong {
+    display: inline-block;
+  }
+}
+
+.error-message {
+  color: red;
+}
+
+.copyright-box {
+  font-family: cursive;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}
+
+.fixed-bottom {  
+  font-family: cursive;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}
diff --git a/public/js/main.js b/public/js/main.js
@@ -0,0 +1,8 @@
+$(function () {
+  $(".synopsis").moreLess({
+    wordsCount: 50,
+    moreClass: "toggle-text",
+    lessClass: "toggle-text",
+  });
+
+});
diff --git a/public/vendor/jquery/jquery.min.js b/public/vendor/jquery/jquery.min.js
diff --git a/public/vendor/jquery/moreless.js b/public/vendor/jquery/moreless.js
diff --git a/views/footer.ejs b/views/footer.ejs
@@ -1,19 +1,10 @@
-<footer>
-    <% if(data==null) { %>
-        <div class="fixed-copyright-box">
-            <p class="copyright">Copyright &copy; <strong>Sujoy De</strong>. All Rights Reserved</p>
-            <div class="credits">
-                Source <a href="https://github.com/desujoy/desujoy.github.io/" target="_blank">GitHub</a>
-            </div>
-        </div>
-        <% } else { %>
-            <div class="relative-copyright-box">
-                <p class="copyright">Copyright &copy; <strong>Sujoy De</strong>. All Rights Reserved</p>
-                <div class="credits">
-                    Source <a href="https://github.com/desujoy/desujoy.github.io/" target="_blank">GitHub</a>
-                </div>
-            </div>
-            <% } %>
+<footer <% if (data==null) { %> class="fixed-bottom" <% } %>
+    <div class="copyright-box">
+        Copyright &copy; <strong>Sujoy De</strong>. All Rights Reserved<br>
+        Source <a href="https://github.com/desujoy/desujoy.github.io/" target="_blank">GitHub</a>
+
+    </div>
 </footer>
+<script src="js/main.js"></script>
 
 </html>
diff --git a/views/header.ejs b/views/header.ejs
@@ -8,135 +8,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Lobster&family=VT323&display=swap" rel="stylesheet" />
-  <style>
-    body {
-      font-family: "Lobster", cursive;
-      margin: 0;
-      padding: 0;
-      background: #eff1f5;
-    }
+  <link rel="stylesheet" href="css/style.css">
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/jquery/moreless.js"></script>
 
-    .wrap {
-      max-width: 600px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-
-    .search form {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    h1 {
-      font-size: 24px;
-      text-align: center;
-    }
-
-    img {
-      max-width: 100%;
-      height: auto;
-      border: 5px solid #2e51a2;
-      border-radius: 12%;
-    }
-
-    .searchTerm {
-      width: 80%;
-      padding: 15px;
-      border: 1px solid #ccc;
-      border-radius: 5px 0 0 5px;
-      outline: none;
-      color: #657789;
-    }
-
-    .searchButton {
-      width: 20%;
-      height: 47.5px;
-      border: 1px solid #ccc;
-      border-radius: 0 5px 5px 0;
-      background: #2e51a2;
-      text-align: center;
-      cursor: pointer;
-    }
-
-    .searchButton svg {
-      vertical-align: middle;
-    }
-
-    .searchButton svg circle {
-      fill: #2e51a2;
-    }
-
-    .anime-content {
-      width: 80%;
-      margin: 20px auto;
-      padding: 10px;
-      border: 1px solid #ccc;
-      border-radius: 5px;
-      font-family: "VT323", monospace;
-      font-size: 20px;
-    }
-
-    .anime-info {
-      display: flex;
-      align-items: center;
-    }
-
-    .anime-cover img {
-      max-width: 300px;
-      height: auto;
-      margin-right: 10px;
-    }
-
-    .anime-details {
-      flex: 1;
-      padding-left: 100px;
-      margin-right: 100px;
-    }
-
-    .anime-details strong {
-      display: block;
-      margin-bottom: 5px;
-      padding-top: 4px;
-    }
-
-    @media screen and (max-width: 900px) {
-      .anime-info {
-        flex-direction: column;
-      }
-
-      .anime-details {
-        padding-left: 5%;
-        margin-right: 5%;
-      }
-    }
-
-    .error-message {
-      color: red;
-    }
-
-    .relative-copyright-box {
-      font-family: cursive;
-      position: relative;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      text-align: center;
-      padding: 1px 0 10px 0;
-      background: #2e51a2;
-      color: #fff;
-    }
-
-    .fixed-copyright-box {
-      font-family: cursive;
-      position: fixed;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      text-align: center;
-      padding: 0 0 10px 0;
-      background: #2e51a2;
-      color: #fff;
-    }
-  </style>
 </head>
diff --git a/views/index.ejs b/views/index.ejs
@@ -40,17 +40,17 @@
   <div class="anime-content">
     <div class="anime-info">
       <div class="anime-cover">
-        <a href="https://myanimelist.net/anime/<%= mal.id %>" target="_blank"
-          ><img border="0" src="<%= data.poster %>" alt="<%= mal.title %>"
+        <a href="https://myanimelist.net/anime/<%= data.id %>" target="_blank"
+          ><img border="0" src="<%= data.main_picture.large %>" alt="<%= data.title %>"
         /></a>
       </div>
       <div class="anime-details">
         <strong>Name:</strong> <%= data.title %><br />
-        <strong>Rating:</strong> <%= data.rating %><br />
-        <strong>Genres:</strong> <%= data.genre %><br />
-        <strong>Episodes:</strong> <%= data.episodeCount %><br />
+        <strong>Rating:</strong> <%= data.mean %><br />
+        <strong>Genres:</strong> <%= data.genres.map((genre) => genre.name) %><br />
+        <strong>Episodes:</strong> <%= data.num_episodes %><br />
         <strong>Status:</strong> <%= data.status %><br />
-        <strong>Synopsis:</strong> <%= data.synopsis %><br />
+        <strong>Synopsis:</strong> <div class="synopsis"> <%- data.synopsis.replaceAll('\n\n','<br>') %></div><br />
       </div>
     </div>
   </div>