npm package: @iannacus/dimacheri
Description: Dimacheri integration is a docs template. The idea is mantain 0 configuration adn get focus on docs.
Latest version: 0.2.0

# Dimacheri integration

Dimacheri integration is a docs template. The idea is mantain 0 configuration adn get focus on
docs.

### v 0.2.0

New Theme template

[Read the docs](https://dimacheri-docs.vercel.app/inicio)

### v 0.1.8

Group first level directories

Into your astro.config.mjs add this to your dimacheri integration:

```js
integrations: [
    dimacheri({
      superDocs: ["Arquitectura", "Hooks", "Componentes"],
    }),
    mdx(),
  ],
```

And into your src/docs/ you should have this dirs named exactly like you write in intgraiton options.

Example:

```
/src
├── /docs
│   ├── Arquitectura
│   ├── Componentes
│   └── Hooks

```

Files at docs first level does not appear into side bar.
Dirs at /docs first level does not appear into side bar.

### v 0.1.7

Dimacheri introduce the capabilitie to add a index file into a directory.

## Setup

First create a basic "minimal starter" astro template

```shell
npm create astro@latest my-project -- --template minimal
```

Enter into project directory

```shell
cd my-project
```

Install Dimacheri integration

```shell
npm i @iannacus/dimacheri
```

Now open a astro.config.mjs and add dimacheri itegration

```js
import { defineConfig } from "astro/config";
import dimacheri from "@iannacus/dimacheri";

export default defineConfig({
  integrations: [dimacheri()],
});
```

### Read collections

Into a src directory create

1. A directory named "content"
2. A file named content.config.ts

Into a content.config.ts write the following code

```js
import { defineCollection } from "astro:content";
import { glob } from "astro/loaders";

const docs = defineCollection({
  loader: glob({
    pattern: "**/*.md",
    base: "./src/docs/",
  }),
});

export const collections = { docs };
```

## Create documentation

Now you just need to add md files into content directory.

These files need the follow structure:

---

title: Page title
description: A short description for page
displayName: Overview

---

md content

## Extra components

While Markdown offers a diverse range of styles, dimacheri provides extra features to enhance your documentation process.

> You should use mdx files for this components

### Code block

Use this component to highlight code sintaxis on your documentation.

#### Usage

```js
import { Code } from "@iannacus/dimacheri/extra-components";

<Code lan="js" code="console.log('using dimacheri code component')" />;
```

### Alerts

Use this component for advice something like, tips, alerts, info or caution into your explanation.

```js
import { Alert } from "@iannacus/dimacheri/extra-components";

<Alert type="tip">Alert content</Alert>;
```

type can be "tip" | "info" | "warning" | "error" | "alt"

You can use a title prop for override default alert title

### File tree

```js
import { FileTree } from "@iannacus/dimacheri/extra-components";

<FileTree
  items={{
    src: {
      type: "dir",
      items: {
        "index.ts": { type: "file" },
      },
    },
  }}
/>;
```

## File System

```js
import { FileSystem } from "@iannacus/dimacheri/extra-components";

<FileSystem
  items={`
- src/
-- index.ts
-- components/
--- FileSystem.astro
--- FileTree.astro
-- assets/
`}
/>;
```

## TODO

- search bar