2 Getting Started with Node.js

Learn the basics of Node.js and set up your first project

6 min read

0. Metadata including title, description etc...

Code

---
title: "All blog components for myself"
date: "2025-10-15"
description: "helps in writing blogs"
tags: ["components"]
coverImage: "/images/blog/commonimages/installcommon.jpg"
category: "Installation"
author:
  name: "Priyanshu"
  image: "/images/blog/profile.jpg"
  link: "https://www.linkedin.com/in/priyanshu-jha-1b318a24b"
  tagline: "Software Engineer"
---

1. Top most intro image

Intro Image

Code

![Intro Image](/images/blog/commonimages/installcommon.jpg)

2. Sectionbox on top position

Key Points

Understand the difference between SQL and NoSQL.
Know when to use each database type
Performance tuning depends on query patterns

<SectionBox title="Key Points">
- Understand the difference between SQL and NoSQL  
- Know when to use each database type  
- Performance tuning depends on query patterns  
</SectionBox>

3. Order and Unorder List

Unordered List Output

Apples
Oranges

Ordered List Output

Wake up early
Exercise

Code

1. Apples   
2. Oranges

4. Table

Product	Price	Rating
MacBook Air	$999	4.5
Dell XPS	$1099	4.4
Lenovo ThinkPad	$899	4.3

Code

<Table
  columns={["Product", "Price", "Rating"]}
  rows={[
    ["MacBook Air", "$999", "4.5"],
    ["Dell XPS", "$1099", "4.4"],
    ["Lenovo ThinkPad", "$899", "4.3"],
  ]}
/>

5. Details component

What is a Closure?

A closure is the combination of a function and the lexical environment within which that function was declared.

Code

<Details summary="What is a Closure?">
  A closure is the combination of a function and the lexical environment within which that function was declared.
</Details>

6. Callout component

This feature is currently in beta.

Do not refresh while the upload is in progress.

Code

<Callout type="info">This feature is currently in beta.</Callout>
<Callout type="warning">Do not refresh while the upload is in progress.</Callout>

7. Code snippets without copy Button

function outer() {
  let count = 0
  return function inner() {
    count++
    console.log(count)
  }
}
const fn = outer()
fn() // 1
fn() // 2

Code

js
function outer() {
  let count = 0
  return function inner() {
    count++
    console.log(count)
  }
}
const fn = outer()
fn() // 1
fn() // 2

8. Quote component

“Great engineers don't just write code; they craft solutions that make an impact.”

Code

<Quote>
  “Great engineers don't just write code; they craft solutions that make an impact.”
</Quote>

9. Files and Folders Tree Component

Code

<FileTreeDemo
  initialExpandedItems={["1", "2", "3"]}
  elements={[
    {
      id: "1",
      isSelectable: true,
      name: "src",
      children: [
        {
          id: "2",
          isSelectable: true,
          name: "app",
          children: [
            { id: "3", isSelectable: true, name: "page.tsx" },
            { id: "4", isSelectable: true, name: "layout.tsx" },
          ],
        },
        {
          id: "5",
          isSelectable: true,
          name: "components",
          children: [
            { id: "6", isSelectable: true, name: "Button.tsx" },
            { id: "7", isSelectable: true, name: "Navbar.tsx" },
          ],
        },
      ],
    },
  ]}
/>

10. Multitab with copy button component

function greet() {
  console.log("Hello from JS!");
}
greet();

Code

<Tabs>
  <Tab label="JavaScript">
    ``js
    function greet() {
      console.log("Hello from JS!");
    }
    greet();
    ``
  </Tab>
  
  <Tab label="Python">
    ``python
    def greet():
      print("Hello from Py!")

    greet();
    ``
  </Tab>
</Tabs>

Note : Replace `` with ``` in code snippet

11. Button component

Open Google

Download PDF

Code

<Button href="https://google.com" target="_blank">
  Open Google
</Button>
<Button href="/resume.pdf" download>
  Download PDF
</Button>

12. Link Preview

You can check here Visit Google

Code

<LinkPreview href="https://google.com">Visit Google</LinkPreview>

13. Tooltip

Tooltip Hover meThis is extra helpful info shown on hover

Code

<Tooltip label="This is extra helpful info shown on hover">Hover me</Tooltip>

14. Reference Text

You referenced Albert in a sentence like this.

Code

<ReferenceText>Albert</ReferenceText>

Some graphs and charts for visualization

15. Bar Chart

Code

<BarChart
  data={[
    { month: 'Jan', sales: 200 },
    { month: 'Feb', sales: 350 },
    { month: 'Mar', sales: 450 },
  ]}
  xKey="month"
  yKey="sales"
/>

16. Line Chart

Code

<LineChart
  data={[
    { month: 'Jan', users: 200 },
    { month: 'Feb', users: 350 },
    { month: 'Mar', users: 500 },
    { month: 'Apr', users: 300 },
    { month: 'May', users: 600 },
  ]}
  xKey="month"
  yKey="users"
/>

17. Pie Chart

Code

<PieChart
  data={[
    { name: 'Tech', value: 45 },
    { name: 'Healthcare', value: 25 },
    { name: 'Finance', value: 20 },
    { name: 'Others', value: 10 },
  ]}
/>

More component will be added if needed...