Reconfigure relevant parts of Vue app to query and link to Wordpress instead of Laravel

[ngottlieb]

This is blocked until we get more information on the Wordpress API (and a test environment) from Jai

Certain reach-related objects currently displayed on the Vue app are moving to Wordpress, so we need to refactor the Vue app to query the Wordpress API for these objects and to link to their wordpress URLs for detail display.

This includes:

• Articles ("news")
• Projects
• Documents
• Accidents

[ngottlieb]

From Jai Sen:

for discussion on today’s call, we’ve got the news/post [article] API set up and functioning here: https://amwwaterdev.wpengine.com/wp-json/wp/v2/posts

With the default output and 10 posts returned by default, this currently looks like this:

[
  {
    "id": 105,
    "date": "2023-05-10T20:17:01",
    "date_gmt": "2023-05-10T20:17:01",
    "guid": {
      "rendered": "https://amwwaterdev.wpengine.com/?p=105"
    },
    "modified": "2023-05-10T20:20:53",
    "modified_gmt": "2023-05-10T20:20:53",
    "slug": "test-article",
    "status": "publish",
    "type": "post",
    "link": "https://amwwaterdev.wpengine.com/2023/05/10/test-article/",
    "title": {
      "rendered": "Test Flathead River Article"
    },
    "content": {
      "rendered": "\n<p>Testing Web article text with an image uploaded below. </p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"820\" src=\"https://amwwaterdev.wpengine.com/wp-content/uploads/2023/05/Screen-Shot-2022-10-07-at-1.08.22-PM-1024x820.png\" alt=\"\" class=\"wp-image-107\" srcset=\"https://amwwaterdev.wpengine.com/wp-content/uploads/2023/05/Screen-Shot-2022-10-07-at-1.08.22-PM-1024x820.png 1024w, https://amwwaterdev.wpengine.com/wp-content/uploads/2023/05/Screen-Shot-2022-10-07-at-1.08.22-PM-980x785.png 980w, https://amwwaterdev.wpengine.com/wp-content/uploads/2023/05/Screen-Shot-2022-10-07-at-1.08.22-PM-480x384.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" /></figure>\n\n\n\n<p>And then some text below. </p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>&#8220;The Turbulent waters quote&#8221;</p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex\"></figure>\n<cite>CSKT</cite></blockquote>\n",
      "protected": false
    },
    "excerpt": {
      "rendered": "<p>Testing Web article text with an image uploaded below. And then some text below.</p>\n",
      "protected": false
    },
    "author": 3,
    "featured_media": 0,
    "comment_status": "open",
    "ping_status": "open",
    "sticky": false,
    "template": "",
    "format": "standard",
    "meta": {
      "_et_pb_use_builder": "off",
      "_et_pb_old_content": "",
      "_et_gb_content_width": ""
    },
    "categories": [
      1
    ],
    "tags": [
      8,
      9,
      7
    ],
    "ppma_author": [
      6
    ],
    "acf": [],
    "featured_image_src": null,
    "featured_image_src_square": null,
    "author_info": {
      "display_name": "Kevin Colburn",
      "author_link": "https://amwwaterdev.wpengine.com/author/kevin/"
    },
    "authors": [
      {
        "term_id": 6,
        "user_id": 3,
        "is_guest": 0,
        "slug": "kevin",
        "display_name": "Kevin Colburn",
        "avatar_url": {
          "url": "https://amwwaterdev.wpengine.com/wp-content/uploads/2023/05/Swimmers-scaled.jpg",
          "url2x": "https://amwwaterdev.wpengine.com/wp-content/uploads/2023/05/Swimmers-scaled.jpg"
        },
        "description": "River bio",
        "first_name": "Kevin",
        "last_name": "Colburn",
        "user_url": "",
        "user_url_2": ""
      }
    ],
    "_links": {
      "self": [
        {
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/posts/105"
        }
      ],
      "collection": [
        {
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/posts"
        }
      ],
      "about": [
        {
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/types/post"
        }
      ],
      "author": [
        {
          "embeddable": true,
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/users/3"
        }
      ],
      "replies": [
        {
          "embeddable": true,
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/comments?post=105"
        }
      ],
      "version-history": [
        {
          "count": 0,
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/posts/105/revisions"
        }
      ],
      "wp:attachment": [
        {
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/media?parent=105"
        }
      ],
      "wp:term": [
        {
          "taxonomy": "category",
          "embeddable": true,
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/categories?post=105"
        },
        {
          "taxonomy": "post_tag",
          "embeddable": true,
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/tags?post=105"
        },
        {
          "taxonomy": "author",
          "embeddable": true,
          "href": "https://amwwaterdev.wpengine.com/wp-json/wp/v2/ppma_author?post=105"
        }
      ],
      "curies": [
        {
          "name": "wp",
          "href": "[https://api.w.org/{rel}](https://api.w.org/%7Brel%7D)",
          "templated": true
        }
      ]
    }
  },
   }
]

A couple of notes:

• Like the menu API I shared last week, the posts/news one can be templated so we can extensively customize the output (what’s above is just the default)
• There are a lot of parameters we get out of the box with WP’s REST API (docs that I shared last week https://developer.wordpress.org/rest-api/ ) and we can add additional ones
• One of the ways we can extend this is adding query parameters from FacetWP, the AJAX search/sort/filter plugin, as well as from SearchWP, the search engine, so for example an API call could return results matching a search term if we will ever need anything like that
• Note that a lot of markup and HTML comes with the content, we can output plain text content and summaries/excerpts for posts (vs all that rendered content)
• Note also image handling, we can alias image references and features image thumbnails to their locations on the S3 image bucket through a different means (but the image paths output by the posts API will serve up S3 image paths in output)
• Default REST APIs are set up for projects, documents, and accidents but these will definitely need customization to provide the right output including custom fields. They also need sample content so you can see meaningful output, I provided the links as proof of concept that they’re functioning but many are blank or just have completely placeholder content. We will have sample imported content added to the dev site from import tests this week and initial templates that include custom fields up and running tomorrow

[ngottlieb]

@AWKevin I have a question here: we have a bit of a framework for viewing articles, etc., inside the Vue app from Drew's initial prototype work. So we could display the articles in full in the Vue app when someone clicks on them from a reach if we wanted (using this API). But I think my vote would be just to link to the wordpress page -- get the full design benefit, etc., and avoid duplicating anything. Maybe have the link open in new tab / window to be extra clear these are separate sites. Just wanted to confirm your opinion on it before I go ahead.

[AWKevin]

That sounds right to me, is in keeping with the philosophy of our approach, and I trust your judgement. Go for it.

[ngottlieb]

Current status:

• articles are fully hooked up
• accidents are hooked up, but have some questions about fields and schema
• still waiting on projects and documents schema

code is up to date in the referenced [WIP] PR (#571)

[ngottlieb]

@rosenzw I've moved this task over from the old board and am ready to resurrect the code. Any pointers about where to find the APIs to work with for the new WP site?

[ngottlieb]

I've brought the code up-to-date, so it shouldn't be hard to make fully functional. I need schemas for accidents, articles, documents, and projects whenever that is possible @rosenzw and then this can be fully hooked up to the new WP site.

[rosenzw]

We've prioritized the ability for article tagging by name or river or alternative name vs ID in Wordpress and so will need to do the following programmatically on the NWS side to determine the id of the reach in Wordpress:

First search and find the reachID:
https://<baseURL>//wp-json/wp/v2/reachid/?slug=<NWI ReachID>

This returns the reachID record. For example:
`curl "https://new-site.americanwhitewater.org/wp-json/wp/v2/reachid/?slug=2347"

[
{
"id": 9296,
"count": 2,
"description": "2347",
"link": "https://new-site.americanwhitewater.org/reachid/2347/",
"name": "Cheat:(Canyon) Albright to Jenkinsburg Bridge:Canyon",
"slug": "2347",
"taxonomy": "reachid",
"meta": [],
"acf": [],
"_links": {
"self": [
{
"href": "https://new-site.americanwhitewater.org/wp-json/wp/v2/reachid/9296",
"targetHints": {
"allow": [
"GET"
]
}
}
],
"collection": [
{
"href": "https://new-site.americanwhitewater.org/wp-json/wp/v2/reachid"
}
],
"about": [
{
"href": "https://new-site.americanwhitewater.org/wp-json/wp/v2/taxonomies/reachid"
}
],
"wp:post_type": [
{
"href": "https://new-site.americanwhitewater.org/wp-json/wp/v2/posts?reachid=9296"
},
{
"href": "https://new-site.americanwhitewater.org/wp-json/wp/v2/article?reachid=9296"
},
{
"href": "https://new-site.americanwhitewater.org/wp-json/wp/v2/document?reachid=9296"
},
{
"href": "https://new-site.americanwhitewater.org/wp-json/wp/v2/project?reachid=9296"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
}
]
`

Then you must use the ID that was returned to get the posts you are interested in. For example:
curl https://new-site.americanwhitewater.org/wp-json/wp/v2/article?reachid=9296
Will then return all the articles associated with that reachID.

Here is the API we'll use to access content on wordpress from the NWI:

Currently the base URL is: new-site.americanwhitewater.org

Other Examples:
HTML:
Everything tagged with a specific reachID:
https://new-site.americanwhitewater.org/reachid/2347/

Find all Articles with reach ID of 2347
"https://new-site.americanwhitewater.org/wp-json/wp/v2/article/?reachID=2347?per_page=100&page=1"

Dump second 100 reaches in Wordpress:
https://new-site.americanwhitewater.org/wp-json/wp/v2/reach/?per_page=100&page=2

Reference (tags are used the same as the taxonomies):
https://developer.wordpress.org/rest-api/reference/posts/

https://www.advancedcustomfields.com/resources/wp-rest-api-integration/

[ngottlieb]

ok, thanks @rosenzw. No API yet for documents, projects, or accidents, or are those accessible via an equivalent endpoint?

[rosenzw]

Yes, note the ""wp:post_type":" section which lists the endpoints for all associations for this taxonomy. For example: associated projects are
https://new-site.americanwhitewater.org/wp-json/wp/v2/project?reachid=

Accidents still need to be associated on the wordpress side, but once they do they should show up. In fact, if you implement this by parsing all of the links returned in that API call, it could be dynamic where things get associated in Wordpress and then just show up in the NWI side.

Will need to test this.

[ngottlieb]

Some questions as I work with these endpoints:

1. article date: This one for example comes through with date and date_gmt, but they’re clearly different from the date shown on the page when you click on it (2011), which doesn’t appear to be in the json
2. Is it possible to get a featured image URL included in the API? The featured_media attribute appears to reference something in the Wordpress database, but it'd be ideal if we can just display it directly.
3. As with featured media, article author is just a reference. Can we get it to be something I can actually display?
4. Do we want excerpt fields for projects? If not, I'll just have to truncate the content myself to generate a short version.

I think that covers it for now...once accidents are up and running and more projects/documents are loaded I can dig in a bit more.

[ngottlieb]

@rosenzw ^^