feat: use github raw urls to reference picture files

README.md

@@ -4,6 +4,7 @@ ACAP Bicol (ACAP 2.0) development documentation.
 
 Built with [Nextra](https://nextra.site/), a modern static site generation framework running on NextJS.
 
+> [!IMPORTANT]
 > This project uses Nextra [version 2](https://nextra-v2-oe0zrpzjp-shud.vercel.app/).
 
 ### Requirements
@@ -32,6 +33,8 @@ The app depends these libraries and frameworks.
 - [Requirements](#requirements)
 - [Installation](#installation)
 - [Usage](#usage)
+   - [General Usage](#general-usage)
+   - [Uploading and Referencing Images from /assets](#uploading-and-referencing-images-from-assets)
 - [Available Scripts](#available-scripts)
 - [Usage with Docker](#usage-with-docker)
    - [Use Pre-Built Development Docker Image](#use-pre-Built-development-docker-image)
@@ -62,6 +65,8 @@ The app depends these libraries and frameworks.
 
 ## Usage
 
+### General Usage
+
 1. Run the app for local dedvelopment with:<br>
    ```
    cd docs
@@ -82,6 +87,35 @@ The app depends these libraries and frameworks.
 3. Add or edit MDX files in the `/pages` directory, or add React components in the `/components` directory.
    - View the [**nextra**](https://nextra.site/docs) (docs-theme) documentation for more information on using nextra to add content.
 
+### Uploading and Referencing Images from `/assets`
+
+#### To display a new image:
+
+1. Upload the image to the `/assets` branch, ([Issue #102](https://github.com/acaptutorials/acaptutorials.github.io/issues/102))
+   - Commit the file under the appropriate directory (e.g., `/images/`, `/docs/`, etc.).
+   - Use **unique, versioned file names** (e.g., `feature-v2.png`) to prevent caching issues.
+
+      > ⚠️ **NOTE:** Overwriting an existing file with a new version will **not** immediately update in browsers due to GitHub's CDN caching.
+
+2. Get the raw URL:
+   - Open the file in GitHub, click **View Raw**, and copy the URL.
+   - The URL will look like this:<br>
+     `https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/<path-to-file>`
+
+3. Use the raw URL in Markdown or HTML:
+
+   **Markdown**<br>
+   `![New Picture](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/example.png)`
+
+   **HTML**<br>
+   `<img src="https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/example.png" alt="New Picture" />`
+
+#### Best Practices
+
+- Use **descriptive file names** and organize assets into logical folders.
+- Compress or optimize images before upload to keep repository size manageable.
+- Always try to update references when renaming or versioning files.
+
 
 ## Available Scripts
 
@@ -165,6 +199,6 @@ https://hub.docker.com/r/acaptutorials/acaptutorials.github.io
 
 @acaptutorials<br>
 20240806<br>
-20250601
+20250901
 
 

docs/pages/announcements.mdx

@@ -5,13 +5,13 @@ import { Cards, Image } from 'nextra/components'
 <br />
 
 <Cards num={1}>
-  <Cards.Card arrow title="Firebase Storage Pricing Updates 2024" href="/announcements/firebase-storage-2024">
+  <Cards.Card arrow title="PAGASA 10-Day Excel Files Discontinued (Effective Aug 31, 2025)" href="/announcements/pagasa-10day-excel">
     <>![Documentation theme](/assets/docs-theme.png)</>
   </Cards.Card>
 </Cards>
 
 <Cards num={1}>
-  <Cards.Card arrow title="PAGASA 10-Day Excel Files Discontinued (Effective Aug 31, 2025)" href="/announcements/pagasa-10day-excel">
+  <Cards.Card arrow title="Firebase Storage Pricing Updates 2024" href="/announcements/firebase-storage-2024">
     <>![Documentation theme](/assets/docs-theme.png)</>
   </Cards.Card>
-</Cards>
+</Cards>

docs/pages/announcements/pagasa-10day-excel.mdx

@@ -50,11 +50,7 @@ _Note: PAGASA has not announced plans to archive past Excel files._
 
 <details>
 <summary>Click to view the attached screenshot of PAGASA's announcement for more information.</summary>
-![PAGASA 10-Day Excel files discontinuation announcement](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FNOZHqk2E8F8RoVvZuVVv_file?alt=media&token=88bd0b49-b7ee-45f8-843e-11bd0b9dcfe6)
-
-<sup>
-[alternate screenshot](https://private-user-images.githubusercontent.com/30580083/481051514-2d333f63-8fc4-4d81-a8da-d0ff48698c5e.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTY1MzczNTAsIm5iZiI6MTc1NjUzNzA1MCwicGF0aCI6Ii8zMDU4MDA4My80ODEwNTE1MTQtMmQzMzNmNjMtOGZjNC00ZDgxLWE4ZGEtZDBmZjQ4Njk4YzVlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwODMwVDA2NTczMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVkNDUzZmI0NjVhMTQxOWZhMmUxZDU4YmQ5ZTc1N2EzOGUwMWE1N2VlNWFhNGI3ODA4MTNkZDVmZDg5MjEwYzEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.cUM-tiJyihJq5r8zyiTXW_h3_Astl3obI-XvymTy684)
-</sup>
+![PAGASA 10-Day Excel files discontinuation announcement](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/pagasa_10day_excel_discontinued.png)
 
 </details>
 

docs/pages/articles/deployment.mdx

@@ -16,7 +16,7 @@ CI/CD using GitHub Actions deploy code updates to the **development** or **produ
 
 <br />
 
-<img src="https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2Ffd8YN8jIdC6dikTDYllr_file?alt=media&token=050ea71e-d56c-4844-ad8e-7c796b123b5d" alt="acap-git-flow" style={{ margin: "auto" }} />
+<img src="https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/git_flow_steps.png" alt="acap-git-flow" style={{ margin: "auto" }} />
 
 ## Render Initial Blueprint Instance
 

docs/pages/articles/pdf-development.mdx

@@ -8,7 +8,7 @@ import { Callout, FileTree, Steps } from 'nextra/components'
 This is the process flow used by **ACAP 1.0** for generating bulletin PDFs. Further enhancements or updates may use new processing flows and design, which should be documented here.
 </Callout>
 
-![pdf-process](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2Fla11qNSxCH88jASOnkfd_thumbnail?alt=media&token=3a305baf-1b7f-4d62-a56c-7b0657567044)
+![pdf-process](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/pdf_development_process.png)
 
 ## Development Requirements
 
@@ -154,6 +154,6 @@ When creating new bulletin layouts that significantly differ from the existing o
 
 JPEG Picture References (from R5)
 
-- Seasonal bulletin - | [link](https://www.facebook.com/daamiarfo5/photos/pb.100081488360994.-2207520000/1592305051122245/?type=3) | [mirror](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2Fchj3Xf2bfKevTDC6wiPf_thumbnail?alt=media&token=82cc0e6d-1106-4a59-a093-51eb9bd4ee9f) | [acap-pdf](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FuYvIyZMVmQJeC1YmUE4C_file?alt=media&token=eaeed002-9d3a-4124-a191-045c0c545bd8) |
-- 10-day bulletin - | [link](https://www.facebook.com/photo.php?fbid=300180632708213&set=pb.100081488360994.-2207520000&type=3) | [mirror](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2F3rxIorhR1b3diTMAPfQp_thumbnail?alt=media&token=3cf9d79d-b232-4fee-aaa2-6d6620c98342) | [acap-pdf](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2Fwt062XBVBtVIQ4i2PLWz_file?alt=media&token=4a3c5d26-8576-4768-9623-596af8592ac4) |
-- Special Weather Forecast bulletin - | [link](https://www.facebook.com/photo.php?fbid=329712193088390&set=pb.100081488360994.-2207520000&type=3) | [mirror](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FtHxfc7HqpNNG7mr63U3w_thumbnail?alt=media&token=11b660dc-50c2-48b4-b248-1fa9ca7d82c7) | [acap-pdf](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FYXMh4Ti7E3ytJ6HAwtHe_file?alt=media&token=5432cffc-7ff9-43c9-b156-016394ca505a) |
+- Seasonal bulletin - | [link](https://www.facebook.com/daamiarfo5/photos/pb.100081488360994.-2207520000/1592305051122245/?type=3) | [mirror](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/pdf_development_seasonal_picture_layout.png) | [acap-pdf](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/files/pdf_development_seasonal_acap.pdf) |
+- 10-day bulletin - | [link](https://www.facebook.com/photo.php?fbid=300180632708213&set=pb.100081488360994.-2207520000&type=3) | [mirror](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/pdf_development_10day_picture_layout.png) | [acap-pdf](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/files/pdf_development_10day_acap.pdf) |
+- Special Weather Forecast bulletin - | [link](https://www.facebook.com/photo.php?fbid=329712193088390&set=pb.100081488360994.-2207520000&type=3) | [mirror](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/pdf_development_cyclone_picture_layout.png) | [acap-pdf](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/files/pdf_development_cyclone_acap.pdf) |

docs/pages/installation.mdx

@@ -59,6 +59,6 @@ All updates and fixes should be from the (parent) **acap-v2** repository's (de
 ### Questions and Inquiries
 
 - Concerns, questions, and inquiries with ACAP go through the mode of communication channel elected within ACAP (the ACAP FB Group Messenger).
-   > This communication channel is reserved only for the "active" and "official" ACAP members group.
+   > This communication channel is reserved only for the current "active" and "official" ACAP members group.
 - Alternatively, developers may create tickets (**GitHub Issues**) [within the (parent) **acap-v2** repository](https://github.com/amia-cis/acap-v2/issues) to describe their concerns in more detail. This page also contains code-related information about past inquiries and bug fixes that may be useful to other regions.
    > The main ACAP code Maintainers ("active" and "inactive") may respond to these tickets within their available time.

docs/pages/installation/accounts.mdx

@@ -2,6 +2,10 @@ import { Steps, Callout } from 'nextra/components'
 
 # E. Accounts
 
+![user accounts management](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/refs/heads/assets/images/accounts_user_mngt.png)
+
+## Introduction
+
 Create ACAP admin accounts to use for testing. Developers signed in as ACAP superadmins may create other accounts later for Regional Field Officers (RFOs) by signing in to ACAP's **superadmin** dashboard. The following methods require a successfully running ACAP client + server app, carrying on from the [Integration](/installation/integration) section.
 
 <Steps>

docs/pages/post-installation/cropping-calendar.mdx

@@ -2,7 +2,7 @@ import { Cards, Card } from 'nextra/components'
 
 # Cropping Calendar
 
-![cropping-calendar-og](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2F3TldxQy43wKXDbfQEDab_thumbnail?alt=media&token=49ab7d75-1873-44bb-a6c9-9dfb575afda7)
+![cropping-calendar-og](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/meta/meta_cropping_calendar.png)
 
 ACAP uses crop stage data from  [cropping calendars](http://www.knowledgebank.irri.org/step-by-step-production/pre-planting/crop-calendar), following established formats as input parameters for generating crop recommendations.
 

docs/pages/post-installation/cropping-calendar/calendar-v1.mdx

@@ -2,7 +2,7 @@ import { Callout, FileTree, Steps } from 'nextra/components'
 
 # ACAP 1.0 Cropping Calendar
 
-![cropping-calendar-v1](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FEonSaA9AfGcglBmTGMCl_thumbnail?alt=media&token=a436adfc-ce00-478f-95bc-73c1002a1a50)
+![cropping-calendar-v1](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/meta/meta_cropping_calendar_v1.png)
 
 ## Introduction
 

docs/pages/post-installation/cropping-calendar/calendar-v2.mdx

@@ -2,7 +2,7 @@ import { Callout, FileTree, Steps } from 'nextra/components'
 
 # ACAP 2.0 Cropping Calendar
 
-![cropping-calendar-v2](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FDquztsSIzGwlamp1LCcw_thumbnail?alt=media&token=489eaafa-2f15-4cf2-852f-fffd3ddc5eaa)
+![cropping-calendar-v2](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/meta/meta_cropping_calendar_v2.png)
 
 ## Introduction
 

docs/pages/post-installation/git-flow.mdx

@@ -8,7 +8,7 @@ CI/CD using GitHub Actions deploy code updates to the **development** or **produ
 
 <br />
 
-<img src="https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2Ffd8YN8jIdC6dikTDYllr_file?alt=media&token=050ea71e-d56c-4844-ad8e-7c796b123b5d" alt="acap-git-flow" style={{ margin: "auto" }} />
+<img src="https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/git_flow_steps.png" alt="acap-git-flow" style={{ margin: "auto" }} />
 
 
 **(Optional)** Before proceeding, create a GitHub Issue describing the new feature, bug fix or task that you'll develop. This tracks and organizes the details of the incoming updates.

docs/pages/post-installation/google-search.mdx

@@ -14,7 +14,7 @@ This is an **optional** update for ACAP introduced in its 2.0 version, should de
 This requires the latest updates from the **acap-v2** repository at release [**v10.1.0-alpha.6**](https://github.com/amia-cis/acap-v2/releases/tag/v10.1.0-alpha.6), dev branch commit **@e2df7bf** or later.
 </Callout>
 
-![google-search-results](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2Fe6zX1JgvhYfyASqvzXTh_thumbnail?alt=media&token=b5561bfc-b9ce-4a41-82c3-da0618206e59)
+![google-search-results](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/meta/meta_google_search_console.png)
 
 ## Requirements
 
@@ -34,13 +34,12 @@ Login to a Google account.
 1. Navigate to the [Google Search Console](https://search.google.com/search-console/welcome?utm_source=about-page) website registration page.
 
 2. Select the **URL prefix** option. Enter the root domain name of the ACAP website. For example,<br /> `https://acap-bicol.github.io`.
-   ![url-prefix](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FF2qEJAFShv6E2r065h0v_thumbnail?alt=media&token=b37f9dc8-2dfd-46da-8788-c104d2884c7b
-   )
+   ![url-prefix](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/google_search_console_url_prefix.png)
 
 3. Press the CONTINUE button.
 
 4. Download the HTML file in the resulting **Verify ownership** window. For example, the HTML file's name is `"google9e24fb24f7c185b4.html"`
-   ![verification-file](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2Ful05X04I2X8s8aeE0cqR_thumbnail?alt=media&token=ce1bde38-bc2f-454e-8e4f-8812b7b61a01)
+   ![verification-file](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/google_search_console_verification_file.png)
 
 ### Upload HTML Verification File
 
@@ -80,7 +79,7 @@ A `sitemap.txt` file should be available in the ACAP production GitHub Pages web
 3. Submit the sitemap.
 
 4. Wait for several days to up 1 - 2 weeks after a successful submission for the sitemap pages to become indexed and to receive feedback in the Google Search Console dashbboard - **Overview**, **Pages**, **Performace**, and others.
-   ![sitemap-submit-success](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2F0OyRX0CFP4qZ58GpgQKL_thumbnail?alt=media&token=6f2b6b9f-2c5b-4af1-84a1-26303b6aff41)
+   ![sitemap-submit-success](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/google_search_console_sitemap_success.png)
 
 </Steps>
 
@@ -105,19 +104,19 @@ While waiting for the pages to become indexed, inspect each URL defined in the `
    `"https://acap-bicol.github.io/weather-services"` (without a "/")
    </Callout>
 
-   ![seo-url-inspection](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FWBnj0xlRlZ8EwwEvsbIc_thumbnail?alt=media&token=01d26488-29ef-4865-be12-0a6d897df505)
+   ![seo-url-inspection](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/google_search_console_url_inspection.png)
 
    <br />
 
 ### Request Page Indexing
 
 1. Press the **Request Indexing** button in the page logs resulting from the [**URL Inspection**](#inspect-urls) step.
-   ![request-indexing](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FOsb3PBuiLSoYBP5od3NB_thumbnail?alt=media&token=2927853e-1faa-4ea6-a092-29a2bbd2ea74)
+   ![request-indexing](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/google_search_console_request_indexing.png)
 
    <br />
 
 2. Wait until **step #1** finishes successfully with an _"Indexing requested"_ message.
-   ![seo-request-submitted](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FDXoOB9ZcxpjgYCLivIUu_thumbnail?alt=media&token=caef5748-776e-4ac4-a20e-f842c03bb86e)
+   ![seo-request-submitted](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/google_search_console_request_submitted.png)
 
 ### Inspect All Sitemap URLs
 
@@ -135,7 +134,7 @@ While waiting, observe and resolve errors that the Google Search Console may dis
 
 Navigate to the **Pages** tab and observe page indexing error logs that may appear under the **Pages** → **Why pages aren't indexed** section. Error logs may look like the screenshot:
 
-![seo-error-logs](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2F0jeoz5Ni7sgugjP805SS_thumbnail?alt=media&token=761ebb1c-f4cd-42aa-a73d-5ec1880b06a4)
+![seo-error-logs](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/google_search_console_error_logs.png)
 
 Inspect and resolve each error log.
 
@@ -147,6 +146,6 @@ After a few days up to several weeks after a successful page indexing, view and
 
 Search for your website in Google Search and observe if it will be among the top search results.
 
-![seo-success](https://firebasestorage.googleapis.com/v0/b/assets-cms.appspot.com/o/users%2FAwryJ0MU8zdxQFh9y0L0x2sSt8z1%2FxaOK0JvSTyZltezm9jBl_thumbnail?alt=media&token=02d33519-b355-45aa-a8a4-34a8a95bf05a)
+![seo-success](https://raw.githubusercontent.com/acaptutorials/acaptutorials.github.io/assets/images/google_search_console_seo_success.png)
 
 </Steps>