search function added in, styled, and working

.gitea/workflows/deploy.yaml

@@ -0,0 +1,21 @@
+on:
+  push:
+    branches:
+      - main
+name: deploy updated site
+jobs:
+  deploy:
+    name: rsync the directories
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout code
+        uses: actions/checkout@v2
+      - name: deploy
+        uses: easingthemes/ssh-deploy@v5.1.0
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+          ARGS: '-avz --delete'
+          SOURCE: public/
+          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
+          REMOTE_USER: ${{ secrets.REMOTE_USER }}
+          TARGET: ${{ secrets.TARGET }}

.gitignore

@@ -1 +0,0 @@
-.DS_Store

.gitlab-ci.yml

@@ -1,16 +0,0 @@
-pages:
-  stage: deploy
-  script:
-    - mkdir .public
-    - cp index.html .public
-    - cp FavouriteQuotes.json .public
-    - cp app.js .public
-    - cp style.css .public
-    - cp favicon.ico .public
-    - rm -rf public
-    - mv .public public
-  artifacts:
-    paths:
-      - public
-  only:
-    - master

.woodpecker.yml

@@ -9,6 +9,7 @@ pipeline:
         from_secret: DOPrivateKey
       target: /u/jsquotes
       source: ./src
+      strip_components: 2
       
   restart:
     image: appleboy/drone-ssh

FavouriteQuotes.json

@@ -60,39 +60,7 @@
     "author": "Jim Jarmusch"
   },
   {
-    "quote": "Almost everything will work again if you unplug it for a few minutes, including you.",
-    "author": "Anne Lamott"
-  },
-  {
-    "quote": "If you compare yourself with others, you may become vain or bitter, for always there will be greater and lesser persons than yourself.",
-    "author": "Max Ehrmann"
-  },
-  {
-    "quote": "Life should be touched, not strangled. You've got to relax, let it happen at times, and at others move forward with it.",
-    "author": "Ray Bradbury"
-  },
-  {
-    "quote": "When you're from a dysfunctional family, healthy boundaries are viewed as threatening. Making an observation, expressing an expectation, refusing to be involved in chaos, or expressing a different view point, will likely lead to you being labeled as mean, funny acting, or weird. Not going along with the typical chaos can seem like you're trying to make waves in the family. The truth is, you are making waves; you're breaking the cycle of dysfunction and that isn't always well received by others.",
-    "author": "@NEDRATAWWAB, https://www.nedratawwab.com/"
-  },
-  {
-    "quote": "Strategy is better than strength.",
-    "author": "Hausa proverb"
-  },
-  {
-    "quote": "When the door is closed, you must learn to slide across the crack of the sill.",
-    "author": "Yoruba proverb"
-  },
-  {
-    "quote": "If you are on a road to nowhere, find another road.",
-    "author": "Ashanti proverb"
-  },
-  {
-    "quote": "Those who get to the river early drink the cleanest water.",
-    "author": "Kenyan proverb"
-  },
-  {
-    "quote": "Two men in a burning house must not stop to argue.",
-    "author": "Ashanti proverb"
+      "quote": "I have come to believe that caring for myself is not self indulgent. Caring for myself is an act of survival.",
+      "author": "Audre Lorde"
   }
 ]

README.md

@@ -1,17 +1,9 @@
 # Reading json and randomly posting content
 
-I wanted to create an "app" that would read in JSON and print out the results randomly based on a randomly generated number. It took me a while to get right, mostly because of the JSON file format. I have it down now. This is my result.
+~~I wanted to create an "app" that would read in JSON and print out the results randomly based on a randomly generated number. It took me a while to get right, mostly because of the JSON file format. I have it down now. This is my result.~~
 
-## Next steps ...
+This started out as a looping display of random quotes and evolved to be just one large grid with all the quotes. It's getting to be a pretty large page so the next step for this is to make all items the same size with a "more..." indicator that when clicked will open up a css popover with the full quote and an "X" to close.
 
-I want to add more quotes and a button to run the code instead of having the user reload the page. 
+19-Mar-2024
 
-Or at least create a timer loop to do the refreshing of the quotes automatically.
 
---  18 May, 2022 - 10:42:14
-
-## Looping done.
-
-I managed to get the looping done with a iteration count of 25 and an interval of 8seconds. So now, when you go to the live page, it should iterate 25 times through a random selection of my favourite quotes.
-
--- 28 May, 2022 - 09:28:53

public/css/styles.css

@@ -0,0 +1,107 @@
+:root {
+  --light: #e6daa6;
+  --dark: #0c024d;
+  --lightgrey: #d3d3d3;
+  --darkgrey: #a9a9a9;
+}
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  list-style: none;
+  text-decoration: none;
+  border: none;
+  box-sizing: border-box;
+  color-scheme: light dark;
+}
+body {
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 16px;
+  background-color: light_dark(var(--light), var(--dark));
+  color: light_dark(var(--dark), var(--light));
+  margin: 2rem auto;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  width: 85%;
+  align-items: center;
+  margin: auto;
+}
+.hdr-img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  box-shadow: 1px 3px 5px light_dark(var(--lightgrey), var(--darkgrey));
+}
+.hdr-h1 {
+  font-size: 2rem;
+  text-align: center;
+}
+.container {
+  width: 90%;
+  margin: 2rem auto;
+}
+.search {
+  margin: auto;
+  padding: 8px;
+  background-color: light_dark(var(--lightgrey), var(--darkgrey));
+  border: 1px solid var(--lightgrey);
+  border-radius: 14px;
+  margin-bottom: 0.6rem;
+}
+.search h2 {
+  text-align: center;
+  padding: 0 8px;
+}
+.search fieldset {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+}
+.text-input {
+  padding: 0.4rem 1.2rem;
+  background-color: light_dark(var(--darkgrey), var(--lightgrey));
+  border-radius: 14px;
+  color: light_dark(var(--light), var(--dark));
+  border: 1px solid light_dark(var(--dark), var(--light));
+}
+#filter-count {
+  padding: 0.2rem;
+}
+.quotes {
+  border: 1px solid var(--lightgrey);
+  border-radius: 14px;
+  box-shadow: 1px 3px 5px light_dark(#d6d6a3, var(--darkgrey));
+  padding: 1rem;
+  columns: 300px;
+  column-gap: auto;
+  column-fill: balance;
+  margin: auto;
+}
+.quote {
+  background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
+  background-attachment: fixed;
+  color: beige;
+  border: 1px solid var(--lightgrey);
+  border-radius: 14px;
+  box-shadow: 1px 3px 5px light_dark(var(--lightgrey), var(--darkgrey));
+  margin: 12px;
+  padding: 1rem;
+  max-width: 340px;
+  display: inline-block;
+}
+.icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 12px;
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+.footer {
+  font-size: 0.98rem;
+  text-align: center;
+  margin-top: 1rem;
+}

public/css/styles.less

@@ -64,8 +64,15 @@ body {
   max-width: 340px;
   display: inline-block;
 }
-.footer {
-  font-size: 0.8rem;
-  text-align: center;
-  margin-top: 1rem;
+.icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 12px;
+    display: inline-block;
+    vertical-align: text-bottom;
+}
+.footer {
+    font-size: 0.98rem;
+    text-align: center;
+    margin-top: 1rem;
 }

public/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+  <title>fyrfli's favourite quotes</title>
+  <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="css/styles.css">
+  <!-- <script defer src="js/app.js"></script> -->
+</head>
+
+<body>
+  <header class="header">
+    <img src="https://cdn.fyrfli.link/i/hat-small.png"
+      alt="close-up of a black woman in a trilby, eyes down, the hat covering most of her face" class="hdr-img">
+    <h1 class="hdr-h1">fyrfli's quote library</h1>
+  </header>
+
+  <main class="container">
+    <article class="search">
+      <form action="javascript:void(0);" method="post" id="live-search" class="styled">
+        <fieldset>
+          <h2>search for a quote</h2>
+          <input type="text" name="search" id="filter" class="text-input" placeholder="start typing..." onkeyup="liveSearch()">
+          <span id="filter-count"></span>
+        </fieldset>
+      </form>
+    </article>
+    <article class="quotes"></article>
+    <article class="debug"></article>
+  </main>
+
+  <footer class="footer">
+    <a href="https://fyrfli.dev/fyrfli/jsquotes"><img src="https://cdn.fyrfli.link/DashboardIcons/gitea.png"
+        alt="the gitea logo - a green cup with a git symbol tagged tea bag tab hanging on the front" class="icon">
+      Source</a> for this page <br>
+    &copy;<span id="jsyear"></span> Camille (<a href="https://fyrfli.dev/fyrfli" target="_blank">@fyrfli</a>) Frantz.
+  </footer>
+
+  <!-- <script src="app.js"></script> -->
+  <script src="js/layout.js"></script>
+</body>
+
+</html>

public/js/layout.js

@@ -0,0 +1,56 @@
+'use strict';
+// Full year for footer
+const todayDate = new Date();
+jsyear.innerText = todayDate.getFullYear();
+
+const quoteDisplay = document.querySelector(".quotes");
+const debugDisplay = document.querySelector(".debug");
+let i = 0;
+let quote_section = "";
+
+fetch("https://cdn.fyrfli.link/FavouriteQuotes.json")
+  .then((response) => {
+    return response.json();
+  })
+  .then((data) => {
+    while (i < Object.entries(data).length) {
+      quote_section = document.createElement("section")
+      quote_section.className = "quote";
+      quote_section.innerText = "\"" + data[i].quote + "\"\n\n" + data[i].author;
+      quoteDisplay.appendChild(quote_section);
+      i++;
+    }
+  });
+
+function liveSearch() {
+  let j;
+  let input = document.getElementById('filter').value.toLowerCase();
+  let item = document.getElementsByClassName('quote');
+  
+  for (j = 0; j < item.length; j++) {
+    if (!item[j].innerText.toLowerCase().includes(input)) {
+      item[j].style.display = "none";
+    }
+    else {
+      item[j].style.display = "inline-block"
+    }
+  }
+}
+
+
+// The working funtion for live search from https://jupiter.fyrfli.net/js-play/jsplay.html
+//   - this is for reference only
+// function search_items() {
+//     let input = document.getElementById('filter').value.toLowerCase();
+//     let x = document.getElementsByClassName('item');
+
+//     for (i = 0; i < x.length; i++) {
+//         if (!x[i].innerHTML.toLowerCase().includes(input)) {
+//             x[i].style.display = "none";
+//         }
+//         else {
+//             x[i].style.display = "list-item";
+//         }
+//     }
+// }
+

src/index.html

@@ -1,34 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport"
-    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
-  <title>read quote</title>
-  <link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon">
-  <link rel="stylesheet/less" type="text/css" href="/css/styles.less" />
-  <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
-</head>
-
-<body>
-  <header class="header">
-    <img src="https://cdn.fyrfli.link/i/hat-small.png"
-      alt="close-up of a black woman in a trilby, eyes down, the hat covering most of her face" class="hdr-img">
-    <h1 class="hdr-h1">fyrfli's quote library</h1>
-  </header>
-
-  <main class="container">
-    <article class="debug"></article>
-    <article class="quotes"></article>
-  </main>
-
-  <footer class="footer">
-    &copy;<span id="jsyear"></span> Camille (<a href="https://fyrfli.dev/fyrfli" target="_blank">@fyrfli</a>) Frantz.
-  </footer>
-
-  <!-- <script src="app.js"></script> -->
-  <script src="js/layout.js"></script>
-</body>
-
-</html>

src/js/app.js

@@ -1,33 +0,0 @@
-'use strict';
-// Full year for footer
-const todayDate = new Date();
-jsyear.innerText = todayDate.getFullYear();
-
-const quoteDisplay = document.querySelector(".quote");
-let numQuotes;
-let randomNum;
-let intervalID;
-let iteratorID = 0;
-let currQuote;
-
-fetch("assets/FavouriteQuotes.json")
-  .then((response) => {
-    return response.json();
-  })
-  .then((data) => {
-    currQuote = getQuote(data);
-    for (let i = 0; i < 50; i++) {
-      quoteDisplay.innerText = currQuote;
-      intervalID = setInterval(() => {
-        currQuote = getQuote(data);
-        quoteDisplay.innerText = currQuote;
-      }, 12000);
-    }
-  });
-
-
-function getQuote(data) {
-  let noQuotes = Object.entries(data).length;
-  let randNo = Math.floor(Math.random() * noQuotes);
-  return data[randNo].quote + "\n\n" + data[randNo].author.replace(/"/g, '');
-}

src/js/layout.js

@@ -1,23 +0,0 @@
-'use strict';
-// Full year for footer
-const todayDate = new Date();
-jsyear.innerText = todayDate.getFullYear();
-
-const quoteDisplay = document.querySelector(".quotes");
-const debugDisplay = document.querySelector(".debug");
-let i = 0;
-let quote_section = "";
-
-fetch("assets/FavouriteQuotes.json")
-  .then((response) => {
-    return response.json();
-  })
-  .then((data) => {
-    while (i < Object.entries(data).length) {
-      quote_section = document.createElement("section")
-      quote_section.className = "quote";
-      quote_section.innerText = "\"" + data[i].quote + "\"\n\n" + data[i].author;
-      quoteDisplay.appendChild(quote_section);
-      i++;
-    }
-  });