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 index 0ad2082f2..3f2622709 100644 --- 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. \ No newline at end of file +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 + +--- + + +

My apis

+ {{#daikoku-apis}} +
+

Api : {{api.name}}

+

{{api.smallDescription}}

+
+ {{/daikoku-apis}} + +``` + +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). + +
+ schema d'architecture +
+ +# 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) \ No newline at end of file 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 new file mode 100644 index 000000000..ccdd7141a --- /dev/null +++ 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 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 + + // addition + + // addition + + + +

My apis

+ {{#daikoku-apis}} +
+

Api : {{api.name}}

+

{{api.smallDescription}}

+
+ {{/daikoku-apis}} + +``` + +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" + + + // deletion + + // addition + + // addition + + + + + //addition +

My apis

+ // addition +
+ {{#daikoku-apis}} + // deletion +
+ //deletion +

Api : {{api.name}}

+ //deletion +

{{api.smallDescription}}

+ //deletion +
+ // addition +
+ // addition +
+ // addition + Shoes + // addition +
+ // addition +
+ // addition +

+ // addition + {{api.name}} + // addition +
{{api.version}}
+ // addition +

+ // addition +

{{api.description}}

+
+
+ {{/daikoku-apis}} +
+ +``` + +Visit your APIs page in your browser again. + +
+ result +
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 new file mode 100644 index 000000000..10992330c --- /dev/null +++ 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" + + + + + + + + My CMS + + + + + + + // deletion +
+ // deletion +

Welcome to your CMS

+ // deletion +
+ // addition + {{children}} + + +``` + +# 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"}} +

My apis

+
+ {{#daikoku-apis}} +
+
+ Shoes +
+
+

+ {{api.name}} +
{{api.version}}
+

+

{{api.description}}

+
+
+ {{/daikoku-apis}} +
+{{/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 new file mode 100644 index 000000000..0e4b2276c --- /dev/null +++ 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"}} +

My apis

+
+ {{#daikoku-apis}} +
+
+ Shoes +
+
+

+ {{api.name}} +
{{api.version}}
+

+

{{api.description}}

+
+
+ {{/daikoku-apis}} +
+{{/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 +My CMS +//addition +{{pageTitle}} +``` + +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. \ No newline at end of file diff --git a/manual/static/img/api.png b/manual/static/img/api.png new file mode 100644 index 000000000..ae9e913fb Binary files /dev/null and b/manual/static/img/api.png differ diff --git a/manual/static/img/apis-styling.png b/manual/static/img/apis-styling.png new file mode 100644 index 000000000..13a0a9b35 Binary files /dev/null and b/manual/static/img/apis-styling.png differ