Our great sponsors
- Appwrite - The open-source backend cloud platform
- Onboard AI - Learn any GitHub repo in 59 seconds
- InfluxDB - Collect and Analyze Billions of Data Points in Real Time
-
framer-motion : To Add animation in project
-
react-toastify: allows you to add notifications to your app
-
Appwrite
Appwrite - The open-source backend cloud platform. Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools.
-
next-google-docs
Next Google Docs is a web app which uses draft.js to create a document for you. It also uses Firebase to store all the documents.
/* File: content/projectData.js */ module.exports = [ { id: 15, name: "Google Docs with Next.js", coverURL: "https://imgur.com/bQkEGlb.png", description: "Next Google Docs is a web app which uses draft.js to create a document for you. It also uses Firebase to store all the user's data.", githubURL: "https://github.com/j471n/next-google-docs", previewURL: "https://google-next-docs.vercel.app/", tools: ["Next.js", "Tailwind CSS", "Firebase", "Draft.js", "Next Auth"], pinned: true, }, /* ..............Other Projects......... */ ];
-
First install next-mdx-remote and highlight.js.
-
/* Filename : layout/BlogLayout.js */ import { AvatarImage } from "../utils/utils"; // =========> not created import Image from "next/image"; import styles from "../styles/Blog.module.css"; // =========> not created import ShareOnSocialMedia from "../components/ShareOnSocialMedia"; // =========> not created import { FiPrinter } from "react-icons/fi"; import { TbEdit } from "react-icons/tb"; import Newsletter from "../components/Newsletter"; // =========> not created import Link from "next/link"; import useWindowLocation from "@hooks/useWindowLocation"; import ScrollProgressBar from "@components/ScrollProgressBar"; // =========> not created import { stringToSlug } from "@lib/toc"; // =========> not created import { useState, useEffect } from "react"; import { lockScroll, removeScrollLock } from "@utils/functions"; // =========> not created import useWindowSize from "@hooks/useWindowSize"; // =========> not created import { FadeContainer, opacityVariant } from "@content/FramerMotionVariants"; import AnimatedHeading from "@components/FramerMotion/AnimatedHeading"; import AnimatedDiv from "@components/FramerMotion/AnimatedDiv"; import useBookmarkBlogs from "@hooks/useBookmarkBlogs"; import { BsBookmark, BsBookmarkFill } from "react-icons/bs"; import useScrollPercentage from "@hooks/useScrollPercentage"; export default function BlogLayout({ post, children }) { const { currentURL } = useWindowLocation(); const [isTOCActive, setIsTOCActive] = useState(false); const [alreadyBookmarked, setAlreadyBookmarked] = useState(false); const scrollPercentage = useScrollPercentage(); const size = useWindowSize(); const { isAlreadyBookmarked, addToBookmark, removeFromBookmark } = useBookmarkBlogs("blogs", []); useEffect(() => { // In Case user exists from mobile to desktop then remove the scroll lock and TOC active to false if (size.width > 768) { removeScrollLock(); setIsTOCActive(false); } }, [size]); useEffect(() => { setAlreadyBookmarked(isAlreadyBookmarked(post.meta.slug)); }, [isAlreadyBookmarked, post.meta.slug]); return ( {/* TOC */}
95 ? "xl:-left-full" : "xl:left-0" } md:left-0 md:opacity-100 md:max-w-[35%] lg:max-w-[30%] transition-all duration-500 flex flex-col gap-1 !pb-[100px] overflow-y-scroll p-10 md:p-14 h-screen fixed w-full font-barlow bg-darkWhite dark:bg-darkPrimary text-neutral-800 dark:text-gray-200 z-50 `} > Table of Contents AnimatedHeading> {post.tableOfContents.map((content) => { return ( { if (size.width < 768) { lockScroll(); setIsTOCActive(false); } setIsTOCActive(false); removeScrollLock(); }} > {content.heading} a> Link> ); })} AnimatedDiv> div> { setIsTOCActive(!isTOCActive); lockScroll(); }} className="md:hidden w-full py-2 font-medium bg-black dark:bg-white text-white dark:text-black fixed bottom-0 outline-none z-50" > Table of Contents button> {/* Progress Bar */} {/* Blog Front Matter & Author */}{post.meta.title} h1>
div>Jatin Sharmaspan> •span> {post.meta.stringDate}span> p>
{post.meta.readingTime.text}span> •span> {post.meta.readingTime.words} wordsspan> p> div> div>
-
DOMPurify
DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
You need to install dompurify. DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML and SVG. This is the optional step.
-
First install globby and prettier.
-
Onboard AI
Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
-
First install globby and prettier.
-
This step is important as we are using Vercel as a hosting platform and we need to use the Cache-Control. So vercel.json is like the following code:
-
First, we need to install swr. SWR is a strategy to first return the data from the cache (stale), then send the fetch request (revalidate), and finally, come up with up-to-date data.
-
/* File: content/utilitiesData.js */ /* .....Importing Icons..... */ import { SiVisualstudiocode, SiSublimetext, SiMicrosoftedge, SiGooglechrome, SiReact, SiNextdotjs, SiTailwindcss, SiVercel, SiPrettier, SiPnpm, SiYarn, SiFigma, SiInsomnia, SiBitwarden, SiSpotify, SiObsstudio, SiGrammarly, } from "react-icons/si"; import { BsFillPaletteFill, BsFillTerminalFill, BsWindows, BsGithub, } from "react-icons/bs"; import { FaGitAlt, FaSearch } from "react-icons/fa"; import SVG from "@components/SVG"; //==> not created yet const utilities = { title: "Utilities", description: "In case you are wondering What tech I use, Here's the list of what tech I'm currently using for coding on the daily basis. This list is always changing.", lastUpdate: "June 30, 2022", /* System */ system: { title: "System", data: [ { name: "VSCode", description: "Primary Code editor", Icon: SiVisualstudiocode, link: "https://code.visualstudio.com/download", }, { name: "Andromeda", description: "VS Code theme", Icon: BsFillPaletteFill, link: "https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda", }, /* .............Other........ */ ], }, /* Coding Tools */ tools: { title: "Coding Tools", data: [ { name: "React.js", description: "Primary Front-end library", Icon: SiReact, link: "https://reactjs.org/", }, { name: "Next.js", description: "Primary Web Development Framework", Icon: SiNextdotjs, link: "https://nextjs.org/", }, /* .............Other........ */ ], }, /* Software/Applications */ software: { title: "Software/Applications", data: [ { name: "Microsoft Todo", description: "To manage all my todos", Icon: SVG.MicrosoftToDo, link: "https://todo.microsoft.com/tasks/", }, { name: "Raindrop.io", description: "Bookmark Manager", Icon: SVG.RainDrop, link: "https://raindrop.io/", }, /* .............Other......... */ ], }, }; export default utilities;
-
react-icons: To use icons in the project
-
/* File: content/utilitiesData.js */ /* .....Importing Icons..... */ import { SiVisualstudiocode, SiSublimetext, SiMicrosoftedge, SiGooglechrome, SiReact, SiNextdotjs, SiTailwindcss, SiVercel, SiPrettier, SiPnpm, SiYarn, SiFigma, SiInsomnia, SiBitwarden, SiSpotify, SiObsstudio, SiGrammarly, } from "react-icons/si"; import { BsFillPaletteFill, BsFillTerminalFill, BsWindows, BsGithub, } from "react-icons/bs"; import { FaGitAlt, FaSearch } from "react-icons/fa"; import SVG from "@components/SVG"; //==> not created yet const utilities = { title: "Utilities", description: "In case you are wondering What tech I use, Here's the list of what tech I'm currently using for coding on the daily basis. This list is always changing.", lastUpdate: "June 30, 2022", /* System */ system: { title: "System", data: [ { name: "VSCode", description: "Primary Code editor", Icon: SiVisualstudiocode, link: "https://code.visualstudio.com/download", }, { name: "Andromeda", description: "VS Code theme", Icon: BsFillPaletteFill, link: "https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda", }, /* .............Other........ */ ], }, /* Coding Tools */ tools: { title: "Coding Tools", data: [ { name: "React.js", description: "Primary Front-end library", Icon: SiReact, link: "https://reactjs.org/", }, { name: "Next.js", description: "Primary Web Development Framework", Icon: SiNextdotjs, link: "https://nextjs.org/", }, /* .............Other........ */ ], }, /* Software/Applications */ software: { title: "Software/Applications", data: [ { name: "Microsoft Todo", description: "To manage all my todos", Icon: SVG.MicrosoftToDo, link: "https://todo.microsoft.com/tasks/", }, { name: "Raindrop.io", description: "Bookmark Manager", Icon: SVG.RainDrop, link: "https://raindrop.io/", }, /* .............Other......... */ ], }, }; export default utilities;
-
Now the blog's part. It could be a little confusing at first. But it will come together in the end. I am using MDX as the content manager. You might be wondering why I am using MDX. It's because of control and customization. It provides you to customize the blog however you want. You can make your own custom component and add them to your blog. We will be creating several custom components. This page will look like this:
-
InfluxDB
Collect and Analyze Billions of Data Points in Real Time. Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
