feat: new sorting options

.github/ISSUE_TEMPLATE/-send-your-theme.md

@@ -1,9 +1,9 @@
 ---
-name: "❤ Send Your Theme"
+name: "❤  Send Your Theme"
 about: An easy way to submit your theme if you don't know how to do it via pull request.
 title: "[NEWTHEME] Name of your theme"
 labels: new theme
-assignees: Neikon
+assignees: Neikon, BeyondMagic
 
 ---
 
@@ -12,10 +12,11 @@ Replace the .......... with the corresponding information. Example:
 ```
 {
 		"title": "the best dark theme",
-		"link": "https://github.com/myTheme",
+		"link": "https://github.com/myuser/myTheme",
 		"description": "a dark theme",
-		"image": "https://raw.githubusercontent.com/previewthemepicture.png"
-                "tags": [ "John", "dark", "minimal","oneline", "............." ]
+		"image": "https://raw.githubusercontent.com/previewthemepicture.png",
+		"tags": [ "John", "dark", "minimal","oneline", "............." ],
+		"repository": "https://github.com/myuser/myTheme"
 	}
 ```
 ################# DELETE UNTIL HERE #################
@@ -25,7 +26,8 @@ Replace the .......... with the corresponding information. Example:
 		"title": "..........",
 		"link": "..........",
 		"description": "..........",
-		"image": ".........."
-                "tags": [ "your username/name", "theme type: dark", "theme type: light", "............." ]
+		"image": "..........",
+		"tags": [ "your username/name", "theme type: dark", "theme type: light", "............." ],
+		"repository": ".........."
 }
 ```

README.md

@@ -36,13 +36,15 @@ A collection site of Firefox userchrome themes, mostly from FirefoxCSS Reddit.<b
 
 ---
 
-## Add your theme <3
+## Contribution
+
+### Add your theme <3
 
 + If you have a Github account:
   1. Fork this repository
   2. Look for a file called `themes.json`, open and edit it
   3. Below the last `}` add `,` right after a copy the [code below](#code) and paste it in the file
-  4. Add the properties of your theme: **title**, **link**, **description**, **image** and **tag** (Cannot be left empty)
+  4. Add the properties of your theme: **title**, **link**, **description**, **image**, **tag** (cannot be left empty), and **repository**.
   5. **Avoid the use of escaped characters, and the order matters**
   6. Please, do not use a very big image, preferably (650x500)
   7. Image property:
@@ -54,20 +56,42 @@ A collection site of Firefox userchrome themes, mostly from FirefoxCSS Reddit.<b
   1. When creating an issue, you will find a template for submitting a theme. Use that one. It's easy.
 
 + If you have a Twitter account:
-  1. Send **at least** the following properties: **tags**, **title**, **link**, **description**, and **picture** to [@Neikon66](https://twitter.com/Neikon66). 
+  1. Send **at least** the following properties: **title**, **link**, **description**, **image**, **tags**, and **repository** to [@Neikon66](https://twitter.com/Neikon66). 
 
 ```
   {
     "title": "..........",
     "link": "..........",
     "description": "..........",
     "image": "..........",
-    "tags": [ "your username/name", "theme type: dark", "theme type: light", "............." ]
+    "tags": [ "your username/name", "theme type: dark", "theme type: light", "............." ],
+    "repository": ".........."
   }
 ```
 
 ---
 
+### Contribution: themes information
+
+1. Install [nushell](https://www.nushell.sh/) in your machine.
+2. Generate a [Github token API](https://github.com/settings/tokens) for your account and save it;
+2. Clone the repository;
+3. In your terminal, change directory into the `/scripts/` folder.
+4. Run `nu`.
+5. Run `use sort_themes.nu`;
+6. Run `sort_themes --help` and read and understand the flags;
+7. Run `sort_themes --github YOUR_GITHUB_TOKEN`;
+8. Check if everything ran fine, if yes, replace the new generated `themes.json` file.
+9. Commit your changes.
+10. Open a pull request and send your contribution for us to review.
+11. Thank you :)
+
+**Why generate a token API for only Github?**
+
+Most themes' repositories are in Gitub, so it's pretty easy to hit the anonymous rate limit for API calls. With a token, that limit is higher, making it easier to contribute.
+
+---
+
 <h1 align="center">What do you think =?</h1>
 
 <p align="center">Feel free to send me any feedback via issue or my twitter <a href="https://twitter.com/Neikon66">@Neikon66</a>.</p>

dev/js/main.js

@@ -81,109 +81,134 @@ function createLightbox (id) {
    *  ======================
    */
 
-  document.getElementById('searchInput').addEventListener('keydown', e => {
+	const search = /** @type {HTMLInputElement} */ (document.getElementById('searchInput'))
 
-    if (e.key === "Enter") toggleSortType(false)
+	search.addEventListener('keydown', e => {
+
+	if (e.key === "Enter")
+		sort(localStorage.sort, search.value)
 
   })
 
-  document.getElementById('searchButton').addEventListener('click', () => toggleSortType(false))
+	const search_button = /** @type {HTMLInputElement} */ (document.getElementById('searchButton'))
+	search_button.addEventListener('click', () => sort(localStorage.sort, search.value))
 
   /*  Load Content
    *  ============
    */
 
-  // add our sorting button
-  const sortTrigger = document.getElementById('js-sortSwitcher')
-  sortTrigger.addEventListener('click', () => toggleSortType(true))
-
-  // When localstorage is not set, use "latest" order type
-  if (!localStorage['sort']) localStorage['sort'] = 'latest'
-
-  function repeatToggle (nextType) {
-
-    localStorage['sort'] = nextType
-    return toggleSortType(false)
-
-  }
-
-  function toggleSortType (change) {
-
-    if (document.querySelectorAll('.card'))
-      document.querySelectorAll('.card').forEach(e => e.remove());
-
-    fetch('themes.json')
-    .then(data => data.json())
-    .then(parsedData => {
-
-      const search = document.getElementById('searchInput').value
-
-      if (search) {
-
-        function matches (text, partial) { return text.toLowerCase().indexOf(partial.toLowerCase()) > -1 }
-
-        const parsedAsArray = Object.entries(parsedData)
-        let   searchResults = parsedAsArray.filter(element => matches(`${element[1].title}, ${element[1].tags}`, search))
-
-        searchResults.forEach(result => {
-
-          const card = new Card(result[1], +result[0])
-          card.render(outputContainer)
-
-        })
-
-        sortTrigger.title = `"${search}"`
-
-        return 
-
-      }
-
-      switch (localStorage['sort']) {
-
-        // sort from the oldest theme added
-        case 'latest':
-          if (change) return repeatToggle('random')
-          parsedData.reverse()
-          break;
-
-        // sort randomly
-        case 'random':
-          if (change) return repeatToggle('oldest')
-          for (let i = parsedData.length - 1; i > 0; i--) {
-
-            const j = Math.floor(Math.random() * (i + 1));
-            [parsedData[i], parsedData[j]] = [parsedData[j], parsedData[i]]
-
-          }
-          break;
-
-        // sort from the most recent theme added
-        default:
-          if (change) return repeatToggle('latest');
-
-      }
-
-      // TODO: make a better way to preview the current sorting
-      sortTrigger.title = localStorage['sort']
-
-      parsedData.forEach((entry, index)  => {
-
-        const card = new Card (entry, index)
-        card.render(outputContainer)
+	/*
+	 * If sorting is not set yet in `localStorage`,
+	 * then use as default `latest` kind.
+	 */
+	if (!localStorage.sort)
+		localStorage.sort = 'latest'
+
+	/*
+	 * Add event to sort when an option is chosen..
+	 */
+	const sort_menu = /** @type {HTMLSelectElement} */ (document.getElementById('js-sort-menu'))
+	sort_menu.addEventListener('change', () => {
+		const name = /** @type {string} */ (sort_menu.selectedOptions[0].getAttribute('name'))
+		sort(name)
+	})
+
+	sort(localStorage.sort)
+	const current_option = sort_menu.options.namedItem(localStorage.sort)
+	if (current_option)
+		current_option.selected = true
+
+	/**
+	 * Toggle the sorting type of the themes.
+	 *
+	 * @param {string} kind How to sort the themes.
+	 * @param {string=} filter Term to filter the themes.
+	 **/
+	function sort (kind, filter) {
+
+		localStorage.sort = kind
+
+		// Remove all themes cards from the page.
+		const cards_container = document.getElementById('themes_container')
+		if (cards_container)
+			cards_container.innerHTML = ''
+
+		fetch('themes.json')
+			.then(data => data.json())
+			.then(async data => {
+
+				data = Object.entries(data)
+
+				if (filter) {
+
+					/**
+					 * Match any substring (partial) from a string (text).
+					 * @param {string} text
+					 * @param {string} partial
+					 */
+					function matches (text, partial) {
+						return text.toLowerCase().indexOf(partial.toLowerCase()) > -1
+					}
+
+					data = data.filter(element => matches(`${element[1].title}, ${element[1].tags}`, search.value))
+
+				}
+
+				switch (localStorage.sort) {
+
+					/*
+					 * Sort from the most recent theme added.
+					 */
+					case 'latest':
+						data.reverse()
+					break
+
+					/*
+					 * Ascending sorting of stars from repositories.
+					 */
+					case 'updated':
+						// item1.attr.localeCompare(item2.attr);
+						data.sort((a, b) => b[1].pushed_at.localeCompare(a[1].pushed_at))
+					break
+
+					/*
+					 * Ascending sorting of stars from repositories.
+					 */
+					case 'stars':
+						data.sort((a, b) => b[1].stargazers_count - a[1].stargazers_count)
+					break
+
+					/*
+					 * Randomly sorting of themes.
+					 */
+					case 'random':
+						for (let i = data.length - 1; i > 0; i--) {
+							const j = Math.floor(Math.random() * (i + 1));
+							[data[i], data[j]] = [data[j], data[i]]
+						}
+					break
+
+					/*
+					 * Sort from the least recent theme added (oldest).
+					 * Since it's sorted like this by default from the file, do nothing.
+					 */
+					default:
+
+				}
+
+				for (const [index, entry] of data)
+				{
+					const card = new Card(entry, index)
+					card.render(outputContainer)
+					await new Promise(r => setTimeout(r, 666));
+				}
+
+			})
+}
 
-      })
-
-    })
-  }
-
   // add themes
   const outputContainer = document.getElementById('themes_container')
 
-  if (outputContainer) toggleSortType(false);
-
-
-
-
   /*  Theme Handling
    *  ==============
    */

dev/pug/disclaimer.pug

@@ -1,5 +1,13 @@
 extends layout/default
 
+block header
+  header#main_header
+    h3.header-branding FirefoxCSS Store
+
+    nav#main_nav
+      a(href='index.html') Theme List
+      a#js-themeSwitcher(href='#')
+        i.fas.fa-moon
 
 block content
 

dev/pug/includes/header.pug

@@ -5,8 +5,12 @@ header#main_header
       a(href='index.html') Theme List
       a#js-themeSwitcher(href='#')
         i.fas.fa-moon
-      a#js-sortSwitcher(href='#')
-        i.fas.fa-sort
+      select#js-sort-menu
+        option(name='updated') Updated
+        option(name='stars') Stars
+        option(name='latest') Latest
+        option(name='oldest') Oldest
+        option(name='random') Random
       div.searchform(method='get')
         .inputgroup
           input.searchinput#searchInput(type='text', placeholder='Search')

dev/pug/layout/default.pug

@@ -25,4 +25,4 @@ html
       include ../includes/footer
 
     script(src='assets/js/main.js')
-    script(src='https://kit.fontawesome.com/1c8bd05656.js' crossorigin='anonymous')
+    script(src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/all.min.js' type="text/javascript")

dev/scss/base/_typography.scss

@@ -13,7 +13,6 @@ body {
 }
 
 
-
 a {
 
   text-decoration: none;
@@ -25,6 +24,7 @@ a {
   &:hover { color: var(--linkc-hover) }
   &:focus { outline: var(--focus-thickness) solid var(--focus-colour); }
 
+
 }