Skip to content

Commit 99615dd

Browse files
luizbillsluizbills
committed
improve cheatsheet codes
1 parent 7dd429a commit 99615dd

File tree

2 files changed

+125
-42
lines changed

2 files changed

+125
-42
lines changed

‎public/about.html‎

Lines changed: 124 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,23 @@
3333
appearance: none;
3434
border: 0;
3535
font-size: 1rem;
36-
padding: 0.25em 0.75em;
37-
border-radius: 4px;
38-
background-color: #1c7ed6;
39-
color: #e9ecef;
36+
padding: 0;
37+
background: transparent;
38+
}
39+
code, pre {
40+
position: relative;
41+
}
42+
pre code {
43+
font-family: "Fira Code", monospace;
44+
font-optical-sizing: auto;
45+
font-weight: 400;
46+
font-style: normal;
47+
font-size: 90%;
48+
font-variant-ligatures: none;
49+
}
50+
svg {
51+
width: 1em;
52+
height: 1em;
4053
}
4154
main {
4255
max-width: 1000px;
@@ -70,7 +83,7 @@
7083
font-size: 1.2rem;
7184
line-height: 2;
7285
}
73-
#install code {
86+
p code {
7487
background-color: #444;
7588
word-break: break-all;
7689
}
@@ -81,14 +94,35 @@
8194
height: 100%;
8295
width: auto;
8396
}
84-
code {
85-
font-family: "Fira Code", monospace;
86-
font-optical-sizing: auto;
87-
font-weight: 400;
88-
font-style: normal;
89-
font-size: 90%;
90-
font-variant-ligatures: none;
97+
button.btn-print-pdf {
98+
padding: 0.25em 0.75em;
99+
border-radius: 4px;
100+
background-color: #1c7ed6;
101+
color: #e9ecef;
102+
}
103+
.copy {
104+
padding-left: 0.5em;
105+
cursor: pointer;
106+
}
107+
.copy button {
108+
cursor: pointer;
109+
position: relative;
110+
top: 3px;
111+
color: #d0d0d0;
112+
}
113+
.copy.copy-pos-absolute {
114+
position: absolute;
115+
top: 0;
116+
right: 0;
117+
}
118+
.copy.copy-size-bg {
119+
top: 0.5em;
120+
right: 0.5em;
121+
}
122+
.copy.copy-size-bg svg {
123+
font-size: 1.5em;
91124
}
125+
92126
@media print {
93127
html {
94128
font-size: 14px;
@@ -102,28 +136,14 @@
102136
background-color: #e9ecef;
103137
color: #222;
104138
}
105-
#install code {
106-
background-color: #adb5bd;
139+
p code {
140+
background-color: #d6d6d6;
107141
}
108-
}
109-
</style>
110-
<script>
111-
function selectText(node) {
112-
if (document.body.createTextRange) {
113-
const range = document.body.createTextRange();
114-
range.moveToElementText(node);
115-
range.select();
116-
} else if (window.getSelection) {
117-
const selection = window.getSelection();
118-
const range = document.createRange();
119-
range.selectNodeContents(node);
120-
selection.removeAllRanges();
121-
selection.addRange(range);
122-
} else {
123-
console.warn("Could not select text in node: Unsupported browser.");
142+
.copy.copy-inline button {
143+
color: #333;
124144
}
125145
}
126-
</script>
146+
</style>
127147
</head>
128148
<body>
129149
<main>
@@ -159,22 +179,20 @@ <h1>LITECANVAS</h1>
159179

160180
<p id="install">
161181
<strong>CDN</strong>:
162-
<code onclick="selectText(this)"
163-
>https://unpkg.com/litecanvas/dist/dist.js</code
164-
>
182+
<code data-copy="inline">https://unpkg.com/litecanvas/dist/dist.js</code>
165183
</p>
166184

167185
<p id="install">
168186
<strong>NPM</strong>:
169-
<code onclick="selectText(this)">npm install litecanvas</code>
187+
<code data-copy="inline">npm install litecanvas</code>
170188
</p>
171189

172190
<p style="color: #f76707;">
173191
<em><strong>Note:</strong> This project is still under development. All feedback is appreciated! For bugs, suggestions or contribuitions open a issue in our <a href="https://github.com/litecanvas/game-engine">Github Repository</a>.</em>
174192
</p>
175193

176194
<p>
177-
<button class="no-print" onclick="window.print()">Print PDF</button>
195+
<button class="btn-print-pdf no-print" onclick="window.print()">Print PDF</button>
178196
</p>
179197

180198
<nav class="no-print">
@@ -190,8 +208,8 @@ <h1>LITECANVAS</h1>
190208

191209
<h2>Hello World</h2>
192210

193-
<pre><code class="language-html" onclick="selectText(this)">&lt;!-- create a text file named "index.html" and open it your browser --&gt;
194-
&lt;!DOCTYPE html&gt;
211+
<p>Create a text file named <code>index.html</code> and open it your browser.</p>
212+
<pre><code class="language-html" data-copy="pos-absolute size-bg">&lt;!DOCTYPE html&gt;
195213
&lt;html&gt;
196214
&lt;body&gt;
197215
&lt;script src=&quot;https://unpkg.com/litecanvas/dist/dist.js&quot;&gt;&lt;/script&gt;
@@ -213,7 +231,7 @@ <h2>Hello World</h2>
213231

214232
<h2>Basic boilerplate</h2>
215233

216-
<pre><code class="language-typescript" onclick="selectText(this)">litecanvas({
234+
<pre><code class="language-typescript" data-copy="pos-absolute size-bg">litecanvas({
217235
loop: {
218236
init, update, draw, resized,
219237
tap, tapping, untap, tapped
@@ -719,7 +737,7 @@ <h3>Public assets</h3>
719737
>
720738
</p>
721739

722-
<pre><code class="language-typescript" onclick="selectText(this)">let sprites;
740+
<pre><code class="language-typescript" data-copy="size-bg pos-absolute">let sprites;
723741

724742
litecanvas({
725743
pixelart: true
@@ -758,7 +776,7 @@ <h3>Public assets</h3>
758776
>
759777
</p>
760778

761-
<pre><code class="language-typescript" onclick="selectText(this)">litecanvas()
779+
<pre><code class="language-typescript" data-copy="size-bg pos-absolute">litecanvas()
762780

763781
function init() {
764782
// first, load the font
@@ -803,5 +821,70 @@ <h2><a id="tools">Useful tools</a></h2>
803821
<script src="prism/prism.js"></script>
804822
<script src="prism/prism-typescript.js"></script>
805823
<script src="prism/prism-autolinker.js"></script>
824+
825+
<script>
826+
for (const element of document.querySelectorAll('[data-copy]')) {
827+
const data = element.dataset.copy || ''
828+
const wrapper = document.createElement('span')
829+
830+
wrapper.classList.add('copy')
831+
for (const opt of data.split(' ')) {
832+
if (!opt) continue;
833+
wrapper.classList.add('copy-' + opt)
834+
}
835+
const inline = wrapper.classList.contains('copy-inline')
836+
const button = document.createElement('button')
837+
button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M13 13h2a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2m6 12H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2z" /></svg>`;
838+
button.setAttribute('class', 'copy-button')
839+
840+
wrapper.appendChild(button)
841+
842+
if (inline) {
843+
element.appendChild(wrapper)
844+
} else {
845+
element.parentElement.appendChild(wrapper)
846+
}
847+
848+
button.onclick = () => {
849+
selectNodeContent(element)
850+
copyNodeContent(element)
851+
}
852+
}
853+
854+
/**
855+
* @param {HTMLElement} node
856+
*/
857+
function copyNodeContent(node) {
858+
if (!navigator.clipboard) {
859+
return alert("Could not copy text: Unsupported browser.");
860+
};
861+
navigator.clipboard.writeText(node.textContent).then(
862+
() => {},
863+
(err) => {
864+
alert("Error: Unable to copy this code.");
865+
console.error("Error on copying text to clipboard:", err);
866+
}
867+
);
868+
}
869+
870+
/**
871+
* @param {HTMLElement} node
872+
*/
873+
function selectNodeContent(node) {
874+
if (document.body.createTextRange) {
875+
const range = document.body.createTextRange();
876+
range.moveToElementText(node);
877+
range.select();
878+
} else if (window.getSelection) {
879+
const selection = window.getSelection();
880+
const range = document.createRange();
881+
range.selectNodeContents(node);
882+
selection.removeAllRanges();
883+
selection.addRange(range);
884+
} else {
885+
console.error("Could not select text: Unsupported browser.");
886+
}
887+
}
888+
</script>
806889
</body>
807890
</html>

‎public/sw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const cacheName = "luizbills.litecanvas-editor-v1";
2-
const version = "2.47.1";
2+
const version = "2.47.2";
33

44
const precacheResources = [
55
"/",

0 commit comments

Comments
 (0)