Merge branch 'main' of https://fyrfli.dev/fyrfli/jsquotes

Reviewed-on: #2

.gitea/.excludes

@@ -0,0 +1,7 @@
+archive/
+README.md
+public/
+.gitea/
+.git/
+.DS_Store
+FavouriteQuotes.json

.gitea/workflows/deploy.yaml

@@ -0,0 +1,26 @@
+on:
+  push:
+    branches:
+      - main
+    paths-ignore:
+      - .gitignore
+      - README.md
+      - LICENSE
+  pull_request:
+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 --exclude-from=.gitea/.excludes'
+          SOURCE: .
+          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
+          REMOTE_USER: ${{ secrets.REMOTE_USER }}
+          TARGET: ${{ secrets.TARGET }}

.gitignore

@@ -1,5 +0,0 @@
-<<<<<<< HEAD
-.DS_Store
-=======
-.DS_Store
->>>>>>> 7f4013d (Initial)

.woodpecker.yml

@@ -1,24 +0,0 @@
-pipeline:
-  publish:
-    image: appleboy/drone-scp
-    settings:
-      host: 
-        from_secret: jupiterIP
-      username: camille
-      key: 
-        from_secret: DOPrivateKey
-      target: /u/jsquotes
-      source: ./src
-      strip_components: 2
-      
-  restart:
-    image: appleboy/drone-ssh
-    settings:
-      host: 
-        from_secret: jupiterIP
-      username: camille
-      key: 
-        from_secret: DOPrivateKey
-      script:
-        - docker restart quotes
-branches: master

FavouriteQuotes.json

@@ -1,66 +0,0 @@
-[
-  {
-    "quote": "Everything has its wonders, even darkness and silence, and I learn, whatever state I may be in , therein to be content.",
-    "author": "Helen Keller"
-  },
-  {
-    "quote": "Tomorrow, and tomorrow, and tomorrow, Creeps in this petty pace from day to day, To the last syllable of recorded time; And all our yesterdays have lighted fools The way to dusty death. Out, out, brief candle! Life's but a walking shadow, a poor player That struts and frets his hour upon the stage And then is heard no more. It is a tale Told by an idiot, full of sound and fury Signifying nothing.",
-    "author": "Macbeth \n (Act 5, Scene 5, lines 19-28)"
-  },
-  {
-    "quote": "He who has health has hope. And he who has hope, has everything.",
-    "author": "Arabian Proverb"
-  },
-  {
-    "quote": "In the midst of movement and chaos, keep stillness inside of you.",
-    "author": "Deepak Chopra"
-  },
-  {
-    "quote": "The worst sin toward our fellow creatures is not to hate them, but to be indifferent to them: that's the essence of inhumanity.",
-    "author": "George Bernard Shaw; \n Irish dramatist & socialist (1856 - 1950)"
-  },
-  {
-    "quote": "We come to love not by finding a perfect person, but by learning to see an imperfect person perfectly.",
-    "author": "Sam Keen"
-  },
-  {
-    "quote": "A friend is someone who understands your past, believes in your future, and accepts you just the way you are",
-    "author": "Paul Holdorsen"
-  },
-  {
-    "quote": "Ambition is the last refuge of failure",
-    "author": "Oscar Wilde"
-  },
-  {
-    "quote": "Love never dies a natural death. It dies because we don't know how to replenish its source. It dies of blindness and errors and betrayals. It dies of illness and wounds; it dies of weariness, of withering, of tarnishing.",
-    "author": "Anais Nin"
-  },
-  {
-    "quote": "Few people think more than two or three times a year; I have made an international reputation for myself by thinking once or twice a week.",
-    "author": "George Bernard Shaw; \n Irish dramatist & socialist (1856 - 1950)"
-  },
-  {
-    "quote": "It doesn't interest me where or what or with whom you have studied. I want to know what sustains you from the inside when all else falls away. I want to know if you can be alone with yourself and if you truly like the company you keep in the empty moments.",
-    "author": "from ... The Invitation, \n Oriah Mountain Dreamer"
-  },
-  {
-    "quote": "You never really understand a person until you consider things from his point of view... until you climb into his skin and walk around in it.",
-    "author": "Harper Lee, \n To Kill a Mockingbird"
-  },
-  {
-    "quote": "I think there's just one kind of folks. Folks.",
-    "author": "Harper Lee, \n To Kill a Mockingbird"
-  },
-  {
-    "quote": "The Best Things In Life... \n Hot showers on a cold night \n Snow flurries and moonlight \n The smell of freshly washed towels \n Fog over fields and fireflies \n Country storms \n Being home",
-    "author": "Camille Frantz"
-  },
-  {
-    "quote": "Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees..., clouds, bodies of water, light and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And don't bother concealing your thievery - celebrate it if you feel like it. In any case, always remember what Jean-Luc Godard said: 'it's not where you take things from - its where you take them to.'",
-    "author": "Jim Jarmusch"
-  },
-  {
-      "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"
-  }
-]

LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

README.md

@@ -1,23 +1,27 @@
-# Reading json and randomly posting content
+# Quotes library
 
-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.
+## Features
 
-## Next steps ...
+1. Read quotes in from https://cdn.fyrfli.link/FavouriteQuotes.json
+2. Display them all in a grid fashion
+3. Has a live search feature that allows you to filter quotes based on a case-insensitive input field
 
-I want to add more quotes and a button to run the code instead of having the user reload the page. 
+## To Do
 
-Or at least create a timer loop to do the refreshing of the quotes automatically.
+1. Abstract it so that you can pick the file
+2. Create a Docker file to build an image if desired
 
---  18 May, 2022 - 10:42:14
+## Releases
+Dowload [here](https://fyrfli.dev/fyrfli/jsquotes/src/tag/3.0)
 
-## Looping done.
+    2024-11-08 12:18:15
 
-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
+~~# Reading json and randomly posting content~~
 
-## Changed the entire format of the page
+~~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 didn't like that the looping would repeat the same quote several times so I decided on a column format instead. This way **all** the quotes show up at once. No looping, no excessive animations ... just a simple page.
+~~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.~~
+
+~~19-Mar-2024~~
 
-[![status-badge](https://ci.fyrfli.dev/api/badges/fyrfli/jsquotes/status.svg)](https://ci.fyrfli.dev/fyrfli/jsquotes)

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;
+}

index.html

@@ -6,9 +6,9 @@
   <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="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
-  <link rel="stylesheet/less" type="text/css" href="/css/styles.less" />
+  <link rel="stylesheet" href="css/styles.css">
-  <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
+  <!-- <script defer src="js/app.js"></script> -->
 </head>
 
 <body>
@@ -19,8 +19,17 @@
   </header>
 
   <main class="container">
-    <article class="debug"></article>
+    <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">

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";
+//         }
+//     }
+// }
+

public/app.js

@@ -1,11 +0,0 @@
-const disp = document.querySelector(".display");
-
-fetch("https://cdn.fyrfli.link/FavouriteQuotes.json")
-  .then((response) => {
-    return response.json();
-  })
-  .then((data) => {
-    numQuotes = Object.entries(data).length;
-    num = Math.floor(Math.random() * numQuotes);
-    disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, '');
-  })

public/index.html

@@ -1,17 +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="stylesheet" href="style.css">
-  </head>
-
-  <body>
-    <div class="display"></div>
-    <script src="app.js"></script>
-  </body>
-
-</html>

public/src/assets/FavouriteQuotes.json

@@ -1,98 +0,0 @@
-[
-  {
-    "quote": "Everything has its wonders, even darkness and silence, and I learn, whatever state I may be in , therein to be content.",
-    "author": "Helen Keller"
-  },
-  {
-    "quote": "Tomorrow, and tomorrow, and tomorrow, Creeps in this petty pace from day to day, To the last syllable of recorded time; And all our yesterdays have lighted fools The way to dusty death. Out, out, brief candle! Life's but a walking shadow, a poor player That struts and frets his hour upon the stage And then is heard no more. It is a tale Told by an idiot, full of sound and fury Signifying nothing.",
-    "author": "Macbeth \n (Act 5, Scene 5, lines 19-28)"
-  },
-  {
-    "quote": "He who has health has hope. And he who has hope, has everything.",
-    "author": "Arabian Proverb"
-  },
-  {
-    "quote": "In the midst of movement and chaos, keep stillness inside of you.",
-    "author": "Deepak Chopra"
-  },
-  {
-    "quote": "The worst sin toward our fellow creatures is not to hate them, but to be indifferent to them: that's the essence of inhumanity.",
-    "author": "George Bernard Shaw; \n Irish dramatist & socialist (1856 - 1950)"
-  },
-  {
-    "quote": "We come to love not by finding a perfect person, but by learning to see an imperfect person perfectly.",
-    "author": "Sam Keen"
-  },
-  {
-    "quote": "A friend is someone who understands your past, believes in your future, and accepts you just the way you are",
-    "author": "Paul Holdorsen"
-  },
-  {
-    "quote": "Ambition is the last refuge of failure",
-    "author": "Oscar Wilde"
-  },
-  {
-    "quote": "Love never dies a natural death. It dies because we don't know how to replenish its source. It dies of blindness and errors and betrayals. It dies of illness and wounds; it dies of weariness, of withering, of tarnishing.",
-    "author": "Anais Nin"
-  },
-  {
-    "quote": "Few people think more than two or three times a year; I have made an international reputation for myself by thinking once or twice a week.",
-    "author": "George Bernard Shaw; \n Irish dramatist & socialist (1856 - 1950)"
-  },
-  {
-    "quote": "It doesn't interest me where or what or with whom you have studied. I want to know what sustains you from the inside when all else falls away. I want to know if you can be alone with yourself and if you truly like the company you keep in the empty moments.",
-    "author": "from ... The Invitation, \n Oriah Mountain Dreamer"
-  },
-  {
-    "quote": "You never really understand a person until you consider things from his point of view... until you climb into his skin and walk around in it.",
-    "author": "Harper Lee, \n To Kill a Mockingbird"
-  },
-  {
-    "quote": "I think there's just one kind of folks. Folks.",
-    "author": "Harper Lee, \n To Kill a Mockingbird"
-  },
-  {
-    "quote": "The Best Things In Life... \n Hot showers on a cold night \n Snow flurries and moonlight \n The smell of freshly washed towels \n Fog over fields and fireflies \n Country storms \n Being home",
-    "author": "Camille Frantz"
-  },
-  {
-    "quote": "Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees..., clouds, bodies of water, light and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And don't bother concealing your thievery - celebrate it if you feel like it. In any case, always remember what Jean-Luc Godard said: 'it's not where you take things from - its where you take them to.'",
-    "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"
-  }
-]

public/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("https://cdn.fyrfli.link/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, '');
-}

public/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("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++;
-    }
-  });

public/style.css

@@ -1,16 +0,0 @@
-  body {
-    width: 80vw;
-    max-width: 500px;
-    margin: auto;
-    padding-top: 4rem;
-    background-color: beige;
-  }
-
-  .display {
-    background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
-    background-attachment: fixed;
-    color: white;
-    font-size: 1.2rem;
-    padding: 2rem;
-    border-radius: 12px;
-  }