Browse Source

change to keys display.

Jason Schwarzenberger 5 months ago
parent
commit
ecd0c259e5
5 changed files with 73 additions and 67 deletions
  1. 4 1
      index.js
  2. 4 3
      public/index.html
  3. 50 0
      public/keys.js
  4. 0 51
      public/script.js
  5. 15 12
      public/style.css

+ 4 - 1
index.js

@@ -23,11 +23,14 @@ app.get("/style.css", async (req, res) =>
 app.get("/script.js", async (req, res) =>
   res.sendFile(path.join(__dirname, "/public/script.js"))
 );
+app.get("/keys.js", async (req, res) =>
+  res.sendFile(path.join(__dirname, "/public/keys.js"))
+);
 app.get("/", async (req, res) =>
   res.sendFile(path.join(__dirname, "/public/index.html"))
 );
 
-app.get("/keys", async (req, res) => {
+app.get("/keys.json", async (req, res) => {
   const pages = cache.keys().map((key) => cache.get(key));
   return res.send(pages);
 });

+ 4 - 3
public/index.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-	<header class="is-constrained">
+	<header>
 		<h1>Declutter</h1>
 		<h2>Keep <em>only</em> what matters.</h2>
 		<img class="loading" src="/loading.svg" alt="loading..." width="200" height="200" />
@@ -19,11 +19,12 @@
 				name="redirect" type="submit">view</button>
 		</form>
 	</header>
-	<section class="submitted-links is-centered"></section>
-	<footer class="is-constrained">
+	<section class="submitted-links"></section>
+	<footer>
 		<p>No article content is stored or hosted by Declutter.</p>
 	</footer>
 	<script src="/script.js" type="text/javascript"></script>
+	<script src="/keys.js" type="text/javascript"></script>
 </body>
 
 </html>

+ 50 - 0
public/keys.js

@@ -0,0 +1,50 @@
+(function () {
+  function fetchLinks() {
+    return fetch("/keys.json")
+      .then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+        throw response.statusText;
+      })
+      .then((pages) => {
+        if (!pages) {
+          return;
+        }
+        const list = pages.reverse().slice(0, 10);
+        const section = document.querySelector("section.submitted-links");
+        section.innerHTML = "";
+        for (const page of list) {
+          if (!page) {
+            continue;
+          }
+          const article = document.createElement("article");
+          const title = document.createElement("a");
+          title.classList.add("is-title");
+          title.innerText = page.title;
+          title.title = page.title;
+          if (page.title.length > 140) {
+            title.innerText = page.title.substring(0, 140) + "...";
+          }
+          title.href = page.url;
+
+          const publisher = document.createElement("a");
+          publisher.classList.add("is-publisher");
+          publisher.innerText = new URL(page.author_url).host;
+          publisher.href = page.author_url;
+          publisher.title = page.author_url;
+
+          article.appendChild(title);
+          article.appendChild(publisher);
+          section.appendChild(article);
+        }
+      })
+      .catch(() => {
+        document.querySelector("section.submitted-links").innerHTML = "";
+      });
+  }
+
+  fetchLinks().then(() => {
+    setInterval(fetchLinks, 5 * 60 * 1000);
+  });
+})();

+ 0 - 51
public/script.js

@@ -47,54 +47,3 @@
   document.querySelector('input[name="url"]').value = query.url;
   document.querySelector("button").click();
 })();
-
-(function () {
-  function fetchLinks() {
-    return fetch("/keys")
-      .then((response) => {
-        if (response.ok) {
-          return response.json();
-        }
-        throw response.statusText;
-      })
-      .then((pages) => {
-        if (!pages) {
-          return;
-        }
-        const list = pages.reverse().slice(0, 10);
-        const section = document.querySelector("section.submitted-links");
-        section.innerHTML = "";
-        for (const page of list) {
-          if (!page) {
-            continue;
-          }
-          const article = document.createElement("article");
-          const title = document.createElement("a");
-          title.classList.add("is-title");
-          title.innerText = page.title;
-          title.title = page.title;
-          if (page.title.length > 75) {
-            title.innerText = page.title.substring(0, 75) + "...";
-          }
-          title.href = page.url;
-
-          const publisher = document.createElement("a");
-          publisher.classList.add("is-publisher");
-          publisher.innerText = new URL(page.author_url).host;
-          publisher.href = page.author_url;
-          publisher.title = page.author_url;
-
-          article.appendChild(title);
-          article.appendChild(publisher);
-          section.appendChild(article);
-        }
-      })
-      .catch(() => {
-        document.querySelector("section.submitted-links").innerHTML = "";
-      });
-  }
-
-  fetchLinks().then(() => {
-    setInterval(fetchLinks, 5 * 60 * 1000);
-  });
-})();

+ 15 - 12
public/style.css

@@ -1,16 +1,7 @@
 body {
-  font: 1.2em/1.62 sans-serif;
-}
-
-.is-constrained {
-  margin: 3.5rem auto 0.5rem;
-  max-width: 40rem;
-  text-align: center;
-}
-
-.is-centered {
   margin: 3.5rem auto 0.5rem;
-  max-width: 50vw;
+  width: 40rem;
+  font: 1.2em/1.62 sans-serif;
 }
 
 .is-playing.is-fullwidth body {
@@ -92,6 +83,10 @@ footer p {
   margin: 0;
 }
 
+footer p a {
+  color: #000;
+}
+
 .loading,
 .is-loading form,
 .is-loading form + footer,
@@ -121,22 +116,30 @@ footer p {
 }
 
 .submitted-links {
+  margin: 3.5rem auto 0.5rem;
   text-align: justify;
 }
+.submitted-links article:first-child:before {
+  content: "Recent Links";
+  display: block;
+}
 
 .submitted-links article {
   display: block;
   margin: 0.5rem;
-  text-align: left;
 }
 .submitted-links article a.is-title {
+  display: block;
   color: #444;
   margin: 0 0.5rem;
+  font-size: 0.9em;
 }
 .submitted-links article a.is-publisher {
+  display: block;
   color: #aaa;
   margin: 0 0.5rem;
   text-decoration: none;
+  font-size: 0.8em;
 }
 .submitted-links article a.is-publisher:before {
   content: "(";