Skip to content

Commit 13e1905

Browse files
authored
Merge pull request #1179 from Adez017/new-changes
Added Docker in docs
2 parents e62e3e9 + 9c30c13 commit 13e1905

File tree

4 files changed

+158
-21
lines changed

4 files changed

+158
-21
lines changed

docs/Docker/intro.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<div align="center">
2+
3+
# 🐳 Introduction to Docker
4+
</div>
5+
6+
Welcome! Docker helps you package and run applications in containers—think of them as lightweight, portable boxes that contain everything your app needs to run.
7+
8+
## What is Docker?
9+
10+
Docker is a platform that lets you build, ship, and run applications inside containers. Instead of worrying about "it works on my machine" problems, Docker ensures your app runs the same way everywhere.
11+
12+
**Simple analogy:** Just like shipping containers standardized global trade, Docker containers standardize software deployment. Your application + its dependencies = one portable package.
13+
14+
## Why Use Docker?
15+
16+
- **Consistency** - Same behavior on your laptop, your teammate's computer, and production servers
17+
- **Fast setup** - New developers can start working in minutes instead of days
18+
- **Isolation** - Each app runs in its own environment without conflicts
19+
- **Efficiency** - Containers are lightweight and start in seconds
20+
- **Portability** - Build once, run anywhere
21+
22+
## Core Concepts
23+
24+
### Image
25+
A blueprint for your application. Contains your code, runtime, libraries, and configuration. Images are built from a **Dockerfile** and never change once created.
26+
27+
### Container
28+
A running instance of an image. Lightweight, isolated, and disposable. You can run multiple containers from the same image.
29+
30+
### Dockerfile
31+
A simple text file with instructions to build an image:
32+
```dockerfile
33+
FROM node:18-alpine
34+
WORKDIR /app
35+
COPY package*.json ./
36+
RUN npm install
37+
COPY . .
38+
CMD ["node", "app.js"]
39+
```
40+
41+
### Registry
42+
A storage service for Docker images. **Docker Hub** is the most popular—like GitHub for Docker images.
43+
44+
### Volume
45+
Persistent storage that survives when containers are deleted. Use for databases, logs, and user files.
46+
47+
### Network
48+
Allows containers to communicate with each other securely.
49+
50+
## Quick Start Workflow
51+
52+
**1. Create a Dockerfile**
53+
```dockerfile
54+
FROM python:3.11-slim
55+
WORKDIR /app
56+
COPY requirements.txt .
57+
RUN pip install -r requirements.txt
58+
COPY . .
59+
CMD ["python", "app.py"]
60+
```
61+
62+
**2. Build your image**
63+
```bash
64+
docker build -t my-app:1.0 .
65+
```
66+
67+
**3. Run a container**
68+
```bash
69+
docker run -d --name my-app -p 8000:8000 my-app:1.0
70+
```
71+
72+
**4. Check it's running**
73+
```bash
74+
docker ps
75+
docker logs my-app
76+
```
77+
78+
That's it! Your app is now running in a container.
79+
80+
## Essential Commands
81+
82+
```bash
83+
# Build an image
84+
docker build -t myapp:1.0 .
85+
86+
# Run a container
87+
docker run -d --name myapp -p 8080:80 myapp:1.0
88+
89+
# List running containers
90+
docker ps
91+
92+
# View logs
93+
docker logs myapp
94+
95+
# Stop a container
96+
docker stop myapp
97+
98+
# Remove a container
99+
docker rm myapp
100+
101+
# List images
102+
docker images
103+
104+
# Remove an image
105+
docker rmi myapp:1.0
106+
```
107+
108+
109+
## Best Practices
110+
111+
**Use official base images** - `node:18-alpine`, `python:3.11-slim`
112+
**Use specific tags** - Avoid `:latest` in production
113+
**Keep images small** - Use Alpine or slim variants
114+
**Add .dockerignore** - Exclude `node_modules`, `.git`, logs
115+
**Don't run as root** - Create a non-privileged user
116+
**Use volumes for data** - Never store important data in containers
117+
**One process per container** - Keep it simple and focused
118+
119+
120+
## Next Steps
121+
122+
1. **Install Docker** - Get Docker Desktop (Mac/Windows) or Docker Engine (Linux)
123+
2. **Try the examples** - Build and run the sample Dockerfiles above
124+
3. **Learn Docker Compose** - Manage multi-container apps easily
125+
4. **Explore Docker Hub** - Find pre-built images for databases, web servers, etc.
126+
5. **Read the docs** - https://docs.docker.com/
127+
128+
## Key Takeaways
129+
130+
- **Containers** package your app with everything it needs
131+
- **Images** are blueprints, containers are running instances
132+
- **Dockerfiles** define how to build images
133+
- **Docker Compose** manages multiple containers together
134+
- Docker makes development, testing, and deployment much easier
135+
136+
Ready to containerize your first app? Start with a simple Dockerfile and experiment! 🚀

docusaurus.config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ const config: Config = {
107107
<a href="/docs/GitHub/intro-github" class="nav__icons" > <img src="/icons/github.svg" title="GitHub" alt="GitHub" /> </a>
108108
<a href="/docs/Nextjs/intro-nextjs" class="nav__icons" > <img src="/icons/nextjs.svg" title="Nextjs" alt="Nextjs" /> </a>
109109
<a href="/docs" class="nav__icons"> <img src="/icons/Logo-512X512.png" title="Docs" alt="Docs" /> </a>
110+
<a href="/docs/Docker/intro" class="nav__icons"> <img src="/icons/docker.svg" title="Docker" alt="Docker" /> </a>
110111
</div>
111112
</div>`,
112113
},

src/components/topmate/TopMateCard.tsx

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,8 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
2828
initial={{ opacity: 0, y: 20 }}
2929
animate={{ opacity: 1, y: 0 }}
3030
transition={{ duration: 0.5 }}
31-
className={`hover:shadow-3xl relative mx-auto w-full max-w-md transform overflow-hidden rounded-3xl shadow-2xl transition-all duration-300 hover:-translate-y-1 ${
32-
isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-black"
33-
}`}
31+
className={`hover:shadow-3xl relative mx-auto w-full max-w-md transform overflow-hidden rounded-3xl shadow-2xl transition-all duration-300 hover:-translate-y-1 ${isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-black"
32+
}`}
3433
>
3534
{/* Decorative Arrows */}
3635
<div className="absolute -top-4 -left-4 flex gap-2">
@@ -53,27 +52,24 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
5352
<div className="mb-4 flex items-center justify-between">
5453
<div className="flex items-center gap-2">
5554
<span
56-
className={`text-sm font-medium ${
57-
isDark ? "text-gray-300" : "text-gray-600"
58-
}`}
55+
className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-600"
56+
}`}
5957
>
6058
1:1 CALL
6159
</span>
6260
<div
63-
className={`flex items-center gap-1 ${
64-
isDark ? "text-gray-400" : "text-gray-500"
65-
}`}
61+
className={`flex items-center gap-1 ${isDark ? "text-gray-400" : "text-gray-500"
62+
}`}
6663
>
6764
<Clock size={16} />
6865
<span className="text-sm">{duration}</span>
6966
</div>
7067
</div>
7168
<button
72-
className={`text-xl font-semibold ${
73-
isDark
69+
className={`text-xl font-semibold ${isDark
7470
? "text-gray-500 hover:text-gray-300"
7571
: "text-gray-400 hover:text-gray-600"
76-
}`}
72+
}`}
7773
onClick={() => setShowTopmate(false)}
7874
>
7975
<span className="sr-only">Close</span>×
@@ -82,9 +78,8 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
8278

8379
{/* Title */}
8480
<h2
85-
className={`mb-4 text-2xl font-bold ${
86-
isDark ? "text-white" : "text-gray-900"
87-
}`}
81+
className={`mb-4 text-2xl font-bold ${isDark ? "text-white" : "text-gray-900"
82+
}`}
8883
>
8984
{title}
9085
</h2>
@@ -104,9 +99,8 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
10499
/>
105100
<div className="flex flex-col">
106101
<span
107-
className={`text-sm ${
108-
isDark ? "text-gray-300" : "text-gray-600"
109-
}`}
102+
className={`text-sm ${isDark ? "text-gray-300" : "text-gray-600"
103+
}`}
110104
>
111105
Book a slot at
112106
</span>
@@ -132,9 +126,8 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
132126
</div>
133127
{/* Theme-aware text to ensure readability on dark backgrounds */}
134128
<span
135-
className={`shrink-0 text-sm font-semibold ${
136-
isDark ? "text-gray-200" : "text-gray-700"
137-
}`}
129+
className={`shrink-0 text-sm font-semibold ${isDark ? "text-gray-200" : "text-gray-700"
130+
}`}
138131
>
139132
topmate
140133
</span>

static/icons/docker.svg

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)