Merge branch 'torproject:main' into master

boldsuck · Mar 16, 2024 · a64d170 · a64d170
2 parents cc101d7 + b937bf5
commit a64d170
Show file tree

Hide file tree

Showing 182 changed files with 3,983 additions and 834 deletions.
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -1,6 +1,6 @@
 ---
 variables:
-  LEKTOR_BUILD_FLAGS: scss
+  LEKTOR_BUILD_FLAGS: scss generate-cw-fractions
   SITE_URL: community.torproject.org
   STAGING_URL: community.staging.torproject.net
   TRANSLATION_BRANCH: communitytpo-contentspot
@@ -9,4 +9,16 @@ include:
   - project: tpo/tpa/ci-templates
     file:
       - lektor.yml
-      - static-shim-deploy.yml
+      - static-shim-deploy.yml
+
+# retrieve latest tpo/community/policies build artifact
+# and place files under public/policies such that they
+# are deployed to community.tpo/policies
+.lektor:
+  scripts:
+    post-build:
+      - mkdir public/policies
+      - wget -q https://gitlab.torproject.org/api/v4/projects/1972/jobs/artifacts/main/download\?job\=build -O policies.zip
+      - unzip policies.zip -d public/policies
+      - mv public/policies/public/* public/policies
+      - rmdir public/policies/public
diff --git a/.gitlab/route-map.yml b/.gitlab/route-map.yml
@@ -33,6 +33,9 @@
 - source: 'templates/outreach-talk.html'
   public: '/outreach/talk/index.html'
 
+- source: 'templates/outreach-stories.html'
+  public: '/outreach/stories/index.html'
+
 - source: 'templates/relay-associations.html'
   public: '/relay/community-resources/relay-associations/index.html'
 

diff --git a/README.md b/README.md
@@ -28,43 +28,61 @@ You can click ```Edit this page``` and submit your content changes in a [Pull Re
 
 ### (Advanced) Compiling a local version of the website
 
-1. Download and install Lektor: https://www.getlektor.com/downloads/
+See this guide on our wiki: https://gitlab.torproject.org/tpo/web/team/-/wikis/documentation/Compiling-a-local-version-of-the-website
 
-2. Install the lektor-i18n plugin and its [dependencies](https://github.com/numericube/lektor-i18n-plugin#prerequisites).
-
-3. Clone the repository:
+### Translations
 
-```git clone https://gitlab.torproject.org/tpo/web/community.git```
+To help us to translate, please join the [Tor Project team](https://hosted.weblate.org/projects/tor/) on Weblate.
 
-4. Init the building blocks submodule: 
+### Getting help
 
-```$ cd community/lego && git submodule update --init --recursive```
+If you want to contribute to the Community portal, we will be happy to help you. Join us at #tor-www in [irc.oftc.net](https://www.oftc.net).
 
-5. Translations for the website are imported by Jenkins when building the page, but if you want to test them, download the correct branch of the translations repo to the ./i18n/ folder.
+### Section-specific instructions
 
-6. Finally:
+Instructions for maintaining specific sections of the website.
 
-To run a local continuous builder: ```$ lektor server```
+#### Adding user stories
 
-To just build the website once: ```$ lektor build -O <folder>```
+User stories are located under `content/outreach/stories`.
 
-#### How to develop on the website
+To add a new user story, add a new directory with the story's pseudonymous name. In that directory two files are required, `portrait.png` and `contents.lr` containing the story text.
 
-Check our [wiki pages](https://gitlab.torproject.org/tpo/web/wiki/-/wikis/How-to-develop-on-the-website).
+For the portrait, generate one manually from the [CC0](https://creativecommons.org/public-domain/cc0/) [OpenPeeps illustration library](https://www.openpeeps.com/). It should be resized to a 220px-sided square. A portrait from another story may also be re-used.
 
-### Translations
+For the story content, the `contents.lr` file should be formatted as follows:
 
-To help us to translate, please join the Tor Project team in [Transifex](https://www.transifex.com/).
+```
+---
+_model: story
+---
+html: outreach-story.html
+---
+section: Stories
+---
+section_id: stories
+---
+title: <title>
+---
+category:
 
-### Getting help
+<category>
+---
+summary: <summary>
+---
+body:
 
-If you want to contribute to the Community portal, we will be happy to help you. Join us at #tor-www in [irc.oftc.net](https://www.oftc.net).
+<body>
+```
 
-### The community-generator plugin
+Replace the placeholders as follows:
 
-This lektor site uses a special plugin called `community-generator`, you can find it in the `packages` directory. This plugin generates a special set of lektor contents files used for a js-free filtering system on the training resources page.
+ - `<title>`: Capitalized pseudonymn for this story
+ - `category`: one or more of `activism`, `anti-censorship`, `civic-participation`, `encryption`, `freedom-of-information`, `healthcare`, `lgbtqia`, `online-safety`, `preace-of-mind`, `press-freedom`, `privacy` (as defined in `databags/story-categories.ini`), one category per line
+ - `<summary>`: text shown on the index page below the portrait (one or two short phrases)
+ - `<body>`: full story content (the first paragraph will be automatically "featured")
 
-You shouldn't need to do anything or know anything about this plugin in order to use it. If you want to develop on this plugin, see the plugin's [README](packages/community-generator/README.md).
+These steps can be done directly in the GitLab Web IDE: simply create a new branch, enter the editor environment, create the directory, add/edit the needed files and finally, create and push a new commit. GitLab will then offer the option to create a merge request. Once the MR is created, a "review app" will be deployed allowing to preview the changes.
 
 #### Adding training guides for training resources
 
@@ -120,3 +138,11 @@ pdf_link: link to the pdf guide
 ----
 odp_link: link to the odp guide
 ```
+
+## Design
+
+### The community-generator plugin
+
+This lektor site uses a special plugin called `community-generator`, you can find it in the `packages` directory. This plugin generates a special set of lektor contents files used for a js-free filtering system on the training resources page.
+
+You shouldn't need to do anything or know anything about this plugin in order to use it. If you want to develop on this plugin, see the plugin's [README](packages/community-generator/README.md).
diff --git a/assets/.htaccess b/assets/.htaccess
@@ -19,5 +19,5 @@ RewriteRule ^ga-IE/(.*) /ga$1 [R=302,L]
 # but don't have a community page
 # You can see them at https://dist.torproject.org/torbrowser/, pick the last alpha for the most languages
 # this languages are the translation priority for the community portal!
-RewriteRule ^(ar|ca|cs|da|de|el|fa|fr|ga|ga-IE|he|hu|id|is|it|ja|ka|ko|lt|mk|ms|nb-NO|nl|pl|pt-BR|pt-PT|ro|sq|sv-SE|th|uk|vi|zh-CN|zh-TW)$ / [R=302,L]
-RewriteRule ^(ar|ca|cs|da|de|el|fa|fr|ga|ga-IE|he|hu|id|is|it|ja|ka|ko|lt|mk|ms|nb-NO|nl|pl|pt-BR|pt-PT|ro|sq|sv-SE|th|uk|vi|zh-CN|zh-TW)/(.*) /$2 [R=302,L]
+RewriteRule ^(ar|ca|cs|da|el|ga|ga-IE|he|hu|id|is|it|ja|ka|ko|lt|mk|ms|nb-NO|nl|pl|pt-BR|pt-PT|sq|sv-SE|th|uk|vi|zh-CN|zh-TW)$ / [R=302,L]
+RewriteRule ^(ar|ca|cs|da|el|ga|ga-IE|he|hu|id|is|it|ja|ka|ko|lt|mk|ms|nb-NO|nl|pl|pt-BR|pt-PT|sq|sv-SE|th|uk|vi|zh-CN|zh-TW)/(.*) /$2 [R=302,L]
diff --git a/assets/scss/_community.scss b/assets/scss/_community.scss
@@ -100,3 +100,106 @@ div.resource-table > div.row:not(:last-child) {
         }
     }
 }
+
+/* offset anchors to account for hovering navbar */
+a.anchor {
+    display: block;
+    position: relative;
+    top: -3.5rem;
+    visibility: hidden;
+}
+
+/* style titles with pop-up anchor */
+.anchored-title a {
+    color: #000;
+}
+.anchored-title a:hover {
+    text-decoration: none;
+}
+
+.anchored-title .fa-link {
+    visibility: hidden;
+    font-size: 1rem;
+    color: #aaa;
+    vertical-align: 0.2rem;
+}
+
+.anchored-title:hover .fa-link {
+   visibility: visible;
+}
+
+/* style user stories cards */
+.story-cards {
+    .row {
+        overflow: auto;
+    }
+    .col {
+        max-width: 360px;
+    }
+    img {
+        display: block;
+    }
+    .card-title {
+        font-size: 1.8rem;
+        margin: 0.8em 0;
+    }
+    .card-text:before {
+        content: '\201C';
+        position: absolute;
+        left: 0.15em;
+        margin-top: 0.05em;
+        color: #ccc;
+        font-size: 3em;
+        line-height: 0.8em;
+	}
+    .card-text p {
+        font-size: 1.2rem;
+    }
+}
+
+/* style user story pages */
+#story-full {
+    > p:first-child {
+        font-size: 1.6rem;
+        line-height: 2.5rem;
+    }
+    > p:first-child:before {
+        content: '\201C';
+        position: absolute;
+        left: -0.25em;
+        color: #ccc;
+        font-size: 2.5em;
+        line-height: 0.6em;
+    }
+}
+
+#share-story-links {
+    a {
+        font-size: 1.1rem;
+        white-space: nowrap;
+    }
+    .fab, .fas {
+        font-size: 1.3rem;
+        padding-right: 0.5rem;
+    }
+    span {
+        display: none;
+    }
+}
+
+img.story-portrait {
+    max-width: 220px;
+}
+
+@include media-breakpoint-up(lg) {
+    #share-story-links {
+        span {
+            display: inline;
+        }
+        a {
+            width: 100% !important;
+            margin: 0 1rem;
+        }
+    }
+}
+
diff --git a/assets/scss/bootstrap.scss b/assets/scss/bootstrap.scss
@@ -48,7 +48,7 @@
 @import "portal";
 @import "tpo";
 @import "tor";
-//@import "eoy";
+@import "eoy";
 @import "donate";
 @import "cryptocurrency";
 @import "bridgedb";

diff --git a/assets/static/images/circle-pattern.png b/assets/static/images/circle-pattern.png
diff --git a/assets/static/images/circle-pattern.png b/assets/static/images/circle-pattern.png
@@ -0,0 +1 @@
+../../../lego/assets/static/images/circle-pattern.png