ajfisher / ajfisher.me Goto Github PK

Set up deploy workflows to be able to:

• Add deploy IDs to github project
• Checkout and build the project
• Run tests on the react components
• Build the static pages as an artifact
• Upload the files to S3

Pull together some core tests that need to be applied:

• Test each of the main components
• Add test running into the make file
• Add test completion to pre-commit step with husky
• Make tests as part of the deploy process.
• Add tests as part of the push and PR events.

Add this to the various links for nav and footer when using externals so that way they can't be abused.

rel="noopener noreferrer"

Resolve qualsys check fixes:

• Correct tls 1.2 > implementation
• Remove any ciphers not good enough,

At the moment there is no background colour on an image header so you get a slab of white. Use the same as a normal header so it is dark if the image can't load.

• Rebuild item as component
• Include font awesome icon fonts
• Get spacing correct for the reflow

Currently 404 page doesn't render properly. Update to use correct template and pull things in correctly from a layout standpoint.

Build a transformer plugin that will walk through the page AST and look for the image captions that have a link in them and then rebuild the html of the figcaption to be able to have a linked caption.

Add the overall /blog listing archival page which is a list of all items sorted by date.

• Utilise the same core as the main listing page with a less tight search query
• No pagination as per current site.
• Should live at /blog from a path standpoint
• Most recent featured item is called out in hero slot.
• Add link in nav

If you are on the page of the featured post then show the second featured post instead in the footer link

Likewise when on the home page, show the second post in the footer too rather than the first.

• Add the analytics plugin
• Configure with correct GA tracking ID
• Update site links to use OutBoundLink instead of A for things

At the moment the footer columns and the aside are out of alignment in the large and wide sizes.

Grab a set of images and build a gallery from it. Needs to be responsive and work as a media component in the page.

Update the colour palette and font choices to be a little more modern as the lobster ones have been used for a very long time now.

Add the lang=en field to the html tag attributes

Build mechanism to extract pull quotes from the text and display them:

• Extract quotes from the markdown
• Add pull quote ahead of the paragraph it appears on.
• implement styling

Set up a new structure in order to manage the transition to Gatsby

• Set up infra folder
• Create distinction between MD data and templates etc
• Remove all old node package and rebuild
• INstall the basic gatsby elements.
• Remove any old css and JS files etc.

Make the layouts for the different templates a bit more composable and break up the post layout to be more reusable.

• Move layout to postLayout
• Move the Main component to a separate file and include it
• Move the Aside component to a separate file and include it
• Article and StyledArticle have too much layout in it. Move to a higher abstraction to provide the container and the default styles for copy and then break the specific Article stuff out separately.
• Update Header to be able to take a featured post or the current post header.

At the moment, the minimum resolution is 501px, drop this down to a sub 400px minimum resolution and design for this.

• Improve layout
• Refactor styles so text is smaller
• Get ordering of navigation better
• Create correct padding across the article
• Update margins for blockquotes
• Get correct formatting of pre containers.

Create a new listing page template that will work for:

• Tag list
• Archive list
• Home page

Should provide ability to have

• Featured item called out in header section
• List of posts that can go to 2 columns on larger screen resolutions

Reimplement the footer as a set of components.

• Featured post
• Book links
• Video link
• Responsive styles

Fix up posts that have iframes and need to have the media container set.

Add a colophon page

• Write in markdown
• Add to pages section
• Add into main navigation

Need to add a template that can list out a project the right way.

Add a code highlighting option to the remark plugins to render the various code snippets correctly.

Add titles to all iframe containers from an accessibility standpoint

Create a template to be used for markdown pages.

• Use same core template as for Article
• Update content of the markdown files to reflect what is actual now
• update header to be able to not require things like dates etc.

On the blog pages, pull a featured post that's appropriate based on the tags on the current blog page. Will need some thought about this.

Create duotones for featured background images for posts using following config:

• Shadow #0C0C0C for all.
• Highlight: #FF5E9A
• Highlight: #EAFF5E
• Highlight: #FF5E9A

Provide the bg image as a set to chose from then use the front matter to determine which one.

• Add duotone config to posts.js query to produce them
• Leave default as the current, non duotoned image so no breakages.
• Add each duo tone with colour prefix as the name.
• Map the names through and then allow them to be chosen as an option in the front matter using feature_image_duotone

At the moment the base background image is a little poor quality.

• Create graphql queries to pull in appropriately rezed images
• Update components with Header to take an object of featured images
• Set up media queries to use the appropriate images for the right width

• Add display standalone to the manifest Use minimal-ui
• Add gatsby-plugin-offline and add to config
• Add the remove service worker plugin so this can be turned off correctly if needed.

Update SEO Component and then include it into the page head.

• Bring in React Helmet
• Include into all templates
• Provide appropriate titles for all pages
• Update SEO component to have correct information
• Add meta info
• Look at getting twitter card info available
• Add mechanism to bring in image for twitter if it exists
• Use twitter excerpt if that exists
• Add site url to the twitter image to reference it properly.

Add a new container component that is used to hold the various post meta data elements.

• Title of the post
• Tag list with links to the tag listing pages
• Publication date

Add robots.txt file to make sure search engines pick up the site the right way.

See the JS Devs link and you can see there is an issue with the pull quote because it contains quotes.

Need to change this so the plugin escapes them so they can be kept inside the data attribute

Add another edge lambda which changes the outbound response to be able to add the appropriate cache controls and add the content security headers.

At the moment it inherits the font size and it's a bit too small.

Home page is a special version of a listing page with fewer items.

See #17 for core and then additionally:

• Most recent featured item should be the header
• Add the line "Observations, code and commentary from ajfisher"
• Add additional featured post section at the top of the article with 2x items in it (meaning top three slots are featured)
• Next 10 posts will then go through as the remainder of the page under "recent posts" title
• Add link to /blog

Reimplement the page templates into react.

• Post
• Main listing page
• Home page
• Tag listing page
• Category page

Need to add the various components that needs to exist as well:

• Header
• Footer
• Metadata
• Tags
• Attribution
• Navigation
• Social links
• Post Meta info
• List item

Use link tags wherever possible for internal links to provide caching hints. At the moment the redirects are causing issues.

Linked to #17

Need to build and refine the post list component to accommodate for:

• Alternative style arrangement in main body of page versus the footer
• Have or not have image
• Have or not have an excerpt
• Have or not have publication date
• Have or not have word count details

Move to CSS grid in order to manage the layout better.

• Make 12 column grid for large and up screen sizes
• Make 1 column grid for smaller displays.

Update the production of the meta tags to:

• Unfurl properly in slack
• Add images conditionally depending on what type of page they are
• resolve duplicate meta tag issue

At the moment the format uses yyyy/mm/dd which is not right. Should use yyyy-mm-dd and then format it out to use for the slug.

Link to the book in the footer is busted and needs updating.

Make pages for tags lists:

• Implement a method kebabCasing paths for spaces etc for tag names
• Build pages for the tag lists on /tags/{tagname}
• Write gatsby query to build this
• Implement method of converting front matter tag string to taglist array

It's completely out of date now.

Use terraform:

• Put in a new S3 bucket
• Set up DNS routing
• Set up ACM for domain
• Cloud front distribution for the S3 bucket
• Set up specific deploy user for github access to deploy
• set up redirection for ajfisher.me to www.ajfisher.me
• add alternative ssl cert for ajfisher.me
• Fix issue with the refresh of a page redirecting to the 404 page

As part of response to #14 - update markdown files and CSS to use normal images with a <caption> tag to be added as content to provide things like links etc more appropriately. Keeps the markdown a bit more clean and purposeful.

To determine the featured post that should appear on the page. Do the following:

• If not a post then take the most recent
• Check the current post for tags then iterate over the featured post list and find the post with the highest overlap of tags. Display that one.
• If a tag page, check for featured post that matches this tag, if can't find then use most recent. If can find then use the same as the header one.