I recently added a button to my blog, and subsequently my posts on DEV.to. It's the best thing that I have done for it in a while. It makes it so easy to do quick edits.
It's an edit on GitHub button.
Discovering Errors
I refer back to my old posts quite a bit, sometimes I find errors in them. Honestly, most of the time its too much effort to load up my editor make the change and git add
and git commit
. It's not much, but when I am referring to my own post generally I am just trying to get something done and don't have time for that.
Honestly most of the time its too much effort to load up my editor make the change and
git add
andgit commit
.
The slug
the last part of the url
The slug that I am getting from gatsby is formatted as /blog/this-post/
. Note the trailing slash and missing file extension, thats where the ${slug.slice(0, -1)}.md
comes in.
Creating The Full Link
from post to edit on github
GitHub makes it super easy to form a URL that puts you right into edit mode on the exact post you are looking for. This is format for the URL... you can always figure it out easily by clicking edit on one.
https://github.com/<user>/<repo>/edit/<branch>/<filepath>
The Final Result
Wrapping that URL up in a short snippet gave me the following result.
<p style={{ display: 'flex', justify: 'center', textAlign: 'center', margin: '3rem auto' }}>
<span role='img' aria-label=''>👀</span>
see an issue, edit this post on
<a
href={`https://github.com/WaylonWalker/waylonwalkerv2/edit/main/src/pages${slug.slice(0, -1)}.md`}
alt='edit post url'
title='edit this post'
>
<FiGithub />
GitHub
</a>
</p>
here is a screenshot
Quick Value
This was a super quick change that brought me a lot of value without much effort. I will probably change up the styling/layout of it in the future. For now, I have something that functions, and I can get back to creating content.
I have been writing short snippets about my mentality breaking into the tech/data industry in my newsletter, 👉 check it out and lets get the conversation started. |
Newsletter Signup |
||||
👀 see an issue, edit this post on GitHub |