leerob / leerob.io

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

leerob.io

• Framework: Next.js
• Database: Postgres
• Authentication: NextAuth.js
• Deployment: Vercel
• Styling: Tailwind CSS
• Analytics: Vercel Analytics

Running Locally

This application requires Node.js v18.17+.

git clone https://github.com/leerob/leerob.io.git
cd leerob.io
bun install
bun run setup # Remove all of my personal information
bun dev

Create a .env.local file similar to .env.example.

Database Schema

CREATE TABLE redirects (
  id SERIAL PRIMARY KEY,
  source VARCHAR(255) NOT NULL,
  destination VARCHAR(255) NOT NULL,
  permanent BOOLEAN NOT NULL
);

CREATE TABLE guestbook (
  id SERIAL PRIMARY KEY,
  email VARCHAR(255) NOT NULL,
  body TEXT NOT NULL,
  created_by VARCHAR(255) NOT NULL,
  created_at TIMESTAMP NOT NULL,
  updated_at TIMESTAMP
);

CREATE TABLE views (
  slug VARCHAR(255) PRIMARY KEY,
  count INT NOT NULL
);

License

1. You are free to use this code as inspiration.
2. Please do not copy it directly.
3. Crediting the author is appreciated.

Please remove all of my personal information (blog posts, images, etc.) by running bun run setup.

leerob.io's Issues

Use next-google-fonts instead of hand rolling

https://github.com/joe-bell/next-google-fonts

problem with crypto.createDecipheriv

Hello

I have problem with start app:

How I can fix this problem?

Email Validation Failing With Valid Email

This email is a legitimate email (blanked it out for a obvious reason lol), but it seems that the form doesn't like it :/

maybe this isn't something to do with this site but your newsletter provider but just wanted to point it out

happy holidays!

• sam

SEO: Double canonical tags an meta tags in header

Theme toggle not working

theme value is retrieved from useTheme as resolvedTheme

leerob.io/components/Container.js

Line 11 in 6775171

const { resolvedTheme, setTheme } = useTheme();

but in onClick it's referenced as theme

leerob.io/components/Container.js

Line 56 in 6775171

onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}

resulting:

Uncaught ReferenceError: theme is not defined

Store Dark Mode preferences in Local Storage

Otherwise I have to constantly switch dark mode on every article I click :)

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.

copy to clipboard in code

Would be great to have to have Copy to Clipboard in Code

I have implemented this in my project , I can work on this if needed!

Google analytics tracking needs consent

👋 Hi! You've got a great website, full of super-great articles.

The one thing that should be changed is that the website tracks people without asking - which is against the GDPR "cookie law". This states that all websites that collect data from EU citizens, regardless of where the website is based, require a person's informed consent before storing cookies on a user’s device and / or tracking them.

One solution is to track page views without setting a cookie - this tracks views rather than people so there wouldn't be a need to ask permission. This is what Netlify Analytics and Fathom do. The analytics would still get page views (not that any analytics software is needed for your increment views counter) and insights into technology use, but the analytics wouldn't be able to track an individual person's journey through the site.

Another is to implement a method that asks people to actively opt in and allow tracking. I've seen this get less points of data - anything from 10% to 40% of the pre-ask numbers - but it's easier to see how people move through the site.

Another is to block EU users... please don't do this!

Privacy is something that should be available to everyone - and I hope you help make it available for people who visit your site and want to learn from your articles.

Feature Request

Hi.
Your website looks awesome ! I really liked the feature of searching in blog.
Can you also add the option of tags in blogs (as done in this website) and aggregate blogs based on selected tags ?

Maybe on different branch, for users of the repo ?

Question: MDX syntax highlighting

Hi Lee,

Thank you for creating such blog and educational content. They really helped me understand Next.js better and motivates me to write my naive blogs in the hope to help others!

I am having a difficult time understanding how syntax highlight works in your app. I believe rehypePlugins: [mdxPrism] in mdx.js is doing the heavy lifting for transforming the highlighted syntax. However, you didn't create an MDX component for <pre> and <code> as per MDX doc so I am lost on how it works. Is there something else besides the mdx.js file that contributes to this? or maybe I was just doing something incorrectly.

I went through your personal blog, next js blog using the prism but got more confused because they seem to use different approachs.

Any pointers would be appreciated!

Unsure if you bought a 2nd townhome or if this is a copy-paste error

leerob.io/components/Timeline.js

Line 211 in a3511e5

<TimelineStep title="Bought a Townhome 🏡">

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

Trailing slash is messing up links.

https://leerob.io/blog/mailchimp-next-js/

Use static tweet component in MDX files

Something like this -> MaximeHeckel/blog.maximeheckel.com#262

Question about MDX and live-reload

Edits to data/foo.mdx files don't seem to trigger "live reload" -style updates in the browser, requiring a full page refresh. I'm new to MDX, is this expected?

Preact conflict with next/image

Hi Lee... how are you? Just to let you know that I saw some loading issues using preact with next/image component: if you check a blog post for example you could see that all the images are loaded on page load and then by the intersection observer too!
Removing preact it works like expected ;)

Is the blogs are being published automaticly?

So I am super happy looking at the amount of open source projects people are contributing to. I got to this project trying to auto mate my blogs which at the moment statically hosted on s3.
So for blog posts, I am creating a md file on lambda and pushing the md files to s3.

I wonder if you have a automate system for this already? If not any idea how we can achieve it with Vercel?

Thanks again for making this open source.

Switch to fathom-client based on new recommendation

https://vercel.com/guides/deploying-nextjs-using-fathom-analytics-with-vercel

Question

Hi,
About your post going-serverless-next-firebase-now.
Isn't the cold start at Now is a problem for SEO and user experience?

replace backdrop-filter blur with svg instead

backdrop-filter blur doesn't look good compared to SVG based blur

vs SVG based

nav {
  background-color: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) url(#sharpBlur);
}

<svg class="svg-blur" style="display: none;">
  <filter id="sharpBlur">
    <feGaussianBlur stdDeviation="20"></feGaussianBlur>
    <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0"></feColorMatrix>
    <feComposite in2="SourceGraphic" operator="in"></feComposite>
  </filter>
</svg>

Bundle size

Hey @leerob

I am using your method of aliasing react as preact, working great so far. However with the latest nextjs updates the bundle size doubled and it seems to me the aliasing stopped working.

I checked your site as well, same thing. The first JS load files got doubled in size and the browser now actually detect the site as react ( before it didn't)

Do you have some input about this? reverting to next v10.2.0 seems to work though

Add a bookmarks page

I already use Raindrop to manage my bookmarks, so maybe I'll make them public? They have an API

Next.js Sentry source maps

Hello @leerob, I've read your tutorial at https://leerob.io/blog/configuring-sentry-for-nextjs-apps (through https://forum.sentry.io/t/sentry-webpack-plugin-and-next-js-sourcemaps/4153/5)

I would love your help on UnlyEd/next-right-now#28

NRN is an OSS boilerplate, which features Sentry. But source maps don't work perfectly yet, I believe you could be quite helpful on this matter! 😉 (let me know if you have time and are willing to help!)

Thank you.

Firefox currently has no support for backdrop-filter

Expected Behavior

Blur effect on light theme sticky-nav when scrolling down from firefox

Current Behavior

Hard to read nav menus overlapping the main contents when scrolling down the page.

Possible Solution

You can apply 100% opacity to browsers that don't support it.

@supports not (backdrop-filter: none) {
  .sticky-nav {
    @apply bg-opacity-100;
  }
}

Steps to Reproduce

1. Open a blog post from firefox
2. Scroll down the page

Sticky nav covering headings

The image below shows a slight issue when clicking on an internal link on a blog page.
It hides under the sticky navbar.

I'll be happy to fix this if come across a solution. Just wanted to let you know.
Thanks

Switch to WWW Subdomain?

Hey Lee! Thanks for all of the great content! Your blog has inspired me to set up one of my own. I just wanted to reach out with a couple of recommendations that might make your site even better.

Going through your blog, I noticed that you host on your apex domain, leerob.io. I came across this post from Netlify a while back, and I found it convincing enough to move my site to the www subdomain. Check it out. I think they make some good points. I looked into this when I noticed a lot of the top companies use the www subdomain. You can find additional information here and here.

I also recommend adding a wildcard redirect to your project settings. Right now, if you go to something like awesome.leerob.io, you'll get a Vercel error page, which isn't the best user experience. If you want an example of how to do this, this is how I have mine set up right now:

I think it provides a rather seamless user experience.

Anyway, that's all I had. Keep up the great work!

Is it necessary to use MDXProvider from @mdx-js/react

Hi Leerob!

First of all thanks 🎉 for creating and providing such awesome content on Nextjs. Surely it helps many people like me in getting started with Next.

I see your blog is using next-mdx-remote which uses MDXProvider from @mdx-js/react under the hood. I also notice you surrounded all the components in the same provider on _app.js.

export default function App({ Component, pageProps }) {
  useAnalytics();

  return (
    <ThemeProvider attribute="class">
      <MDXProvider components={MDXComponents}>
        <Component {...pageProps} />
      </MDXProvider>
    </ThemeProvider>
  );
}

I did remove this MDXProvider and restarted the application, the MDX content are getting rendered as expected. So is it necessary to use this explicitly? If we can remove this then we don't need to include @mdx-js/react package.

Add Unixify caveat for Windows on sitemap build

Just an FYI -- if you're following the sitemap build process on your nextjs-sitemap-robots blog post, it may be worth mentioning that if you're on a Windows machine, globby is not going to work for the path.join('') step, unless you either do a regex replace or use something like unixify.

// generate-sitemap.js

const unixify = require('unixify');

... 

// Unixify is needed for when you're on a Windows machine
const route = path === '/index' ? '' : unixify(path);

Add syntax highlighting.

Add presentations/speaking to about page.

Comment section is incompatible with dark mode

Hey, I have noticed that you added the comment section recently. However the text color is not getting transformed upon theme change. Please look into it.

TypeError: The "key" argument must be of type string or an instance of Buffer, TypedArray, DataView, or KeyObject. Received undefined

I see this as soon as i download and run with

yarn
yarn dev

heading elements not in sequential order

You seem to be missing the perfect lighthouse score because of accessibility.

Code causing the Problem:

 <h5 className="text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100">
    Subscribe to the newsletter
 </h5>

We can convert this to the h4 tag and solve the issue for the index page but it causes a problem in blogs/ page.

But Since your using Tailwind CSS you can replace it with some other tag like p and retain the styles regardless.

Not a Big Problem tbh but Pointed it out Since huge fan of this Repo 💙.

LICENSE?

Would you mind adding a license to this project? May I recommend the AGPL-3?

Moving constants to a config file to make the template easy to use

Hello lee,
Firstly, thank you very much for the effort you put into making this and the fact that you made it public so others can have a boost if they wanna set up their own portfolio/blog.

I was intending to rewrite my VueJS portfolio to something different following the JAM stack, so decided to with NextJS instead of Nuxt, and I stumbled upon this project of yours and I immediately liked the way you made (exactly what I was thinking for my own blog) so i cloned your repo and tweaked it a bit,

I have a added quite a lot of refactoring/improvements, and I was thinking that I could make a PR to move some static values to a config file, so it becomes easy for others to reuse this.

I can as well add a little script to generate robots.txt and a CV.pdf in case someone wants that to be generated from a page.

Just let me know if it's okay and I will submit a PR,
Thank you for your efforts 👍

Set theme based on user's OS setting

Default should be set using a media query (e.g. prefers-color-scheme: dark). IMO it would be a much better experience to have it set like that (while still having the option to switch themes if wanted).

Using GitHub Issues for Blog Comments

I tried to use GitHub issue as comment system in vain, how can we add do that with a library like utterances

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Re-add canonical URL meta tags

Think I accidentally removed these

next-mdx-remote v3 issues

Hey Lee,

I noticed a couple of issues with the latest update ( I upgraded my site as well and used your approach, but reverted back )

1- Wrapping the app in MDXProvider increased the bundle size ( the first load shared JS files ) since it's in _app it will load the provider and the custom components you have ( the more you add, the bundle will increase too )
Since you use the whole MDX thing in 3 places, I don't think the boilerplate reduction is worth it, but it's up to you.

Maybe i missed some other benefits of the provider other than code de-bloat.

2- Checkout this line here in blog/[slug] when rendering BlogLayout

Based on #1 you are re-adding the MDX components because they doesn't have the static tweet as MDX component?
Because the other layouts doesn't import the MDX components again since it's wrapped in _app

3- The page "uses" renders "UsesLayout" and pass frontMatter + MDX source, just like the rest of the dynamic pages. However if you go the UsesLayout file you see that it only takes 1 param "children" so the passed frontMatter is useless and the page will generate SEO defaults configs if not passed anything which in this case i think some metadata might be important to you.

e.g: the image is not passed, try pasting the uses page url in whatever site and it will show the default image, I linked the lines below:

pages/uses.js
layouts/uses.js

React hook form for form state

I have been using react-hook-form for managing form state. I was previously using Formik. And I am able to do pretty much everything I wanted with react-hook-form that I was doing with formik at better performance with less complexity of code.

https://leerob.io/blog/react-state-management

I don't have strong opinion on where you would place them in your table. But I do have strong opinion that it should be mentioned somewhere because its really that good. I am not affiliated with react hook form in any way. Just a big fan.

Use analytics API to avoid firestore for posts view count

Hey! Today I have started to use umami analytics which is an open source project. I have commented an idea in this issue about exposing an API to get data programatically which can be extremely helpful to use in blog post view count! Plausible already has this feature that you can see here, and fathom seems they are going to include it in version 3. I suppose you have already thought about this but just to let you know!

Question about Firebase on Your Site

Hi Lee!

Big thanks for keeping your site open source and writing so many awesome blog posts 👏🏼

I hope you don't mind if I ask a question here!

Authenticating with Firebase SDK

I noticed that you're using environment variables (instead of the service account json file) to authenticate to your Firebase Realtime DB.

Did you have to do any special configuration in the Firebase Console?

Asking because I'm trying to do something similar with Gatsby and Netlify Functions on my personal site, but having no luck. I usually get some type of error like a missing key project_id or private_key (which are there, but Firebase doesn't see them).

Otherwise, it works locally just fine when I load in the .json file with the creds.

Thank you!

If you have time to provide any insight, I would super appreciate! If that's not the kind of thing you do here, feel free to politely close :)

Question: How did you get the prism filenames to work? (can't find it in the code)

Hi, I love how you set up this repo.

I the MDX Blog you talk about how you set up prism with mdx-prism (in better syntax highlighting). Simply using mdx-prism doesn't seem to allow adding a filename in the header.

You do this by starting a code-block with:

```language:filename

However, I can't find how you configured that to work if I do the same (having mdx-prism added and working as well, this doesn't seem to be one of its default features) I get the error

Error: Unknown language: `js:foo.js` is not registered

I hope you can help.

Question regarding your code blocks

Dear @leerob, I've been taking inspiration from this project for my own blog, and it's been of great help. I have one question. I have a similar setup with next-mdx-enhanced and I want to add syntax highlighting. My question is, where do you add the file name to the code block? I can't seem to find this in your project. In your MDX files your are declaring your code blocks like js:components/Subscribe.js. Where do you extract this string and insert it into the layout? Also, can you give me some guiding advice on parsing the code blocks in a separate component? In your posts, you are declaring code blocks in the 'traditional' Markdown syntax. However, one of the key features of MDX is the support for using JSX components in MDX. I would like to declare my code blocks like:

<Code language="tsx" fileName="src/index.tsx">
function getAge(person: Person) {
  return person.age;
}
</Code>

Getting this to work and be pasted in a <pre> tag wouldn't be to difficult. I just need some guidance on how to do the syntax highlighting on this.
If you could help me out it would be greatly appreciated!

self hosted font caching

why is font caching not working when you put it in next.config.js:

module.exports = {
  async headers() {
    return [
      {
        source: "/fonts/Noto/noto-sans-jp-v28-latin-regular.woff2",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=31536000, immutable",
          },
        ],
      },
    ];
  },
};

but if you do this in vercel.json it works.

{
  "headers": [
    {
      "source": "/fonts/rock-salt/rock-salt-v11-latin-regular.woff2",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Cannot find App

Hi, I setup file _app.js same with yours, but error.
Can you edit it same with this? https://nextjs.org/docs/advanced-features/custom-app
Thank you for wrote this :)

Firebase error in api/page-views.js

Hello, i was reading your awesome blogs about next.js and i found bug in your page-views.js api route in blog Create a Dashboard with Next.js API Routes - Google Analytics API

Visiting the api/page-views.js route.

That route is not protected and i would love to learn from you how you can protect next.js api routes.

Cheers

Adding other API component

Is there a way I could add customary API component? I would like to add a weather component and a algolia search component. I have searched on internet but nothing much covered on this subject. Would you mind offering assistance?