First level topic pages using script as stress test
Step 1: What is changing in this MR?
Used this script: https://gitlab.com/jgarc/buyer-experience-topics-yaml-migration-script/-/blob/main/topics-migration.ipynb?ref_type=heads
Page content type for Topics Topics Content type
Note that it was practically impossible to keep the topics pages the same as the YAML data had a lot of variability in how it was constructed. As far as I know, I created the following changes that were intentional as a way of trying to standardize how our templates are used. Note that this script should work on nested pages as well, though I will need some small adjustments to the contentful-topics.js file to get everything to work nicely. I did end up manually adding the images, as to prevent duplication. Perhaps I will script this for the remaining nested routes.
Notable changes
- discontinued the use of
SlpBlockquote- This was only used in one page(with a regression on the version control), and it felt it was more viable to have the
topics-copy-blocksupport styling in blockquote. I created a simple style, but we can always revisit this
- This was only used in one page(with a regression on the version control), and it felt it was more viable to have the
- discontinued
read_timecontent line- this was used on three pages (microservices, devops, devsecops). I didn't want to add another optional field here. if we would like to keep using it, we should consider doing so programmatically.
- removed
textfrom thesolutions-resource-cardscard component- I will admit this started off as a bug with the migration script but noticed that the description text was similarly styled as the title. However, I want to be fair to this piece of content as it is used in 20 pages. This is the one thing I did that I admit was a bit lazy, so I could go back and add this content (albeit probably manually
😅 )
- I will admit this started off as a bug with the migration script but noticed that the description text was similarly styled as the title. However, I want to be fair to this piece of content as it is used in 20 pages. This is the one thing I did that I admit was a bit lazy, so I could go back and add this content (albeit probably manually
- support for only one single grouped and ungrouped
solutions-resource-cardscomponent- this component has a
groupedboolean value that is used to create tabs depending on what type of content you have. it didn't make sense for me to have two different blocks for similar content, so I merged them together if both happened to be grouped or ungrouped
- this component has a
- did not implement embedded videos in the copy
- 12 pages used them, if we would like to include them, we can potentially add an optional field into the content type here, or have them as hyperlinks in "on this page"
- commit to using
topics-copy-blockas the primary md block for this set of pages. There are a few pages that used alternatives, so I migrated them to use a single component. We could ABC this if we wanted to find the one we like the most, but simply picked the one I saw most often (used 391 times total, whilecopywas used 11 times on a single page andpartners-copy-blockwas used 1 time across 3 different pages.- i also noticed one instance of
SlpTableandtopics-info-table. I went ahead and added table styling into here as well
- i also noticed one instance of
-
there are some ga-attributes in here, that we will need to convert to hyperlinks in HTML with the necessarydata-*properties if we want to continue to use them on this set of pages.- This seems to no longer be the case
My approach for these pages was to essentially reconstruct the old YAML file's structure from Contentful. I am not in love with this solution, but using <component is="foo"> can make it hard to understand what is happening under the hood. I felt like this was an appropriate MVC, though I'm looking to see how other engineers are implementing pages on Contentful.
- Add logical checks to nested child templates so that routes that are one level deep will fetch content from contentful
- change some
nuxt-imgtags toimg- I noticed that
nuxt-imghas support for Contentful, we should look to orchestrate that if possible with our version of Nuxt
- I noticed that
- Remove relevant YML files
- Create a Topic page content type in Contentful
- Create topic page entries for all of the topics pages
Step 2: Ensure that your changes comply with the following, where applicable:
-
I, the Assignee, have run Axe tools on any updated pages, and fixed the relevant accessibility issues. -
These changes meet a specific OKR or item in our Quarterly Plan. -
These changes work on both Safari, Chrome, and Firefox. -
These changes have been reviewed for Visual Quality Assurance and Functional Quality Assurance on Mobile, Desktop, and Tablet. -
These changes work with our Google Analytics and SEO tools. -
These changes have been documented as expected.
Step 3: Add the appropriate labels for triage
This MR will have dex-approval::2-standard automatically applied, but please update it as follows. If deciding between two levels, go with the higher of the two: https://gitlab.com/gitlab-com/www-gitlab-com/blob/master/sites/handbook/source/handbook/marketing/digital-experience/marketing-site-approval-process/index.html.md
Step 4: Tag the appropriate person for review
Depending on which label is used, you may tag the following people as a Reviewer on this MR: https://about.gitlab.com/handbook/marketing/digital-experience/marketing-site-approval-process/#step-3-tag-the-appropriate-people-for-review
Closes #2874 (closed)