Tabs

No Icons

A tabbed interface rendered with the <Tabs> and <TabItem> components.

A tab
Another tab

The first tab content that can use any other Markdown syntax.

With Icons

A tabbed interface rendered with the <Tabs> and <TabItem> components and icons.

npm install starlight-theme-galaxy

pnpm add starlight-theme-galaxy

yarn add starlight-theme-galaxy

With Code Blocks

Here’s an example with JavaScript code blocks:

// Higher-order function example
const createCounter = (initialValue = 0) => {
  let count = initialValue;

  return {
    increment: () => ++count,
    decrement: () => --count,
    getValue: () => count,
    reset: () => { count = initialValue; }
  };
};

const counter = createCounter(10);
console.log(counter.getValue()); // 10
counter.increment();
console.log(counter.getValue()); // 11

// Async data fetching with error handling
const fetchUserData = async (userId) => {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('Failed to fetch user data:', error);
    return null;
  }
};

// Usage with Promise chain
fetchUserData(123)
  .then(user => user ? console.log(user.name) : console.log('User not found'))
  .catch(err => console.error('Unexpected error:', err));

// ES6 Class with private methods and getters
class TaskManager {
  #tasks = [];
  #nextId = 1;

  constructor(name = 'Default') {
    this.name = name;
    this.createdAt = new Date();
  }

  addTask(description, priority = 'medium') {
    const task = {
      id: this.#nextId++,
      description,
      priority,
      completed: false,
      createdAt: new Date()
    };

    this.#tasks.push(task);
    return task;
  }

  completeTask(taskId) {
    const task = this.#findTaskById(taskId);
    if (task) {
      task.completed = true;
      task.completedAt = new Date();
    }
    return task;
  }

  #findTaskById(id) {
    return this.#tasks.find(task => task.id === id);
  }

  get completedTasks() {
    return this.#tasks.filter(task => task.completed);
  }

  get pendingTasks() {
    return this.#tasks.filter(task => !task.completed);
  }
}

const manager = new TaskManager('Project Alpha');
manager.addTask('Setup development environment', 'high');
manager.addTask('Write unit tests', 'medium');