feat: init code example

This commit is contained in:
Torsten Dittmann
2022-10-04 12:23:10 +02:00
parent 814ff68f4f
commit c6205aaced
4 changed files with 39 additions and 0 deletions
+14
View File
@@ -12,6 +12,7 @@
"@aw-labs/icons": "0.0.0-55",
"@aw-labs/ui": "0.0.0-55",
"echarts": "^5.3.3",
"highlight.js": "^11.6.0",
"tippy.js": "^6.3.7",
"web-vitals": "^2.1.4"
},
@@ -4304,6 +4305,14 @@
"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
"dev": true
},
"node_modules/highlight.js": {
"version": "11.6.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
"integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/html-encoding-sniffer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -11379,6 +11388,11 @@
"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
"dev": true
},
"highlight.js": {
"version": "11.6.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
"integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw=="
},
"html-encoding-sniffer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+1
View File
@@ -22,6 +22,7 @@
"@aw-labs/icons": "0.0.0-55",
"@aw-labs/ui": "0.0.0-55",
"echarts": "^5.3.3",
"highlight.js": "^11.6.0",
"tippy.js": "^6.3.7",
"web-vitals": "^2.1.4"
},
+15
View File
@@ -0,0 +1,15 @@
<script context="module">
import 'highlight.js/scss/default.scss';
</script>
<script lang="ts">
import Highlight from 'highlight.js';
import { onMount } from 'svelte';
let container: HTMLElement;
onMount(() => {
Highlight.highlightElement(container);
});
</script>
<pre><code class="language-js" bind:this={container}><slot /></code></pre>
@@ -1,6 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import { GridItem1 } from '$lib/components';
import Code from '$lib/components/code.svelte';
import { Button } from '$lib/elements/forms';
import { toLocaleDateTime } from '$lib/helpers/date';
import { project } from '../../store';
@@ -11,6 +12,14 @@
const path = `/console/project-${$page.params.project}/overview/platforms`;
</script>
<Code
>{`
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
`}</Code>
<div class="common-section u-flex u-gap-12">
<h3 class="heading-level-7">Platforms</h3>
<span class="u-margin-inline-start-auto">