131 lines
4.7 KiB
Markdown
131 lines
4.7 KiB
Markdown
# Permanent URL
|
|
|
|
Any specific version of LiveCodes app can be accessed through the permanent unique URL:
|
|
|
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
|
import CodeBlock from '@theme/CodeBlock';
|
|
import { AppVersion } from '../../src/components/Versions.tsx';
|
|
|
|
export const AppVersionLink = () => {
|
|
const { siteConfig } = useDocusaurusContext();
|
|
return (
|
|
<a href={`https://v${siteConfig.customFields.appVersion}.livecodes.io`} target="\_blank">
|
|
https://v{siteConfig.customFields.appVersion}.livecodes.io
|
|
</a>
|
|
);
|
|
};
|
|
|
|
`{version}.livecodes.io`
|
|
(e.g. <AppVersionLink />)
|
|
|
|
This allows [embedded playgrounds](./embeds.html.md) to use a pinned version of the LiveCodes app and its dependencies and avoid any breaking changes that may occur in later versions.
|
|
|
|
Permanent URL is used by default in the code generated by the [embed screen UI](./embeds.html.md).
|
|
It is also available when [sharing](./share.html.md) projects from the share screen.
|
|
|
|
The [SDK](../sdk/index.html.md) embed option [`appUrl`](../sdk/js-ts.html.md)#appurl) allows specifying the URL for the app to be used.
|
|
In addition, it is always a good practice to use a specific version of the SDK.
|
|
|
|
Example:
|
|
|
|
export const Code = () => {
|
|
const { siteConfig } = useDocusaurusContext();
|
|
return (
|
|
<CodeBlock title="index.html" language="html">
|
|
{`<div id="container"></div>\n<script type="module">
|
|
${' '}// specific SDK version
|
|
// highlight-next-line
|
|
${' '}import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}';\n
|
|
${' '}createPlayground('#container', {
|
|
${' '}// App permanent URL
|
|
// highlight-next-line
|
|
${' '}appUrl: 'https://v${siteConfig.customFields.appVersion}.livecodes.io',
|
|
${' '}template: 'react',
|
|
${' '}});
|
|
</script>`}
|
|
</CodeBlock>
|
|
);
|
|
};
|
|
|
|
<Code />
|
|
|
|
## Get Permanent URL
|
|
|
|
You can get the permanent URL for the app from the [About screen](pathname:///../?screen=about) (Help menu → About). By default, the code generated in the [Embed screen](./embeds.html.md)#app-embed-screen) uses permanent URL.
|
|
Alternatively, open the browser console of the standalone app (e.g. https://livecodes.io), and run this:
|
|
|
|
export const GetPermanentUrl = () => {
|
|
const { siteConfig } = useDocusaurusContext();
|
|
return (
|
|
<CodeBlock language="js">
|
|
{`await livecodes.exec('showVersion');\n
|
|
// output:
|
|
// App Version: ${siteConfig.customFields.appVersion} (https://github.com/live-codes/livecodes/releases/tag/v${siteConfig.customFields.appVersion})
|
|
// SDK Version: ${siteConfig.customFields.sdkVersion} (https://www.npmjs.com/package/livecodes/v/${siteConfig.customFields.sdkVersion})
|
|
// Git commit: 0698f9f (https://github.com/live-codes/livecodes/commit/0698f9f)
|
|
// App Permanent URL: https://v${siteConfig.customFields.appVersion}.livecodes.io/
|
|
// SDK Permanent URL: https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}/livecodes.js
|
|
`}
|
|
</CodeBlock>
|
|
);
|
|
};
|
|
|
|
<GetPermanentUrl />
|
|
|
|
:::caution
|
|
|
|
Please note that this only applies to the LiveCodes app and its dependencies.
|
|
[NPM imports](./module-resolution.html.md) in [project code](./projects.html.md)#script-editor) that do not specify versions use the latest version.
|
|
[Package versions](./module-resolution.html.md)#package-version) can be specified in the import.
|
|
[Custom import maps](./module-resolution.html.md)#custom-module-resolution) can be set to control the module import behavior.
|
|
|
|
Example:
|
|
|
|
```js
|
|
import lodash from 'lodash@4.17.21';
|
|
|
|
console.log(lodash.VERSION); // -> 4.17.21
|
|
```
|
|
|
|
It is recommended to also specify versions of [external resources](./external-resources.html.md).
|
|
|
|
:::
|
|
|
|
#### Full Example:
|
|
|
|
export const FullCode = () => {
|
|
const { siteConfig } = useDocusaurusContext();
|
|
return (
|
|
<CodeBlock title="index.html" language="html">
|
|
{`<div id="container"></div>\n<script type="module">
|
|
${' '}// specific SDK version
|
|
// highlight-next-line
|
|
${' '}import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}';\n
|
|
${' '}createPlayground('#container', {
|
|
${' '}// App permanent URL
|
|
// highlight-next-line
|
|
${' '}appUrl: 'https://v${siteConfig.customFields.appVersion}.livecodes.io',
|
|
${' '}config: {
|
|
${' '}script: {
|
|
${' '}language: 'javascript',
|
|
${' '}// project code imports package with specific version
|
|
// highlight-next-line
|
|
${' '}content: 'import lodash from "lodash@4.17.21";\\nconsole.log(lodash.VERSION);',
|
|
${' '}},
|
|
${' '}activeEditor: 'script',
|
|
${' '}tools: { status: 'open', active: 'console' },
|
|
${' '}},
|
|
${' '}});
|
|
</script>`}
|
|
</CodeBlock>
|
|
);
|
|
};
|
|
|
|
<FullCode />
|
|
|
|
## Related
|
|
|
|
- [Embedded playgrounds](./embeds.html.md)
|
|
- [Share](./share.html.md)
|
|
- [SDK](../sdk/index.html.md)
|
|
- [`exec` SDK method](../sdk/js-ts.html.md)#exec) |