diff --git a/docs/reference/model/index.md b/docs/reference/model/index.md deleted file mode 100644 index 79b3fa45..00000000 --- a/docs/reference/model/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# System Package - -KCL provides engineering extensibility through system modules, user modules and plug-in modules. This section describes the basic concepts of system modules. Plugin modules refer to [plugin system](/docs/reference/plugin/). diff --git a/docs/reference/model/overview.md b/docs/reference/model/overview.md index 36365ac1..25040ede 100644 --- a/docs/reference/model/overview.md +++ b/docs/reference/model/overview.md @@ -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. @@ -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 + + + +

Provides a list of built-in functions that are automatically loaded that can be used directly.

+ + +

Provides Base64 (RFC 3548) data encoding functions.

+ + +

Provides implementations of common encryption algorithms and protocols.

+ + +

Concrete date/time and related types and functions.

+ + +

Provides JSON related encoding/decoding functions.

+ + +

Provides the ability for structure serialization output.

+ + +

Provides commonly used mathematical calculation functions.

+ + +

A lightweight IPv4/IPv6 manipulation library.

+ + +

Provides commonly used regular expression functions.

+ + +

Provides some conversion functions between numbers and international standard units.

+ + +

Provides YAML related encoding/decoding functions.

+ + diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current/reference/model/index.md b/i18n/zh-CN/docusaurus-plugin-content-docs/current/reference/model/index.md deleted file mode 100644 index 8090774f..00000000 --- a/i18n/zh-CN/docusaurus-plugin-content-docs/current/reference/model/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# 系统模块 - -KCL 通过系统模块、用户模块和插件模块提供工程化的扩展能力。本节介绍系统模块的基本概念，插件模块可以参考[插件系统](/docs/reference/plugin/)。 diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current/reference/model/overview.md b/i18n/zh-CN/docusaurus-plugin-content-docs/current/reference/model/overview.md index aa3eaeb3..989c856c 100644 --- a/i18n/zh-CN/docusaurus-plugin-content-docs/current/reference/model/overview.md +++ b/i18n/zh-CN/docusaurus-plugin-content-docs/current/reference/model/overview.md @@ -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` 库使用正则表达式库。 + +## 系统库模块 + + + +

提供了一系列可以直接使用的内置函数

+ + +

提供了 Base64（RFC 3548）数据编码函数。

+ + +

提供了常见加密算法和协议的实现。

+ + +

具体的日期/时间和相关类型和函数。

+ + +

提供了与 JSON 相关的编码/解码函数。

+ + +

提供了结构序列化输出 KCL 数据的能力。

+ + +

提供了常用的数学计算函数。

+ + +

一个轻量级的 IPv4/IPv6 操作库。

+ + +

提供了常用的正则表达式函数。

+ + +

提供了一些数字和国际标准单位之间的转换函数。

+ + +

提供了与 YAML 相关的编码/解码函数。

+ + diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.7.0/reference/model/index.md b/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.7.0/reference/model/index.md deleted file mode 100644 index 8090774f..00000000 --- a/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.7.0/reference/model/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# 系统模块 - -KCL 通过系统模块、用户模块和插件模块提供工程化的扩展能力。本节介绍系统模块的基本概念，插件模块可以参考[插件系统](/docs/reference/plugin/)。 diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.7.0/reference/model/overview.md b/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.7.0/reference/model/overview.md index aa3eaeb3..989c856c 100644 --- a/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.7.0/reference/model/overview.md +++ b/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.7.0/reference/model/overview.md @@ -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` 库使用正则表达式库。 + +## 系统库模块 + + + +

提供了一系列可以直接使用的内置函数

+ + +

提供了 Base64（RFC 3548）数据编码函数。

+ + +

提供了常见加密算法和协议的实现。

+ + +

具体的日期/时间和相关类型和函数。

+ + +

提供了与 JSON 相关的编码/解码函数。

+ + +

提供了结构序列化输出 KCL 数据的能力。

+ + +

提供了常用的数学计算函数。

+ + +

一个轻量级的 IPv4/IPv6 操作库。

+ + +

提供了常用的正则表达式函数。

+ + +

提供了一些数字和国际标准单位之间的转换函数。

+ + +

提供了与 YAML 相关的编码/解码函数。

+ + diff --git a/src/components/global/DocsCard/index.js b/src/components/global/DocsCard/index.js new file mode 100644 index 00000000..d47827d7 --- /dev/null +++ b/src/components/global/DocsCard/index.js @@ -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 :
{props.header}
; + const hoverIcon = props.hoverIcon || props.icon; + + const content = ( + <> + {props.img && } +
+ {(props.icon || hoverIcon) && ( +
+ {props.icon && } + {hoverIcon && } +
+ )} + {props.ionicon && } + {props.iconset && ( +
+ {props.iconset.split(',').map((icon, index) => ( + + ))} +
+ )} + {props.header && header} +
{props.children}
+
+ + ); + + 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 ( + +
{content}
+ + ); + } + + if (isOutbound) { + return ( + + + {content} + + + ); + } + + return ( + + + {content} + + + ); +} + +export default DocsCard; diff --git a/src/components/global/DocsCard/styles.module.css b/src/components/global/DocsCard/styles.module.css new file mode 100644 index 00000000..4c947653 --- /dev/null +++ b/src/components/global/DocsCard/styles.module.css @@ -0,0 +1,242 @@ +:root { + --docs-card-border-c: #b2becd; + --docs-card-shadow: 0px 1px 2px rgba(2, 8, 20, 0.06), 0px 2px 8px rgba(2, 8, 20, 0.08); +} + +[data-theme='dark'] { + --docs-card-border-c: rgba(255, 255, 255, 0.02); + --docs-card-shadow: 0px 1px 2px rgba(255, 255, 255, 0.05), 0px 2px 8px rgba(255, 255, 255, 0.1), + 0px -1px 2px rgba(255, 255, 255, 0.05), 0px -2px 8px rgba(255, 255, 255, 0.1); +} + +:root { + --docs-card-bg-c: var(--token-secondary-bg-c); +} + +docs-card { + display: block; + font-size: 12px; + max-width: 30em; +} + +docs-card.disabled, +docs-card[disabled] { + position: relative; +} + +docs-card.disabled::after, +docs-card[disabled]::after { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: rgba(232, 232, 232, 0.5); + pointer-events: none; + content: ''; +} + +.card { + color: inherit; + background-color: var(--docs-card-bg-c); + border: 1px solid var(--docs-card-border-c); + border-radius: 12px; + display: flex; + flex-direction: column; + font-size: 0.75rem; + font-weight: normal; + height: 100%; + justify-content: flex-start; + line-height: 1.6; + transition: box-shadow 150ms ease-out, transform 150ms ease-out, opacity 150ms ease-out; + width: 100%; + overflow: hidden; +} + +@media (hover: hover) { + .card[href]:hover { + box-shadow: var(--docs-card-shadow); + text-decoration: none; + + :global(.Card-icon-hover) { + opacity: 1; + } + } +} + +.card:hover, +.card:active, +.card:focus { + color: inherit; +} + +.Card-with-image { + grid-row: span 2; +} + +.Card-without-image { + font-size: 12px; +} + +.Card-container { + padding: 1.5rem; +} + + +.Card-image { + width: 100%; + height: auto; +} + +.Card-icon, +.Card-iconset__container { + width: 48px; + height: 48px; + + margin-bottom: 1.2em; + + border-radius: 50%; + object-fit: contain; +} + +.Card-icon-default { + transition: opacity 150ms ease-out; +} + +.Card-icon-hover { + top: 0; + position: absolute; + + opacity: 0; + + transition: opacity 150ms ease-out; +} + +.Card-icon-row { + position: relative; +} + +.Card-iconset__container { + position: relative; +} + +.Card-iconset__container .Card-icon { + position: absolute; + opacity: 0; + transition: 0.8s opacity; +} + +.Card-iconset__container .Card-icon--active { + opacity: 1; +} + +.Card-ionicon { + width: 48px; + height: 48px; + float: left; + margin-right: 1em; +} + +.Card-content>*:first-child { + margin-top: 0; +} + +.Card-content>*:last-child { + margin-bottom: 0; +} + +.Card-content>* { + margin: 0 0 0.65em; +} + +.Card-content p { + font-size: 0.75rem; +} + +.Card-header { + font-size: 1rem; + line-height: 1.4; + margin-bottom: 0.45em; + font-weight: 600; + color: var(--token-heading-color-dark); +} + +.Card-without-image .Card-header { + margin-bottom: 0.3em; +} + +.Card-header>svg { + fill: currentColor; + height: 1em; + margin-bottom: -0.125em; + width: auto; +} + +.Card-size-lg { + font-size: 14px; +} + +.Card-size-lg .Card-icon, +.Card-size-lg .Card-ionicon, +.Card-size-lg .Card-iconset__container { + width: 80px; + height: 80px; +} + +.Card-size-lg.Card-without-image .Card-header { + font-size: 20px; +} + +aside docs-card { + max-width: 240px; +} + +aside .Card-container { + display: grid; + grid-template-columns: minmax(0, max-content) 1fr; + grid-template-rows: minmax(0, min-content); + grid-template-areas: + 'icon title' + 'icon body'; +} + +aside .Card-icon { + width: 32px; + height: 32px; + margin-right: 16px; + margin-bottom: 0; + grid-area: icon; +} + +aside .Card-header { + grid-area: title; +} + +aside .Card-header::after { + /*background-image: url('/img/new-tab.svg');*/ + display: inline-block; + height: 13px; + width: 13px; + background-size: 13px 13px; + margin-left: 4px; + content: ''; +} + +aside .Card-content { + grid-area: body; + /* https://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line */ + max-height: 42px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +aside .Card-icon+.Card-content { + margin-top: -6px; +} + +.markdown-content p docs-card { + margin-top: 1em; +} diff --git a/src/components/global/DocsCards/cards.css b/src/components/global/DocsCards/cards.css new file mode 100644 index 00000000..c4427860 --- /dev/null +++ b/src/components/global/DocsCards/cards.css @@ -0,0 +1,31 @@ +docs-cards { + display: grid; + font-size: 12px; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-gap: 1.35rem; +} + +docs-cards>docs-card { + font-size: inherit; + max-width: none; +} + +docs-cards>docs-card.tall { + grid-row: span 2; +} + +docs-cards>docs-card.wide { + grid-column: span 2; +} + +docs-cards.prioritized>docs-card:nth-child(-n + 5) { + font-size: 1.25em; +} + +docs-cards.prioritized>docs-card:first-child { + grid-row: span 2; +} + +docs-cards.max-measure>docs-card { + max-width: 50%; +} \ No newline at end of file diff --git a/src/components/global/DocsCards/index.js b/src/components/global/DocsCards/index.js new file mode 100644 index 00000000..630a21b8 --- /dev/null +++ b/src/components/global/DocsCards/index.js @@ -0,0 +1,9 @@ +import React from 'react'; + +import './cards.css'; + +function DocsCards(props) { + return {props.children}; +} + +export default DocsCards; diff --git a/versioned_docs/version-0.7.0/reference/model/index.md b/versioned_docs/version-0.7.0/reference/model/index.md deleted file mode 100644 index 79b3fa45..00000000 --- a/versioned_docs/version-0.7.0/reference/model/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# System Package - -KCL provides engineering extensibility through system modules, user modules and plug-in modules. This section describes the basic concepts of system modules. Plugin modules refer to [plugin system](/docs/reference/plugin/). diff --git a/versioned_docs/version-0.7.0/reference/model/overview.md b/versioned_docs/version-0.7.0/reference/model/overview.md index 36365ac1..25040ede 100644 --- a/versioned_docs/version-0.7.0/reference/model/overview.md +++ b/versioned_docs/version-0.7.0/reference/model/overview.md @@ -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. @@ -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 + + + +

Provides a list of built-in functions that are automatically loaded that can be used directly.

+ + +

Provides Base64 (RFC 3548) data encoding functions.

+ + +

Provides implementations of common encryption algorithms and protocols.

+ + +

Concrete date/time and related types and functions.

+ + +

Provides JSON related encoding/decoding functions.

+ + +

Provides the ability for structure serialization output.

+ + +

Provides commonly used mathematical calculation functions.

+ + +

A lightweight IPv4/IPv6 manipulation library.

+ + +

Provides commonly used regular expression functions.

+ + +

Provides some conversion functions between numbers and international standard units.

+ + +

Provides YAML related encoding/decoding functions.

+ +