acaptutorials · acaptutorials · Aug 13, 2024 · Aug 13, 2024 · Aug 13, 2024 · Aug 13, 2024
diff --git a/docs/pages/articles/pdf-development.mdx b/docs/pages/articles/pdf-development.mdx
@@ -89,6 +89,7 @@ The PDF development and technical approach were strongly influenced by the requi
 1. Create new or update existing vanilla HTML/CSS/JS files
 2. i.e., for 10-day PDF, edit the file: `/utils/pdf/livereload/public/tenday/index.html`
 3. Modify the `index.html`, `section-00.css` (other CSS), or `main.js` files to create a simple HTML page that closely matches the reference bulletin image (JPEG).
+4. View the updated HTML page, re-loaded with live reload in the web browser.
 
 <Callout type="info">
 NOTE: Ensure that certain text content is placed within `<div>` elements with fixed width and fixed height to keep everything contained on a single PDF page.
@@ -104,9 +105,11 @@ For guidance on how text and elements should be resized, refer to the **"adjustT
 Add/delete new assets following the pattern (relative to the current directory, i.e., in `/utils/pdf/livereload/public/tenday/`)
 
 - CSS/JS files
+- Font files
 - Picture files
-- Use mid-resolution pictures ideally having small size in KB (kilobytes) but still looks neat in the PDF, to achieve optimized, small-size network-friendly PDF files for downloading
-View the updated HTML page, re-loaded with live reload in the web browser
+   <Callout>
+   Use mid-resolution pictures ideally having small size in KB (kilobytes) but still looks neat in the PDF, to achieve optimized, small-size network-friendly PDF files for downloading
+   </Callout>
 
 ### Update the EJS file
 

diff --git a/docs/pages/changelog.mdx b/docs/pages/changelog.mdx
@@ -8,7 +8,7 @@ This page contains summary of features and enhancements on major ACAP versions a
 
 ### Version 2 (ACAP 2.0)
 
-_2024 – ongoing_
+_June 2024 - ongoing_
 
 Version 2.0 summarizes ongoing enhancements and new features added to the initial ACAP version.
 

diff --git a/docs/pages/post-installation/google-search.mdx b/docs/pages/post-installation/google-search.mdx
@@ -68,7 +68,6 @@ Login to a Google account.
 
 ### Submit a Sitemap
 
-
 <Callout>
 A `sitemap.txt` file should be available in the ACAP production GitHub Pages website if it was deployed with 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>
@@ -79,10 +78,75 @@ A `sitemap.txt` file should be available in the ACAP production GitHub Pages web
    https://<REGION_N_ACAP>.github.io/sitemap.txt
    ```
 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)
-5. While waiting, observe and resolve errors that the Google Search Console may display in the dashboard - **Pages** tab.
-6. After a few days up to several weeks after a successful page indexing, search for your website in Google Search and observe if it will be among the top search results.
 
+</Steps>
+
+
+## URL Inspection
+
+While waiting for the pages to become indexed, inspect each URL defined in the `sitemap.txt` file in the Google Search Console's **URL Inspection** tab once or several times.
+
+<Steps>
+
+### Inspect URLs
+
+1. Press the **URL Inspection** tab in the left navigation menu.
+2. Enter a URL from the `sitemap.txt` file in the upper search bar, i.e.,
+   ```text copy
+   https://acap-bicol.github.io/bulletins/
+   ```
+
+   <Callout>
+   Note that the URL ends with a forward slash `/` as defined in the **sitemap.txt** file.<br />
+   <b>`https://acap-bicol.github.io/weather-services/`</b> and not <br />
+   `"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)
+
+   <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)
+
+   <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)
+
+### Inspect All Sitemap URLs
+
+Repeat the [Inspect URLs](#url-inspection) and [Request Page Indexing](#request-page-indexing) steps for every URL defined in the `sitemap.txt` file.
+
+</Steps>
+
+## Debug and Observe Errors
+
+While waiting, observe and resolve errors that the Google Search Console may display in the dashboard - **Pages** tab.
+
+<Steps>
+
+### Resolve Errors
+
+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)
+
+Inspect and resolve each error log.
+
+
+
+### Confirm Indexed Pages
+
+After a few days up to several weeks after a successful page indexing, view and confirm the list of indexed pages in the Google Search Console's **Pages** → **View data about indexed pages** page.
+
+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)
 
 </Steps>
diff --git a/docs/pages/post-installation/opengraph.mdx b/docs/pages/post-installation/opengraph.mdx
@@ -50,17 +50,21 @@ ACAP only display OpenGraph images on its **production** website hosted at (GitH
    - **Admin Login** - `/admin/login`
    - **Superadmin Login** - `/superadmin/login`
 
-2. Create `1200 x 600` pixel picture banners for each of the public pages mentioned in step **#1**.
+2. Create `1200 x 600` pixel picture banners for each public page mentioned in step **#1**.
 
-3. (Optional) For reference, you can use ACAP's opengraph Photoshop PSD template to create new OpenGraph images. Press the (left) DOWNLOAD button to download the file.
+3. (Optional) For reference, you can use ACAP's OpenGraph Photoshop PSD template to create new OpenGraph images. Press the (left) DOWNLOAD button to download the file.
 
 <iframe
   src="https://acaptutorials.github.io/assets-cms/cards/embed?id=1AzipjfUV5G4rNyYnE6h&ts=1722964533"
   width="200"
   height="250"
 />
 
-4. A total of ten (10) new thumbnail files should be created, continuing from **step #2**. Let us use region 6 for example. Press the (left) DOWNLOAD button to download and view the picture files.
+4. A total of ten (10) new thumbnail files should be created, continuing from **step #2**. Let us use the Region 6 OpenGraph images **only as an example** to have preview samples of different OpenGraph images for each public page aside from Region 5. Press the (left) DOWNLOAD button to download and view the picture files.
+
+   <Callout type="info" emoji="ℹ️">
+   These are only examples. Regions can and should use OpenGrapch images that match and sync with their regions.
+   </Callout>
 
 <iframe
   src="https://acaptutorials.github.io/assets-cms/cards/embed?id=l8K7JfYhPcD7LUu26EmJ&ts=1722965055"
@@ -70,7 +74,7 @@ ACAP only display OpenGraph images on its **production** website hosted at (GitH
 
 ### Upload the OpenGraph Images
 
-1. Upload the ten (10) new OpenGraph to an online storage or hosting site. Their online URL should be publicly accessible after upload.
+1. Upload the ten (10) new OpenGraph to an online storage or hosting site, carrying on from [Create New OpenGraph Images](#create-new-opengraph-images) **step #2**. The online URLs of region-specific thumbnails should be publicly accessible after upload.
 
    <Callout>
    ACAP uploaded its OpenGraph images in Firebase Storage.
@@ -92,22 +96,26 @@ ACAP only display OpenGraph images on its **production** website hosted at (GitH
   </FileTree.Folder>
 </FileTree>
 
-1. Open the `/server/src/scripts/data/assets_dev.csv` file.
+1. Open and edit the `/server/src/scripts/data/assets_dev.csv` CSV file, preferably with Microsoft Excel or other software for editing tabular data, showing a visual overview of tables and columns.
+
+2. Replace the URL values under the **`url`** "CSV" column of the rows whose `page` column values are `"og"` and whose `filename` column content starts with `"og_"` prefix with the new OpenGraph image URLs from [**Upload the OpenGraph Images - step #2**](#upload-the-opengraph-images)
+
+   <Callout type="warning">
+   Refer to the format, content, and structure of the `/server/src/scripts/data/assets_dev.csv` CSV file when replacing values.
+   </Callout>
 
-2. Replace the `url` column of the rows with column `page = "og"` and whose `filename` column starts with `"og_"` with the new OpenGraph image URLs from [**Upload the OpenGraph Images - step #2**](#upload-the-opengraph-images)
-
-| filename | page name | public page route |
-| --- | --- | --- |
-| og_home | Home Page | `/` |
-| og_services | ACAP Services | `/weather-services` |
-| og_calendar | Cropping Calendar | `/cropping-calendar-v2` |
-| og_recommendations | Seasonal / 10-Day Recommendations | `/agroclimatic-services` |
-| og_bulletins | Bulletins PDF Download | `/bulletins` |
-| og_bulletins_10day | 10-Day Bulletins PDF Download | `/bulletins/weather` |
-| og_bulletins_seasonal | Sesaonal Bulletins PDF Download | `/bulletins/seasonal-outlook` |
-| og_bulletins_typhoon | Special Bulletins PDF Download | `/special-weather-forecast` |
-| og_admin | Admin Login | `/admin/login` |
-| og_superadmin | Superadmin Login  | `/superadmin/login` |
+   | filename | page name | public page route |
+   | --- | --- | --- |
+   | og_home | Home Page | `/` |
+   | og_services | ACAP Services | `/weather-services` |
+   | og_calendar | Cropping Calendar | `/cropping-calendar-v2` |
+   | og_recommendations | Seasonal / 10-Day Recommendations | `/agroclimatic-services` |
+   | og_bulletins | Bulletins PDF Download | `/bulletins` |
+   | og_bulletins_10day | 10-Day Bulletins PDF Download | `/bulletins/weather` |
+   | og_bulletins_seasonal | Sesaonal Bulletins PDF Download | `/bulletins/seasonal-outlook` |
+   | og_bulletins_typhoon | Special Bulletins PDF Download | `/special-weather-forecast` |
+   | og_admin | Admin Login | `/admin/login` |
+   | og_superadmin | Superadmin Login  | `/superadmin/login` |
 
 ### Upload the New OpenGraph URLs
 

diff --git a/docs/pages/post-installation/webmap.mdx b/docs/pages/post-installation/webmap.mdx
@@ -68,6 +68,10 @@ You can use Firebase Storage in case a new MapBox account is not readily availab
 
 Replace the `NEXT_PUBLIC_GEOJSON_URL` variable with the GeoJSON file's remote URL after uploading it to Firebase Storage.
 
+### Use a Target Environment
+
+Open the server `.env` file. Update the `FIREBASE_SERVICE_ACC` and `FIREBASE_PRIVATE_KEY` keys with the **development** key values.
+
 ### Upload the AMIA Villages Data
 
 1. Upload the new AMIA Villages information (CSV file) to Firestore.
@@ -76,6 +80,7 @@ Replace the `NEXT_PUBLIC_GEOJSON_URL` variable with the GeoJSON file's remote UR
    ```bash copy
    npm run seed:01_amiavillages
    ```
-4. Re-deploy to the `development` and `production` environments to view the updates on the live sites.
+4. Re-deploy to the `development` environment to view the updates on the live site.
+5. Repeat starting from the [Use a Target Environment](#use-a-target-environment) using the `production` Firebase keys to view the updates on the live production GitHub Pages site.
 
 </Steps>