Some Frontity based Monkey business

Hello,

After spending 5 years developing compliance software I recently started freelancing again so I could “Modernise” my skillset.

This involved a bit of an industry trend assessment.

I found myself veering towards React. Then after looking at Gatsby and Next (as replacements for the traditional understrap based sites) I discovered the shiney new Frontity framework.

Which seemed perfect.

So, I’ve spent the past couple of weeks playing with Frontity to build my new website,
you can check it out here: https://primitivedigital.co.uk/

I must admit I’m impressed with Frontity, I’ve hit hardly any errors, which for a brand new framework is quite an achievement.

This is my own website so I can be a little experimental. As such I’ve included quite a bit of animation and image loading to measure performance impact.

This is currently deployed to Zeit Now and serving images from https://cloudinary.com/.

Thanks to a @luisherranz for the wp-rest-cache tip I’m now at 100% for 3 of the lighthouse metrics.

A couple of aria issue to fix then I’ll be adding custom post types and setting up additional deployments to do a comparison.

Then, pending some polishing/housekeeping I’ll make the repository available…

4 Likes

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:

2 Likes

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

1 Like