0xdsqr
/
posts
/
misc
/
about
sign in

© 2025 dsqr.dev

back to posts
Hello World
BlogNovember 3, 2025•5 min read

Hello World

Dave Dennis

Dave Dennis

@0xdsqr

#mdx#components#testing
Loading post...

comments(0)

sign in to leave a comment

no comments yet. be the first to share your thoughts.

MDX Component Test Page

This page demonstrates all the custom MDX components and styling features available in our blog.

Callout Components

Important

This is an Important callout. Use it for critical information that readers must know. It supports markdown formatting within the callout.

Note

This is a Note callout. Use it for additional information or context. It's useful for supplementary details that might be helpful but aren't critical.

Tip

This is a Tip callout. Use it for helpful suggestions or best practices. Tips can help readers optimize their workflow or learn advanced techniques.

Warning

This is a Warning callout. Use it to highlight potential issues or cautions. Warnings help readers avoid common mistakes or pitfalls.

Caution

This is a Caution callout. Use it for serious warnings about dangerous actions. Cautions indicate high-risk situations that could cause significant problems.

Text Formatting

Here are examples of various text formatting options:

Bold text for emphasis

Italic text for subtle emphasis

Strikethrough for indicating removed content

Inline code for short code snippets

Links

External link - This links to an external website

Internal link - This links to an internal page

Lists

Unordered List

  • Item one
  • Item two
  • Item three
    • Nested item
    • Another nested item

Ordered List

  1. First item
  2. Second item
  3. Third item
    1. Nested numbered item
    2. Another nested item

Blockquote

This is a blockquote. It's useful for highlighting quoted content or for adding emphasis to a particular passage.

It can span multiple paragraphs and include formatting.

Tables

Column 1Column 2Column 3
Cell 1-1Cell 1-2Cell 1-3
Cell 2-1Cell 2-2Cell 2-3
Cell 3-1Cell 3-2Cell 3-3

Code Blocks

JavaScript

1
2
3
4
5
6
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet('World');
console.log(message); // Outputs: Hello, World!

TypeScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface User {
  id: number;
  name: string;
  email?: string;
}

function getUserInfo(user: User): string {
  return `User ${user.name} (ID: ${user.id})`;
}

const user: User = {
  id: 1,
  name: 'John Doe'
};

console.log(getUserInfo(user));

Python

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
def fibonacci(n):
    """Generate the Fibonacci sequence up to n"""
    a, b = 0, 1
    result = []
    while a < n:
        result.append(a)
        a, b = b, a + b
    return result

# Print the first 10 Fibonacci numbers
fib_numbers = fibonacci(100)
print(f"Fibonacci sequence: {fib_numbers}")

# Using a class
class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age
    
    def greet(self):
        return f"Hello, my name is {self.name} and I'm {self.age} years old."

# Create a person object
alice = Person("Alice", 30)
print(alice.greet())

Go

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
package main

import (
	"fmt"
	"time"
)

// Simple function to greet someone
func greet(name string) string {
	return fmt.Sprintf("Hello, %s! Welcome to Go.", name)
}

// A custom struct
type Task struct {
	ID          int
	Description string
	Done        bool
	CreatedAt   time.Time
}

func main() {
	// Basic variable declaration
	message := greet("Gopher")
	fmt.Println(message)
	
	// Create a slice of tasks
	tasks := []Task{
		{
			ID:          1,
			Description: "Learn Go basics",
			Done:        true,
			CreatedAt:   time.Now().Add(-24 * time.Hour),
		},
		{
			ID:          2,
			Description: "Build a web server",
			Done:        false,
			CreatedAt:   time.Now(),
		},
	}
	
	// Loop through tasks
	for _, task := range tasks {
		status := "Pending"
		if task.Done {
			status = "Completed"
		}
		fmt.Printf("Task %d: %s [%s]\n", task.ID, task.Description, status)
	}
}

Bash/Shell

1
2
3
4
5
6
7
8
9
10
11
12
13
#!/bin/bash
echo "Starting deployment..."

# Install dependencies
npm install

# Build the project
npm run build

# Deploy to production
scp -r ./dist user@server:/var/www/app

echo "Deployment completed!"

CSS/SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.card {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1rem;
  background-color: white;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
}

Images

Here's an example image:

Sample Image

Horizontal Rule

Use horizontal rules to separate content sections:

Heading Levels

Heading 1

Heading 2

Heading 3

Heading 4

As a developer, I'm always looking for ways to streamline my workflow and make my development environment more reproducible.