Inisiatif warga untuk berbagi informasi seputar fasilitas kesehatan dan alat kesehatan untuk COVID-19.
Home Page: https://www.wargabantuwarga.com
License: MIT License
Currently the Home and FAQ pages use this banner image: https://firebase-kanvas.imgix.net/warga_bantu_warga/hero_banner.png?auto=format,compress,enhance&fm=pjpg&cs=tinysrgb&fit=scale
Implement following performance improvements on banner image:
srcset to load image size based on screenObjective:
Related to #68
Use the next/image component to load the image.
Ready to provide PR if approved.
Since we have finished our basic functionalities for the Provinces page, we need to enhance them into our users' best possible experience.
With #374 coming, I'm wondering whether we still need these two issues implemented
Description
As a user who uses the mobile browser to visit the website I want all important information on the web to be mobile friendly so I can easily be accessing it using my relatively small mobile screen size, per instruction here: https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
“Given a user that mainly browses using a mobile browser, when I visited the WargaBantuWarga website and click on google sheet link then the information is displayed in a mobile-friendly way that at least scored 90 on the accessibility score at web.dev audit”
See guidelines here: https://web.dev/accessible/ and https://tailwindcss.com/docs/responsive-design
Also, please use the following resources to ensure easier component building and design consistency:
yes
List all requirements that necessary to be detailed in the ticket
The current global header is an image.
Similar to kcov19's mobile navigation, we'll have a header w/ the current page name, as well as a bottom navigation.
Mobile version of simple navbar from Tailwind UI
Improve SEO strategy for province & contact page for better searchability
We probably need to start adding analytical tools to wargabantuwarga.com, because has multiple information entry, we need to track which clicks or which information is most relevant to the user, this will eventually be useful for us to enhance the information structure of the web, to ensure the most important information is displayed first.
Job Story
When the user is accessing, I want the Google Tag Manager to be triggered there, so that we can track each user’s clicks to gather data about user navigation.
Acceptance Criteria
Use the following criteria example
Functional Criteria: "GTM with id GTM-5X4ZPBX to be triggered on this page"
Non-functional Criteria: "Paste this code as high in the <head> of the page as possible:
<!-- Google Tag Manager --><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-5X4ZPBX');</script><!-- End Google Tag Manager --> "
Non-functional Criteria: Additionally, paste this code immediately after the opening <body> tag: <!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5X4ZPBX"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) -->
Performance Criteria: "To have minimum impact on performance use the afterInteractive or onLazyLoad see: https://nextjs.org/docs/basic-features/script
Require A QA To Test?
Yes
Optional Information
Here is the GA4 ID: 278712353
Currently, the data that we presented on the wargabantuwarga.com is fetched directly from Google Docs and Google Suite infrastructure, which might limit the performance and access when accessed nationwide.
Perhaps use cache feature, to allow us to fetch the cached data from our server, of which we call the Google Suite server only once per 15 minutes. That way we don't have to call the GSuite every time the user is visiting the web.
Based on the Website Improvements #23 discussion, we are planning to migrate our Google Docs-based CMS into a proper Headless CMS. This would provide more granular controls over the HTML structure that we're rendering on the page that allows us to style the website flexibly.
Explain how to utilise the Labels effectively
Explain what our Milestones for the next few months
The reasons we're using English in GitHub Issues & PRs:
Please use Tailwind CSS with its JIT compiler to style the page
Apparently, the sheets fetcher implementation in #33 is only fetching the first tab.
Please update the implementation for fetching all tabs.
In the iOS Safari browser, I keep getting a blank page on the first load, usually right after a deployment when the server cache is refreshed after fetching new data from the Google Docs.
The page is only rendered after refreshing the page.
The page should have been rendered ok the first load of the page, without requiring any refresh.
A blank page in the browser usually indicates an unhandled runtime error.
We might need to add a Sentry integration to gather more information about the bug. KawalCOVID19 has a Sentry License to integrate with.
Description
As a user who is searching for relevant and high-quality information related to Covid-19, I want the wargabantuwarga to display the most accurate information only so that I don't waste time when trying to get in touch and use the information only to find out that the information is outdated or misleading.
Acceptance Criteria
Given that a user who has information related to inaccuracy and poor quality of the information provided by Wargabantuwarga
When users found poor information, they can click on prominent laporkan data bermasalah on every FAQ page.
Then the user will be redirected to: https://docs.google.com/forms/d/e/1FAIpQLSeDdZLMD9RTfOiKMItNb8542KAO5w3x9O2ZFQmNyff1rYRZvQ/viewform
Require A QA To Test?
Yes
There's an existing implementation already for the ContactPage.
Please refer to #138 as a reference.
Remove borders from Google Docs-generated "tables" in Home Page UI and replace it with more visually pleasing separator.
from:
to:
Apply custom styling.
Ready to submit PR if approved.
Add minor UI improvement in province pages that enhances readability, especially in mobile/small screen views.
font-medium) to 600 (font-semibold)Rationale for removing "pada" in "Terverifikasi pada" copy text:
(1) list heading font weight example
(2) - (3) example
Related to #68
Update Tailwind CSS classes, add custom styles if needed.
Ready to provide PR if approved.
Install stylelint and stylelint-config-recommended dependencies and include it into our Git pre-commit hooks.
Originally posted by @zainfathoni in #43 (comment)
| No | Aspect | From | To | Reason |
|---|---|---|---|---|
| 1 | Title Tag | Warga Bantu Warga | Warga Bantu Warga | Informasi Faskes & Alkes Untuk Covid 19 | It provides more clarity and comply widely known SEO standards |
| 2 | Meta Description | Inisiatif warga untuk berbagi informasi seputar fasilitas kesehatan dan alat kesehatan untuk COVID-19 | Inisiatif warga untuk berbagi informasi seputar fasilitas kesehatan & alat kesehatan untu COVID-19. WargaBantuWarga memudahkan publik mencari & mengakses informasi | Better appearance and description on Google Search |
| 3 | H1 pada image | Saat ini image tidak mengandung H1 | Beri H1 pada image di bagian atas | Every page must have 1 h1 and contain target keyword related to the page |
| 4 | Ubah H1 Menjadi H3 | H1: Daftar Isi | h3: Daftar Isi | Better structure (from Google point of view) |
| 5 | Ubah H1 Menjadi H2 | h1: Situs Informasi Kontak Penanganan COVID-19: Pemerintah dan Inisiatif Warga | h2: Situs Informasi Kontak Penanganan COVID-19: Pemerintah dan Inisiatif Warga | Better structure (from Google point of view) |
| 6 | Ubah H1 Menjadi H3 | h1: Daftar Kontak Fasilitas Alat Kesehatan per Provinsi ( Lihat selengkapnya di sini ) | h3: Daftar Kontak Fasilitas Alat Kesehatan per Provinsi ( Lihat selengkapnya di sini ) | Better structure (from Google point of view) |
| 7 | Ubah H1 Menjadi H3 | h1: Isolasi Mandiri: Apa yang harus dilakukan? | h3: Isolasi Mandiri: Apa yang harus dilakukan? | Better structure (from Google point of view) |
| 8 | Ubah H1 Menjadi H3 | h1: Laman Edukasi COVID-19 | h3: Laman Edukasi COVID-19 | Better structure (from Google point of view) |
| 9 | Ubah H1 Menjadi H3 | h1: Donasi dan Penggalangan Dana | h3: Donasi dan Penggalangan Dana | Better structure (from Google point of view) |
| 10 | Ubah H1 Menjadi p atau div | Ada space kosong dengan menggunakan h1 | ubah menjadi p atau div | Empty space better use p or div (as long as not use heading no problem) |
| 11 | OpenGraph Title | Warga Bantu Warga | Warga Bantu Warga | Informasi Faskes & Alkes Untuk Covid 19 | Better description on Social Media and when user share on WhatsApp |
| 12 | OpenGraph Description | Inisiatif warga untuk berbagi informasi seputar fasilitas kesehatan dan alat kesehatan untuk COVID-19 | Inisiatif warga untuk berbagi informasi seputar fasilitas kesehatan & alat kesehatan untu COVID-19. WargaBantuWarga memudahkan publik mencari & mengakses informasi | Better description on Social Media and when user share on WhatsApp |
Explain what the Kanban Board and the Prioritization projects mean
Currently, one of the links on our website links to an FAQ Google Sheets.
We need to provide an easy way to consume its content.
The Google Sheets fetcher has been implemented on #33 by @adityapurwa. We can use the same method to fetch this https://kcov.id/wbw-faq Google Sheets.
Implement top navigation, breadcrumbs and page header to create a responsive, mobile-first design.
We'll use UI components from Tailwind UI
We need a way to capture runtime errors like #21.
KawalCOVID19 has a Sentry license that we can integrate with. Please let @zainfathoni know if you want to work on this issue.
Please bear in mind that the integration should be done while minimizing its impact on the Core Web Vitals.
Update README.md & CONTRIBUTING.md files with more detailed instructions make onboarding our contributors easier.
The CONTRIBUTING.md document will be used for the kawalcovid19/silacak project as well.
These are the aspects that we need to cover to ease onboarding our contributors.
For better search results, maybe a full-text search can be used?
The potential libraries are:
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.