feat: initial homepage redesign (#2621)

Signed-off-by: Daniel Gray <dngray@privacyguides.org>

docs/index.md

@@ -37,6 +37,8 @@ schema:
       query-input: required name=search_term_string
 ---
 <!-- markdownlint-disable -->
+<div class="grid" markdown>
+<div markdown>
 ## Why should I care?
 
 ##### “I have nothing to hide. Why should I care about my privacy?”
@@ -46,7 +48,9 @@ Much like the right to interracial marriage, woman's suffrage, freedom of speech
 You shouldn't confuse privacy with secrecy. We know what happens in the bathroom, but you still close the door. That's because you want privacy, not secrecy. **Everyone** has something to protect. Privacy is something that makes us human.
 
 [:material-book-outline: Why Privacy Matters](basics/why-privacy-matters.md){ class="md-button md-button--primary" }
+</div>
 
+<div markdown>
 ## What should I do?
 
 ##### First, you need to make a plan
@@ -56,3 +60,5 @@ Trying to protect all your data from everyone all the time is impractical, expen
 ==This process of identifying threats and defining countermeasures is called **threat modeling**==, and it forms the basis of every good security and privacy plan.
 
 [:material-book-outline: Learn More About Threat Modeling](basics/threat-modeling.md){ class="md-button md-button--primary" }
+</div>
+</div>

includes/strings.en.env

@@ -17,6 +17,12 @@ HOMEPAGE_RSS_STORIES_LINK="https://share.privacyguides.org/web-stories/feed/"
 HOMEPAGE_RSS_STORIES_TITLE="Privacy Guides web stories feed"
 HOMEPAGE_RSS_FORUM_LINK="https://discuss.privacyguides.net/latest.rss"
 HOMEPAGE_RSS_FORUM_TITLE="Latest Privacy Guides forum topics"
+HOMEPAGE_HEADER="The collaborative privacy advocacy community."
+HOMEPAGE_SUBHEADER="Privacy Guides is a not-for-profit, volunteer-run project that hosts online communities and publishes news and recommendations surrounding privacy and security tools, services, and knowledge."
+HOMEPAGE_BUTTON_GET_STARTED_NAME="Start Your Privacy Journey"
+HOMEPAGE_BUTTON_GET_STARTED_TITLE="The first step of your privacy journey"
+HOMEPAGE_BUTTON_TOOLS_NAME="Recommended Tools"
+HOMEPAGE_BUTTON_TOOLS_TITLE="Recommended privacy tools, services, and knowledge"
 NAV_ABOUT="About"
 NAV_ADVANCED="Advanced"
 NAV_ADVANCED_TOPICS="Advanced Topics"

run.sh

@@ -86,11 +86,13 @@ if [ "$language" != "en" ]; then
   export BUILD_SITE_DIR="site/$language"
   export BUILD_SITE_URL="https://privacyguides.org/$language"
   export BUILD_THEME_LANGUAGE="$language"
+fi
+
+# Source per-language strings
 set -a
   # shellcheck disable=SC1090
   source "$PWD/includes/strings.$language.env"
 set +a
-fi
 
 # Set font if hebrew
 if [ "$language" == "he" ]; then

theme/assets/javascripts/discourse-topics.js

@@ -1,7 +1,7 @@
 /**
  * @overview Generates a list of topics on a Discourse forum.
  * @author Jonah Aragon <jonah@triplebit.net>
- * @version 3.0.0
+ * @version 3.1.0
  * @license
  * Copyright (c) 2023 - 2024 Jonah Aragon
  *
@@ -30,7 +30,7 @@ async function getData(url) {
 }
 
 async function main() {
-  const elements = document.querySelectorAll("div[data-forum]");
+  const elements = document.querySelectorAll("ul[data-forum]");
 
   for (let j = 0; j < elements.length; j++) {
 
@@ -53,7 +53,7 @@ async function main() {
       var title = list[i]['title'];
       var id = list[i]['id'];
 
-      var topic = document.createElement("div");
+      var topic = document.createElement("li");
       topic.className = "discourse-topic";
 
       var h3 = document.createElement('p');
@@ -62,13 +62,37 @@ async function main() {
 
       a1.href = dataset.forum + '/t/' + id;
 
-      a1.innerText = title;
+      var boldTitle = document.createElement('strong');
+      boldTitle.innerText = title;
+      a1.appendChild(boldTitle);
       h3.appendChild(a1);
 
-      var postinfo = document.createElement('ul');
+      var authorinfo = document.createElement('p');
+      authorinfo.className = "discourse-author";
+
+      var author_id = list[i]['posters'][0]['user_id'];
+      var author_data = profiles.find(profile => profile['id'] == author_id);
+      var author = document.createElement('span');
+      author.className = "discourse-author";
+      var avatar = document.createElement('img');
+      avatar.src = dataset.forum + author_data['avatar_template'].replace("{size}", "40");
+      avatar.width = 20;
+      avatar.height = 20;
+      avatar.className = "middle";
+      author.appendChild(avatar);
+      var namespan = document.createElement('span');
+      namespan.innerText = " Posted by " + author_data['username'];
+      author.appendChild(namespan);
+      authorinfo.appendChild(author);
+
+      var postinfo = document.createElement('p');
       postinfo.className = "discourse-data";
 
-      var date = document.createElement('li');
+      var dateIcon = document.createElement('span');
+      dateIcon.className = "twemoji";
+      dateIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1-2.1-2M12.5 7v5.2l4 2.4-1 1L11 13V7h1.5M11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2v1.8Z"></path></svg>';
+
+      var date = document.createElement('span');
       date.className = "discourse-date";
       var datestring = list[i]['bumped_at'];
       var dateobject = new Date(datestring);
@@ -79,55 +103,46 @@ async function main() {
       var days = Math.floor(hours / 24);
       if (days > 0) {
         if (days == 1) {
-          date.innerText = "Last reply 1 day ago";
+          date.innerText = " 1 day ago ";
         }
         else {
-          date.innerText = "Last reply " + days + " days ago";
+          date.innerText = " " + days + " days ago ";
         }
       }
       else if (hours > 0){
         if (hours == 1) {
-          date.innerText = "Last reply 1 hour ago";
+          date.innerText = " 1 hour ago ";
         }
         else {
-          date.innerText = "Last reply "+  hours + " hours ago";
+          date.innerText = " " + hours + " hours ago ";
         }
       }
       else {
         if (minutes == 1) {
-          date.innerText = "Last reply 1 minute ago";
+          date.innerText = " 1 minute ago ";
         }
         else {
-          date.innerText = "Last reply " + minutes + " minutes ago";
+          date.innerText = " " + minutes + " minutes ago ";
         }
       }
+      postinfo.appendChild(dateIcon);
       postinfo.appendChild(date);
 
-      var author_id = list[i]['posters'][0]['user_id'];
+      var likesicon = document.createElement('span');
-      var author_data = profiles.find(profile => profile['id'] == author_id);
+      likesicon.classList = "twemoji pg-red";
-      var author = document.createElement('li');
+      likesicon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.27 2 8.5 2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53L12 21.35Z"></path></svg>';
-      author.className = "discourse-author";
-      var avatar = document.createElement('img');
-      avatar.src = dataset.forum + author_data['avatar_template'].replace("{size}", "40");
-      avatar.width = 20;
-      avatar.height = 20;
-      author.appendChild(avatar);
-      var namespan = document.createElement('span');
-      namespan.innerText = " " + author_data['username'];
-      author.appendChild(namespan);
-      postinfo.appendChild(author);
 
-      var likes = document.createElement('li');
+      var likes = document.createElement('span');
       likes.className = "discourse-likes";
-      if (list[i]['like_count'] == 1) {
+      likes.innerText = " " + list[i]['like_count'] + " ";
-        likes.innerText = "1 Like";
+      postinfo.appendChild(likesicon);
-      }
-      else {
-        likes.innerText = list[i]['like_count'] + " Likes";
-      }
       postinfo.appendChild(likes);
 
-      var replies = document.createElement('li');
+      var replyIcon = document.createElement('span');
+      replyIcon.classList = "twemoji";
+      replyIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11Z"></path></svg>';
+
+      var replies = document.createElement('span');
       replies.className = "discourse-replies";
 
       var reply_count = list[i]['posts_count'] - 1;
@@ -135,11 +150,14 @@ async function main() {
         replies.innerText = "1 Reply"
       }
       else {
-        replies.innerText = reply_count + " Replies"
+        replies.innerText = " " + reply_count
       }
+      postinfo.appendChild(replyIcon);
       postinfo.appendChild(replies);
 
       topic.appendChild(h3);
+      topic.appendChild(document.createElement('hr'));
+      topic.appendChild(authorinfo);
       topic.appendChild(postinfo);
       topics.appendChild(topic);
     }

theme/assets/stylesheets/home.css

@@ -23,16 +23,13 @@
 
 /* Homepage hero section */
 .mdx-container {
-    background: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' viewBox='0 0 1123 258' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g transform='matrix(-1.01432,0,0,0.388868,1134.41,161.501)'><path d='M1124,2L1124,258L-1,258L-1,210C-1,210 15,215 54,215C170,215 251,123 379,123C500,123 493,169 633,169C773,169 847,2 1205,3L1124,2Z' style='fill:rgb(247, 247, 252);fill-rule:nonzero;'/></g></svg>")
+    background: #ffdd98;
-            no-repeat bottom,
-        linear-gradient(to bottom, rgb(255 255 255/.8), #ffdd98 99%, var(--md-default-bg-color) 99%);
     background-size: contain;
     padding-top: 1rem;
+    padding-bottom: 1rem;
 }
 [data-md-color-scheme="slate"] .mdx-container {
-    background: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' viewBox='0 0 1123 258' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g transform='matrix(-1.01432,0,0,0.388868,1134.41,161.501)'><path d='M1124,2L1124,258L-1,258L-1,210C-1,210 15,215 54,215C170,215 251,123 379,123C500,123 493,169 633,169C773,169 847,2 1205,3L1124,2Z' style='fill:rgb(26, 26, 27);fill-rule:nonzero;'/></g></svg>")
+    background: rgba(9, 9, 9, 0.95);
-            no-repeat bottom, rgba(9, 9, 9, 0.95);
-        background-size: contain;
 }
 
 .mdx-hero {
@@ -49,18 +46,17 @@
         font-size: 1.4rem;
     }
 }
-.mdx-hero__content {
-    padding-bottom: 6rem;
-}
 @media screen and (min-width: 60em) {
     .mdx-hero {
         align-items: stretch;
         display: flex;
     }
     .mdx-hero__content {
-        margin-top: 3.5rem;
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+        p, h1 {
           max-width: 38rem;
-        padding-bottom: 14vw;
+        }
     }
     .mdx-hero__image {
         order: 1;
@@ -95,7 +91,7 @@ nav[class="md-tabs"] {
 .md-typeset a.headerlink {
     display: none;
 }
-article.md-content__inner {
+/* article.md-content__inner {
     max-width: 50rem;
     margin: auto;
     padding-bottom: 3rem;
@@ -108,20 +104,12 @@ article.md-content__inner {
 }
 article.md-content__inner > * {
     max-width: 38rem;
-}
+} */
 /* article.md-content__inner > *:nth-child(n+8):nth-child(-n+12) {
     margin-left: auto;
     margin-right: 0;
     text-align: right;
 } */
-#what-should-i-do, #what-should-i-do ~ :not( .mdx-cat ~ * ):not( .mdx-cta ):not( .mdx-discourse-topics) {
-  margin-left: auto;
-  margin-right: 0;
-  text-align: right;
-}
-article.md-content__inner > hr {
-    margin: 3rem;
-}
 .pg-end-right-align, .mdx-cta {
     margin-left: auto;
     margin-right: auto;
@@ -134,56 +122,3 @@ article.md-content__inner > hr {
     --md-icon-size: 1.8em;
     margin: 0.4rem;
 }
-
-.mdx-discourse-topics {
-  max-width: 100% !important;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-.mdx-discourse-topics .topics-list {
-  grid-template-columns: repeat(5, 1fr);
-}
-.mdx-discourse-topics .discourse-title {
-  min-height: 4em;
-}
-.mdx-discourse-topics .topics-list {
-  display: grid;
-  text-align: left;
-}
-.mdx-discourse-topics .topics-list .discourse-title {
-  line-height: 1.2;
-  margin: 0;
-}
-.mdx-discourse-topics .topics-list .discourse-topic {
-  padding: 0.4em;
-  margin-bottom: 1em;
-}
-.mdx-discourse-topics .topics-list .discourse-data {
-  color: var(--md-default-fg-color--light);
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.mdx-discourse-topics .topics-list .discourse-data li {
-  margin: 0;
-}
-.mdx-discourse-topics .topics-list .discourse-data li img {
-  vertical-align: middle;
-}
-@media screen and (max-width: 1000px) {
-  .mdx-discourse-topics .topics-list {
-    grid-template-columns: repeat(3, 1fr);
- }
-  .mdx-discourse-topics .topics-list .discourse-title {
-    min-height: 0;
- }
-}
-@media screen and (max-width: 600px) {
-  .mdx-discourse-topics .topics-list {
-    grid-template-columns: repeat(1, 1fr);
- }
-  .mdx-discourse-topics .topics-list .discourse-title {
-    min-height: 0;
- }
-}

theme/home.html

@@ -50,21 +50,15 @@
 {% endblock %}
 {% block content %}
   {% if config.theme.language == "en" %}
-    <div class="mdx-discourse-topics">
     <h2>Top discussions this week</h2>
-      <div
+    <div class="grid cards">
+      <ul
         class="topics-list"
         data-forum="https://discuss.privacyguides.net"
         data-feed="https://discuss.privacyguides.net/top.json?period=weekly"
-        data-count="5">
+        data-count="6">
-      </div>
+      </ul>
-      <noscript>
-        <a href="https://discuss.privacyguides.net/" class="md-button md-button--primary">
-          Join the forum
-        </a>
-      </noscript>
 
-      <hr />
     </div>
   {% endif %}
   {{ page.content }}
@@ -82,12 +76,14 @@
   </div>
   {% if config.theme.language == "en" %}
     <div class="mdx-discourse-topics">
-      <h3>Join a discussion</h3>
+      <h3>Latest discussions</h3>
-      <div
+      <div class="grid cards">
+        <ul
           class="topics-list"
           data-forum="https://discuss.privacyguides.net"
           data-feed="https://discuss.privacyguides.net/latest.json"
-        data-count="15">
+          data-count="12">
+        </ul>
       </div>
       <noscript>
         <a href="https://discuss.privacyguides.net/" class="md-button md-button--primary">