Skip to content

Latest commit

 

History

History
592 lines (464 loc) · 11.9 KB

4-pro-features.mdx

File metadata and controls

592 lines (464 loc) · 11.9 KB
Raw
title description
[PRO] Features
Use icons, admonitions, mermaid diagrams, markmap mindmaps in Markdow thanks to compiiile-pro.

compiiile-pro added features

Admonitions

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.

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

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 ]
Loading
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 ]
    ```
````

---
markmap:
    width: 700px
---

- compiiile-pro
  - diagrams
  - mindmaps
  - components
    - icons
    - layout
Source 
````md
```markmap
---
markmap:
width: 700px
---

- compiiile-pro
    - diagrams
    - mindmaps
    - components
        - icons
        - layout
```
````

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"
Loading
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"
```
````

sequenceDiagram
    Client->>Server: GET /products
    Server-->>Client: Return product list
Loading
Source 
````md
```mermaid
sequenceDiagram
Client->>Server: GET /products
Server-->>Client: Return product list
```
````

classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawal(amount)
Loading
Source 
````md
```mermaid
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
```
````

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
Loading
Source 
````md
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]

Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
````

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
Loading
Source 
````md
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
````

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
Loading
Source 
````md

 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
 ```
 ````
</details>

---

```mermaid
pie title Pets adopted by volunteers
 "Dogs" : 386
 "Cats" : 85
 "Rats" : 15
Loading
Source 
````md

 pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
     "Rats" : 15
 ```
 ````
</details>

---

```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]
Loading
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]
```
````

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]
Loading
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]
```
````

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
Loading
Source 
````md
```mermaid
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
```
````

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"
}
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:

yarn dev
yarn add @compiiile/compiiile-pro
```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 

> 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):

<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](./3-pro-installation.md) 
<CCard>
    [Link (without hint)](./3-pro-installation.md)
</CCard>

<CCard>
    <span slot="title">Title</span>
    <span slot="description">Some description</span>
</CCard>

 

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>
````