wrux / bloke

Website for Bloke Blog

Callum Bonnyman

👋 Hello There

Check out my side-projects

• Personal website
• WRUX
• Manhole Gallery
• Perpetual Pizza

🧞 My Stats

bloke's Issues

Optimise markup for search engines

Is your feature request related to a problem? Please describe.

Ensure that all pages have the correct SEO meta data.

Describe the solution you'd like

Add the following to all pages:

• Meta title and description
• Featured image open graph data

Links:

• https://www.sanity.io/plugins/sanity-plugin-seo-tools

Data coming from Sanity CMS is not typed

Is your feature request related to a problem? Please describe.

Data coming from Sanity is not properly typed so the any keyword was used temporarily.

Describe the solution you'd like

• Generate types for Sanity schema objects
  • https://www.sanity.io/plugins/sanity-codegen
• Refactor NextJS frontend to remove all any types and instead use Sanity types
• Update Typescript config to disallow any types

Create 404 template

Is your feature request related to a problem? Please describe.

Create a 404 page template with a link to the homepage

Describe the solution you'd like

• Create pages/404.tsx with some basic missing page information
• Link to the homepage
• Link to the list of countries

Prevent unwanted commits or code pushes

Is your feature request related to a problem? Please describe.

Prevent unwanted commits or pushes to branches to limit the possibility of introducing broken code

Describe the solution you'd like

Setup git hooks to control the contribution workflow.

• Use conventional commits
• Run ESLint fix on pre-commit
• Lint commit message and codebase on push

Husky git hooks: https://github.com/typicode/husky

Efficiently encode images

Is your feature request related to a problem? Please describe.

Images are currently served in jpeg format, causing a slight hit in browser performance

Describe the solution you'd like

Load WEBP images

Image grid

Goal

Create an image grid content block which displays a masonry grid on the frontend

Steps

• Create image gallery block in CMS schema
• Create preview component in CMS
• Create masonry grid component, with column-count: 3 fallback

Storybook

Is your feature request related to a problem? Please describe.

Preview components independently to the frontend.

Describe the solution you'd like

Create a Storybook and render all visual components.

Country section

Goal

The blog is travel related so each blog post should be associated with one or more countries.

Steps

• List all countries in alphabetical order at /countries
• Link to related countries from blog page and teasers
• Country detail page

Dark mode

Is your feature request related to a problem? Please describe.

No dark mode

Describe the solution you'd like

• Create dark mode switch in header
• Default to user's preference
• Create dark mode colour scheme

Optimise delivery of images

Goal

Optimise the delivery of images and reduce the overall performance of the page.

Procedure

NextJS provides a responsive image component next/image, so all components with images should be refactored to use the responsive image.

• Refactor cover-image.tsx component
• Refactor blocks/image.tsx component
• Refactor the image grid component once created
• Check performance tests on Vercel

Automatically organise code

Is your feature request related to a problem? Please describe.

Code should be formatted automatically and consistently.

Describe the solution you'd like

Configure Prettier for:

• JSON
• Markdown
• Tailwind

CMS preview in production

Is your feature request related to a problem? Please describe.

Sanity supports previewing content in production.

Describe the solution you'd like

The NextJS starter comes pre-configured with a preview API, this needs to be correctly setup.

Docs: https://www.sanity.io/docs/preview-content-on-site

Countries overview map

Is your feature request related to a problem? Please describe.

Create an overview page which shows a world map with each country mentioned in the blog highlighted. When the user clicks on a country, they will go to the country detail page.

Describe the solution you'd like

• Add country code to country schema
• Pull country data for posts from the DB
• Test map libraries and build a map component with the country data
• https://github.com/d3/d3 (about 80kb) 👍 nice example
• https://datamaps.github.io/ (almost 100kb)
• https://github.com/kadoshms/react-jvectormap (900kb) 👎

Image side by side

Is your feature request related to a problem? Please describe.

Sometimes it's better to have 2 images side by side. This can sort-of be achieved using the image grid component, but that assumes a 3 column layout above a certain breakpoint.

Describe the solution you'd like

Explore 2 possible solutions:

1. Add a field to the image grid for layout, this can switch between flex/masonry image grids
2. Image grids that contain 2 images should just use a flex layout and images with 3 or more should display the masonry grid

Landing page builder

Is your feature request related to a problem? Please describe.

Create a simple landing page builder with various blocks.

Describe the solution you'd like

• Editing landing pages should be simple, you just need to click a button and add a block.
  • This can be implemented easily using the Array schema type
• Landing page fields:
  • Page title
  • Slug
  • Array of blocks
• Render all landing pages
  • Use NextJS catch all routing for landing page template
  • Register all static paths and render all pages as static pages
• Use pre-built landing page components as reference
  • Tailwind components
  • TailwindUI

Additional context

Example page body component

const blockSerializers = {
  types: {
    imageBlock: () => (props) => (
      <Container>
        <Figure {...props} />
      </Container>
    ),
    imageGridBlock: (props) => (
      <Container>
        <ImageGrid {...props} />
      </Container>
    ),
    textBlock: ({ node }) => {
      const { content } = node;
      return (
        <BlockContent
          className="block prose lg:prose-xl mx-auto"
          blocks={content}
          projectId={process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}
          dataset={process.env.NEXT_PUBLIC_SANITY_DATASET}
        />
      );
    },
  },
};

const PageBody: React.FC<Props> = ({ content }) => (
  <BlockContent
    blocks={content}
    projectId={process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}
    dataset={process.env.NEXT_PUBLIC_SANITY_DATASET}
    serializers={blockSerializers}
  />
);

Use aliased file paths

Is your feature request related to a problem? Please describe.

Common file paths should be aliased to avoid using ../../.

Describe the solution you'd like

Create Webpack path aliases

Add Tailwind typography for post content

Goal

Provide nice typography for the post content

Steps

• Install https://github.com/tailwindlabs/tailwindcss-typography plugin
• Wrap content in text block with class provided by typography plugin

Image masonry grid does not use Next responsive image component

Describe the bug

The image masonry grid does not use the next/image component. This is because the masonry grid uses CSS text columns and it can cause the images to break into the column mid-image

Expected behaviour

All images on the site should use the next/image component and have no issues with images breaking inside text columns