Some Frontity based Monkey business

Hey @shaun thanks a lot for sharing and welcome to Frontity :blush:

Awesome! Looking forward to seeing the code :slight_smile:

Awesome Shaun! Thanks for sharing your site with the community, much appreciated. :clap:

Is it ok for you if I include it on the next Frontity newsletter as well?

1 Like

Hi Reyes,
Yes, more than happy for you to share the site.

I’ll be doing some updates over the next couple of days and will add credits/link to frontity.org for you too.

:smile:

2 Likes

Great, thank you Shaun!

Wow some amazing work. :heart_eyes:

2 Likes

Hi @shaun. As I told you last week, I wanted to give you some comments about the code :slight_smile:

Build folder

First, you should be able to remove the /build folder from your git repository and add it to your .gitignore file because the new Now builder (@frontity/now) runs the build step in the cloud.

If it doesn’t work let me know and we’ll try to figure out why.

Routing with custom React elements

If you want to use a custom React element for the homepage, it’s better if you switch to “or” syntax. Instead of this:

const Theme = (
   ...
          <Body>
            {data.isFetching && <Loading />}
            {data.isHome && <Home />}
            {data.isArchive && <List />}
            {data.isPostType && <Post />}
            {data.is404 && <Page404 />}
          </Body>
);

Do this:

const Theme = (
   ...
        <Body>
          {(data.isFetching && <Loading />) ||
            (data.isHome && <Home />) ||
            (data.isArchive && <List />) ||
            (data.isPostType && <Post />) ||
            (data.is404 && <Page404 />)}
        </Body>
);

That means that if <Home /> loads, <Post > won’t. Even if the homepage is a "page".

We want to release a <Switch> component to make this easier in the future.

Package name

You don’t have to start your package with "@frontity" (like "@frontity/primitiveone").

Actually, as that name is the npm package name, you can name it only "primitiveone" or use your own npm organization scope.


Apart from that I see some 404’s right now because your WP site is down. Let me know when it’s up again and I’ll take another look at the code to see if I can help you more! :slight_smile:

Hi Luis,

So that’s weird.
Seems the last deployment failed, it’s a clean wp env and I updated frontity last week.

I changed the settings in wp, resaved and cleared the rest cache. It now loads the HP but not sure if the cache is having issues with the _embed=true.

I’ll look into it further later today

1 Like

So, brief follow up…

Build folder

It was only one file, build/server.js, that seemed to be getting commited.
I have manually removed it and added an exclude rule for the file.

Routing with custom React elements

The previous 404 issues seemed to be caching.

The <Switch> sounds good.
Changing this syntax breaks my current setup.
Reading your comment has made me realise I am just loading and consecutively here…

Package name

Config sorted, thanks and published :smile:

3 Likes

Thanks a lot for the repo @shaun
Your theme is great :slight_smile:

2 Likes

Hi !
Can you please tell me that how you ran YoastSEO sitemap.xml on your site ?
I am also doing it in a same way but always getting error of 404. So please help me.
Thanks

Hi @bilalasif95,

Exact setup depends on your hosting and the post types you are listing in the sitemap, at present this site is currently deployed on Vercel.

301 redirects set on the client side and a canonical tag in the html head.
These are set in the Vercel config file here: primitiveone/vercel.json at master · primitiveshaun/primitiveone · GitHub

Yoast SEO will automatically create a 301 for /sitemap > /sitemap_index on your WP install so just point your redirect at that.

To get the client side URL displayed in the sitemaps I had to hack the core files in Yoast SEO to replace the root URL and disable auto-updates (there’s a few issues open re: headless support in the yoast repo, I think the official line is it’s not supported yet).

I updated this code in the plugins/wordpress-seo/inc/sitemaps/class-sitemaps-renderer.php

/**
 * Build the `<sitemap>` tag for a given URL.
 *
 * @param array $url Array of parts that make up this entry.
 *
 * @return string
 */
protected function sitemap_index_url( $url ) {

	$date = null;

	if ( ! empty( $url['lastmod'] ) ) {
		$date = $this->date->format( $url['lastmod'] );
	}
	// sk-dev-Hack
	$frontend  = "primitivedigital.uk";
	$backend = "api.primitivedigital.uk";
	$url['loc'] = str_replace($backend, $frontend, $url['loc']);

	$url['loc'] = htmlspecialchars( $url['loc'], ENT_COMPAT, $this->output_charset, false );

	$output  = "\t<sitemap>\n";
	$output .= "\t\t<loc>" . $url['loc'] . "</loc>\n";
	$output .= empty( $date ) ? '' : "\t\t<lastmod>" . htmlspecialchars( $date, ENT_COMPAT, $this->output_charset, false ) . "</lastmod>\n";
	$output .= "\t</sitemap>\n";

	return $output;
}

See image below:

I wouldn’t really say this is a recommend way of doing this, @koli14 was also looking into similar issues at the time, not sure if he’s got a better solution…

However, I hope this helps :slight_smile:

I have this code in my function.php

 function change_urls($url_list)
{
    for ($i = 0; $i < count($url_list); $i++) {
        foreach ($url_list[ $i ] as $attr => $value) {
            if ('loc' === $attr) {
                $parsed_url              = wp_parse_url($value);
                $parsed_url['scheme']    = 'https';
                $parsed_url['host']      = '{my frontity url (e.g.:google.com)}';
                $url_list[ $i ][ $attr ] = str_replace('//{my wp url(e.g.: wp.google.com}/', '//{my frontity url}/', $value);
            }
        }
    }
    return $url_list;
}

add_filter('core_sitemaps_posts_url_list', 'change_urls');
add_filter('core_sitemaps_taxonomies_url_list', 'change_urls');
add_filter('core_sitemaps_users_url_list', 'change_urls');

And then use a robots.txt: Use a robots.txt file in the root - #2 by christian.nascimento

Sitemap: https://{your wp url}/wp-sitemap.xml
User-agent:*
Disallow:

Thanks sir for explaining in a very good way. But i think it won’t be helpful for me because i have deployed my site through dockers and also i don’t want to open Yoast SEO sitemap file. I want to open my own generated sitemap.xml on my frontity web (I generated that file through react-router-sitemap) which contains only front-end routes.

Hey @bilalasif95,
Sorry, that’s a totally different matter.

I know Frontity does has configurable support for serving some root/public files (robots.txt).

As react-router-sitemap relies on webpack/babel config I’m not sure how/if you can do this.

I’d have to suggest you open a new ticket on the community if you didn’t manage to get it running.

OK sir sure. I am opening a new ticket. Yes you are right i want to open a root/public file named as sitemap.xml generated from react-router-sitemap same like robots.txt

1 Like

Hi @bilalasif95,

Did you solve this issue?

Hi @mike1 !
Yes we have loaded sitemap.xml file from nginx and now it’s working But what exactly i want, wasn’t resolved in frontity.
Thanks

Yoast SEO sitemap, not working. please help. Thanks

Hi @brightbhutta

You’ll have to elaborate on that a bit further