open-index/open-npm huggingface dataset:
npm package: @iannacus/docs
Description: Docsnnacus is a docs template. The idea is mantain 0 configuration adn get focus on  docs.
Latest version: 0.1.7

# Docsnnacus

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

## 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 docsnnacus 

```shell
npm i @iannacus/docs
```

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

```js
import { defineConfig } from 'astro/config';
import docsnnacus from "@iannacus/docs"

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

### 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/content/",
  }),
});

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, Docssnacus 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/docs/extra-components';

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


### Alerts 

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

```js 
import { Alert } from '@iannacus/docs/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

## TODO 

- search bar