Compiiile

compiiile-pro added features

Admonitions

A note to highlight information for users.

Some custom title

A note to highlight information for users.

Custom title

Custom title

Admonition-ception, yes that’s possible!

Optional information to help a user be more successful.

Crucial information necessary for users to succeed.

Critical content demanding immediate user attention due to potential risks.

Negative potential consequences of an action.

Display the source:
md
> [!NOTE]
> A note to `highlight` information for users.

> [!NOTE] Some custom title
> A note to highlight information for users.

> [!NOTE] Custom title
>
> > [!NOTE] Custom title
> > Admonition-ception, yes that's possible!

> [!TIP]
> Optional information to `help` a user be more successful.

> [!IMPORTANT]
> Crucial information `necessary` for users to succeed.

> [!WARNING]
> Critical content demanding `immediate` user attention due to potential risks.

> [!CAUTION]
> `Negative` potential consequences of an action.

Diagrams

Source
md
    ```mermaid
    graph TD
    B( compiiile-pro ) -->|Is amazing! | C{ What does it do? }
    C --> D[ Write diagrams in Markdown ]
    C --> E[ Display mindmaps ]
    C --> F[ Use a collection of components ]
    ```
Source
md
```markmap
---
markmap:
width: 700px
---

- compiiile-pro
    - diagrams
    - mindmaps
    - components
        - icons
        - layout
```
Source
md
```mermaid
gitGraph
commit id: "☝️ added README"
commit id: "feat - diagrams"
branch mindmaps
commit id: "feat - mindmaps"
checkout main
merge mindmaps
branch components
commit id: "feat - components"
checkout main
commit id: "📚 doc - project description"
merge components tag: "1.0.0"
```
Source
md
```mermaid
sequenceDiagram
Client->>Server: GET /products
Server-->>Client: Return product list
```
Source
md
```mermaid
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
```
Source
md
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]

Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
Source
md
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
Source
md

`````mermaid
gantt
 title A Gantt Diagram
 dateFormat YYYY-MM-DD
 section Section
     A task          :a1, 2014-01-01, 30d
     Another task    :after a1, 20d
 section Another
     Task in Another :2014-01-12, 12d
     another task    :24d
```
Source
md

`````mermaid
pie title Pets adopted by volunteers
 "Dogs" : 386
 "Cats" : 85
 "Rats" : 15
```
Source
md
```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```
Source
md
```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
Source
md
```mermaid
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
```

diagram

Source
md
```d2
direction: right

costumes: {
    shape: sql_table
    id: int {constraint: primary_key}
    silliness: int
    monster: int
    last_updated: timestamp
}

monsters: {
    shape: sql_table
    id: int {constraint: primary_key}
    movie: string
    weight: int
    last_updated: timestamp
}

costumes.monster -> monsters.id
costumes.style.border-radius: 4
monsters.style.border-radius: 4

style: {
    fill: "#eeeeee"
}
```

Code blocks

Code block all have a copy content button with the pro version. The file type will be displayed, and you can also display a custom filename:

script.sh
yarn dev
bash
yarn add @compiiile/compiiile-pro
mdx
```bash filename="script.sh"
yarn dev
```

```bash
yarn add @compiiile/compiiile-pro
```

Components

Components are usable in mdx files without importing them.

Icon

The Icon component is used to display an icon from the PhosphorIcons library. The icon name has to be passed in the name prop.

Some blockquote with an icon

mdx
> Some blockquote with an icon <Icon name="github-logo" />

You can also use icons in regular Markdown files (not mdx) by using the i tag with appropriate classes: <i class="ph ph-smiley"></i>

In Vue components, you can use the following syntax to dynamically import the icon you want: <i-ph-user />

CGrid

The CGrid component allows you to use a grid layout (very useful for slides):

mdx
<CGrid template="2 1" align="center">
    <div>
        # Title

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. From [xodnnhm](https://giphy.com/xodnnhm).
    </div>

    ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdDI1d2lybmoycXA5NTQ1Y2N5Y3ZhOXVuYWxxcmh5MHJvMDdsbWdvcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SKT9pS2jJ3J7lrn51E/giphy-downsized-large.gif)

</CGrid>
  • The template prop works just like the grid-template-columns CSS property, you can omit the fr unit, it will be processed automatically.
    • template="1 1" will make 2 columns of equal width
    • template="2 1" will make 2 columns with the first one using 2/3 width
  • You can vertically align items with the align prop, working like the align-items CSS property.
  • You can specify the gap between components with the gap prop (defaults to 40px)

CCard

The CCard component can be used as a traditional card or a link.

  • The title and description slots can be used for traditional cards
  • To get it to work as a link, just provide a Markdown link as default slot, and specify a hint text if needed with the hintText prop

Some link

Go to the specific page

Link (without hint)

Title

Some description

 

Source
md
<CGrid gap="20px" template="1 1">
    <CCard hintText="Go to the specific page">
        [Check compiiile-pro installation](./3-pro-installation.md)
    </CCard>

    <CCard>
        [Link (with hover hint)](./3-pro-installation.md)
    </CCard>

    <CCard>
        <span slot="title">Title</span>
        <span slot="description">Some description</span>
    </CCard>
</CGrid>
[PRO] Installation[PRO] Slides