# Installation

## Installation Guide

Follow these steps to set up and start using the theme.

### **Prerequisites**

Before you begin, ensure your system meets the following requirements.

<Aside type="tip">
  If you're on **macOS**, the easiest way to install dependencies is using
  [Homebrew](https://docs.brew.sh/Installation). Homebrew is a package manager
  that simplifies installing software. Follow [this
  guide](https://mac.install.guide/homebrew/index.html) to install Homebrew.
</Aside>

### Install Node.js

Finzo requires **Node.js (LTS version)** to work. Node.js lets you run JavaScript code on your computer. Here's how to install it based on your operating system:

<Tabs>
  <TabItem label="Windows">

    Follow these steps to install Node.js on Windows:

    1. Download the latest **LTS version** of Node.js from the official website: [Node.js Downloads](https://nodejs.org/en/download/)
    2. Run the installer after it's downloaded, and follow the on-screen instructions. The installer will guide you through the process.
    3. After installation, open the **Command Prompt** (search for "cmd" in the Start menu) and verify the installation by typing the following command and pressing Enter:

    ```bash
    node -v
    ```

    If Node.js was installed correctly, you'll see the version number (e.g., v22.13.1). This confirms that Node.js is ready to use!

    <Aside type="tip">
      If you run into any issues, you can use **Chocolatey** (a Windows package manager) to install Node.js. Open the **Command Prompt** and run:

      ```bash
      choco install nodejs-lts
      ```
    </Aside>

  </TabItem>

  <TabItem label="macOS">

    Here's how to install Node.js on macOS:

    1. First, make sure you have [Homebrew](https://brew.sh/) installed. Homebrew is a tool that makes installing software easy. If you don't have it, follow [this guide](https://mac.install.guide/homebrew/index.html) to install it.
    2. Open your **Terminal** (you can find it in Applications > Utilities) and run this command to install Node.js:

    ```bash
    brew install node
    ```

    3. After installation, verify Node.js by typing the following command:

    ```bash
    node -v
    ```

    If everything is set up, the terminal will display the installed version of Node.js.

    <Aside type="tip">
      If you prefer, you can also download the installer directly from the official [Node.js Downloads](https://nodejs.org/en/download/) page instead of using Homebrew.
    </Aside>

  </TabItem>

  <TabItem label="Linux">

    To install Node.js on Linux, follow these steps:

    1. Open your **Terminal** and update your package list:

    ```bash
    sudo apt update
    ```

    2. Install Node.js using your package manager:

    ```bash
    sudo apt install nodejs
    ```

    3. Optionally, install npm (Node.js package manager) by running:

    ```bash
    sudo apt install npm
    ```

    4. Verify the installation by typing:

    ```bash
    node -v
    ```

    The installed version of Node.js will be displayed if everything worked correctly.

    <Aside type="tip">
      For other Linux distributions, check the [official Node.js installation guide](https://nodejs.org/en/download/package-manager/) for additional instructions.
    </Aside>

  </TabItem>
</Tabs>

💡 **Need help?** Check out the official [Node.js installation guide](https://nodejs.org/en/download).

---

### **Setting Up Finzo**

Once Node.js is installed, follow these steps to set up Finzo. You can use either **npm** or **pnpm** as your package manager.

#### Install Dependencies

Navigate to your **project directory** (the main theme folder) and run:

<Tabs>
  <TabItem label="npm">```npm install```</TabItem>

  <TabItem label="pnpm">```bash pnpm install```</TabItem>
</Tabs>

This will install all the necessary dependencies for Finzo.

#### Start the Development Server

To start the local development server and view your site on your computer, run:

<Tabs>
  <TabItem label="npm">```npm run dev```</TabItem>

  <TabItem label="pnpm">```bash pnpm dev```</TabItem>
</Tabs>

🔹 Your site will be available at **http://localhost:4321** (or the customized port).

#### Create a Production Build

To generate an optimized production build (ready to publish) of your site, run the following command in your project root:

<Tabs>
  <TabItem label="npm">```npm run build```</TabItem>

  <TabItem label="pnpm">```bash pnpm build```</TabItem>
</Tabs>

This will compile your project, optimize assets, and prepare everything for deployment. The output will be located in the `dist/` folder by default.

#### Preview the Production Build

To see how your site will look in the final production version, run:

<Tabs>
  <TabItem label="npm">```npm run preview```</TabItem>

  <TabItem label="pnpm">```bash pnpm preview```</TabItem>
</Tabs>

This allows you to preview how the theme will look once it's live on the internet.

## Available Scripts

This guide covers all the npm/pnpm scripts available in Finzo. These scripts help you develop, build, and manage your site efficiently.

---

### **Development Scripts**

#### `dev`

Starts the development server with TOML configuration watching enabled.

<Tabs>
  <TabItem label="npm">```npm run dev```</TabItem>

  <TabItem label="pnpm">```pnpm dev```</TabItem>
</Tabs>

**What it does:**

- Watches for changes in TOML configuration files
- Starts the Astro development server
- Enables hot module replacement (HMR) for instant updates

🔹 Your site will be available at **http://localhost:4321**

---

#### `toml:watch`

Watches TOML configuration files for changes.

<Tabs>
  <TabItem label="npm">```npm run toml:watch```</TabItem>

  <TabItem label="pnpm">```bash pnpm toml:watch```</TabItem>
</Tabs>

**What it does:**

- Monitors TOML files for changes
- Automatically regenerates configuration when files are modified

<Aside type="note">
  This script is automatically run by `dev`, `build`, `preview`, and
  `astro-check` commands, so you typically don't need to run it manually.
</Aside>

---

### **Build Scripts**

#### `build`

Creates an optimized production build of your site.

<Tabs>
  <TabItem label="npm">```npm run build```</TabItem>

  <TabItem label="pnpm">```bash pnpm build```</TabItem>
</Tabs>

**What it does:**

- Watches TOML configuration files
- Builds your site for production
- Removes draft pages from the sitemap
- Outputs the final build to the `dist/` folder

---

#### `preview`

Builds and previews your production site locally.

<Tabs>
  <TabItem label="npm">```npm run preview```</TabItem>

  <TabItem label="pnpm">```bash pnpm preview```</TabItem>
</Tabs>

**What it does:**

- Runs the complete build process
- Starts a local preview server
- Allows you to test the production build before deployment

---

### **Quality Assurance Scripts**

#### `astro-check`

Runs type checking and diagnostics on your Astro project.

<Tabs>
  <TabItem label="npm">```npm run astro-check```</TabItem>

  <TabItem label="pnpm">```bash pnpm astro-check```</TabItem>
</Tabs>

**What it does:**

- Checks for TypeScript errors
- Validates Astro components
- Reports potential issues in your code

---

#### `format`

Formats your source code using Prettier.

<Tabs>
  <TabItem label="npm">```npm run format```</TabItem>

  <TabItem label="pnpm">```bash pnpm format```</TabItem>
</Tabs>

**What it does:**

- Formats all files in the `./src` directory
- Ensures consistent code style across your project

---

#### `test`

Runs the test suite in watch mode.

<Tabs>
  <TabItem label="npm">```npm run test```</TabItem>

  <TabItem label="pnpm">```bash pnpm test```</TabItem>
</Tabs>

**What it does:**

- Runs Jest tests with a custom TypeScript configuration
- Watches for file changes and re-runs tests automatically

---

### **Utility Scripts**

#### `generate-favicons`

Generates favicon files from your source image.

<Tabs>
  <TabItem label="npm">```npm run generate-favicons```</TabItem>

  <TabItem label="pnpm">```bash pnpm generate-favicons```</TabItem>
</Tabs>

**What it does:**

- Creates favicons in multiple sizes
- Generates necessary icon formats for different platforms

<Aside type="tip">
  Run this script after updating your site's logo or branding to ensure all
  favicon files are regenerated.
</Aside>

---

#### `generate-multilingual-content`

Generates multilingual content structure for your site.

<Tabs>
  <TabItem label="npm">
    ```npm run generate-multilingual-content ```
  </TabItem>

  <TabItem label="pnpm">```bash pnpm generate-multilingual-content```</TabItem>
</Tabs>

**What it does:**

- Creates content directories for multiple languages
- Sets up the structure for internationalization (i18n)

---

#### `remove-multilingual`

Removes multilingual content structure.

<Tabs>
  <TabItem label="npm">```npm run remove-multilingual```</TabItem>

  <TabItem label="pnpm">```bash pnpm remove-multilingual```</TabItem>
</Tabs>

**What it does:**

- Cleans up multilingual content directories
- Useful when reverting to a single-language setup

<Aside type="caution">
  This script will remove multilingual content. Make sure to back up any
  important files before running it.
</Aside>

---

#### `remove-draft-from-sitemap`

Removes draft pages from the generated sitemap.

<Tabs>
  <TabItem label="npm">```npm run remove-draft-from-sitemap```</TabItem>

  <TabItem label="pnpm">```bash pnpm remove-draft-from-sitemap```</TabItem>
</Tabs>

**What it does:**

- Filters out pages marked as drafts from the sitemap
- Ensures only published content appears in search engines

<Aside type="note">
  This script is automatically run during the `build` and `preview` commands, so
  you typically don't need to run it manually.
</Aside>

---

🚀 **You're all set!** Now you can start customizing Finzo to fit your needs. 🎨