cli documentaiton

MAIF · Nov 25, 2024 · 31e6255 · 31e6255
1 parent a0743b5
commit 31e6255
Show file tree

Hide file tree

Showing 6 changed files with 271 additions and 1 deletion.
diff --git a/manual/docs/04-cli/042-apis-to-business-website/05-add-dynamic-content.mdx b/manual/docs/04-cli/042-apis-to-business-website/05-add-dynamic-content.mdx
@@ -1,3 +1,5 @@
+import APIImage from '@site/static/img/api.png';
+
 # 5 - Add dynamic content
 
 # Use your first directive
@@ -10,4 +12,41 @@ Look for this page in your browser preview by adding `/apis` to the end of your
 
 Change the browser preview URL to view /apis/test instead. (This is a page you have not yet created.)
 
-Note the different output when previewing an `empty` page, and one that doesn’t exist. This will help you troubleshoot in the future.
+Note the different output when previewing an `empty` page, and one that doesn’t exist. This will help you troubleshoot in the future.
+
+We’re going to use a simple directive for displaying the details of the apis present in our Daikoku. 
+
+Mustache is a logicless template engine for creating dynamic content like HTML, configuration files among other things.
+
+Add the following code to your HTML template:
+
+```html title="src/pages/apis/page.html"
+_exact: true
+
+---
+
+<body>
+    <h1>My apis</h1>
+    {{#daikoku-apis}}
+    <div class="api">
+        <p>Api : {{api.name}}</p>
+        <p>{{api.smallDescription}}</p>
+    </div>
+    {{/daikoku-apis}}
+</body>
+```
+
+You can find the model for each entity (api, documentation, team, user, etc) on the [Daikoku OpenAPI documentation](https://maif.github.io/daikoku/openapi#tag/api/operation/apis.patch).
+
+<div style={{textAlign: 'center', width: 500, border: '1px solid #eee', borderRadius: '.25rem' }}>
+  <img
+    src={APIImage}
+    alt="schema d'architecture"
+  />
+</div>
+
+# Explore the Directives
+
+Following the steps above, you can access all Daikoku entities, including teams, APIs, users or documentation pages.
+
+You can find more information about them [here](https://maif.github.io/daikoku/docs/cli)
diff --git a/manual/docs/04-cli/042-apis-to-business-website/06-style-your-apis-page.mdx b/manual/docs/04-cli/042-apis-to-business-website/06-style-your-apis-page.mdx
@@ -0,0 +1,111 @@
+import APIStyling from '@site/static/img/apis-styling.png';
+
+# 6 - Style your APIs page
+
+# Style an individual page
+
+Using HTML’s own <style></style> tags, you can style items on your page. Adding attributes and directives to these tags gives you even more ways to style.
+
+Copy the following code and paste it into src/pages/apis/page.html:
+
+```html title="src/pages/apis/page.html"
+_exact: true
+
+---
+// addition
+<head>
+  // addition
+    <link href="styles/api.css" rel="stylesheet" type="text/css" />
+    // addition
+</head>
+
+<body>
+    <h1>My apis</h1>
+    {{#daikoku-apis}}
+    <div class="api">
+        <p>Api : {{api.name}}</p>
+        <p>{{api.smallDescription}}</p>
+    </div>
+    {{/daikoku-apis}}
+</body>
+```
+
+Add the following code a new file called `src/styles/api.css`:
+
+```css title="src/styles/api.css"
+.api {
+    border-radius: 1rem;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    max-width: 32rem;
+    padding: 1rem;
+}
+```
+
+# Add external CSS component library
+
+:::tip
+Writing a Daikoku template is very much like writing HTML, so you can use all HTML tags and import evertything, including external CSS external librairies.
+:::
+
+```html title="src/pages/apis/page.html"
+
+<head>
+  // deletion
+    <link href="styles/api.css" rel="stylesheet" type="text/css" />
+    // addition
+    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
+    // addition
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body class="m-5">
+    //addition
+    <h1 class="text-5xl font-bold">My apis</h1>
+    // addition
+    <div class="flex gap-5 m-5">
+      {{#daikoku-apis}}
+      // deletion
+      <div class="api">
+        //deletion
+          <p>Api : {{api.name}}</p>
+          //deletion
+          <p>{{api.smallDescription}}</p>
+          //deletion
+      </div>
+      // addition
+      <div class="card bg-base-100 w-96 shadow-xl">
+        // addition
+        <figure>
+          // addition
+          <img
+            src="https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg"
+            alt="Shoes" />
+            // addition
+        </figure>
+        // addition
+        <div class="card-body">
+          // addition
+          <h2 class="card-title">
+            // addition
+            {{api.name}}
+            // addition
+            <div class="badge badge-secondary">{{api.version}}</div>
+            // addition
+          </h2>
+          // addition
+          <p>{{api.description}}</p>
+        </div>
+      </div>
+      {{/daikoku-apis}}
+    </div>
+</body>
+```
+
+Visit your APIs page in your browser again.
+
+<div style={{textAlign: 'center', width: 500, border: '1px solid #eee', borderRadius: '.25rem' }}>
+  <img
+    src={APIStyling}
+    alt="result"
+  />
+</div>
diff --git a/manual/docs/04-cli/042-apis-to-business-website/07-build-your-first-layout.mdx b/manual/docs/04-cli/042-apis-to-business-website/07-build-your-first-layout.mdx
@@ -0,0 +1,66 @@
+# 7 - Build your first layout
+
+You still have some links and components repeatedly rendered on every page. It’s time to refactor again to create a shared page layout!
+
+# Create your first layout component
+
+Create a new file at the location `src/layouts/base.html`. (You will need to create a new layouts folder first.)
+
+Copy the entire contents of `src/pages/page.html` into your new file, `base.html`.
+
+```html title="src/layout/base.html"
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My CMS</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body>
+  // deletion
+    <main>
+  // deletion
+        <h1>Welcome to your CMS</h1>
+  // deletion
+    </main>
+  // addition
+  {{children}}
+</body>
+</html>
+```
+
+# Use your layout on a page
+
+Replace the code at `src/pages/apis/page.html` with the following:
+
+```html title="src/pages/apis/page.html"
+{{#daikoku-template-wrapper "/layouts/base.html"}}
+    <h1 class="text-5xl font-bold">My apis</h1>
+    <div class="flex gap-5 m-5">
+      {{#daikoku-apis}}
+      <div class="card bg-base-100 w-96 shadow-xl">
+        <figure>
+          <img
+            src="https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg"
+            alt="Shoes" />
+        </figure>
+        <div class="card-body">
+          <h2 class="card-title">
+            {{api.name}}
+            <div class="badge badge-secondary">{{api.version}}</div>
+          </h2>
+          <p>{{api.description}}</p>
+        </div>
+      </div>
+      {{/daikoku-apis}}
+    </div>
+{{/daikoku-template-wrapper}}
+```
+
+Check the browser preview again to notice what did (or, spoiler alert: did not!) change.
diff --git a/manual/docs/04-cli/042-apis-to-business-website/08-define-and-use-a-variable.mdx b/manual/docs/04-cli/042-apis-to-business-website/08-define-and-use-a-variable.mdx
@@ -0,0 +1,54 @@
+# 8 - Define and use a variable
+
+Any HTML file is valid Daikoku language. But, you can do more with Daikoku than just regular HTML!
+
+# Create your first layout component
+
+Open `src/apis/page.html`, which should look like this:
+
+```html title="src/apis/page.html"
+{{#daikoku-template-wrapper "/layouts/base.html"}}
+    <h1 class="text-5xl font-bold">My apis</h1>
+    <div class="flex gap-5 m-5">
+      {{#daikoku-apis}}
+      <div class="card bg-base-100 w-96 shadow-xl">
+        <figure>
+          <img
+            src="https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg"
+            alt="Shoes" />
+        </figure>
+        <div class="card-body">
+          <h2 class="card-title">
+            {{api.name}}
+            <div class="badge badge-secondary">{{api.version}}</div>
+          </h2>
+          <p>{{api.description}}</p>
+        </div>
+      </div>
+      {{/daikoku-apis}}
+    </div>
+{{/daikoku-template-wrapper}}
+```
+
+Add the following line at the top of your file, between the *code fences*:
+
+```html title="src/apis/page.html"
+// addition
+pageTitle: "APIs"
+---
+```
+
+Replace both the static `My CMS` title heading in your HTML with the dynamic variable `{pageTitle}`.
+
+```html title="src/layout/base.html"
+//deletion
+<title>My CMS</title>
+//addition
+<title>{{pageTitle}}</title>
+```
+
+Refresh the live preview of your `/apis` page.
+
+Your page text should look the same, and your page title displayed in your browser tab should now read `APIs` instead of `My CMS`
+
+Instead of typing text directly into HTML tags, you just defined and then used a variable in the two sections of your .html file, respectively.
diff --git a/manual/static/img/api.png b/manual/static/img/api.png
diff --git a/manual/static/img/apis-styling.png b/manual/static/img/apis-styling.png