I’ve been testing the current version of the package against test.frontity.org and it works great so far. In that site we have a lot of dummy content prepared to test WordPress themes, so I think that if the package is valid for that content, it will cover most of the use cases. Moreover, the package is really easy to use. Congrats everyone
This how I validated the urls, in case it’s useful for someone:
How to validate your urls
In order to test it against test.frontity.org, I came up with a way of validating the content that could be useful for other users validating their webs. I tested it locally with a new Frontity project using mars-theme
. This is what I did:
1. Install @frontity/amp
package
In order to test the package I first installed it and add it at the top of the frontity.settings.js
file. Apart from that, I created two sites: one for AMP urls and other for not AMP urls. This is how it looks like:
const settings = [
{
name: "not-amp",
state: {
frontity: {
url: "http://localhost:3000",
title: "Test Frontity Blog",
description: "WordPress installation for Frontity development",
},
},
packages: [
{
name: "@frontity/mars-theme",
state: {
theme: {
menu: [
["Home", "/"],
["Nature", "/category/nature/"],
["Travel", "/category/travel/"],
["Japan", "/tag/japan/"],
["About Us", "/about-us/"],
],
featured: {
showOnList: true,
showOnPost: true,
},
},
},
},
{
name: "@frontity/wp-source",
state: {
source: {
url: "https://test.frontity.org",
},
},
},
"@frontity/tiny-router",
"@frontity/html2react",
],
},
{
name: "amp",
match: ["\\/amp\\/?($|\\?|#)"],
state: {
frontity: {
url: "http://localhost:3000",
title: "Test Frontity Blog",
description: "WordPress installation for Frontity development",
},
},
packages: [
"@frontity/amp",
{
name: "@frontity/mars-theme",
state: {
theme: {
menu: [
["Home", "/"],
["Nature", "/category/nature/"],
["Travel", "/category/travel/"],
["Japan", "/tag/japan/"],
["About Us", "/about-us/"],
],
featured: {
showOnList: true,
showOnPost: true,
},
},
},
},
{
name: "@frontity/wp-source",
state: {
source: {
url: "https://test.frontity.org",
},
},
},
"@frontity/tiny-router",
"@frontity/html2react",
],
},
];
export default settings;
2. Make mars-theme
AMP-aware
Right now, mars-theme is not AMP-aware, so I had to do some minor modifications before validating the content of the posts and pages. This is not official, just a workaround to make it work. These are the changes I made:
- Remove !important from the post css, because it isn’t allowed in AMP.
- Add canonical link to the Head. In the
index.js
file I added this line:
<link rel="canonical" href={state.frontity.url + data.link} />
- Pass Featured Image through html. I was having some issues with our Image component so finally I change the
<FeaturedMedia />
component and used html2react
. I changed these lines for these ones:
<Html2React
html={`<img
alt="${media.title.rendered}"
src="${media.source_url}"
srcSet="${srcset}"
width="${media.media_details.width}"
height="${media.media_details.height}"
layout="responsive"
/>`}
/>
3. Run AMP validator in bulk through our sitemap.xml
In AMP, it’s easy to validate one url with tools like the official AMP validator, but going one by one is a pain, so I looked for a way to run the whole sitemap. This is the best I could find:
3.1 Start the Frontity project in localhost
Once I made the changes needed for mars-theme
, I started it in localhost:3000
, and just by visiting .../amp/
urls, Frontity loads the AMP version of the page.
3.2 Install amphtml-validator library in the project
The AMP team is mainting amphtml-library, and it allows you to validate urls in the CLI. This means that, after installing the package with npm install amphtml-validator
, if you run the following command, you get the result of the url (Pass or the proper error):
npx amphtml-validator http://localhost:3000/my-post/amp/
3.3 Add sitemap to our project
In order to go through all the urls of test.frontity.org, I create a new json file at the root of the project, sitemap.json
, to easily iterate through the urls. For doing this I followed these steps:
- Go to
view-source:https://test.frontity.org/post-sitemap.xml
and copy the XML. Here we are taking the posts, but this way is easy to change between the page-sitemap or the category-sitemap.
- Go to XMLtoJSON tool and paste the XML. I had to remove the first commented line.
- Copy the JSON and paste it in the
sitemap.json
file of our project.
- Search and replace the url (https://test.frontity.org in this case) for http://localhost:3000.
3.4 Create a script to run urls in bulk
Now that I was able run that command in our project and I had the sitemap in JSON format, it was a matter of running it for all the urls. For that, I created a validator.js
file in the root of the project, which looks like this:
const util = require("util");
const exec = util.promisify(require("child_process").exec);
const sitemap = require("./sitemap.json");
const urls = sitemap.urlset.url;
let urlsPass = 0;
let urlsError = 0;
let listErrorUrls = [];
const validate = async () => {
for (const url of urls) {
try {
const { stdout } = await exec(
"npx amphtml-validator " + url.loc + "amp/"
);
if (stdout) {
urlsPass++;
console.log(stdout);
}
} catch (err) {
urlsError++;
listErrorUrls.push(url.loc);
console.log(err.stderr);
}
}
console.log("Urls pass: " + urlsPass);
console.log("Urls error: " + urlsError);
console.log("List of error urls: " + listErrorUrls);
};
validate();
Once you have this script, you can run node validator.js
and it will iterate through the array of urls defined in the sitemap. Depending on the sitemap format the logic may change a bit, but it should be pretty similar.
Of course, I just added some basic logic to console.log the results, but it could be adapted as well. Maybe you just want the urls that fail for example.
Once you have the list of urls failing, you can use the console or go to https://validator.ampproject.org/ to check them one by one.