@compiiile/compiiile 2.8.0 → 2.8.2

package/.compiiile/src/components/layout/ThemeSwitcher.vue

@@ -1,5 +1,5 @@
 <template>
-	<button class="theme-switcher" @click="toggleTheme">
+	<button class="theme-switcher" @click="toggleTheme" aria-label="Theme switcher">
 		<!-- sun-dim -->
 		<svg
 			class="theme-icon theme-icon--light"

package/.compiiile/src/components/layout/TopBar.vue

@@ -4,7 +4,7 @@
 			<div class="top-bar-content">
 				<hamburger-button />
 				<span class="home-link-wrapper">
-					<a :href="logoUrl">
+					<a :href="logoUrl" aria-label="Home link">
 						<img
 							v-if="isLogoDefined"
 							:src="`${base}favicon.png`"

package/.compiiile/src/utils/styles.js

@@ -2,8 +2,8 @@ import "../style/index.scss"
 /* Importing global fonts */
 import "@fontsource-variable/archivo/wdth.css"
 import "@fontsource-variable/archivo/wdth-italic.css"
-import "@fontsource-variable/dm-sans"
+import "@fontsource-variable/dm-sans/index.css"
 import "@fontsource-variable/dm-sans/wght-italic.css"
-import "@fontsource-variable/jetbrains-mono"
+import "@fontsource-variable/jetbrains-mono/index.css"
 import "@fontsource-variable/jetbrains-mono/wght-italic.css"
 /* -------------------- */

package/{markdown-preview.md → 1-markdown-preview.md}

@@ -1,6 +1,6 @@
 ---
-title: Markdown preview
-description: Here is how you can write some markdown and see how it will look on the page
+title: "Markdown preview"
+description: Here is how you can write some Markdown and see how it will look on the page thanks to Compiiile.
 ---
 
 # Markdown preview

package/{slides-preview.mdx → 2-slides-preview.mdx}

@@ -1,4 +1,6 @@
 ---
+title: "Slides preview"
+description: "Compiiile allows you to create beautiful slides written in Markdown without any configuration."
 asSlides: true
 ---
 
@@ -37,3 +39,5 @@ I forgot to showcase once again the poorly-designed logo of Compiiile:
 ---
 
 And that's it ! Happy markdowning :upside_down_face:
+
+[:arrow_right: Check what compiiile-pro has to offer](./3-pro-installation.md)

package/3-pro-installation.md

@@ -0,0 +1,108 @@
+---
+title: "[PRO] Installation"
+description: "Compiiile with some spice ! With the pro version, enhance your Markdown files, add diagrams, mindmaps, admonitions, and ready-made components and get your knowledge-base or course ready to be served in one simple command."
+---
+
+# Compiiile-pro
+
+Compiiile with some spice :cherries:! With the ***pro*** version, enhance your Markdown files, add diagrams, mindmaps, admonitions, and ready-made components and get your knowledge-base or course ready to be served in one simple command :sparkles:.
+
+## Installation
+
+You can install `compiiile-pro` either globally or per-project:
+
+### Globally
+
+Open a terminal and type one of these commands, whether using [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) depending on which package manager you are using:
+
+```bash
+yarn global add @compiiile/compiiile-pro # install globally with yarn
+# or
+npm install -g @compiiile/compiiile-pro # install globally with npm
+```
+
+### Per-project
+
+Open a terminal inside the folder containing your markdown files. Then, add `compiiile-pro` as a local command using yarn or npm:
+
+```bash
+yarn add @compiiile/compiiile-pro # install as a project dependency with yarn
+# or
+npm install @compiiile/compiiile-pro # install as a project dependency with npm
+```
+
+## Usage
+
+Once installed, 3 commands are available that act the same as the usual `compiiile` command:
+-   `compiiile-pro dev`
+-   `compiiile-pro build`
+-   `compiiile-pro preview`
+
+## License
+
+Compiiile-pro is free to try in development, but **you need a license to use it in production**. This is a personal **lifetime** license: buy once without any subscription, and enjoy it as long as you want! It also allows you to use compiiile for commercial projects.
+
+<a style="background-color:var(--highlight-color);color:#f7fafc;display:block;text-align:center;border-radius:4px;text-decoration:none;padding:10px;" href="https://compiiile.lemonsqueezy.com/buy/1900be98-a8c2-4aa5-a06e-e0f5f26843b4" target="_blank">Purchase a license for compiiile-pro</a>
+
+Once purchased, you will receive an email with your personal license key.
+
+To use your license for the `build` command, you can use the next following ways (**from higher priority to lower priority**):
+
+### Set it with environment variables
+
+You have 2 environment variables that you can pass to the build command to use your licence: `COMPIIILE_PRO_LICENSE="<YOUR-LICENCE>"` and `COMPIIILE_PRO_EMAIL="<YOUR-EMAIL-USED-FOR-PURCHASE>"`.
+
+Here is the complete command as example:
+
+```bash
+COMPIIILE_PRO_LICENSE="XXXX-XXXX-XXXX-XXXX" COMPIIILE_PRO_EMAIL="john.doe@mail.com" compiiile-pro build
+```
+
+### Set it as build arguments
+
+Similarly, you have 2 parameters that you can pass to the build command to use your licence: `--pro.license="<YOUR-LICENCE>"` and `--pro.email="<YOUR-EMAIL-USED-FOR-PURCHASE>"`.
+
+Here is the complete command as example: 
+
+```bash
+compiiile-pro build --pro.license="XXXX-XXXX-XXXX-XXXX" --pro.email="john.doe@mail.com"
+```
+
+### Set it globally 
+
+To use the same license on multiple projects, you can create a `.compiiilerc` file at the root of your user folder (`~/.compiiilerc`).
+
+Here is the content that you will have to specify:
+
+You can use this one-line command to create this file (make sure to replace the values with the corresponding ones):
+
+```bash
+echo 'pro.license=<your-license-key>\npro.email=<your-email>' > ~/.compiiilerc
+```
+
+Your file should contain these 2 parameters:
+
+```
+pro.license=<your-license-key>
+pro.email=<your-email>
+```
+
+## Affiliate
+
+
+You can become an affiliate and earn 20% on each sale by referring new customers (or should we say... *compiiilers ?*):
+
+<a style="background-color:var(--highlight-color);color:#f7fafc;display:block;text-align:center;border-radius:4px;text-decoration:none;padding:10px;" href="https://compiiile.lemonsqueezy.com/affiliates" target="_blank">Become an affiliate</a>
+
+## Added features
+
+Here is a list of features that the pro version adds:
+- add a button to copy code blocks and be able to specify the code block file name
+- add admonitions (or alerts) with different semantic colors
+- use any [Phosphor Icon](https://phosphoricons.com/) in your Markdown files or Vue components
+- add [MermaidJs](https://mermaid.js.org/#/) integration to write diagrams in Markdown, without compromising on style
+- add [Markmap](https://markmap.js.org/) integration to write mindmaps in Markdown from bullet-points lists
+- add [d2](https://d2lang.com/) integration to write diagrams
+- use ready-to-use components (for slides layouts, etc) in `mdx` files
+
+See an overview of these features in the next page.

package/4-pro-features.mdx

@@ -0,0 +1,532 @@
+---
+title: "[PRO] Features"
+description: "Use icons, admonitions, mermaid diagrams, markmap mindmaps in Markdow thanks to compiiile-pro."
+---
+
+# compiiile-pro added features <Icon name="star" />
+
+## 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.
+
+<details>
+    <summary>Display the source:</summary>
+
+    ```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.
+    ```
+</details>
+
+## Diagrams
+
+```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 ]
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````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 ]
+        ```
+    ````
+</details>
+---
+
+```markmap
+---
+markmap:
+    width: 700px
+---
+
+- compiiile-pro
+  - diagrams
+  - mindmaps
+  - components
+    - icons
+    - layout
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````md
+    ```markmap
+    ---
+    markmap:
+    width: 700px
+    ---
+
+    - compiiile-pro
+        - diagrams
+        - mindmaps
+        - components
+            - icons
+            - layout
+    ```
+    ````
+</details>
+
+---
+
+```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"
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````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"
+    ```
+    ````
+</details>
+
+---
+
+```mermaid
+sequenceDiagram
+    Client->>Server: GET /products
+    Server-->>Client: Return product list
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````md
+    ```mermaid
+    sequenceDiagram
+    Client->>Server: GET /products
+    Server-->>Client: Return product list
+    ```
+    ````
+</details>
+
+---
+
+```mermaid
+classDiagram
+    class BankAccount
+    BankAccount : +String owner
+    BankAccount : +Bigdecimal balance
+    BankAccount : +deposit(amount)
+    BankAccount : +withdrawal(amount)
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````md
+    ```mermaid
+    classDiagram
+    class BankAccount
+    BankAccount : +String owner
+    BankAccount : +Bigdecimal balance
+    BankAccount : +deposit(amount)
+    BankAccount : +withdrawal(amount)
+    ```
+    ````
+</details>
+
+---
+
+```mermaid
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````md
+    ```mermaid
+    stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+    ```
+    ````
+</details>
+
+---
+
+```mermaid
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````md
+    ```mermaid
+    erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+    ```
+    ````
+</details>
+
+---
+
+```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
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````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
+    ```
+    ````
+</details>
+
+---
+
+```mermaid
+pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````md
+   ```mermaid
+    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]
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````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]
+    ```
+    ````
+</details>
+
+---
+
+```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]
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````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]
+    ```
+    ````
+</details>
+
+---
+
+```mermaid
+timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook
+         : Google
+    2005 : Youtube
+    2006 : Twitter
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````md
+    ```mermaid
+    timeline
+        title History of Social Media Platform
+        2002 : LinkedIn
+        2004 : Facebook
+             : Google
+        2005 : Youtube
+        2006 : Twitter
+    ```
+    ````
+</details>
+
+---
+
+```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"
+}
+```
+
+<details>
+    <summary>Source</summary>
+
+    ````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"
+    }
+    ```
+    ````
+</details>
+
+## 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:
+
+```bash 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 <Icon name="github-logo" />
+
+```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.
+

package/5-pro-slides.mdx

@@ -0,0 +1,94 @@
+---
+asSlides: true
+title: "[PRO] Slides"
+description: "Use icons, admonitions, mermaid diagrams, markmap mindmaps in Markdow thanks to compiiile-pro."
+---
+
+## compiiile-pro<br/>with slides :sparkles:
+
+---
+
+<CGrid template="1 1" align="center">
+    <div>
+        ## Admonitions<br/>& grids
+    </div>
+
+    <div>
+        > [!TIP] Admonitions
+        > As it works with regular content, it works on slides too! <Icon name="confetti" />
+    </div>
+
+</CGrid>
+
+---
+
+<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>
+
+---
+
+<CGrid template="2 1" align="center">
+    ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZG9iY3JiN2dmNjB5c3AzZHI0MngybHcwcmdrYjdoemVxOTFsbTdhcCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SbIz7MC7rFyQqh8akb/giphy-downsized-large.gif)
+
+    <div>
+        # Title
+
+        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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. From [xodnnhm](https://giphy.com/xodnnhm).
+    </div>
+</CGrid>
+
+---
+
+## Mindmaps
+
+```markmap
+- compiiile-pro
+  - diagrams
+  - mindmaps
+  - components
+    - icons
+    - layout
+```
+
+---
+
+```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"
+```
+
+---
+
+Code blocks can be copied too:
+
+```bash filename="script.sh"
+yarn dev
+```
+
+```bash
+yarn add @compiiile/compiiile-pro
+```
+
+---
+
+## Enjoy :heart:
+
+[:arrow_right: Check the Changelog](./CHANGELOG.md)

package/README.md

@@ -100,9 +100,9 @@ Et voilà, you should be able to preview your files in your browser :tada:.
 
 Once installed, 3 commands are available to see your beautiful markdown files :eyes::
 
--   `compiiile dev` : creates a web server to check your markdown files (alias to only `compiiile`)
--   `compiiile build` : builds all the files for you to serve them production-ready
--   `compiiile preview` : preview your production-ready build
+-   `compiiile dev`: creates a web server to check your markdown files (alias to only `compiiile`)
+-   `compiiile build`: builds all the files for you to serve them production-ready
+-   `compiiile preview`: preview your production-ready build
 
 You can run the command you want in your terminal while being in the desired folder.
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@compiiile/compiiile",
 	"private": false,
-	"version": "2.8.0",
+	"version": "2.8.2",
 	"description": "The most convenient way to render a folder containing markdown files. Previewing and searching markdown files has never been that easy.",
 	"author": "AlbanCrepel <alban.crepel@gmail.com>",
 	"license": "GPL-3.0-only",
@@ -11,10 +11,11 @@
 	},
 	"scripts": {
 		"dev": "node ./bin/cli.js dev",
-		"build": "node ./bin/cli.js build && node ./build.js",
+		"build": "compiiile-pro build && node ./build.js",
 		"preview": "node ./bin/cli.js preview",
 		"lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore --fix .compiiile bin",
-		"format": "prettier . --write"
+		"format": "prettier . --write",
+		"dev-pro": "compiiile-pro dev"
 	},
 	"repository": {
 		"type": "git",
@@ -26,6 +27,7 @@
 		"@astrojs/vue": "^4.0.8",
 		"@babel/core": "^7.0.0-0",
 		"@babel/eslint-parser": "^7.22.15",
+		"@compiiile/compiiile-pro": "^1.0.3",
 		"@fontsource-variable/archivo": "^5.0.16",
 		"@fontsource-variable/dm-sans": "^5.0.3",
 		"@fontsource-variable/jetbrains-mono": "^5.0.18",