jonrh / jonrh.is Goto Github PK
View Code? Open in Web Editor NEW๐ป Personal website, built with React & Next.js
Home Page: https://jonrh.is
License: MIT License
๐ป Personal website, built with React & Next.js
Home Page: https://jonrh.is
License: MIT License
Given GatsbyJS fast development and braking changes I think it might make sense to look into a full fledged testing of my site. A simple approach would be to visit every path and fail if there is any errors.
Ideas for things to test for:
I do not think that this is causing any major problems, it just bangs up the style for source code (Prism). I found this issue that seems to be related:
The example code on using remark has a usage of having draft blog posts. Replicate something similar:
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark
This blog is currently written in GatsbyJS. It has been exciting but quite painful to set up and maintain. Basically I don't consider the cost of it worth it anymore. I think I would be better off by using create-react-app or reason-scripts.
Reasons I'm unhappy with GatsbyJS:
Currently the developer console of browsers give a 404 error message that no favicon was found. The task is to add my previous one. It is probably no problem so this issue serves mainly as a reminder.
At the time of writing I have successfully set up CircleCI to automatically deploy static files to S3 on AWS and to invalidate the CloudFront cache. The build takes about 2 minutes but could be improved in a few ways.
First I'm manually installing awscli
with a bunch of overhead. It may be that CircleCI is clever enough to use that as a cache but maybe not.
The big gain is going to be in node_modules/. I tried to cache on the yarn.lock
file but it didn't seem to work (see commit 8a58059). In related commits I had it set up for package.json. Maybe that's good enough.
Here is an example config:
https://github.com/CircleCI-Public/circleci-demo-javascript-express/blob/master/.circleci/config.yml
Overall I'm not too concerned about this at the moment, 2 minutes is fine.
Deprecation warnings from React about PropTypes
and createClass()
in preparation for React v16. I think I use PropTypes
in my code but createClass()
probably comes from GatsbyJS internals.
These warning messages only appear when developing locally but it would be ideal to get rid of them if possible.
CircleCI is set up in such a way that when deploying the master
branch we delete the file robots.txt
. That file is not deleted on the dev
branch because we want to tell search engines "hey, don't index dev.jonrh.is" so that my site doesn't get duplication penalty.
GatsbyJS supposedly supports adding static files by putting files in the static/
folder. I tried it however it didn't seem to work. The task is to look into this and get it working properly. This blocks automatic deployments to jonrh.is.
It might be that I'm running an old version of GatsbyJS that didn't have built-in support for the static folder. Might have to upgrade. Worth looking into it first though.
Error message in the Chrome developer console:
I'm fairly sure that the culprit is in the file Template.js
:
At the moment I'm not quite sure what is causing this issue nor what real effect it has.
Might be related: gatsbyjs/gatsby#1082
Make blog text justified. I think this should just be a simple CSS property but we will see. Look into if it is possible to have LaTeX style hyphenation. I have seen it before but not sure how it is implemented.
The way I have it set up right now is that the file robots.txt is only put on https://dev.jonrh.is. See the CircleCI config file. I thought that a missing robots.txt file was technically okay. However when testing http://browsershots.org/ I get a warning saying the file is missing.
https://dev.jonrh.is/robots.txt <- Exists as expected
https://jonrh.is/robots.txt <- Error 404
Currently I'm using GatsbyJS v1.1.0, latest is v1.9.49. I'm guessing there have been a lot of changes since then so it would probably be worth it to upgrade so I can keep up with the latest features/documentation.
Long term I would like to have my site in few different languages: English, Mandarin, Hindi. Maybe Icelandic, Spanish, and French.
Start work on implementing automatic deployments when new commits land in Git. Currently I am manually building npm run build
then dragging the generated files over to Cyberduck to upload to AWS S3. It is not too bad but the experience could be a lot better.
What I have in mind is to have two environments: jonrh.is and dev.jonrh.is. Ideally I would like to simply push to master which would deploy to jonrh.is but I have run into few differences between locally tested sites and sites deployed. For example issues with HTTPS. I haven't decided yet on a branch strategy but intuitively I think it would be best if master would deploy automatically to jonrh.is and a dev branch would automatically deploy to dev.jonrh.is.
I haven't decided yet on what CI tool to use. Might be worth re-surveying the SaaS options out there. Trusty Jenkins also comes to mind.
Write a 50-160 character summary of every blog post for better SEO. Refactor components/Post.js
to accept an additional metaDescription
prop which will be put in a <meta name="description" contents={metaDescription}>
tag in the <Head>
. Update every blog post accordingly.
For more than 10 years I've used a Internet Explorer compatible favicon.ico with a single dot (because it's only 16x16). It probably time to change that. The Bespoke Dashboard logo would be probably be a good candidate.
The tasks:
I believe I have found the problem that blocks me from publishing the website.
No errors appear when developing locally.
When the site is tested on HTTP: http://dev.jonrh.is.s3-website-us-east-1.amazonaws.com/
When the site is tested on HTTPS: https://dev.jonrh.is/
I suspect that something is broken with the plugin gatsby-plugin-offline. On HTTP Chrome alerts that since the service worker does not have a HTTPS origin it was blocked. Then the site works as expected. However when HTTPS is used there seems to be some error in the service worker and you can not switch between pages.
One way to solve this temporarily would be to try to disable or remove the gatsby-plugin-offline plugin.
This is how it should look like:
This is what it sometimes looks like:
Apparently a <div>
can not be nested in a <p>
in HTML. Which I guess makes semantic sense when I think about it. According to this a <div>
automatically closes a <p>
which would explain the funky look. It looks correct while developing locally but breaks when built for release.
The task is to rework the Bio component to avoid this issue.
With the amount of errors and fast development pace of GatsbyJS I think it might be prudent to set up error reporting for the site. Rollbar or something similar.
Might want to look into if that can be done in the first place, that is see if it okay to have a Rollbar key being bublic. If it is an issue I could maybe obfuscate the key, would at least ward off crawlers.
I guess it would make sense to set up a Slack channel with notifications as well.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.