Skip to content

Commit 5825b6d

Browse files
committed
Migrate from js to md
1 parent fcea471 commit 5825b6d

27 files changed

+874
-1657
lines changed

editor/index.html

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,24 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<base target="_blank" />
5-
<meta charset="utf-8" />
6-
<link rel="shortcut icon" href="favicon.ico" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<meta name="theme-color" content="#000000" />
93

10-
<!--
11-
manifest.json provides metadata used when your web app is installed on a
12-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
13-
-->
14-
<link rel="manifest" href="manifest.webmanifest" />
15-
<!--
16-
Notice the use of %PUBLIC_URL% in the tags above.
17-
It will be replaced with the URL of the `public` folder during the build.
18-
Only files inside the `public` folder can be referenced from the HTML.
4+
<head>
5+
<base target="_blank"/>
6+
<meta charset="utf-8"/>
7+
<link rel="shortcut icon" href="favicon.ico"/>
8+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
9+
<meta name="theme-color" content="#000000"/>
1910

20-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
21-
work correctly both with client-side routing and a non-root public URL.
22-
Learn how to configure a non-root public URL by running `npm run build`.
23-
-->
24-
<title>Metaframe: template</title>
11+
<!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ -->
12+
<link rel="manifest" href="manifest.webmanifest"/>
13+
<!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. -->
14+
<title>Metaframe: markdown</title>
2515
</head>
16+
2617
<body>
2718
<noscript>You need to enable JavaScript to run this app.</noscript>
2819
<div id="root" class="transparent"></div>
2920
<script type="module" src="/src/index.tsx"></script>
30-
<!--
31-
This HTML file is a template.
32-
If you open it directly in the browser, you will see an empty page.
33-
34-
You can add webfonts, meta tags, or analytics to this file.
35-
The build step will place the bundled scripts into the <body> tag.
36-
37-
To begin the development, run `npm start` or `yarn start`.
38-
To create a production bundle, use `npm run build` or `yarn build`.
39-
-->
21+
<!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. -->
4022
</body>
23+
4124
</html>

editor/package-lock.json

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

editor/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"@metapages/metapage-react": "^0.2.0",
3232
"@phosphor-icons/react": "^2.1.7",
3333
"@react-typed-hooks/use-key-press": "^1.0.5",
34+
"debounce": "^2.2.0",
3435
"formik": "^2.4.5",
3536
"framer-motion": "^10.16.12",
3637
"react": "^18.2.0",
@@ -41,6 +42,7 @@
4142
"zustand": "^5.0.0-rc.2"
4243
},
4344
"devDependencies": {
45+
"@types/debounce": "^1.2.4",
4446
"@types/node": "^18.19.2",
4547
"@types/react": "^18.2.0",
4648
"@types/react-dom": "^18.2.0",

editor/public/CNAME

Lines changed: 0 additions & 1 deletion
This file was deleted.

editor/public/README.md

Lines changed: 79 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,168 +1,135 @@
1-
# Javascript embedded in the URL: run and edit
21

3-
Run code and edit javascript code in the browser. No server required.
2+
# Markdown viewer [metaframe](https://docs.metapage.io/)
43

5-
### Longer description
6-
Run arbitrary user javascript modules embedded in the URL. Designed for [metapages](https://metapage.io) so you can connect inputs + outputs to other metaframe URLs.
74

8-
## Javascript high level
5+
Metaframe (configurable website) for showing markdown.
96

10-
- code is an es6 module
11-
- top-level `await`
12-
- export a function `onInputs` to listen to inputs
13-
- send outputs with `setOutput`/`setOutputs` (predefined functions available in your module)
14-
- export a function `onResize` to listen to window/div resizes
15-
- use es6 module imports, or add any css / npm modules to the page, they are embedded in the URL
167

17-
## Useful code snippets
8+
The URL contains the entire markdown text:
189

19-
### Handling Inputs and outputs in code
2010

21-
Simply export a function (arrow function also good 👍) called `onInputs`:
11+
🔗 [`https://markdownv2.mtfm.io#?md=`](https://markdownv2.mtfm.io/#?md=)`<encoded markdown>`
2212

23-
```javascript
24-
// regular js function
25-
export function onInputs(inputs) {
26-
// do something here
27-
// inputs is a plain object (key and values)
28-
}
29-
// OR arrow function
30-
export const onInputs = (inputs) => {
31-
// do something here
32-
// inputs is a plain object (key and values)
33-
}
34-
```
3513

36-
To send outputs, there are two functions in the scope `setOutput` and `setOutputs`:
14+
This makes the URL
3715

38-
```javascript
39-
// send a single JSON output
40-
setOutput("outputname", 42);
16+
- **editable**
17+
- **sharable**
18+
- **embeddable**
19+
- **standalone**
4120

42-
// send an output object of keys+values
43-
setOutputs({
44-
outputname:true,
45-
someOtherOutputName: "bar",
46-
});
47-
```
4821

49-
Output values can be strings, JSON, objects, arrays, numbers, ArrayBuffers, typed arrays such as `Uint8Array`;
22+
## **How to create / edit**
5023

51-
### Define Inputs and Outputs
5224

53-
In `Settings` you can define inputs and outputs. This doesn't change how the code runs, but it allows much easier connecting upstream and downstream metaframes when editing [metapages](https://metapage.io).
25+
To modify the options, edit them in the webpage, then copy the URL with the copy button. The URL contains all content and options.
5426

55-
In this example, we defined an input: `input.json` and an output `data.csv`:
5627

57-
![inputs](/editor/readme-images/io.png "Inputs and outputs defined in Settings")
28+
**Create/Edit Option 1: Pasting or write markdown in the embedded editor**
5829

59-
You will see these inputs and outputs automatically in the metapage editor.
6030

61-
### The root display div element is exposed in the scope
31+
Manually write or paste in markdown into the embedded editor
6232

63-
The root display div is exposed in the script scope: the name is `root` and the id is also `root`:
6433

65-
```javascript
66-
console.log(root.id)
67-
// logs "root"
68-
// Add any custom dome elements into "root".
69-
```
34+
When finished, copy the URL, or click on the copy button at the top.
7035

71-
You can also just get it with:
72-
```javascript
73-
document.getElementById("root")
74-
```
7536

76-
### Window resize
37+
**Create/Edit Option 3: Automatically generate URLs**
7738

78-
Simply export a function (arrow function also good 👍) called `onResize`. This will be called when either the window resizes event and/or the local `div` element resizes:
7939

80-
```javascript
81-
// regular js function
82-
export function onResize(width, height) {
83-
// Your own code here, handling the resize of the root div
84-
}
85-
// OR arrow function
86-
export const onResize = (width, height) => {
87-
// Your own code here, handling the resize of the root div
88-
}
89-
```
40+
See below for a code example
41+
42+
43+
## Dynamically add content
44+
9045

91-
### Unload/cleanup
46+
### Dynamic content via metapages
9247

93-
When iterating with the code editor, the script is re-run. In some cases, this can cause problems as multiple listeners maybe responding to the same event.
9448

95-
This is not an issue when simply running the page once with code, only when develping iteratively.
49+
Data flow when the metaframe is embedded. This allows dynamic markdown rendering
9650

97-
To have your script cleaned up because of new script (when editing), declare a function `cleanup`, this will be called prior to the updated script re-running:
9851

99-
```javascript
100-
// regular js function
101-
export function cleanup() {
102-
console.log("internal scriptUnload call")
103-
// do your cleanup here
104-
}
105-
// OR arrow function
106-
export const cleanup = () => {
107-
// do your cleanup here
108-
}
52+
```mermaid
53+
graph LR
54+
classDef mtfm fill:#fff,stroke:#32AEE4,stroke-width:2px;
55+
linkStyle default stroke:#32AEE4,stroke-width:2px,color:black
56+
57+
mfup["upstream metaframe"]:::mtfm
58+
subgraph metaframe ["markdownv2.mtfm.io"]
59+
M[Render markdown]:::mtfm
60+
inputs[metaframe inputs]:::mtfm --> M
61+
end
62+
url["encoded in URL hash parameters"]:::mtfm --> |"#?md=[encoded markdown]"| M
63+
mfup --> |"md"| inputs
64+
65+
style metaframe fill:#fff,stroke:#32AEE4,stroke-width:2px;
10966
```
11067

111-
### Wait until page `load`
68+
- input pipes:
69+
- `md`
70+
- Raw markdown text
11271

113-
You don't need to wait for the `load` event: your script will not run until `load` event fires.
72+
Any text coming in those input pipes will be immediately rendered. If there is markdown embedded in the URL, that will be rendered first, but replaced by any markdown from input pipes.
11473

115-
### Logging to the display (instead of console)
74+
- output pipes
75+
- `click`
76+
- From clickable mermaid flowcharts
11677

117-
Some globally available functions for logging:
11878

119-
```javascript
79+
## Embed markdown renderer in another application
12080

121-
log("something here");
122-
logStdout("something here");
123-
logStderr("an error");
12481

125-
```
82+
It requires no installation, and is secure due to cross-origin isolation.
83+
12684

127-
These will be added to the root div (see below) so if your own code manipulates the root div, it could be overwritten. This is mostly useful for headless code.
85+
### E.g. React
12886

129-
### Misc
13087

131-
- `"use strict"` is automatically added to the top of the module code.
88+
The help menu on this website uses this page in a external iframed element. While this uses `@metapages/metapage-react` to make some things more convenient, you can also just embed a `<iframe src="<url>" />` element directly:
13289

133-
## Connect upstream/downstream metaframes
13490

135-
[![](https://mermaid.ink/svg/pako:eNqFkU9LxDAQxb9KiJcVuqC9KBG8uN7sRT1JL2MzaYP5RzJhle1-d9NWd1HBnVMm770fw8yOd14iF7yPEAb28Ng6VqozkNIGFbPhzhsfmdLGiLPrK3mhVJUo-jf81a63WtIg6vB-szBSfl2gFgkC9Lh8T2VQ0eUqh5JEsLNBRbB4ztbr21G7kCmNrFk9Dzqx5qAKIb7m-YmqT6OOgWYS2OgzLVLU_VCGkX7r_jBOpOr_Uuhk63jFLUYLWpYV7yah5TSgxZaL8pSoIBtqeev2xZqDBMJ7qclHLhSYhBWHTP7pw3VcUMz4bdpoKMu1B1cA9-L9sccZ0iy3nU-8_wSxOqSj)](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNqFkU9LxDAQxb9KiJcVuqC9KBG8uN7sRT1JL2MzaYP5RzJhle1-d9NWd1HBnVMm770fw8yOd14iF7yPEAb28Ng6VqozkNIGFbPhzhsfmdLGiLPrK3mhVJUo-jf81a63WtIg6vB-szBSfl2gFgkC9Lh8T2VQ0eUqh5JEsLNBRbB4ztbr21G7kCmNrFk9Dzqx5qAKIb7m-YmqT6OOgWYS2OgzLVLU_VCGkX7r_jBOpOr_Uuhk63jFLUYLWpYV7yah5TSgxZaL8pSoIBtqeev2xZqDBMJ7qclHLhSYhBWHTP7pw3VcUMz4bdpoKMu1B1cA9-L9sccZ0iy3nU-8_wSxOqSj)
91+
```typescript
92+
import { useCallback } from 'react';
13693

94+
import { MetaframeStandaloneComponent } from '@metapages/metapage-react';
95+
96+
export const PanelMarkdownEditor: React.FC<{markdown:string}> = ({markdown) => {
97+
98+
return (
99+
<div>
100+
<MetaframeStandaloneComponent
101+
url="https://markdownv2.mtfm.io/#?button=invisible&md=JTIzJTIwVGhpcyUyMGlzJTIweW91ciUyMG1hcmtkb3duJTBBJTBBVGhlJTIwVVJMJTIwY29udGFpbnMlMjBhbGwlMjB0aGUlMjBjb250ZW50&menuhidden=true&options=JTdCJTIyZGlzcGxheW1vZGUlMjIlM0ElMjJkZWZhdWx0JTIyJTdE"
102+
inputs={{ value: markdown}}
103+
/>
104+
</div>
105+
);
106+
};
107+
```
137108
138-
## Examples
139109
140-
- [Rotate stick on canvas from incoming angles](https://app.metapages.org/#?definition=JTdCJTIybWV0YSUyMiUzQSU3QiUyMmxheW91dHMlMjIlM0ElN0IlMjJyZWFjdC1ncmlkLWxheW91dCUyMiUzQSU3QiUyMmRvY3MlMjIlM0ElMjJodHRwcyUzQSUyRiUyRnd3dy5ucG1qcy5jb20lMkZwYWNrYWdlJTJGcmVhY3QtZ3JpZC1sYXlvdXQlMjIlMkMlMjJsYXlvdXQlMjIlM0ElNUIlN0IlMjJoJTIyJTNBMyUyQyUyMmklMjIlM0ElMjJyYW5kb20tZGF0YSUyMiUyQyUyMm1vdmVkJTIyJTNBZmFsc2UlMkMlMjJzdGF0aWMlMjIlM0FmYWxzZSUyQyUyMnclMjIlM0E1JTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMCU3RCUyQyU3QiUyMmglMjIlM0EzJTJDJTIyaSUyMiUzQSUyMnN0aWNrJTIyJTJDJTIybW92ZWQlMjIlM0FmYWxzZSUyQyUyMnN0YXRpYyUyMiUzQWZhbHNlJTJDJTIydyUyMiUzQTclMkMlMjJ4JTIyJTNBNSUyQyUyMnklMjIlM0EwJTdEJTVEJTJDJTIycHJvcHMlMjIlM0ElN0IlMjJjb2xzJTIyJTNBMTIlMkMlMjJjb250YWluZXJQYWRkaW5nJTIyJTNBJTVCNSUyQzUlNUQlMkMlMjJtYXJnaW4lMjIlM0ElNUIxMCUyQzIwJTVEJTJDJTIycm93SGVpZ2h0JTIyJTNBMTAwJTdEJTdEJTdEJTdEJTJDJTIybWV0YWZyYW1lcyUyMiUzQSU3QiUyMnJhbmRvbS1kYXRhJTIyJTNBJTdCJTIydXJsJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZyYW5kb20ubXRmbS5pbyUyRiUyMyUzRmRpc3RyaWJ1dGlvbiUzRGV5SmthWE4wY21saWRYUnBiMjRpT2lKemFXNGlMQ0ptY21WeGRXVnVZM2tpT2pFd0xDSnZjSFJwYjI1eklqcDdJbWx1WTNKbGJXVnVkQ0k2TUM0eGZTd2ljMmh2ZDA5MWRIQjFkQ0k2Wm1Gc2MyVjklMjIlN0QlMkMlMjJzdGljayUyMiUzQSU3QiUyMmlucHV0cyUyMiUzQSU1QiU3QiUyMm1ldGFmcmFtZSUyMiUzQSUyMnJhbmRvbS1kYXRhJTIyJTJDJTIyc291cmNlJTIyJTNBJTIydiUyMiUyQyUyMnRhcmdldCUyMiUzQSUyMnklMjIlN0QlNUQlMkMlMjJ1cmwlMjIlM0ElMjJodHRwcyUzQSUyRiUyRmpzLm10Zm0uaW8lMkYlMjMlM0ZlZGl0JTNEMSUyNmpzJTNEWTI5dWMzUWxNakJrYVhOd2IzTmxjbk1sTWpBbE0wUWxNakFsTlVJbE5VUWxNMElsTUVGamIyNXpkQ1V5TUhKdmIzUWxNakFsTTBRbE1qQmtiMk4xYldWdWRDNW5aWFJGYkdWdFpXNTBRbmxKWkNnbE1qSnliMjkwSlRJeUtTVXpRaVV3UVNVd1FTVXlSaVV5UmlVeU1ISmxibVJsY2lVeU1IUm9aU1V5TUdGdVoyeGxKVEJCZG1GeUpUSXdZMkZ1ZG1GekpUSXdKVE5FSlRJd1pHOWpkVzFsYm5RdVkzSmxZWFJsUld4bGJXVnVkQ2dsTWpKallXNTJZWE1sTWpJcEpUTkNKVEJCWTJGdWRtRnpMbmRwWkhSb0pUSXdKVE5FSlRJd01qQXdKVE5DSlRCQlkyRnVkbUZ6TG1obGFXZG9kQ1V5TUNVelJDVXlNREl3TUNVelFpVXdRWEp2YjNRdVlYQndaVzVrUTJocGJHUW9ZMkZ1ZG1GektTVXpRaVV3UVNVd1FXTnZibk4wSlRJd1kzUjRKVEl3SlRORUpUSXdZMkZ1ZG1GekxtZGxkRU52Ym5SbGVIUW9KVEl5TW1RbE1qSXBKVE5DSlRCQlkyOXVjM1FsTWpBbE5VSjNKVEpESlRJd2FDVTFSQ1V5TUNVelJDVXlNQ1UxUWpJd0pUSkRKVEl3WTJGdWRtRnpMbWhsYVdkb2RDVTFSQ1V6UWlVd1FXTnZibk4wSlRJd0pUVkNlQ1V5UXlVeU1Ia2xOVVFsTWpBbE0wUWxNakFsTlVKallXNTJZWE11ZDJsa2RHZ2xNakFsTWtZbE1qQXlKVEpESlRJd1kyRnVkbUZ6TG1obGFXZG9kQ1V5TUNVeVJpVXlNRElsTlVRbE0wSWxNRUVsTUVGamIyNXpkQ1V5TUdSeVlYY2xNakFsTTBRbE1qQW9jbUZrS1NVeU1DVXpSQ1V6UlNVeU1DVTNRaVV3UVNVeU1DVXlNR04wZUM1amJHVmhjbEpsWTNRb01DVXlReVV5TURBbE1rTWxNakJqWVc1MllYTXVkMmxrZEdnbE1rTWxNakJqWVc1MllYTXVhR1ZwWjJoMEtTVXpRaVV3UVNVd1FTVXlNQ1V5TUNVeVJpVXlSaVV5TUdacGNuTjBKVEl3YzJGMlpTVXlNSFJvWlNVeU1IVnVkSEpoYm5Oc1lYUmxaQ1V5Um5WdWNtOTBZWFJsWkNVeU1HTnZiblJsZUhRbE1FRWxNakFsTWpCamRIZ3VjMkYyWlNncEpUTkNKVEJCSlRCQkpUSXdKVEl3WTNSNExtSmxaMmx1VUdGMGFDZ3BKVE5DSlRCQkpUSXdKVEl3SlRKR0pUSkdKVEl3Ylc5MlpTVXlNSFJvWlNVeU1ISnZkR0YwYVc5dUpUSXdjRzlwYm5RbE1qQjBieVV5TUhSb1pTVXlNR05sYm5SbGNpVXlNRzltSlRJd2RHaGxKVEl3Y21WamRDVXdRU1V5TUNVeU1HTjBlQzUwY21GdWMyeGhkR1VvZUNVeVF5VXlNR2dsTWpBbE1rWWxNakF5S1NVelFpVXdRU1V5TUNVeU1DVXlSaVV5UmlVeU1ISnZkR0YwWlNVeU1IUm9aU1V5TUhKbFkzUWxNRUVsTWpBbE1qQmpkSGd1Y205MFlYUmxLSEpoWkNrbE0wSWxNRUVsTUVFbE1qQWxNakFsTWtZbE1rWWxNakJrY21GM0pUSXdkR2hsSlRJd2NtVmpkQ1V5TUc5dUpUSXdkR2hsSlRJd2RISmhibk5tYjNKdFpXUWxNakJqYjI1MFpYaDBKVEJCSlRJd0pUSXdZM1I0TG5KbFkzUW9MWGNsTWpBbE1rWWxNakF5SlRKREpUSXdMV2dsTWpBbE1rWWxNakF5SlRKREpUSXdkeVV5UXlVeU1HZ3BKVE5DSlRCQkpUQkJKVEl3SlRJd1kzUjRMbVpwYkd4VGRIbHNaU1V5TUNVelJDVXlNQ1V5TW1keVpXVnVKVEl5SlROQ0pUQkJKVEl3SlRJd1kzUjRMbVpwYkd3b0tTVXpRaVV3UVNVd1FTVXlNQ1V5TUdOMGVDNXlaWE4wYjNKbEtDa2xNMElsTUVFbE4wUWxNMElsTUVFbE1FRWxNa1lsTWtZbE1qQk1hWE4wWlc0bE1qQjBieVV5TUdGdUpUSXdhVzV3ZFhRbE1FRmthWE53YjNObGNuTXVjSFZ6YUNnbE1FRWxNakFsTWpCdFpYUmhabkpoYldVdWIyNUpibkIxZEhNb0tHbHVjSFYwY3lrbE1qQWxNMFFsTTBVbE1qQWxOMElsTUVFbE1qQWxNakFsTWpBbE1qQnRaWFJoWm5KaGJXVXVjMlYwVDNWMGNIVjBjeWhwYm5CMWRITXBKVE5DSlRCQkpUSXdKVEl3SlRJd0pUSXdZMjl1YzNRbE1qQjVKVEl3SlRORUpUSXdhVzV3ZFhSekpUVkNKVEl5ZVNVeU1pVTFSQ1V6UWlVd1FTVXlNQ1V5TUNVeU1DVXlNR2xtSlRJd0tDRjVLU1V5TUNVM1FpVXdRU1V5TUNVeU1DVXlNQ1V5TUNVeU1DVXlNSEpsZEhWeWJpVXpRaVV3UVNVeU1DVXlNQ1V5TUNVeU1DVTNSQ1V3UVNVeU1DVXlNQ1V5TUNVeU1HUnlZWGNvZVNrbE0wSWxNRUVsTWpBbE1qQWxOMFFwSlRCQktTVXpRaVV3UVdSeVlYY29NQ2tsTTBJbE1FRWxNRUVsTWtZbE1rWWxNakJTWlhSMWNtNGxNakJoSlRJd1kyeGxZVzUxY0NVeU1HWjFibU4wYVc5dUpUQkJkMmx1Wkc5M0xuTmpjbWx3ZEZWdWJHOWhaQ1V5TUNVelJDVXlNQ2dwSlRJd0pUTkVKVE5GSlRJd0pUZENKVEJCSlRJd0pUSXdkMmhwYkdVbE1qQW9aR2x6Y0c5elpYSnpMbXhsYm1kMGFDVXlNQ1V6UlNVeU1EQXBKVEl3SlRkQ0pUQkJKVEl3SlRJd0pUSXdKVEl3WkdsemNHOXpaWEp6TG5CdmNDZ3BLQ2tsTTBJbE1FRWxNakFsTWpBbE4wUWxNRUVsTjBRbE0wSWxNRUUlM0QlMjZtb2R1bGVzJTNESlRWQ0pUVkUlMjZvcHRpb25zJTNEZXlKb2FXUmxiV1Z1ZFdsbWFXWnlZVzFsSWpwMGNuVmxMQ0p0YjJSbElqb2lhbUYyWVhOamNtbHdkQ0lzSW5OaGRtVnNiMkZrYVc1b1lYTm9JanAwY25WbExDSjBhR1Z0WlNJNklteHBaMmgwSW4wJTNEJTIyJTdEJTdEJTJDJTIycGx1Z2lucyUyMiUzQSU1QiUyMmh0dHBzJTNBJTJGJTJGbWVybWFpZC5tdGZtLmlvJTJGJTIzJTNGaG0lM0RkaXNhYmxlZCUyMiUyQyUyMmh0dHBzJTNBJTJGJTJGZWRpdG9yLm10Zm0uaW8lMkYlMjMlM0ZobSUzRGRpc2FibGVkJTI2b3B0aW9ucyUzREpUZENKVEl5Ylc5a1pTVXlNaVV6UVNVeU1tcHpiMjRsTWpJbE1rTWxNakp6WVhabGJHOWhaR2x1YUdGemFDVXlNaVV6UVhSeWRXVWxNa01sTWpKMGFHVnRaU1V5TWlVelFTVXlNbXhwWjJoMEpUSXlKVGRFJTIyJTVEJTJDJTIydmVyc2lvbiUyMiUzQSUyMjAuMyUyMiU3RA==&minimal=false)
110+
## Developers: creating your own markdown links
141111
142112
143-
## Description
113+
You can generate your own markdown pages to display in your own webpages easily as embedded iframes.
144114
145-
- user created javascript
146-
- user defined css modules
147115
148-
Think of this like [codepen](https://codepen.io) or [others](https://www.sitepoint.com/code-playgrounds/) but stripped down focusing on core essentials, performance, and durability.
116+
The markdown text is simply encoded as follows:
149117
150-
This website is also a [metaframe](https://docs.metapage.io/docs/what-is-a-metaframe): connect metaframes together into apps/workflows/dashboards: [metapages](https://docs.metapage.io/docs)
151118
152-
[Github Repo](https://github.com/metapages/metaframe-js)
119+
```typescript
120+
export const encodeMarkdown = (md: string) => {
121+
var b64 = window.btoa(encodeURIComponent(md));
122+
return b64;
123+
};
124+
125+
const yourRawMarkdown = "### Title\n\nSome content";
126+
const encodedMarkdown = encodeMarkdown(yourRawMarkdown);
127+
const url = `https://markdownv2.mtfm.io/#?button=invisible&md=${encodedMarkdown}&menuhidden=true&options=JTdCJTIyZGlzcGxheW1vZGUlMjIlM0ElMjJkZWZhdWx0JTIyJTdE`
128+
```
153129
154-
**Architecture:**
155130
131+
Just take that `url` and embed as described above, or via embedded as an iframe:
156132
157-
- no state is stored on the server (all embedded in the URL)
158-
- this imposes some limits but current URL lengths are large or not specifically limited
159-
- The server simply serves a little `index.html`
160-
- The client then runs the embedded javascript (the javascript code is **not** sent to the server)
161133
162-
The server runs on https://deno.com/deploy which is
134+
`<iframe src={url} />`
163135
164-
- simple
165-
- fast
166-
- very performant
167-
- deploys immediately with a simply push to the repository
168-
- 🌟🌟🌟🌟🌟

editor/public/metaframe.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
{
22
"version": "1",
33
"metadata": {
4-
"title": "Javascript Metaframe"
4+
"title": "Markdown Metaframe"
5+
},
6+
"inputs": {
7+
"md": {
8+
"type": "text/markdown",
9+
"description": "The markdown content to display"
10+
}
511
}
612
}
13+

editor/public/readme-images/io.png

-20.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)