# Διαμόρφωση

Οι ρυθμίσεις για ολόκληρο τον ιστότοπο βρίσκονται στο `onedocs.config.ts` στη ρίζα του έργου σας. Περνάτε το εξαγόμενο αντικείμενο στα `DocsLayout`, `HomePage` και `createMetadata`, τα οποία το διαβάζουν. Η θέση του περιεχομένου σας ορίζεται στο `source.config.ts`, όχι εδώ (δείτε την ενότητα [Ξεκινώντας](https://onedocs.inline0.dev/el/docs/getting-started)).

## Βασική ρύθμιση

```ts title="onedocs.config.ts"
import { defineConfig } from "onedocs/config";

export default defineConfig({
  title: "My Project",
  description: "Documentation for My Project",
});
```

Αυτά είναι τα ελάχιστα απαιτούμενα. Όλα τα υπόλοιπα είναι προαιρετικά.

## Πλήρες παράδειγμα

Τα εικονίδια χαρακτηριστικών είναι στοιχεία React, επομένως ένα config που τα χρησιμοποιεί πρέπει να είναι αρχείο `.tsx`:

```tsx title="onedocs.config.tsx"
import { defineConfig } from "onedocs/config";
import { Rocket, Zap } from "lucide-react";

export default defineConfig({
  title: "My Project",
  description: "Documentation for My Project",

  // Logo (string or light/dark variants)
  logo: "/logo.svg",
  // logo: { light: "/logo-light.svg", dark: "/logo-dark.svg" },

  // Favicon (string or light/dark variants), used by createMetadata
  icon: "/icon.png",

  // Navigation bar
  nav: {
    links: [
      { label: "Blog", href: "/blog" },
      { label: "Changelog", href: "/changelog" },
    ],
    github: "username/repo",
  },

  // Homepage
  homepage: {
    hero: {
      title: "My Project",
      description: "Documentation that ships with the code",
      cta: { label: "Get Started", href: "/docs" },
    },
    features: [
      {
        title: "Fast",
        description: "Static pages built by Next.js",
        icon: <Zap className="size-5 text-fd-primary" />,
      },
      {
        title: "Simple",
        description: "Write markdown, get docs",
        icon: <Rocket className="size-5 text-fd-primary" />,
      },
    ],
  },

  // Homepage footer
  footer: {
    links: [{ label: "License", href: "https://github.com/username/repo/blob/main/LICENSE" }],
  },
});
```

## Επιλογές

### title (απαιτείται)

Το όνομα του ιστοτόπου σας. Η γραμμή πλοήγησης το εμφανίζει όταν δεν έχει οριστεί `logo`, το `createMetadata` το χρησιμοποιεί ως προεπιλεγμένο τίτλο σελίδας και στο πρότυπο `%s | Title`, ενώ η αρχική σελίδα το χρησιμοποιεί ως τίτλο hero και στη γραμμή πνευματικών δικαιωμάτων του υποσέλιδου.

```ts
title: "My Project"
```

### περιγραφή

Σύντομη περιγραφή. Το `createMetadata` τη χρησιμοποιεί ως μετα-περιγραφή, ενώ η αρχική σελίδα την εμφανίζει κάτω από τον τίτλο hero όταν δεν έχει οριστεί το `homepage.hero.description`.

```ts
description: "Documentation for My Project"
```

### λογότυπο

Αντικαθιστά τον τίτλο στη γραμμή πλοήγησης. Χρησιμοποιήστε μία διαδρομή ή παραλλαγές για ανοιχτόχρωμο και σκοτεινό θέμα· η εικόνα έχει ύψος 24 px και χρησιμοποιεί το `title` ως εναλλακτικό κείμενο.

```ts
// Single logo
logo: "/logo.svg"

// Light/dark mode
logo: {
  light: "/logo-light.svg",
  dark: "/logo-dark.svg"
}
```

### εικονίδιο

Το favicon, που ορίζεται μέσω του `createMetadata`. Οι παραλλαγές για ανοιχτόχρωμο και σκοτεινό θέμα παρέχονται με ερωτήματα μέσων `prefers-color-scheme`.

```ts
icon: "/icon.png"

// Light/dark mode
icon: {
  light: "/icon-light.png",
  dark: "/icon-dark.png"
}
```

### πλοήγηση

Διαμόρφωση γραμμής πλοήγησης, που χρησιμοποιείται από τα `DocsLayout` και `HomePage`.

```ts
nav: {
  // Extra links in the navbar
  links: [
    { label: "Blog", href: "/blog" },
    { label: "API", href: "/api" },
  ],

  // GitHub repo as "owner/name" (adds an icon link to https://github.com/owner/name)
  github: "username/repo",
}
```

### αρχική σελίδα

Το hero και το πλέγμα χαρακτηριστικών που αποδίδει το `HomePage`.

```tsx
homepage: {
  hero: {
    title: "My Project",        // Defaults to config.title
    description: "Description", // Defaults to config.description
    cta: {
      label: "Get Started",     // Default: "Get Started"
      href: "/docs",            // Default: "/docs"
    },
  },
  features: [
    {
      title: "Feature 1",
      description: "Description of feature 1",
      icon: <Rocket className="size-5" />, // Optional React element
    },
  ],
}
```

Το `icon` αποδίδεται όπως δίνεται, επομένως περάστε ένα στοιχείο όπως ένα εικονίδιο `lucide-react`. Μια συμβολοσειρά όπως το `"rocket"` εμφανίζεται ως κείμενο.

Δύο ακόμη επιλογές hero αντικαθιστούν τμήματα του προεπιλεγμένου hero:

- Το `hero.left` αντικαθιστά τον τίτλο, την περιγραφή, το μπλοκ εγκατάστασης και το κουμπί με δικό σας περιεχόμενο. Δέχεται κόμβο React ή συνάρτηση που επιστρέφει έναν τέτοιο κόμβο.
- Το `hero.right` γεμίζει το δεξί μισό του hero. Είναι κρυφό κάτω από το σημείο διακοπής `lg`.

### υποσέλιδο

Σύνδεσμοι και εικονίδια κοινωνικών δικτύων στο υποσέλιδο `HomePage`, δίπλα στη γραμμή πνευματικών δικαιωμάτων. Και τα δύο ανοίγουν σε νέα καρτέλα.

```tsx
// import { GitHubIcon } from "onedocs";
footer: {
  links: [{ label: "Privacy", href: "/privacy" }],
  socials: [
    { label: "GitHub", href: "https://github.com/username/repo", icon: <GitHubIcon /> },
  ],
}
```

Κάθε σύνδεσμος κοινωνικού δικτύου χρησιμοποιεί το `label` ως προσβάσιμο όνομα.

## Επιλογές που δεν έχουν ακόμη αποτέλεσμα

Το `OnedocsConfig` ορίζει επίσης τύπους για τα `docs`, `theme` και `i18n`, ενώ το `defineConfig` συμπληρώνει τις προεπιλεγμένες τιμές `docs.dir` και `theme.darkMode`, αλλά κανένας κώδικας Onedocs δεν τις διαβάζει ([#2](https://github.com/inline0/onedocs/issues/2)). Η ρύθμισή τους δεν αλλάζει τίποτα:

- `docs.dir`: ο φάκελος περιεχομένου είναι το `dir` που περνάτε στο `defineDocs` στο `source.config.ts`.
- `theme.primaryColor` και `theme.darkMode`: τα χρώματα προέρχονται από το θέμα Fumadocs UI που εισάγει η προκαθορισμένη ρύθμιση CSS, ενώ οι φωτεινές και σκοτεινές λειτουργίες προέρχονται από το Fumadocs UI του `RootProvider`.
- `i18n`: το Onedocs δεν υποστηρίζει πολλές γλώσσες.

## TypeScript

Η βοηθητική συνάρτηση `defineConfig` παρέχει πλήρη αυτόματη συμπλήρωση:

```ts
import { defineConfig, type OnedocsConfig } from "onedocs/config";

const config: OnedocsConfig = {
  title: "My Project",
};

export default defineConfig(config);
```

Το `defineConfig` επιστρέφει το αντικείμενο που περνάτε, μαζί με τις αχρησιμοποίητες προεπιλεγμένες τιμές `docs` και `theme` που περιγράφονται παραπάνω.