leerob / leerob.io Goto Github PK
View Code? Open in Web Editor NEW✨ My portfolio built with Next.js, Tailwind, and Vercel.
Home Page: https://leerob.io
✨ My portfolio built with Next.js, Tailwind, and Vercel.
Home Page: https://leerob.io
👋 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.
Something like this -> MaximeHeckel/blog.maximeheckel.com#262
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 :)
Blur effect on light theme sticky-nav when scrolling down from firefox
Hard to read nav menus overlapping the main contents when scrolling down the page.
You can apply 100% opacity to browsers that don't support it.
@supports not (backdrop-filter: none) {
.sticky-nav {
@apply bg-opacity-100;
}
}
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!
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!
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 💙.
Hi,
About your post going-serverless-next-firebase-now.
Isn't the cold start at Now is a problem for SEO and user experience?
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 👍
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).
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!
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.
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 :)
Otherwise I have to constantly switch dark mode on every article I click :)
I already use Raindrop to manage my bookmarks, so maybe I'll make them public? They have an API
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?
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. 🚀
Would you mind adding a license to this project? May I recommend the AGPL-3?
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 ?
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>
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?
🚨 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.
Think I accidentally removed these
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
)/public
before build time.theme
value is retrieved from useTheme
as resolvedTheme
leerob.io/components/Container.js
Line 11 in 6775171
but in onClick
it's referenced as theme
leerob.io/components/Container.js
Line 56 in 6775171
resulting:
Uncaught ReferenceError: theme is not defined
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 ;)
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!
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!
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.
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.
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"
}
]
}
]
}
leerob.io/components/Timeline.js
Line 211 in a3511e5
I tried to use GitHub issue as comment system in vain, how can we add do that with a library like utterances
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);
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.
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
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.
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:
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.