Makoto Nonoyama

Hello, I'm Nono.I would like to show you how to create a table of contents with highlighting.It is surprisingly easy to create it by using a library called react-scroll.How to create a highlighted table of contentsAdd react-scrollreact-scrollhttps://github.com/fisshy/react-scrollyarn add react-scroll for TypeScriptyarn add react-scroll @types/react-scrollSource Code and Description// component/Layout/SideMenu.tsx import { Dispatch, FC, SetStateAction } from "react"; import { Link as ScrollLink } from "react-scroll"; import { menuList } from "src/utils/const"; type SideMenuProps = { isActiveScroll: string; setIsActiveScroll: Dispatch<SetStateAction<string>>; }; const SideMenu: FC<SideMenuProps> = ({ isActiveScroll, setIsActiveScroll }) => { return ( <nav> <ul className="list-none font-main text-gray-300"> {menuList.map((menu) => { const active = isActiveScroll === menu; return ( <ScrollLink to={menu} smooth duration={400} offset={-40} onSetActive={(id) => setIsActiveScroll(id)} spy={true} key={menu} > <li className="flex items-center transition"> <div className={active ? "diamond mr-2" : "w-[5.5px]"}></div> <div className={`${ active ? "cursor-default font-bold text-light" : "cursor-pointer rounded-lg px-3 hover:bg-gray-50/10" } py-1.5`} > {menu.charAt(0).toUpperCase() + menu.slice(1)} {/* Capitalize the first letter */} </div> </li> </ScrollLink> ); })} </ul> </nav> ); }; export default SideMenu;utils/const.ts export const menuList = [ "home", "about", "skill", "work", "blog", "github", "twitter", "contact", ];// pages/index.tsx // ~~~~~~~~~~~~~~~~~~~~~~~ <Container> <div className="headline-wrapper"> <Headline title="About" id="about" /> //scroll to id </div> ...About onSetActive in react-scroll<ScrollLink to={menu} smooth duration={400} offset={-40} onSetActive={(id) => setIsActiveScroll(id)} spy={true} key={menu} > </ScrollLink>The onSetActive will pass the id of the target (the target with the id) when it passes over the top of the currently displayed screen.For example, when the target passes the About section, it will send the id "about".This is managed by the state with onSetActive={(id) => setIsActiveScroll(id)}This will toggle the active table of contents each time the target passes by.(Although quick scrolling may not be detected ^^;

Hello, I'm Nono.I would like to show you how to handle components with the Value of an Object in React.How to handle components with an Object's ValueWhat I want to achieveWhat I want to achieve this time is to "use the icons of react-icons skills in the skills list of the portfolio ".The icons of react-icons are handled by components as follows.import { SiTailwindcss } from "react-icons/si"; ~~~~~~~~~~~~~~~~~~~~~~~~ <div> <SiTailwindcss/> </div>  This time, there are 12 skills in the skill list, and writing all of them would be redundant, so I wanted to handle the icon component as an array of Objects.I tried to write it as follows, but it could not be used because of an error.// utils/const.ts export const skillList = [ { title: "HTML5", icon: <SiHtml5/> }, { title: "CSS3", icon: <SiCss3/> }, { title: "TailwindCSS", icon: <SiTailwindcss/> }, ... ];SolutionUpon investigation, I found that it can be handled by writing the component name as it is, without the tag parentheses.// utils/const.ts export const skillList = [ { title: "HTML5", icon: SiHtml5 }, { title: "CSS3", icon: SiCss3 }, { title: "TailwindCSS", icon: SiTailwindcss }, ... ];When you want to display it, write the following.// pages/index.tsx <Grid> {skillList.map((skill) => ( <Grid.Col span={4} xs={3} sm={2} key={skill.title}> <div className="p-2 text-center"> <skill.icon className="h-auto w-4/5 text-light" /> <p>{skill.title}</p> </div> </Grid.Col> ))} </Grid>It's better to handle components by name than by component since it allows for more flexibility in adding classes, etc.!

Hello, I am Nono.In this article, I will explain how to set favicons on your Next.js site.How to set faviconThe procedure is the following 3 steps- Create a favicon image- Upload to public- Set up _document.tsxLet's get started!Create favicon imageFirst, let's create an image.There is various image creation software such as Photoshop and Canva, but recently I have been using Figma for simple images. It has just the right amount of features and is fast.Next, upload the created image to Real Favicon GeneratorClick on Select your Favicon image and choose the image you just created.Basically, you don't need to change the settings, but this time the image didn't display well in Safari (it was just a square), so I checked to Turn your picture into a monochrome icon.After setting up, click the bottom button Generate your Favicons and HTML code.Download the files from the Favicon package.Upload to publicPut all the image files you just downloaded into public.If there is a Vercel favicon.ico that is there from the beginning, you will get a message "A file or folder named ' favicon.ico' already exists in the destination folder. Do you want to replace it? " will appear in VSCode, click "Replace " and it will be replaced with the new one.It looks gorgeous now...By the way, browserconfig.xml seems to be needed to configure the IE11 tile design.## Configuration of _document.tsxPaste the following link and meta into the Head of pages/_document.tsx.Note that all tags must have a closing tag or you'll get an error!!!Thanks for your help Favicon checker