Skip to content

Commit 348954a

Browse files
SomaticITSomaticIT
committed
docs: add exemples
1 parent cd518d8 commit 348954a

File tree

12 files changed

+948
-3
lines changed

12 files changed

+948
-3
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
"codemirror": "^6.0.0"
2828
},
2929
"devDependencies": {
30+
"@codemirror/lang-css": "^6.0.0",
31+
"@codemirror/lang-html": "^6.0.0",
32+
"@codemirror/lang-javascript": "^6.0.0",
33+
"@codemirror/theme-one-dark": "^6.0.0",
3034
"@sveltejs/kit": "next",
3135
"@typescript-eslint/eslint-plugin": "^5.27.0",
3236
"@typescript-eslint/parser": "^5.27.0",

‎src/app.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
65
<meta name="viewport" content="width=device-width, initial-scale=1" />
76
%sveltekit.head%
87
</head>

‎src/routes/__layout.svelte

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<script lang="ts">
2+
import "../styles.css";
3+
4+
import { page } from "$app/stores";
5+
6+
const nav = [
7+
{ path: "/", text: "Configurator" },
8+
{ path: "/javascript", text: "Javascript" },
9+
{ path: "/typescript", text: "Typescript" },
10+
{ path: "/html", text: "HTML" },
11+
{ path: "/css", text: "CSS" },
12+
];
13+
</script>
14+
15+
<svelte:head>
16+
<title>svelte-codemirror-editor</title>
17+
</svelte:head>
18+
19+
<section class="layout">
20+
<header class="header">
21+
<h1><a href="/">svelte-codemirror-editor</a></h1>
22+
</header>
23+
24+
<nav class="menu">
25+
{#each nav as item (item.path)}
26+
<a href={item.path} class="menu__item {$page.url.pathname === item.path ? 'menu__item_active' : ''}">
27+
{item.text}
28+
</a>
29+
{/each}
30+
</nav>
31+
32+
<main>
33+
<slot />
34+
</main>
35+
</section>
36+
37+
<style>
38+
.layout {
39+
height: 100vh;
40+
overflow: hidden;
41+
display: grid;
42+
grid-template-columns: auto 1fr;
43+
grid-template-rows: 3rem auto 1fr;
44+
grid-template-areas:
45+
"header header"
46+
"menu menu"
47+
"main main";
48+
}
49+
50+
.header {
51+
grid-area: header;
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
background: #1f1f23;
56+
}
57+
.header > h1 {
58+
font-size: 1.3rem;
59+
font-weight: 700;
60+
}
61+
.header > h1 > a {
62+
color: white;
63+
text-decoration: none;
64+
}
65+
66+
main {
67+
grid-area: main;
68+
overflow: hidden;
69+
}
70+
71+
.menu {
72+
grid-area: menu;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
flex-wrap: wrap;
77+
background: #edf2ff;
78+
overflow: hidden;
79+
padding: 0.5rem 0;
80+
}
81+
82+
.menu__item {
83+
padding: 0.5rem;
84+
text-align: center;
85+
font-size: 0.9rem;
86+
transition: color 0.2s linear, background-color 0.2s linear;
87+
}
88+
.menu__item:link,
89+
.menu__item:visited {
90+
color: #333;
91+
text-decoration: none;
92+
}
93+
.menu__item:hover {
94+
color: #99b4ff;
95+
}
96+
.menu__item.menu__item_active {
97+
color: #5236dd;
98+
}
99+
100+
@media screen and (min-width: 640px) {
101+
.layout {
102+
grid-template-areas:
103+
"header header"
104+
"menu main"
105+
"menu main";
106+
}
107+
108+
.header {
109+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
110+
z-index: 2;
111+
}
112+
113+
.menu {
114+
flex-direction: column;
115+
align-items: stretch;
116+
justify-content: start;
117+
width: 10rem;
118+
padding: 0;
119+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
120+
z-index: 1;
121+
}
122+
123+
.menu__item {
124+
padding: 0.5rem;
125+
}
126+
.menu__item:link,
127+
.menu__item:visited {
128+
color: #333;
129+
text-decoration: none;
130+
}
131+
.menu__item:hover {
132+
color: #fff;
133+
background: #333;
134+
}
135+
.menu__item.menu__item_active {
136+
color: white;
137+
background: #5236dd;
138+
}
139+
}
140+
</style>

‎src/routes/_util/code.ts

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
export const javascriptValue = (): string => `/**
2+
* Reduce calls to the passed function.
3+
*
4+
* @param func - Function to debounce.
5+
* @param threshold - The delay to avoid recalling the function.
6+
* @param execAsap - If true, the Function is called at the start of the threshold, otherwise the Function is called at the end of the threshold.
7+
*/
8+
export function debounce(func, threshold, execAsap = false) {
9+
let timeout;
10+
11+
return function debounced(...args) {
12+
const self = this;
13+
14+
if (timeout) clearTimeout(timeout);
15+
else if (execAsap) func.apply(self, args);
16+
17+
timeout = setTimeout(delayed, threshold || 100);
18+
19+
function delayed() {
20+
if (!execAsap) func.apply(self, args);
21+
timeout = null;
22+
}
23+
};
24+
}`;
25+
26+
export const typescriptValue = (): string => `/**
27+
* Reduce calls to the passed function.
28+
*
29+
* @param func - Function to debounce.
30+
* @param threshold - The delay to avoid recalling the function.
31+
* @param execAsap - If true, the Function is called at the start of the threshold, otherwise the Function is called at the end of the threshold.
32+
*/
33+
export function debounce<T extends (...args: any[]) => any>(func: T, threshold: number, execAsap = false): T {
34+
let timeout: any;
35+
36+
return function debounced(...args: any[]): any {
37+
const self = this;
38+
39+
if (timeout) clearTimeout(timeout);
40+
else if (execAsap) func.apply(self, args);
41+
42+
timeout = setTimeout(delayed, threshold || 100);
43+
44+
function delayed(): void {
45+
if (!execAsap) func.apply(self, args);
46+
timeout = null;
47+
}
48+
} as T;
49+
}`;
50+
51+
export const htmlValue = (): string => `<html lang="en">
52+
<head>
53+
<meta charset="utf-8">
54+
<link rel="icon" href="/favicon.png">
55+
<meta name="viewport" content="width=device-width, initial-scale=1">
56+
<style type="text/css">
57+
html {
58+
font-family: sans-serif;
59+
}
60+
61+
h1 {
62+
text-align: center;
63+
margin-bottom: 3rem;
64+
}
65+
66+
main {
67+
margin: 2rem 0;
68+
}
69+
</style>
70+
</head>
71+
<body>
72+
<h1>Hello world!</h1>
73+
<main>
74+
<p>Welcome on Codemirror</p>
75+
</main>
76+
<script>
77+
/**
78+
* Reduce calls to the passed function.
79+
*
80+
* @param func - Function to debounce.
81+
* @param threshold - The delay to avoid recalling the function.
82+
* @param execAsap - If true, the Function is called at the start of the threshold, otherwise the Function is called at the end of the threshold.
83+
*/
84+
function debounce(func, threshold, execAsap = false) {
85+
let timeout;
86+
87+
return function debounced(...args) {
88+
const self = this;
89+
90+
if (timeout) clearTimeout(timeout);
91+
else if (execAsap) func.apply(self, args);
92+
93+
timeout = setTimeout(delayed, threshold || 100);
94+
95+
function delayed() {
96+
if (!execAsap) func.apply(self, args);
97+
timeout = null;
98+
}
99+
};
100+
}
101+
</script>
102+
</body>
103+
</html>`;
104+
105+
export const cssValue = (): string => `html {
106+
font-family: sans-serif;
107+
}
108+
109+
h1 {
110+
text-align: center;
111+
margin-bottom: 3rem;
112+
}
113+
114+
main {
115+
margin: 2rem 0;
116+
}`;

‎src/routes/css.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
import CodeMirror from "$lib";
3+
import { css } from "@codemirror/lang-css";
4+
import { cssValue } from "./_util/code";
5+
6+
const code = cssValue();
7+
</script>
8+
9+
<CodeMirror value={code} lang={css()} class="editor" />

‎src/routes/html.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
import CodeMirror from "$lib";
3+
import { html } from "@codemirror/lang-html";
4+
import { htmlValue } from "./_util/code";
5+
6+
const code = htmlValue();
7+
</script>
8+
9+
<CodeMirror value={code} lang={html({ matchClosingTags: true })} class="editor" />

0 commit comments

Comments
 (0)