Welcome to HardCode Blog

Welcome to HardCode Blog! This is a modern blog platform with Neo-Brutalism design aesthetic.

Project Goals

The main goals of this project are to create a feature-rich, SEO-friendly blog platform with:

• 🎨 Neo-Brutalism Design - Unique visual style
• 📝 Markdown Support - Write articles in Markdown
• 🌍 Multi-language Support - Support for Chinese and English content
• 🔍 Powerful Search - Full-text search powered by Algolia
• 🚀 High Performance - Static site generation with Next.js 14+

Tech Stack

Frontend Framework

• Next.js 14+ - Latest version with App Router
• React 18 - Modern React features
• TypeScript - Type-safe development experience

Styling

• Tailwind CSS - Utility-first CSS framework
• Custom Theme - Complete Neo-Brutalism design system

Content Management

• Markdown - File-based content management
• Frontmatter - YAML format metadata
• remark/rehype - Powerful Markdown processing pipeline

Next Steps

We will implement in the upcoming phases:

1. Markdown processing and rendering
2. Code syntax highlighting
3. Math formula support
4. Chart rendering
5. Full-text search
6. RSS feeds

Stay tuned for more exciting content!

• Point A
• Point B
• Point C

Code Examples

function hello(name: string): string {
  return `Hello, ${name}!`
}
console.log(hello('World'))

Math Formulas

Inline formula: $E = mc^2$

Block formula:

Code Blocks and Line Numbers

All code blocks now automatically display line numbers!

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
// Call the function
const result = fibonacci(10);
console.log(`10th Fibonacci number: ${result}`);

def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)
 
# Test
numbers = [3, 6, 8, 10, 1, 2, 1, 3, 6, 8, 10, 1, 2, 1, 3, 6, 8, 10, 1, 2, 1, 3, 6, 8, 10, 1, 2, 1]
print(quick_sort(numbers))

Unordered Lists

Unordered lists now have beautiful Neo-Brutalism square markers:

• First item - uses retro cyan squares
• Second item - black border with shadow
• Third item - strong visual impact
  • Nested list item - Barbie pink
  • Another nested item
    • Third-level nested - construction yellow
    • Clear hierarchy

Ordered Lists

Ordered lists use numbered badges with shadows:

1. Step one - planning and design
2. Step two - writing code
3. Step three - testing features
   1. Unit tests - orange badge
   2. Integration tests
   3. End-to-end tests
      1. Automated tests - electric blue badge
      2. Manual tests
4. Step four - deployment

Table Showcase

Tables have full Neo-Brutalism styling:

Tech Stack Comparison

Math Formulas

Inline formula $E = mc^2$ and the Einstein field equation.

Block formula:

Matrix representation:

Mixed Content

Combining multiple elements:

1. Code and lists together

   • Install dependencies: npm install
   • Start the dev server: npm run dev
   • Build for production: npm run build

2. Inline code examples

   • Use useState to manage state
   • Use useEffect to handle side effects
   • Use useMemo to optimize performance

3. Blockquotes

This is a blockquote that showcases Neo-Brutalism borders and background.

Blockquotes can contain multiple paragraphs, as well as bold text and italic text.

Mermaid Flowcharts

Summary

This round of improvements includes:

• ✅ Code line numbers: all code blocks automatically display line numbers
• ✅ Enhanced lists: custom markers, color hierarchy, and better spacing
• ✅ Table styles: bold borders, shadows, hover effects, and responsive design
• ✅ Neo-Brutalism aesthetics: all elements follow the design guidelines

All features are completed and working correctly!