mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
clean up posts
This commit is contained in:
parent
e1928af5f8
commit
4195cf5891
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 261 KiB |
@ -1,125 +0,0 @@
|
|||||||
import Image from 'next/image'
|
|
||||||
import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
|
|
||||||
import {createSlug} from '../../../lib/createSlug'
|
|
||||||
import rainImage from './osman-rana-GXEZuWo5m4I-unsplash.jpg'
|
|
||||||
import dashboard from './dashboard-raspberry-pi-widgets.png'
|
|
||||||
import emojis from './emo5-removebg-preview.png'
|
|
||||||
|
|
||||||
export const metadata = {
|
|
||||||
authors: 'Ryan Freeman',
|
|
||||||
title: 'Changelog August 2023',
|
|
||||||
date: '2023-08-05',
|
|
||||||
description: 'July was a truly soggy month and apparently Ireland\'s soggiest July on record. Despite the crappy weather I\'ve managed to get some things done this month.'
|
|
||||||
}
|
|
||||||
|
|
||||||
export default (props) => <ArticleLayout
|
|
||||||
title={metadata.title}
|
|
||||||
date={metadata.date}
|
|
||||||
description={metadata.description}
|
|
||||||
slug={createSlug(metadata.title)}
|
|
||||||
{...props} />
|
|
||||||
|
|
||||||
<Image
|
|
||||||
src={rainImage}
|
|
||||||
alt="Person walking on street and holding umbrella while raining with vehicle nearby photo"
|
|
||||||
placeholder="blur"
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
|
|
||||||
July was a truly soggy month and apparently [Ireland's soggiest July on record](https://www.met.ie/july-2023-provisionally-irelands-wettest-july-on-record). Despite the crappy weather I've managed to get some things done this month.
|
|
||||||
|
|
||||||
## Making the most of the new Next.js features
|
|
||||||
|
|
||||||
Late July [I migrated this website to the app router](https://github.com/r-freeman/portfolio/commit/158973d3b6d293338858725ce1cd24065a4a299d) which allows me to use all the cool new features in Next.js, like [sitemap](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generate-a-sitemap) and [robots.txt generation](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file), [Metadata API](https://nextjs.org/docs/app/building-your-application/optimizing/metadata), dynamic open graph images and so on.
|
|
||||||
|
|
||||||
For example, generating a `sitemap.xml` for this website is much more succinct now.
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
|
||||||
const urls = [
|
|
||||||
'https://ryanfreeman.dev/',
|
|
||||||
'https://ryanfreeman.dev/about',
|
|
||||||
'https://ryanfreeman.dev/writing',
|
|
||||||
'https://ryanfreeman.dev/projects',
|
|
||||||
'https://ryanfreeman.dev/uses'
|
|
||||||
]
|
|
||||||
|
|
||||||
const pages = urls.map(url => ({
|
|
||||||
url,
|
|
||||||
lastModified: new Date()
|
|
||||||
}))
|
|
||||||
|
|
||||||
const posts = (await getAllArticles()).map(({slug, date}) => ({
|
|
||||||
url: `https://ryanfreeman.dev/writing/${slug}/`,
|
|
||||||
lastModified: new Date(date).toISOString()
|
|
||||||
}))
|
|
||||||
|
|
||||||
return [...pages, ...posts]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
The `sitemap` function in `app/sitemap.ts` returns a combined array of pages and posts for this website, which is all I need to generate a `sitemap.xml`.
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
export default function robots(): MetadataRoute.Robots {
|
|
||||||
return {
|
|
||||||
rules: {
|
|
||||||
userAgent: '*',
|
|
||||||
allow: '/',
|
|
||||||
disallow: '/private/',
|
|
||||||
},
|
|
||||||
sitemap: 'https://ryanfreeman.dev/sitemap.xml',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Generating a `robots.txt` is just as easy, take a look at the code above.
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
export const metadata = {
|
|
||||||
title: 'About - Ryan Freeman',
|
|
||||||
description: 'I’m Ryan. I live in Dublin, Ireland where I work as a software engineer.'
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
I've also made use of the new Metadata API, you'll notice most pages export a `metadata` object containing title and description properties. This is a cool feature because it allows me to easily define metadata per page, which is useful for SEO.
|
|
||||||
|
|
||||||
Other features I'm looking forward to exploring are dynamic open graph images and the different data fetching and caching options available in Next.js 13.
|
|
||||||
|
|
||||||
Overall, I'm happy with the direction Next.js is going, and I'll likely use it for future React projects and websites, though I had to read the new docs a few times before I understood how the new app router works.
|
|
||||||
|
|
||||||
## Retiring the dashboard page
|
|
||||||
|
|
||||||
The [dashboard](/dashboard) page was an interesting experiment where I aggregated and displayed data from various sources such as GitHub, Spotify and my Raspberry Pi.
|
|
||||||
|
|
||||||
<Image
|
|
||||||
src={dashboard}
|
|
||||||
alt="Dashboard widgets showing various data from my Raspberry Pi"
|
|
||||||
placeholder="blur"
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
|
|
||||||
For example, you could see my GitHub stats such as stars, followers and forks and some mostly useless information about my Spotify usage.
|
|
||||||
|
|
||||||
However, the load time for the dashboard was horrendous, and it became difficult to maintain. Sometimes the page wouldn't render at all if one or more API requests failed. So I've made the decision to retire this page for now, at least in its current incarnation.
|
|
||||||
|
|
||||||
That said, in building the dashboard page I learned some new IoT skills — using Grafana and Prometheus for getting system-level data from the Raspberry Pi such as temperature, CPU usage and uptime.
|
|
||||||
|
|
||||||
## What's next for this site
|
|
||||||
|
|
||||||
This website started as a platform for me to showcase my skills and professional experience, but admittedly I've neglected the blogging side of things, so I definitely want to get in the habit of writing and publishing good quality blog posts.
|
|
||||||
|
|
||||||
<Image
|
|
||||||
src={emojis}
|
|
||||||
alt="Idea for a react bar featuring emojis"
|
|
||||||
placeholder="blur"
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
|
|
||||||
As far as new ideas, I've come up with the idea for an interactive emoji react bar for the bottom of blog posts to drive engagement and to measure how my audience reacts to my posts (assuming I have an audience).
|
|
||||||
|
|
||||||
I also need to write some TypeScript to generate a dynamic RSS feed so readers can subscribe to my blog posts, which I'll implement in the coming days.
|
|
||||||
|
|
||||||
Another nice-to-have feature would be to allow the readers to subscribe and receive updates via email.
|
|
||||||
|
|
||||||
Watch this space for new features which I'll write about it next month's changelog.
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 567 KiB |
@ -1,50 +0,0 @@
|
|||||||
import Image from 'next/image'
|
|
||||||
import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
|
|
||||||
import {createSlug} from '../../../lib/createSlug'
|
|
||||||
import cargoShipImage from './ian-taylor-jOqJbvo1P9g-unsplash.jpg'
|
|
||||||
|
|
||||||
export const metadata = {
|
|
||||||
author: 'Ryan Freeman',
|
|
||||||
date: '2023-02-11',
|
|
||||||
title: 'Docker cheat sheet',
|
|
||||||
description: 'This is a living document of useful commands for maintaining and using Docker, and should function as a handy reference for developers and DevOps engineers.',
|
|
||||||
ogImage: '/images/ian-taylor-jOqJbvo1P9g-unsplash.jpg'
|
|
||||||
}
|
|
||||||
|
|
||||||
export default (props) => <ArticleLayout
|
|
||||||
author={metadata.author}
|
|
||||||
date={metadata.date}
|
|
||||||
title={metadata.title}
|
|
||||||
description={metadata.description}
|
|
||||||
ogImage={metadata.ogImage}
|
|
||||||
slug={createSlug(metadata.title)}
|
|
||||||
{...props} />
|
|
||||||
|
|
||||||
This is a living document of useful commands for maintaining and using Docker, and should function as a handy reference for developers and DevOps engineers.
|
|
||||||
|
|
||||||
<Image
|
|
||||||
src={cargoShipImage}
|
|
||||||
alt="Image of a cargo ship by Ian Taylor on Unsplash"
|
|
||||||
placeholder="blur"
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
|
|
||||||
I'll kick off this Docker cheat sheet with cleaning up Docker images, let's get started.
|
|
||||||
|
|
||||||
## Cleaning up Docker images
|
|
||||||
|
|
||||||
If you update your Docker container images regularly using something like [watchtower](https://containrrr.dev/watchtower/), you might have dangling images which are out-of-date and no longer associated with some of your running containers.
|
|
||||||
|
|
||||||
So why not use `docker image prune` to reclaim that valuable disk space. For example, running this command on my Raspberry Pi shaved off about 9.66Gb of disk usage.
|
|
||||||
|
|
||||||
As a bonus, you can save some additional space using `docker image prune --all`, which removes all unused Docker images.
|
|
||||||
|
|
||||||
## Restarting all containers
|
|
||||||
|
|
||||||
Sometimes you want to restart all your containers at once, such as after you've pulled the latest images for your containers.
|
|
||||||
|
|
||||||
To do this, use `docker restart $(docker ps -q)`, this command instructs Docker to restart all containers using the container ids which are returned from `docker ps -q`.
|
|
||||||
|
|
||||||
## Stopping all containers
|
|
||||||
|
|
||||||
Need to stop all containers? Simply use `docker stop $(docker ps -q)`. As above, this uses the container ids from `docker ps` to stop each running container.
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
|
|
||||||
import {createSlug} from '../../../lib/createSlug'
|
|
||||||
|
|
||||||
export const metadata = {
|
|
||||||
author: 'Ryan Freeman',
|
|
||||||
date: '2023-01-02',
|
|
||||||
title: 'How to add TypeScript to an existing Next.js project',
|
|
||||||
description: 'Next.js includes support for TypeScript by default. To add TypeScript to an existing Next.js project create a tsconfig.json file in the project root with touch tsconfig.json.',
|
|
||||||
}
|
|
||||||
|
|
||||||
export default (props) => <ArticleLayout
|
|
||||||
author={metadata.author}
|
|
||||||
date={metadata.date}
|
|
||||||
title={metadata.title}
|
|
||||||
description={metadata.description}
|
|
||||||
slug={createSlug(metadata.title)}
|
|
||||||
{...props} />
|
|
||||||
|
|
||||||
# Next.js includes support for TypeScript by default. To add TypeScript to an existing Next.js project create a _tsconfig.json_ file in the project root with `touch tsconfig.json`.
|
|
||||||
Next, run `next dev` and the _tsconfig.json_ file will be populated with the default values, you may customise this configuration to your liking. A file called _next-env.d.ts_ will be created at the project root, this file **should not** be removed or edited.
|
|
||||||
|
|
||||||
However, you should add an entry in your `.gitignore` for _next-env.d.ts_ so it is ignored by version control.
|
|
||||||
|
|
||||||
```json
|
|
||||||
"include": [
|
|
||||||
"next-env.d.ts",
|
|
||||||
"additional.d.ts"
|
|
||||||
"**/*.ts",
|
|
||||||
"**/*.tsx"
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
If you need to add additional types, create a _additional.d.ts_ file in your project root and reference it in the `include` array in _tsconfig.json_.
|
|
||||||
|
|
||||||
```json
|
|
||||||
"strict": true
|
|
||||||
```
|
|
||||||
|
|
||||||
For experienced TypeScript developers, you can enable `strict` mode by editing _tsconfig.json_, this setting is disabled by default.
|
|
||||||
|
|
||||||
That's it! Your Next.js project is ready to leverage the power of TypeScript.
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user