✨ My portfolio built with Next.js, Tailwind, Prisma, and Vercel.

  • By Lee Robinson
  • Last update: Jan 9, 2023
  • Comments: 14

Deploy with Vercel

leerob.io

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.

Github

https://github.com/leerob/leerob.io

Comments(14)

  • 1

    Update @mdx-js/mdx to the latest version 🚀

    The dependency @mdx-js/mdx was updated from 1.0.27 to 1.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
    • Update unified/remark dependencies to their latest majors
    • Clean house, updating example dependencies
    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:

  • 2

    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:

    • Faster git clone times due to less files and images
    • Easier forking for folks looking to use this repo as a template
    • Ability to update content without redeploying

    This is using the new v3 of Sanity: https://www.sanity.io/blog/sanity-studio-v3-developer-preview

  • 3

    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. 🚀

  • 4

    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 providedhref(/blog/[slug]#a-header) value is missing query values (slug) to be interpolated properly.

    Steps to reproduce the error:

    • create a blog post with a header '# A header'
    • link it with [A header](#a-header)
    • click the header link

    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} />

  • 5

    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!

  • 6

    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:

    • Is it published or a draft
    • Publication date
    • The URL
    • An optional preview text that is shown in feed readers

    It looks like we can infer all this metadata from the frontmatter, so the idea would be, at build time:

    • Glob the files under /pages/blog
    • Parse their metadata (using frontmatter)
    • Filter only on the posts with a publishedAt value
    • Build the URL from the file path (as done in generate-sitemap)
    • Feed that to feed
    • Generate the syndication feeds

    There are two ways we can do the generation:

    1. using Next.js 9.3 getStaticPaths in a separate route (eg: /pages/[feeds].js) or
    2. Use the same technique as for the sitemap, and have an external script generate the pages and store the feed files into /public before build time.
  • 7

    Revue Api Error

    image

    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.

  • 8

    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. before iC5qz5CliJ

    after (and should looks like this) GhhA1hNBCW

  • 9

    Update react-syntax-highlighter to the latest version 🚀

    The dependency react-syntax-highlighter was updated from 10.3.0 to 10.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:

  • 10

    Update @mdx-js/mdx to the latest version 🚀

    The dependency @mdx-js/mdx was updated from 1.0.20 to 1.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:

  • 11

    Trouble Finding Sanity Environment Variables

    image

    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 and SANITY_STUDIO_REVALIDATE_SECRET

    Thanks in advance

  • 12

    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

  • 13

    Add preferred color scheme for safari.

    Problem

    Using Safari, particularly on iOS, the menu bar remains to be white in dark mode (see screenshot).

    IMG_C701035DB727-1

    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:

      const { resolvedTheme, setTheme } = useTheme();
    
      useEffect(() => {
        const modeMe = (e) => {
          setTheme(e.matches ? 'dark' : 'light');
        };
        const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
    
        setTheme(matchMedia.matches ? 'dark' : 'light');
        matchMedia.addEventListener('change', modeMe);
    
        return () => matchMedia.removeEventListener('change', modeMe);
      }, [setTheme]);
    
  • 14

    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.

    <link rel="alternate" type="application/rss+xml" href="/feed.xml" />