#288 #310 update of l10n strings, style guide for l10n and privacy up…

…date

CONTRIBUTING.md

@@ -37,7 +37,7 @@ Thank you for your interest in contributing to activist.org! We look forward to
   - activist would suggest that you use the [Element](https://element.io/) client
   - The [General](https://matrix.to/#/!uIGQUxlCnEzrPiRsRw:matrix.org?via=matrix.org&via=effektio.org&via=acter.global) and [Development](https://matrix.to/#/!CRgLpGeOBNwxYCtqmK:matrix.org?via=matrix.org&via=acter.global&via=chat.0x7cd.xyz) channels would be great places to start!
   - Feel free to introduce yourself and tell us what your interests are if you're comfortable :)
-- Read through this contributing guide and the [styleguide](https://github.com/activist-org/activist/blob/main/STYLEGUIDE.md) for all the information you need to contribute
+- Read through this contributing guide and the [style guide](https://github.com/activist-org/activist/blob/main/STYLEGUIDE.md) for all the information you need to contribute
 - Look into issues marked [`good first issue`](https://github.com/activist-org/activist/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) and the [Projects board](https://github.com/orgs/activist-org/projects/1) to get a better understanding of what you can work on
 - Check out our [public designs on Figma](https://www.figma.com/file/I9McFfaLu1RiiWp5IP3YjE/activist_public_designs?type=design&node-id=10%3A18&mode=design&t=tdQyOtl5lU1n7oLN-1) to understand activist's goals and direction
 - Consider joining our [bi-weekly developers sync](https://etherpad.wikimedia.org/p/activist-dev-sync)!
@@ -248,7 +248,9 @@ Thank you in advance for your contributions!
 
 ## Localization [`⇧`](#contents)
 
-Those interested in contributing to localization for the app are welcome to check related issues using the [`localization`](https://github.com/activist-org/activist/issues?q=is%3Aopen+is%3Aissue+label%3Alocalization) label in the [issues](https://github.com/activist-org/activist/issues).
+Localization for activist happens within our [public localization project on Transifex](https://explore.transifex.com/activist-org/activist). Join us there if you'd like to help bring activist to other languages!
+
+To find issues related to localization, please see the [`localization`](https://github.com/activist-org/activist/issues?q=is%3Aopen+is%3Aissue+label%3Alocalization) label in the [issues](https://github.com/activist-org/activist/issues), and to report a localization issue use the [localization issue form](https://github.com/activist-org/activist/issues/new?assignees=&labels=localization&projects=activist-org%2F1&template=localization.yml). Please also see the [style guide](https://github.com/activist-org/activist/blob/main/STYLEGUIDE.md) for more information on how to create new localization keys.
 
 <a id="documentation"></a>
 

PRIVACY.txt

@@ -1,4 +1,6 @@
-Effective Date: 11th of April, 2023
+Privacy Policy
+
+Last updated August 28th, 2023
 
 Introduction
 
@@ -9,69 +11,61 @@ information.
 
 By using activist.org, you agree to the provisions of this Privacy Policy.
 Our primary goal is to provide a platform that allows users to engage in
-activism without compromising their privacy. We have implemented various
-measures to ensure the privacy and security of our users. If you have any
-questions or concerns, please contact us.
+activism without compromising their safety. We have and will continue to
+implement various measures to ensure the privacy and security of our users.
+If you have any questions or concerns, please contact us at
+security[at]activist.org.
 
-Information We Collect
+We encourage users to contribute to activist.org and participate in discussions
+about privacy, security, and other important topics. By engaging with our
+community, you can help shape the future of activist.org and ensure that it
+remains a safe, inclusive, and empowering platform for all.
 
-activist.org does not collect any personal information from our users at
-this time. We do not collect data such as names, email addresses, phone
-numbers, or any other information that can be used to identify you personally.
-Our platform is designed to provide a safe and private environment for
-activism and collaboration.
+Information We Collect
 
-As an open-source platform, we prioritize transparency and user control.
-We encourage users to contribute to activist.org and share their ideas,
-questions, and concerns. We also strive to provide a platform that fosters
-inclusivity and support for all users, regardless of their background.
+activist.org uses Plausible Analytics for non-identifiable tracking of the
+regions from which people visit. The platform does not collect any personally
+identifiable information from our users at this time. In the future we will
+collect user generated usernames that could be used to identify individuals as
+well as email addresses of some users. We will do our best to provide options for
+people to use the platform without providing personally identifiable
+information wherever possible.
 
 How We Use Information
 
-As we do not collect personal information, we do not use any such
-information for any purpose. Our goal is to provide a platform that
-allows users to engage in activism without compromising their privacy.
-
-We aim to foster a sense of community and collaboration among users,
-allowing them to connect with like-minded individuals and organizations.
-We also work to provide resources and tools that enable users to learn
-about and engage with important social, political, and environmental
-issues.
+We use the anonymous location data we collect from Plausible Analytics
+to get a better idea of where there's interest in the platform. As we do not
+collect personal information at this time, we do not use any such information
+for any purpose.
 
 Data Sharing and Third-Party Services
 
-We do not share your personal information with any third parties, nor do
-we use any third-party services that collect or process personal
-information. activist.org is dedicated to ensuring the privacy of our
-users and maintaining a secure platform.
-
-As an open-source platform, we collaborate with various organizations and
-individuals who share our values and goals. We strive to build partnerships
-that enhance the functionality and reach of activist.org while maintaining
-our commitment to user privacy and security.
+We do not share your personal information with any third parties. activist.org
+is dedicated to ensuring the privacy of our users. The team has no plans to share
+data with parties outside of our organization.
 
 Data Security and Breaches
 
-We are committed to protecting the security of our platform and the
+We are committed to ensuring the security of our platform and the
 information of our users. In the event of a data breach, we will promptly
 notify affected users and take appropriate measures to address the
 situation.
 
-We implement various security measures, such as encryption and secure
-connections, to protect the integrity of our platform and the safety of
-our users. We also encourage users to practice good security habits, such
-as using strong passwords and enabling two-factor authentication when
-available.
+We plan to implement various security measures to protect the integrity of our
+platform and the safety of our users. We also encourage users to practice good
+security habits, such as using strong passwords and enabling two-factor
+authentication when available.
 
 Your Rights
 
-As we do not collect personal information, you do not need to worry about
-exercising any rights related to your personal data. However, if you have
+As we do not collect personal information at this time, you do not need to worry
+about exercising any rights related to your personal data. However, if you have
 any questions or concerns about this Privacy Policy or our practices, please
-feel free to contact us.
+feel free to contact us at security[at]activist.org.
+
+Changes to This Policy
 
-We are committed to transparency and user control. We encourage users to
-contribute to activist.org and participate in discussions about privacy,
-security, and other important topics. By engaging with our community, you
-can help shape the future of activist.org and ensure that it remains a safe,
-inclusive, and empowering platform for all.
+We may update this Privacy Policy from time to time. If we make significant
+changes, we will notify you through the platform or by other means. By continuing
+to use activist.org after any changes are in effect, you agree to the updated
+Privacy Policy.

STYLEGUIDE.md

@@ -18,8 +18,9 @@ If you have questions or would like to communicate with the team, please [join u
 - [Colors](#colors)
 - [Font](#font)
 - [Text size](#text-size)
-- [Tab size](#tab-size)
+- [Localization](#localization)
 - [Icons](#icons)
+- [Tab size](#tab-size)
 - [Padding](#padding)
 
 <a id="vue-and-nuxt"></a>
@@ -158,11 +159,48 @@ The fonts for activist are [Red Hat Text and Red Hat Display](https://www.redhat
 <h1 class="font-bold responsive-h1">Page Header</h1>
 ```
 
-<a id="tab-size"></a>
+<a id="localization"></a>
 
-## Tab size [`⇧`](#contents)
+## Localization [`⇧`](#contents)
 
-Codes on the frontend for Vue (`<template>`, `<script>` and `<style>` blocks), TypeScript, CSS and other related files should use two spaces for tabs. For the backend four spaces should be used for Python files.
+activist is a global platform and must function in countless different regions around the world. To achieve this, all strings on the platform must be defined using keys found in the [i18n directory of the frontend](https://github.com/activist-org/activist/tree/main/frontend/i18n).
+
+> [!NOTE]\
+> All keys should be defined within the [en-US.json file](https://github.com/activist-org/activist/blob/main/frontend/i18n/en-US.json)
+>
+> - This is the source from which all the other languages are translated from
+> - Edits to the other files need to be made on activist's [public localization project on Transifex](https://explore.transifex.com/activist-org/activist)
+> - Please alphabetize the keys except for indexes within page routes that should come first
+
+Localization keys should be defined based on their component or page within the platform and the content that they refer to (`CONTENT_REFERENCE` below). Please use the following rules as a guide if you find yourself needing to create new localization keys:
+
+- Separate directories by `.` and CamelCase file name words by `-` in keys
+  - Ex: `"components.search-bar.CONTENT_REFERENCE"` for the `SearchBar` component
+- If the localization key is being passed to a component prop, include it in the content reference
+  - Ex: `"components.topic-marker.topic.CONTENT_REFERENCE"` for passing a localized `topic` prop to the `TopicMarker` component
+    - `"CONTENT_REFERENCE"` in this case would be a reference to the name of a topic like `"environment"`
+- Even though Nuxt allows for us to nest components in directories, avoid repetition in the directory path used to define the localization key
+  - Ex: if you're defining a key within `SidebarLeftFooter`:
+    - ✅ `"components.sidebar-left-footer.CONTENT_REFERENCE"`
+    - ❌ `"components.sidebar.left.sidebar-left-footer.CONTENT_REFERENCE"`
+- Define keys based on the lowest level component or other entity in which they're used
+  - Ex: you're working on the about page of organizations and there's a `BtnLabeled` that's getting a localization key:
+    - ✅ `"components.btn-labeled.CONTENT_REFERENCE"`
+    - ❌ `"pages.organizations.id.about.CONTENT_REFERENCE"`
+  - The reason for this is we want to make sure that we can reuse keys where ever we can
+    - In the example above, if we defined the key based on its location on the organization about page when it's a `BtnLabeled` with a text like `"Support"`, then we'd need to create a different version of this key for each occurrence of the depending on the location
+    - With the system detailed above, we have the `components.btn-labeled.label.support` key that we can use anywhere that we have a support button ✨
+- For pages with long texts please follow the below naming criteria:
+  - `"header"`: the main header (h1) of the given page
+  - `"section-#"`: a section that iterates by one with every header and subheader
+  - `"section-#-subheader"`: marks the start of a new section (h2 and beyond)
+  - `"section-#-paragraph-#"`: a paragraph with one or more sentences
+  - `"section-#-paragraph-#-pt-#"`: a paragraph with separate parts to insert things like links
+  - `"section-#-list-#-item-#"`: an item in a list
+  - `"section-#-list-#-item-#-subitem-#"`: a subitem of the given item
+  - `"section-#-#"`: a subsection, with other `#-#` patterns also being possible
+
+The activist team is happy to help if there's any confusion with the above rules! Feel free to ask in the issue you're working on or even check once a PR is made and we'll make sure that conventions are being followed.
 
 <a id="icons"></a>
 
@@ -172,6 +210,12 @@ activist uses [nuxt-icon](https://github.com/nuxt-modules/icon) for all icons. I
 
 Custom icons for activist can further be found in the [Icon directory of the frontend components](https://github.com/activist-org/activist/tree/main/frontend/components/Icon). These icons can also be referenced via the `<Icon>` component via their file name (ex: `<Icon name="IconSupport">` for the grasped hands we use). For Tailwind coloration note that we need to use `fill-COLOR` for the custom activist icons rather than `text-COLOR`.
 
+<a id="tab-size"></a>
+
+## Tab size [`⇧`](#contents)
+
+Codes on the frontend for Vue (`<template>`, `<script>` and `<style>` blocks), TypeScript, CSS and other related files should use two spaces for tabs. For the backend four spaces should be used for Python files.
+
 <a id="padding"></a>
 
 ## Padding [`⇧`](#contents)

frontend/components/PageBreadcrumbs.vue

@@ -78,7 +78,9 @@ onMounted(() => {
 });
 
 function isLocaleSegment(segment: string) {
-  return locales.value.some((locale) => typeof (locale) === "string" ? locale === segment : locale.code === segment);
+  return locales.value.some((locale) =>
+    typeof locale === "string" ? locale === segment : locale.code === segment
+  );
 }
 
 const displayBreadcrumbs = computed(() => {

frontend/components/SearchBar.vue

@@ -5,18 +5,30 @@
   >
     <Icon name="bi:search" size="1em" class="flex-shrink-0 w-4 h-4 my-1" />
     <Transition name="search">
-      <input v-if="sidebar.collapsed == false || sidebar.collapsedSwitch == false" ref="input"
-        class="w-16 h-5 bg-transparent outline-none" type="text" placeholder="Search" @focus="onFocus" @blur="onFocusLost"
-        :class="{ 'focus:w-5/6': isInputFocused }" />
+      <input
+        v-if="sidebar.collapsed == false || sidebar.collapsedSwitch == false"
+        ref="input"
+        class="w-16 h-5 bg-transparent outline-none"
+        type="text"
+        :placeholder="$t('components.search-bar.placeholder')"
+        @focus="onFocus"
+        @blur="onFocusLost"
+        :class="{ 'focus:w-5/6': isInputFocused }"
+      />
     </Transition>
     <Transition name="shortcuts">
-      <div v-if="sidebar.collapsed == false || sidebar.collapsedSwitch == false" ref="hotkeyIndicators"
-        class="absolute right-0 flex pr-6 space-x-1 transition-opacity transition-duration-200">
+      <div
+        v-if="sidebar.collapsed == false || sidebar.collapsedSwitch == false"
+        ref="hotkeyIndicators"
+        class="absolute right-0 flex pr-6 space-x-1 transition-opacity transition-duration-200"
+      >
         <div
-          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text">
+          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
+        >
           <span
-            class="invisible px-2 py-1 -mt-8 rounded shadow-md shadow-zinc-700 bg-light-menu-selection dark:bg-dark-menu-selection w-max text-light-content dark:text-dark-content tooltip">Press
-            "/" to search</span>
+            class="invisible px-2 py-1 -mt-8 rounded shadow-md shadow-zinc-700 bg-light-menu-selection dark:bg-dark-menu-selection w-max text-light-content dark:text-dark-content tooltip"
+            >{{ $t("components.search-bar.slash-tooltip-label") }}</span
+          >
           <p class="-mt-[0.075rem]">/</p>
         </div>
         <!-- <div
@@ -25,7 +37,7 @@
         >
           <span
             class="invisible px-2 py-1 -mt-8 rounded shadow-md shadow-zinc-700 bg-light-menu-selection dark:bg-dark-menu-selection w-max text-light-content dark:text-dark-content tooltip"
-            >Press "⌘ + k" to jump to a page</span
+            >{{ $t("components.search-bar.command-tooltip-label") }}</span
           >
           <p>⌘k</p>
         </div>
@@ -35,25 +47,39 @@
         >
           <span
             class="invisible px-2 py-1 -mt-8 rounded shadow-md shadow-zinc-700 bg-light-menu-selection dark:bg-dark-menu-selection w-max text-light-content dark:text-dark-content tooltip"
-            >Press "^ + k" to jump to a page</span
+            >{{ $t("components.search-bar.control-tooltip-label") }}/span
           >
           <p>⌃k</p>
         </div> -->
       </div>
     </Transition>
   </div>
-  <div v-else
-    class="relative inline-flex items-center pl-[12px] pr-[10px] py-1 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-special-text dark:border-dark-special-text text-light-special-text dark:text-dark-special-text focus-within:border-light-cta-orange focus-within:border-2 dark:focus-within:border-dark-cta-orange ">
-    <Icon :name="expanded ? 'bi:x-lg' : 'bi:search'" size="1em" class="flex-shrink-0 w-4 h-4 my-1"
-      @click="emit('on-search-toggle')" />
-    <input v-if="expanded" class="bg-transparent focus:outline-none" type="text" placeholder="Search" />
+  <div
+    v-else
+    class="relative inline-flex items-center pl-[12px] pr-[10px] py-1 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-special-text dark:border-dark-special-text text-light-special-text dark:text-dark-special-text focus-within:border-light-cta-orange focus-within:border-2 dark:focus-within:border-dark-cta-orange"
+  >
+    <Icon
+      :name="expanded ? 'bi:x-lg' : 'bi:search'"
+      size="1em"
+      class="flex-shrink-0 w-4 h-4 my-1"
+      @click="emit('on-search-toggle')"
+    />
+    <input
+      v-if="expanded"
+      class="bg-transparent focus:outline-none"
+      type="text"
+      placeholder="Search"
+    />
     <Icon v-if="expanded" name="bi:filter" class="absolute right-3" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useMagicKeys, whenever } from "@vueuse/core";
 import { ref } from "vue";
+
+const route = useRoute();
+
 const sidebar = useSidebar();
 const input = ref();
 const hotkeyIndicators = ref();