Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: code snippet

Browse Source
This commit is contained in:
Torsten Dittmann
2022-10-04 18:46:12 +02:00
parent c6205aaced
commit 1bcd64c2b4
4 changed files with 178 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+27
View File
@@ -13,6 +13,7 @@
"@aw-labs/ui": "0.0.0-55",
"echarts": "^5.3.3",
"highlight.js": "^11.6.0",
"prismjs": "^1.29.0",
"tippy.js": "^6.3.7",
"web-vitals": "^2.1.4"
},
@@ -26,6 +27,7 @@
"@testing-library/svelte": "3.1.3",
"@testing-library/user-event": "^14.4.3",
"@types/gtag.js": "^0.0.11",
"@types/prismjs": "^1.26.0",
"@typescript-eslint/eslint-plugin": "^5.37.0",
"@typescript-eslint/parser": "^5.37.0",
"@vitest/ui": "^0.23.2",
@@ -1767,6 +1769,12 @@
"dev": true,
"peer": true
},
"node_modules/@types/prismjs": {
"version": "1.26.0",
"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
"integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
"dev": true
},
"node_modules/@types/pug": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
@@ -6664,6 +6672,14 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/prismjs": {
"version": "1.29.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
"engines": {
"node": ">=6"
}
},
"node_modules/process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -9561,6 +9577,12 @@
"dev": true,
"peer": true
},
"@types/prismjs": {
"version": "1.26.0",
"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
"integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
"dev": true
},
"@types/pug": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
@@ -13180,6 +13202,11 @@
}
}
},
"prismjs": {
"version": "1.29.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
},
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
package.json
+2 -1
View File
@@ -22,7 +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",
"prismjs": "^1.29.0",
"tippy.js": "^6.3.7",
"web-vitals": "^2.1.4"
},
@@ -36,6 +36,7 @@
"@testing-library/svelte": "3.1.3",
"@testing-library/user-event": "^14.4.3",
"@types/gtag.js": "^0.0.11",
"@types/prismjs": "^1.26.0",
"@typescript-eslint/eslint-plugin": "^5.37.0",
"@typescript-eslint/parser": "^5.37.0",
"@vitest/ui": "^0.23.2",
src/lib/components/code.svelte
+106 -10
View File
@@ -1,15 +1,111 @@
<script context="module">
import 'highlight.js/scss/default.scss';
</script>
<script lang="ts">
import Highlight from 'highlight.js';
import { onMount } from 'svelte';
import Prism from 'prismjs';
import 'prismjs/components/prism-dart';
import 'prismjs/plugins/autoloader/prism-autoloader';
import 'prismjs/plugins/line-numbers/prism-line-numbers';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import { afterUpdate } from 'svelte';
let container: HTMLElement;
onMount(() => {
Highlight.highlightElement(container);
export let code = '';
export let language: 'js' | 'html' | 'dart' | 'json';
afterUpdate(async () => {
Prism.highlightAll();
});
</script>
<pre><code class="language-js" bind:this={container}><slot /></code></pre>
<pre class={`language-${language} line-numbers`}><code>{@html code}</code></pre>
<style lang="scss" global>
@import 'prismjs/themes/prism.css';
code,
pre {
&[class*='language-'] {
color: #fcfcff;
text-shadow: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
body.theme-light & {
color: #373b4d;
}
}
::selection,
&::selection {
text-shadow: none;
background: #b3d4fc;
}
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #1b1b28;
body.theme-light & {
background: #fcfcff;
}
}
.token {
&.comment,
&.prolog,
&.doctype,
&.cdata {
color: slategray;
}
&.punctuation {
color: #999;
}
&.property,
&.tag,
&.boolean,
&.number,
&.constant,
&.symbol,
&.deleted,
&.selector,
&.attr-name,
&.string,
&.char,
&.builtin,
&.inserted {
color: #fdc584;
body.theme-light & {
color: #e49545;
}
}
&.operator,
&.entity,
&.url,
.language-css &.string,
.style &.string {
color: #9a6e3a;
background: none;
body.theme-light & {
color: #373b4d;
}
}
&.atrule,
&.attr-value,
&.keyword {
color: #cbb1fc;
body.theme-light & {
color: #6a6af7;
}
}
&.function,
&.class-name {
color: #ffa1ce;
body.theme-light & {
color: #f02e7f;
}
}
&.regex,
&.important,
&.variable {
color: #a1c4ff;
body.theme-light & {
color: #62aed2;
}
}
}
</style>
src/routes/console/project-[project]/overview/platforms/+page.svelte
+43 -6
View File
@@ -13,13 +13,50 @@
</script>
<Code
>{`
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
language="js"
code={`import { Client, Account } from "appwrite";
const client = new Client();
const account = new Account(client);
client
.setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
.setProject('5df5acd0d48c2') // Your project ID
;
const promise = account.createEmailSession('email@example.com', 'password');
promise.then(function (response) {
console.log(response); // Success
}, function (error) {
console.log(error); // Failure
});`} />
<Code
language="dart"
code={`import 'package:appwrite/appwrite.dart';
void main() { // Init SDK
Client client = Client();
Account account = Account(client);
client
.setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
.setProject('5df5acd0d48c2') // Your project ID
;
Future result = account.create(
userId: '[USER_ID]',
email: 'email@example.com',
password: 'password',
);
result
.then((response) {
print(response);
}).catchError((error) {
print(error.response);
});
});
`}</Code>
}`} />
<div class="common-section u-flex u-gap-12">
<h3 class="heading-level-7">Platforms</h3>
<span class="u-margin-inline-start-auto">