Website

The official website of Prav. The website is at https://prav.app.

Building

You will need to have Hugo installed to build this website. Once done, use

hugo serve

to start up the live-reloading local development server, or

hugo build

to build the final website. This website is hosted by Codeberg pages, and will be automatically rebuilt to match the latest main branch of this repo.

Posts and pages

You can place new posts and pages in the content/ directory. Blog posts go within the subdirectory content/blog/ and will be automatically syndicated through RSS feeds as well as listed on the blog page.

Pages (and blog posts) are written in Markdown along with a header. Here's a simple example:

---
title: 'Get involved'
date: 2024-06-02T14:08:26+0530
draft: false
---

Thank you for getting involved! You can start by adding more content to this page...

You can also use more fields like author and summary. If you find any useful ones, consider editing this README file to add them to this sentence.

Special pages

Some pages are special. For example, the main content for the home page is found in content/_index.md (note the underscore), but some bits like the tiles listing Prav's various features are also configured in other places (see below). This configuration itself is templated in layouts/index.html. In fact, we believe there's a tile or twothat's actually hardcoded right in that layouts/index.html file. If you find a awy to get it out, please do!

Similarly, the page listing all the blog posts is templated in a place you can write about here once you find out.

That said, special pages should be used sparingly and only on pages where the content is likely to keep changing. Most pages have all their content in simple Markdown files. If you're not sure whether a page should be made into a special page, the answer is probably "no".

Including images

Sometimes, your posts or pages need to have images. In fact, more images make the reading easier, so try to add them wherever you think they'll fit! (But if you find yourself resorting to stock images or autogenerated ones, maybe it's time to stop. They don't make reading that much easier.)

Images are stored in the content/images folder, and you can link to them using a URL of the form /images/IMAGE_NAME.

• If you find an existing image that suits your needs, feel free to reuse it rather than uploading it again
• Make sure to resize images to a reasonable size before uploading, and use scalable vector graphics (SVGs) where possible. Space is not unlimited, and neither, contrary to popular belief, is bandwidth
• Avoid deleting images unless you're sure that no other post or page is using them

Customising the stylesheet

Custom styles are currently being added in assets/scss/style.scss. If you open that script, you will notice that many of these rules are not written directly but being imported from Hugo magic the currently active theme in the themes/ directory.

If you are going to be revamping the styles extensively, it might be prudent to dispense with the theme (or at least its styles) and pick a more fitting one or create a new theme entirely. Otherwise, you might find yourself "fighting with the theme" over the in-built styles!

Configuration with data files

Some changes require directly editing the Hugo templates or HTML code, but there are other configuration options that can be manipulated by simply editing data files in YAML, JSON, or other like-minded formats.

Note that Hugo treats these formats are interchangeable. So if there's a feature configured with data/abc.yaml, you could just as well configure it with data/abc.json instead. The more formats we use, the more confused future contributors will be.

All these data files are in the data/ directory. If you find any files in there that aren't documented in this section, consider creating a new subsection to document them. Usually, just a quick description along with the sample configuration should be enough.

Social media links

These social media links show in the footer of every page. Each link has a name, an icon, and the actual link. The current configuration can be found at data/social.json, and here's a basic sample configuration:

[
    {
        "name": "Email",
        "link": "mailto:[email protected]",
        "image": "/images/envelope.svg"
    },
    {
        "name": "Fediverse",
        "link": "https://venera.social/profile/prav",
        "image": "/images/fediverse.svg"
    },
    {
        "name": "XMPP/Quicksy",
        "link": "https://join.jabber.network/#[email protected]?join",
        "image": "/images/xmpp.svg"
    }

]

Features

This is the list of Prav's features that show up as tiles on the Prav home page. It can be configured in data/features.json, and you can see a sample configuraiton below:

[
  {
    "title": "Privacy By Default",
    "description": "All messages are end-to-end encrypted by default. When you send a message to someone, nobody else can read them - not even us.",
    "image": ""
  },
  {
    "title": "Convenient To Register",
    "description": "Just enter your phone number and you are ready to talk.",
    "image": ""
  },
  {
    "title": "Transparency And Auditability",
      "description": "Our apps can be verified by third-party experts at any time - they are free/swatantra software and the source code is publicly available.",
    "image": ""
  }
]

As you can see, the image fields are currently unused. If you find a good and appropriate set of icons (perhaps on places like the Noun Project), perhaps you could try adding them and see how it works out.

Countdown

A countdown is a banner on the home page, promoting an upcoming event like a launch party. What the banner looked like is lost to the annals of time, but if you set it up (or get it from the Wayback Machine), consider taking a screenshot and attaching it here.

Countdowns can be configured in data/countdown.yaml, An example configuration (in fact, the only configuration that has even been used so far) is below:

title: "Beta Release Party!"
description: "We are glad to announce our private beta release party on **28 January 2023**, online and offline during the [MiniDebConf 23](https://tn23.mini.debconf.org/) event. We will give free app invites to anyone interested in testing out a Prav account"
date: "2023-01-28T09:00:00+0530"
buttonText: "Register & Learn More"
buttonLink: "/beta-release-party/"

Banner

When enabled, the banner displays on top of every page on the website. It includes text and a call-to-action button. If you want the button to be inline, you can probably manually inline it as Markdown or HTML, although this is yet to be tested.

Banners can be set in data/banner.yaml and here's a simple configuration:

enabled: true
text: "Help us offer custom usernames for better privacy!"
icon:
  url: "/images/intro.png"
  alt: "Mobile development icon"
button:
  text: "Donate"
  link: "/blog/crowdfunding-for-custom-username/"

The enabled: true makes the banner active. Setting it to enabled: false hides it from display, which is convenient for testing or if you want to keep banner.yaml around for convenience but just don't want it displayed at the moment.

If the banner is going to disappear for a long time, consider deleting the file instead (people can always copy the config above to reactivate it).

Fun fact: The above config hasn't been committed to history yet, so if you look at the commit history you'll see the configuration appear in this README before it appears as an actual file!

Donation pages

Donation pages can be added like normal pages under content/donate, but they are rendered differently and have specific configuration parameters.

• title - the crowdfunding campaign name, which is similar to a normal page title
• summary - a one-line description of the campaign
• date - the date of publication, like a normal page
• active - whether the campaign is active or not (default: true)
• units - the units of the crowdfunding campign, including the following sub-parameters:
  • code - currency code (default: INR)
  • name - human-readable name of the currency (default: rupees)
  • symbol - currency symbol (default: ₹)
• reached - how much of the goal has been reached so far
• you can choose either one of the following fields:
  • target (optional) - target amount/what we want to raise eventually
  • spent (optional) - if there is not fixed target (eg. for continuous/ongoing campaigns), you can use this to indicate how much of the donations have been spent so far. This is then used to calculate the current balance
  • If neither of the above two options are set, the page will just report how much has been received and a permanently full progress bar.
• donation_pages - unique identified used by the respective campaign, which can be one of the following sub-options:
  • opencollective - unique OpenCollective identifier, which is usually kebab-case and can be taken from the URL
  • razorpay - Razorpay donation purpose, which is usually Title Case and can be set on the Razorpay page settings
• suggested_amount - the amount we prompt users to donate by default (can be customised in the campaign page), separated by currency:
  • usd - the suggested donation amount, in USD (used for the Open Collective page)

A sample header is as follows (taken from the "Prav for iOS" campaign):

---
title: "Prav on iOS"
summary: "This fundraiser is to build an iOS version of the Prav app based on Monal, to make Prav available to iPhone users"
date: 2024-01-08T20:59:55+05:30
target: 600
reached: 553.49
units:
  code: USD
  name: dollars
  symbol: "$"
active: true
donation_pages:
  opencollective: "prav-ios"
  razorpay: "Prav For iOS"
---

Under the header, you can add whatever content you want (such as a campaign description), the same as you would for any normal page.

Updating the README

As with the rest of this repo, contributions to the README are welcome. This is the README file. If you edit it, it will change.

License

The source code of Prav website is released under GNU GPL v3. You can check out the license here.