Skip to content

Commit

Permalink
Merge pull request #224 from Peefy/add-docs-card-links
Browse files Browse the repository at this point in the history
feat: add document cards for the system modules
  • Loading branch information
Peefy authored Nov 28, 2023
2 parents e3020d8 + 110c7a3 commit e1a08a0
Show file tree
Hide file tree
Showing 12 changed files with 529 additions and 18 deletions.
3 changes: 0 additions & 3 deletions docs/reference/model/index.md

This file was deleted.

41 changes: 40 additions & 1 deletion docs/reference/model/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
sidebar_position: 0
---

import DocsCard from '@site/src/components/global/DocsCard';
import DocsCards from '@site/src/components/global/DocsCards';

# Overview

KCL provides engineering extensibility through built-in modules, system modules and plug-in modules.
Expand All @@ -12,4 +15,40 @@ The user code does not need to import functions that directly use builtin functi

For relatively complex general logic, it is provided through the system modules. For example, by importing the `math` module, we can use related mathematical functions, and we can use the regular expression by importing the `regex` module. For KCL code, it can also be organized into different user modules.

In addition, Python and Go can be used to develop plug-ins for KCL through the plugin mechanism. For example, there are the app-context plug-in can be used to obtain the context information of the current application to simplify code writing.
## Standard Library Modules

<DocsCards>
<DocsCard header="builtin functions" href="builtin">
<p>Provides a list of built-in functions that are automatically loaded that can be used directly.</p>
</DocsCard>
<DocsCard header="base64" href="base64">
<p>Provides Base64 (RFC 3548) data encoding functions.</p>
</DocsCard>
<DocsCard header="crypto" href="crypto">
<p>Provides implementations of common encryption algorithms and protocols.</p>
</DocsCard>
<DocsCard header="datetime" href="datetime">
<p>Concrete date/time and related types and functions.</p>
</DocsCard>
<DocsCard header="json" href="json">
<p>Provides JSON related encoding/decoding functions.</p>
</DocsCard>
<DocsCard header="manifests" href="manifests">
<p>Provides the ability for structure serialization output.</p>
</DocsCard>
<DocsCard header="math" href="math">
<p>Provides commonly used mathematical calculation functions.</p>
</DocsCard>
<DocsCard header="net" href="net">
<p>A lightweight IPv4/IPv6 manipulation library.</p>
</DocsCard>
<DocsCard header="regex" href="regex">
<p>Provides commonly used regular expression functions.</p>
</DocsCard>
<DocsCard header="units" href="units">
<p>Provides some conversion functions between numbers and international standard units.</p>
</DocsCard>
<DocsCard header="yaml" href="yaml">
<p>Provides YAML related encoding/decoding functions.</p>
</DocsCard>
</DocsCards>

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,53 @@
sidebar_position: 0
---

import DocsCard from '@site/src/components/global/DocsCard';
import DocsCards from '@site/src/components/global/DocsCards';

# 概览

KCL 是面向配置的编程语言,通过内置模块、KCL 模块和插件模块提供工程化的扩展能力
KCL 通过内置模块、系统库模块和插件模块提供工程化的扩展能力

![](/img/docs/reference/lang/model/kcl-module.png)

用户代码中不用导入直接使用 builtin 的函数(比如用 `len` 计算列表的长度、通过 `typeof` 获取值的类型等),而对于字符串等基础类型也提供了一些内置方法(比如转化字符串的大小写等方法)。对于相对复杂的通用工作则通过标准库提供,比如通过 import 导入 `math` 库就可以使用相关的数学函数,可以通过导入 `regex` 库使用正则表达式库。而针对 KCL 代码也可以组织为模块,比如 Konfig 大库中将基础设施和各种标准的应用抽象为模块供上层用户使用。此外还可以通过 Plugin 机制,采用 Python 为 KCL 开发插件,比如目前有 meta 插件可以通过网络查询中心配置信息,`app-context` 插件则可以用于获取当前应用的上下文信息从而简化代码的编写。
用户代码中不用导入直接使用 builtin 的函数(比如用 `len` 计算列表的长度、通过 `typeof` 获取值的类型等),而对于字符串等基础类型也提供了一些内置方法(比如转化字符串的大小写等方法)。

对于相对复杂的通用工作则通过标准库提供,比如通过 import 导入 `math` 库就可以使用相关的数学函数,可以通过导入 `regex` 库使用正则表达式库。

## 系统库模块

<DocsCards>
<DocsCard header="内置函数" href="builtin">
<p>提供了一系列可以直接使用的内置函数</p>
</DocsCard>
<DocsCard header="base64" href="base64">
<p>提供了 Base64(RFC 3548)数据编码函数。</p>
</DocsCard>
<DocsCard header="crypto" href="crypto">
<p>提供了常见加密算法和协议的实现。</p>
</DocsCard>
<DocsCard header="datetime" href="datetime">
<p>具体的日期/时间和相关类型和函数。</p>
</DocsCard>
<DocsCard header="json" href="json">
<p>提供了与 JSON 相关的编码/解码函数。</p>
</DocsCard>
<DocsCard header="manifests" href="manifests">
<p>提供了结构序列化输出 KCL 数据的能力。</p>
</DocsCard>
<DocsCard header="math" href="math">
<p>提供了常用的数学计算函数。</p>
</DocsCard>
<DocsCard header="net" href="net">
<p>一个轻量级的 IPv4/IPv6 操作库。</p>
</DocsCard>
<DocsCard header="regex" href="regex">
<p>提供了常用的正则表达式函数。</p>
</DocsCard>
<DocsCard header="units" href="units">
<p>提供了一些数字和国际标准单位之间的转换函数。</p>
</DocsCard>
<DocsCard header="yaml" href="yaml">
<p>提供了与 YAML 相关的编码/解码函数。</p>
</DocsCard>
</DocsCards>

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,53 @@
sidebar_position: 0
---

import DocsCard from '@site/src/components/global/DocsCard';
import DocsCards from '@site/src/components/global/DocsCards';

# 概览

KCL 是面向配置的编程语言,通过内置模块、KCL 模块和插件模块提供工程化的扩展能力
KCL 通过内置模块、系统库模块和插件模块提供工程化的扩展能力

![](/img/docs/reference/lang/model/kcl-module.png)

用户代码中不用导入直接使用 builtin 的函数(比如用 `len` 计算列表的长度、通过 `typeof` 获取值的类型等),而对于字符串等基础类型也提供了一些内置方法(比如转化字符串的大小写等方法)。对于相对复杂的通用工作则通过标准库提供,比如通过 import 导入 `math` 库就可以使用相关的数学函数,可以通过导入 `regex` 库使用正则表达式库。而针对 KCL 代码也可以组织为模块,比如 Konfig 大库中将基础设施和各种标准的应用抽象为模块供上层用户使用。此外还可以通过 Plugin 机制,采用 Python 为 KCL 开发插件,比如目前有 meta 插件可以通过网络查询中心配置信息,`app-context` 插件则可以用于获取当前应用的上下文信息从而简化代码的编写。
用户代码中不用导入直接使用 builtin 的函数(比如用 `len` 计算列表的长度、通过 `typeof` 获取值的类型等),而对于字符串等基础类型也提供了一些内置方法(比如转化字符串的大小写等方法)。

对于相对复杂的通用工作则通过标准库提供,比如通过 import 导入 `math` 库就可以使用相关的数学函数,可以通过导入 `regex` 库使用正则表达式库。

## 系统库模块

<DocsCards>
<DocsCard header="内置函数" href="builtin">
<p>提供了一系列可以直接使用的内置函数</p>
</DocsCard>
<DocsCard header="base64" href="base64">
<p>提供了 Base64(RFC 3548)数据编码函数。</p>
</DocsCard>
<DocsCard header="crypto" href="crypto">
<p>提供了常见加密算法和协议的实现。</p>
</DocsCard>
<DocsCard header="datetime" href="datetime">
<p>具体的日期/时间和相关类型和函数。</p>
</DocsCard>
<DocsCard header="json" href="json">
<p>提供了与 JSON 相关的编码/解码函数。</p>
</DocsCard>
<DocsCard header="manifests" href="manifests">
<p>提供了结构序列化输出 KCL 数据的能力。</p>
</DocsCard>
<DocsCard header="math" href="math">
<p>提供了常用的数学计算函数。</p>
</DocsCard>
<DocsCard header="net" href="net">
<p>一个轻量级的 IPv4/IPv6 操作库。</p>
</DocsCard>
<DocsCard header="regex" href="regex">
<p>提供了常用的正则表达式函数。</p>
</DocsCard>
<DocsCard header="units" href="units">
<p>提供了一些数字和国际标准单位之间的转换函数。</p>
</DocsCard>
<DocsCard header="yaml" href="yaml">
<p>提供了与 YAML 相关的编码/解码函数。</p>
</DocsCard>
</DocsCards>
77 changes: 77 additions & 0 deletions src/components/global/DocsCard/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';

import styles from './styles.module.css';

function DocsCard(props) {
const isStatic = typeof props.href === 'undefined';
const isOutbound = typeof props.href !== 'undefined' ? /^http/.test(props.href) : false;
const header = props.header === 'undefined' ? null : <header className={styles['Card-header']}>{props.header}</header>;
const hoverIcon = props.hoverIcon || props.icon;

const content = (
<>
{props.img && <img src={useBaseUrl(props.img)} className="Card-image" />}
<div className={styles['Card-container']}>
{(props.icon || hoverIcon) && (
<div className={styles['Card-icon-row']}>
{props.icon && <img src={useBaseUrl(props.icon)} className={styles['Card-icon'] +' ' + styles['Card-icon-default']} />}
{hoverIcon && <img src={useBaseUrl(hoverIcon)} className={styles['Card-icon'] + ' ' + styles['Card-icon-hover']} />}
</div>
)}
{props.ionicon && <ion-icon name={props.ionicon} className={styles['Card-ionicon']}></ion-icon>}
{props.iconset && (
<div className={styles['Card-iconset__container']}>
{props.iconset.split(',').map((icon, index) => (
<img
src={useBaseUrl(icon)}
className={`${styles['Card-icon']} ${index === props.activeIndex ? styles['Card-icon-active'] : ''}`}
data-index={index}
key={index}
/>
))}
</div>
)}
{props.header && header}
<div className={styles['Card-content']}>{props.children}</div>
</div>
</>
);

const className = clsx({
'Card-with-image': typeof props.img !== 'undefined',
'Card-without-image': typeof props.img === 'undefined',
'Card-size-lg': props.size === 'lg',
[props.className]: props.className,
});

if (isStatic) {
return (
<docs-card class={styles[className]}>
<div className={clsx(styles.card, styles['docs-card'])}>{content}</div>
</docs-card>
);
}

if (isOutbound) {
return (
<docs-card class={styles[className]}>
<a className={clsx(styles.card, styles['docs-card'])} href={props.href} target="_blank">
{content}
</a>
</docs-card>
);
}

return (
<docs-card class={styles[className]}>
<Link to={props.href} className={clsx(styles.card, styles['docs-card'])}>
{content}
</Link>
</docs-card>
);
}

export default DocsCard;
Loading

0 comments on commit e1a08a0

Please sign in to comment.