leerob.io
- Framework: Next.js
- Database: PlanetScale
- ORM: Prisma
- Authentication: NextAuth.js
- Deployment: Vercel
- Content: MDX
- Styling: Tailwind CSS
Learn More
I've recorded two live streams walking through this repository and answering questions.
Overview
data/*
- MDX data that is used for blogs, newsletters, and code snippets.layouts/*
- The different page layouts each MDX category (blog, newsletter, snippets) uses.lib/*
- Short for "library", a collection of helpful utilities or code for external services.pages/api/*
- API routes powering/dashboard
, newsletter subscription, guestbook, and post views.pages/blog/*
- Static pre-rendered blog pages using MDX.pages/dashboard
- Personal dashboard tracking metrics.pages/*
- All other static pages.prisma/*
- My Prisma schema, which uses a PlanetScale MySQL database.public/*
- Static assets including fonts and images.scripts/*
- Two useful scripts to generate an RSS feed and a sitemap.styles/*
- A small amount of global styles. I'm mostly using vanilla Tailwind CSS.
Running Locally
$ git clone https://github.com/leerob/leerob.io.git
$ cd leerob.io
$ yarn
$ yarn dev
Create a .env
file similar to .env.example
.
Update @mdx-js/mdx to the latest version 🚀
The dependency @mdx-js/mdx was updated from
1.0.27
to1.1.0
.This version is not covered by your current version range.
If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.
Publisher: johno License: MIT
Release Notes for v1.1.0
Commits
The new version differs by 7 commits.
22b9aa8
v1.1.0
a5bff5b
Bump all dependencies to latest, clean up scripts (#643)
00ca408
Trim code (#642)
a2ad2b2
Bump lodash from 4.17.11 to 4.17.14 in /examples/vue (#640)
7f17fc4
Bump lodash from 4.17.11 to 4.17.14 in /examples/razzle (#639)
6b490a1
Move migration docs
ffc896d
Add more typescript docs
See the full diff
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper bot :palm_tree:
Move all content to a CMS (Sanity.io)
Since many people fork this repository, I'd like to prevent them from including all of my blog posts and personal information. This PR moves everything from my
data/*
folder to Sanity, which gives me a number of benefits:This is using the new v3 of Sanity: https://www.sanity.io/blog/sanity-studio-v3-developer-preview
Upgrading to Chakra-UI v1.0 🚀
Hi @leerob, opening a separate issue for this. For the follow up on issue #194, the plan is to upgrade to v1.0 of chakra-ui.
My suggestion was to keep both the PR different, one for upgrading the dependency and resolve the breaking changes during migration and then have another PR for the dark theme persistence.
Let me know if this makes sense and should we go ahead with this method. 😄
I'll be happy to work on both migration and feature as well. 🚀
Fixes customLink error when clicking a header-link
Fixes the error
href interpolation failed
error when clicking a link to a header in a blog post Error:The provided
href(/blog/[slug]#a-header) value is missing query values (slug) to be interpolated properly.
Steps to reproduce the error:
[A header](#a-header)
Error Link: https://github.com/vercel/next.js/blob/master/errors/href-interpolation-failed.md Based on the Error Link above, the error is from next/link component treating a header-link (starts with a '#') as a dynamic route 'blog/blog-title/[#a-header]'
Added a isHeaderLink condition, if true will simply return <a {...props} />
Fix Autolink Headings
I was exploring using MDX as you have (amazing blog btw!) and thought I would share!
Based on a comment here: https://github.com/hashicorp/next-mdx-remote/issues/74#issuecomment-747104595 it seems that the ordering of your plugins is important (that's why none of your headings are linked at the moment!
Hope this helps!
Add RSS/Atom feeds
It would be nice to have syndication feeds to subscribe to new articles (even though you have a newsletter, some people might prefer RSS/Atom).
I have added RSS & Atom syndication in my own blog, and I can help integrate it here.
It boils down to generating the XML/JSON files from the list of published posts, so it needs a list of posts with the following metadata:
It looks like we can infer all this metadata from the frontmatter, so the idea would be, at build time:
/pages/blog
frontmatter
)publishedAt
valuegenerate-sitemap
)feed
There are two ways we can do the generation:
getStaticPaths
in a separate route (eg:/pages/[feeds].js
) or/public
before build time.Revue Api Error
Hi @leerob Prisma schema is generated
REVUE_API_KEY
is added in.env
file still getting this error. Could you plz. guide, if I am missing something? Previously, it was working fine.Add "skip-link content" a scroll-margin-top
Your skip-link "skipping" content too much until it covered by navbar. This PR adding
scroll-margin-top
so the main content still readable after skipping. beforeafter (and should looks like this)
Update react-syntax-highlighter to the latest version 🚀
The dependency react-syntax-highlighter was updated from
10.3.0
to10.3.1
.This version is not covered by your current version range.
If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.
Find out more about this release.
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper bot :palm_tree:
Update @mdx-js/mdx to the latest version 🚀
The dependency @mdx-js/mdx was updated from
1.0.20
to1.0.21
.This version is not covered by your current version range.
If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.
Release Notes for v1.0.21
• Peer dependencies for react/react-dom in gatsby-theme-mdx
• Docs updates
• Use theme-ui in gatsby-theme-mdx
Commits
The new version differs by 14 commits.
5d1a353
v1.0.21
70161fa
Fix(gatsby-theme-mdx): move react & react-dom to peerDependencies (#608) (#609)
87ae231
Bump deps, update docs for new lint rule (#605)
1808386
Ensure live preview parse errors don't crash page (#603)
78602b2
chore: update docs links to unify more gatsby mdx docs on .org (#600)
d918360
docs: fix typo (#602)
deff36b
ci: test on linux and osx (#599)
f86f521
restore integrity attribute to yarn lock file (#598)
6044ca4
ci: setup travis ci to automatically run test suite for each PR & commit (#595)
b942160
Update docs to use theme-ui (#597)
a837c58
Update dependencies (#596)
8551886
chore: yarn upgrade (#594)
5a566d1
Fix my name on the blog post (#590)
72b8409
Create FUNDING.yml
See the full diff
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper bot :palm_tree:
Trouble Finding Sanity Environment Variables
Is
NEXT_PUBLIC_SANITY_DATASET
in the form of:https://<projectId>.api.sanity.io/v2021-06-07/data/query/<dataset>
or just<dataset>
?And where do I find
SANITY_PREVIEW_SECRET
andSANITY_STUDIO_REVALIDATE_SECRET
Thanks in advance
Remove the extra main tag
Hey,
I noticed that there are two main tags on the site, which is considered an error by the HTML standard P.S. the second main tag can be found in the container component
Add preferred color scheme for safari.
Problem
Using Safari, particularly on iOS, the menu bar remains to be white in dark mode (see screenshot).
Solution
Use meta tags for "theme-color".
Other suggestions
Switching to dark mode automatically when system preferences change might be desirable. Let me know if that is smth you might find useful. This could be achieved with:
Add RSS feeds to HTML
I've been enjoying your posts and wanted to add your blog to my RSS reader, but I didn't see any RSS feed available on your site. There are no links to a feed, nor a
link
tag pointing to the feed. I had to poke around this repo to discover you did, in fact, have one at leerob.io/feed.xml.I'd suggest adding this to your
_document.tsx
so that RSS readers can auto-discover your feed themselves.