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

v 0.1.8

Group first level directories

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

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

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

Enter into project directory

cd my-project

Install Dimacheri integration

npm i @iannacus/dimacheri

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

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

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

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.

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

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

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

File System

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

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

TODO

• search bar