Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit bb4f6a3

Browse files
peterpeterparkerpeterpeterparker
committed
docs: new component math
Signed-off-by: peterpeterparker <[email protected]>
1 parent 66f9016 commit bb4f6a3

File tree

10 files changed

+472
-5
lines changed

10 files changed

+472
-5
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
### Applications
66

77
- demo: v2.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-website/blob/master/CHANGELOG.md))
8-
- docs: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
8+
- docs: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
99
- remote: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
1010
- studio: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
1111

‎docs/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
# 1.2.0 (2020-05-14)
2+
3+
### Features
4+
5+
- new component `math`
6+
17
# 1.1.0 (2020-05-07)
28

39
### Features

‎docs/docs/components/app-components-demo/app-components-demo.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] lazy
4040

4141
### Install from NPM
4242

43-
Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/qrcode) using the following command:
43+
Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/demo) using the following command:
4444

4545
```bash
4646
npm install @deckdeckgo/demo

‎docs/docs/components/app-components-math/app-components-math.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# Demo
2+
3+
Write and render math expressions.
4+
5+
This component is using [Katex](https://katex.org/) to renders these.
6+
7+
## Table of contents
8+
9+
- [Showcase](#app-components-math-showcase)
10+
- [Installation](#app-components-math-installation)
11+
- [Using from a CDN](#app-components-math-from-a-cdn)
12+
- [Install from NPM](#app-components-math-from-npm)
13+
- [Framework integration](#app-components-math-framework-integration)
14+
- [Usage](#app-components-math-usage)
15+
- [Slots](#app-components-math-slots)
16+
- [Attributes](#app-components-math-attributes)
17+
- [Events](#app-components-math-events)
18+
- [Theming](#app-components-math-theming)
19+
20+
## Showcase
21+
22+
<div style={{position: 'relative'}}>
23+
<deckgo-math>
24+
<code slot="math">{`% \\f is defined as f(#1) using the macro
25+
\\f{x} = \\int_{-\\infty}^\\infty
26+
\\hat \\f\\xi\\,e^{2 \\pi i \\xi x}
27+
\\,d\\xi`}</code>
28+
</deckgo-math>
29+
</div>
30+
31+
## Installation
32+
33+
This component could be added to your web application using the following methods.
34+
35+
### Using from a CDN
36+
37+
It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] lazy image component from a CDN. To do so, add the following include script in the main HTML file of your project:
38+
39+
```
40+
<script type="module" src="https://unpkg.com/@deckdeckgo/math@latest/dist/deckdeckgo-math/deckdeckgo-math.esm.js"></script>
41+
<script nomodule="" src="https://unpkg.com/@deckdeckgo/math@latest/dist/deckdeckgo-math/deckdeckgo-math.js"></script>
42+
```
43+
44+
### Install from NPM
45+
46+
Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/math) using the following command:
47+
48+
```bash
49+
npm install @deckdeckgo/math
50+
```
51+
52+
### Framework integration
53+
54+
The [Stencil documentation](https://stenciljs.com/docs/overview) provide examples of framework integration for [Angular](https://stenciljs.com/docs/angular), [React](https://stenciljs.com/docs/react), [Vue](https://stenciljs.com/docs/vue) and [Ember](https://stenciljs.com/docs/ember).
55+
56+
That being said, commonly, you might either `import` or `load` it:
57+
58+
#### Import
59+
60+
```
61+
import '@deckdeckgo/math';
62+
```
63+
64+
#### Loader
65+
66+
```
67+
import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/math/dist/loader';
68+
deckDeckGoElement();
69+
```
70+
71+
## Usage
72+
73+
The "Math" Web Component could be integrated using the tag `<deckgo-math/>`.
74+
75+
```
76+
<deckgo-math>
77+
<code slot="math">% \f is defined as f(#1) using the macro
78+
\f{x} = \int_{-\infty}^\infty
79+
\hat \f\xi\,e^{2 \pi i \xi x}
80+
\,d\xi</code>
81+
</deckgo-math>
82+
```
83+
84+
It either supports a single expression, as displayed above, or expressions within paragraphs.
85+
86+
```
87+
<deckgo-math editable="true">
88+
<code slot="math">
89+
You can write math expression inside paragraph like this: $x + 1$
90+
91+
Inline formulas can be written with \$ e.g: $c = \pm\sqrt{a^2 + b^2}$
92+
93+
and displayed equations can be written using \$$ e.g: $$\sum_{i=1}^n 2^i$$
94+
</code>
95+
</deckgo-math>
96+
```
97+
98+
### Slots
99+
100+
The expressions have to be provided using the slot `math`.
101+
102+
### Attributes
103+
104+
This component offers the following options which could be set using attributes:
105+
106+
| Attribute | Type | Default | Description |
107+
| --------- | ------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
108+
| macros | string | &#123;"\\\\f":"f(#1)"&#123; | A collection of custom macros. Each macro is a property with a name like \name (written "\\name" in JavaScript) which maps to a string that describes the expansion of the macro, or a function that accepts an instance of MacroExpander as first argument and returns the expansion as a string. |
109+
| editable | boolean | `false` | To set the component has being editable (`contenteditable` will be applied on the `slot` on `click`) |
110+
111+
See the [Katex](https://katex.org/docs/options.html) documentation for more information.
112+
113+
### Events
114+
115+
The `<deckgo-math/>` component triggers the following event.
116+
117+
| Event | Description | Type |
118+
| --------------- | ------------------------------------ | -------------------------- |
119+
| `mathDidChange` | Emit the host element when modified. | `CustomEvent<HTMLElement>` |
120+
121+
### Theming
122+
123+
The following theming options will affect this component if set on its host or parent.
124+
125+
| CSS4 variable | Default | Note |
126+
| --------------------------------------- | ----------------------------------- | ------------------------------------------------ |
127+
| --deckgo-math-color | inherit | Color |
128+
| --deckgo-math-background | | Background |
129+
| --deckgo-math-padding | 8px | Padding |
130+
| --deckgo-math-border-radius | | Border radius |
131+
| --deckgo-math-margin | 0px | Margin |
132+
| --deckgo-math-direction | | Direction |
133+
| --deckgo-math-text-align | | Text alignment |
134+
| --deckgo-math-container-display | block | Container display |
135+
| --deckgo-math-container-justify-content | | Container justify-content attribute |
136+
| --deckgo-math-container-flex-direction | | Container flex-direction attribute |
137+
| --deckgo-math-container-align-items | | Container align-items attribute |
138+
| --deckgo-math-scroll | scroll | Scroll property of the expression(s) |
139+
| --deckgo-math-font-size | | Font size property of the expression(s) |
140+
| --deckgo-math-min-height | 23px | Minimal height property of the expression(s) |
141+
| --deckgo-math-display | block | Display property of the expression(s) |
142+
| --deckgo-math-code-empty-text | "Click to add your math expression" | Place holder in case `editable` is set to `true` |
143+
144+
[deckdeckgo]: https://deckdeckgo.com

‎docs/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "deckdeckgo-docs",
3-
"version": "1.1.0",
3+
"version": "1.2.0",
44
"description": "The Progressive Web App alternative for simple presentations",
55
"license": "MIT",
66
"files": [

‎docs/src/app/app-root.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export class AppRoot {
5858
<ion-route url="/components/color" component="app-components-color" />
5959
<ion-route url="/components/drr" component="app-components-drr" />
6060
<ion-route url="/components/demo" component="app-components-demo" />
61+
<ion-route url="/components/math" component="app-components-math" />
6162

6263
<ion-route url="/deck" component="app-deck-transition" />
6364
<ion-route url="/deck/transition" component="app-deck-transition" />
@@ -199,6 +200,9 @@ export class AppRoot {
199200
<ion-item detail={false} href="/components/lazy-img" routerDirection="forward">
200201
<ion-label>Lazy Image</ion-label>
201202
</ion-item>
203+
<ion-item detail={false} href="/components/math" routerDirection="forward">
204+
<ion-label>Math</ion-label>
205+
</ion-item>
202206
<ion-item detail={false} href="/components/qrcode" routerDirection="forward">
203207
<ion-label>QR Code</ion-label>
204208
</ion-item>

‎docs/src/app/pages/docs/components/app-components-demo/app-components-demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export class AppComponentsDemo {
8787
</deckgo-highlight-code>
8888
<h3 id="app-components-demo-install-from-npm">Install from NPM</h3>
8989
<p>
90-
Install it in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/qrcode">npm</a> using the following command:
90+
Install it in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/demo">npm</a> using the following command:
9191
</p>
9292
<deckgo-highlight-code language="bash">
9393
<code slot="code">npm install @deckdeckgo&#47;demo</code>

0 commit comments

Comments
 (0)