From 1b99537a5f8e59f252c71f556678f5e91e55203a Mon Sep 17 00:00:00 2001 From: Jonah Aragon Date: Sun, 21 Jul 2024 14:50:35 +0000 Subject: [PATCH] feat: initial homepage redesign (#2621) Signed-off-by: Daniel Gray --- docs/index.md | 6 ++ includes/strings.en.env | 6 ++ run.sh | 8 +- theme/assets/javascripts/discourse-topics.js | 86 ++++++++++++-------- theme/assets/stylesheets/home.css | 85 +++---------------- theme/home.html | 30 +++---- 6 files changed, 92 insertions(+), 129 deletions(-) diff --git a/docs/index.md b/docs/index.md index 02f7affe..b8b23445 100644 --- a/docs/index.md +++ b/docs/index.md @@ -37,6 +37,8 @@ schema: query-input: required name=search_term_string --- +
+
## 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" } +
+
## 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" } +
+
diff --git a/includes/strings.en.env b/includes/strings.en.env index cdbfa19e..1eaf8074 100644 --- a/includes/strings.en.env +++ b/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" diff --git a/run.sh b/run.sh index 351baed5..e6091d5a 100755 --- a/run.sh +++ b/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" - set -a +fi + +# Source per-language strings +set -a # shellcheck disable=SC1090 source "$PWD/includes/strings.$language.env" - set +a -fi +set +a # Set font if hebrew if [ "$language" == "he" ]; then diff --git a/theme/assets/javascripts/discourse-topics.js b/theme/assets/javascripts/discourse-topics.js index c16ec1b6..1a070aef 100644 --- a/theme/assets/javascripts/discourse-topics.js +++ b/theme/assets/javascripts/discourse-topics.js @@ -1,7 +1,7 @@ /** * @overview Generates a list of topics on a Discourse forum. * @author Jonah Aragon - * @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 = ''; + + 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 author_data = profiles.find(profile => profile['id'] == author_id); - var author = document.createElement('li'); - 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 likesicon = document.createElement('span'); + likesicon.classList = "twemoji pg-red"; + likesicon.innerHTML = ''; - var likes = document.createElement('li'); + var likes = document.createElement('span'); likes.className = "discourse-likes"; - if (list[i]['like_count'] == 1) { - likes.innerText = "1 Like"; - } - else { - likes.innerText = list[i]['like_count'] + " Likes"; - } + likes.innerText = " " + list[i]['like_count'] + " "; + postinfo.appendChild(likesicon); postinfo.appendChild(likes); - var replies = document.createElement('li'); + var replyIcon = document.createElement('span'); + replyIcon.classList = "twemoji"; + replyIcon.innerHTML = ''; + + 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); } diff --git a/theme/assets/stylesheets/home.css b/theme/assets/stylesheets/home.css index d99c7374..f91f1e43 100644 --- a/theme/assets/stylesheets/home.css +++ b/theme/assets/stylesheets/home.css @@ -23,16 +23,13 @@ /* Homepage hero section */ .mdx-container { - background: url("data:image/svg+xml;utf8,") - no-repeat bottom, - linear-gradient(to bottom, rgb(255 255 255/.8), #ffdd98 99%, var(--md-default-bg-color) 99%); + background: #ffdd98; background-size: contain; padding-top: 1rem; + padding-bottom: 1rem; } [data-md-color-scheme="slate"] .mdx-container { - background: url("data:image/svg+xml;utf8,") - no-repeat bottom, rgba(9, 9, 9, 0.95); - background-size: contain; + background: rgba(9, 9, 9, 0.95); } .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; - max-width: 38rem; - padding-bottom: 14vw; + margin-top: 3rem; + margin-bottom: 3rem; + p, h1 { + max-width: 38rem; + } } .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; - } -} diff --git a/theme/home.html b/theme/home.html index 0e4478dd..5194bb1d 100644 --- a/theme/home.html +++ b/theme/home.html @@ -50,21 +50,15 @@ {% endblock %} {% block content %} {% if config.theme.language == "en" %} -
-

Top discussions this week

-
Top discussions this week +
+
    -
- + data-count="6"> + -
{% endif %} {{ page.content }} @@ -82,12 +76,14 @@
{% if config.theme.language == "en" %}
-

Join a discussion

-
+

Latest discussions

+
+
    +