Git-Mirrors/privacyguides.org
1
0
Fork 0
mirror of https://github.com/privacyguides/privacyguides.org.git synced 2024-09-07 18:11:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: initial homepage redesign (#2621)

Browse Source 
Signed-off-by: Daniel Gray <dngray@privacyguides.org>
This commit is contained in:
Jonah Aragon 2024-07-21 14:50:35 +00:00 committed by Daniel Gray
parent 0d3f4681e0
commit 1b99537a5f
No known key found for this signature in database
GPG Key ID: 41911F722B0F9AE3
6 changed files with 92 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/index.md
View File

@ -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>

6
includes/strings.en.env
View File

@ -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"

8
run.sh
View File

@ -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

86
theme/assets/javascripts/discourse-topics.js
View File

@ -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 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 = '<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>';
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 = '<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);
}

85
theme/assets/stylesheets/home.css
View File

@ -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>")
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,<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>")
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;
}
}

30
theme/home.html
View File

@ -50,21 +50,15 @@
{% endblock %}
{% block content %}
{% if config.theme.language == "en" %}
<div class="mdx-discourse-topics">
<h2>Top discussions this week</h2>
<div
<h2>Top discussions this week</h2>
<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">
</div>
<noscript>
<a href="https://discuss.privacyguides.net/" class="md-button md-button--primary">
Join the forum
</a>
</noscript>
data-count="6">
</ul>
<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>
<div
class="topics-list"
data-forum="https://discuss.privacyguides.net"
data-feed="https://discuss.privacyguides.net/latest.json"
data-count="15">
<h3>Latest discussions</h3>
<div class="grid cards">
<ul
class="topics-list"
data-forum="https://discuss.privacyguides.net"
data-feed="https://discuss.privacyguides.net/latest.json"
data-count="12">
</ul>
</div>
<noscript>
<a href="https://discuss.privacyguides.net/" class="md-button md-button--primary">