Skip to content

Commit 2618256

Browse files
jcubicjcubic
committed
add screenshotter app
1 parent b10ccb2 commit 2618256

File tree

6 files changed

+518
-7
lines changed

6 files changed

+518
-7
lines changed

‎build.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const writeFile = fs.promises.writeFile;
88
Promise.all([readFile('head.html'), readFile('footer.html')]).then(([head, footer]) => {
99
head = head.toString();
1010
footer = footer.toString();
11-
['index', 'docs'].forEach(file => {
11+
['index', 'docs', 'screenshot'].forEach(file => {
1212
readFile(`${file}.tmpl`).then(content => {
1313
content = content.toString()
1414
.replace(/\{\{HEAD\}\}/, head)

‎docs.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ <h1>
7171
<ul>
7272
<li><a href="/#demo">Demo</a></li>
7373
<li><a href="/docs.html">Docs</a></li>
74-
<li><a href="https://github.com/jcubic/lips/wiki/Getting-Started">Getting Started</a></li>
74+
<li><a href="https://github.com/jcubic/lips/wiki/Getting-Started">Get Started</a></li>
7575
<li><a href="https://github.com/jcubic/lips">source</a></li>
7676
<li><a href="/examples/index.html">Hyper App</a></li>
77-
<li><a href="/todo.html#/all">TODO app</a></li>
77+
<li><a href="/screenshot.html">Screenshoter</a></li>
7878
<li><a href="https://gitter.im/jcubic/lips">Chat</a></li>
7979
</ul>
8080
</nav>

‎head.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@ <h1>
6464
<ul>
6565
<li><a href="/#demo">Demo</a></li>
6666
<li><a href="/docs.html">Docs</a></li>
67-
<li><a href="https://github.com/jcubic/lips/wiki/Getting-Started">Getting Started</a></li>
67+
<li><a href="https://github.com/jcubic/lips/wiki/Getting-Started">Get Started</a></li>
6868
<li><a href="https://github.com/jcubic/lips">source</a></li>
6969
<li><a href="/examples/index.html">Hyper App</a></li>
70-
<li><a href="/todo.html#/all">TODO app</a></li>
70+
<li><a href="/screenshot.html">Screenshoter</a></li>
7171
<li><a href="https://gitter.im/jcubic/lips">Chat</a></li>
7272
</ul>
7373
</nav>

‎index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ <h1>
7171
<ul>
7272
<li><a href="/#demo">Demo</a></li>
7373
<li><a href="/docs.html">Docs</a></li>
74-
<li><a href="https://github.com/jcubic/lips/wiki/Getting-Started">Getting Started</a></li>
74+
<li><a href="https://github.com/jcubic/lips/wiki/Getting-Started">Get Started</a></li>
7575
<li><a href="https://github.com/jcubic/lips">source</a></li>
7676
<li><a href="/examples/index.html">Hyper App</a></li>
77-
<li><a href="/todo.html#/all">TODO app</a></li>
77+
<li><a href="/screenshot.html">Screenshoter</a></li>
7878
<li><a href="https://gitter.im/jcubic/lips">Chat</a></li>
7979
</ul>
8080
</nav>

‎screenshot.html

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
<!DOCTYPE HTML>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>LIPS Scheme Screenshoter</title>
6+
<link rel="canonical" href="https://lips.js.org/screenshot.html" />
7+
<meta name="Description" content="Tool to take screenshots of LIPS Scheme."/>
8+
<link href="https://cdn.jsdelivr.net/npm/codemirror@5.58.3/lib/codemirror.css" rel="stylesheet"/>
9+
<link href="https://cdn.jsdelivr.net/npm/codemirror@5.58.3/theme/twilight.css" rel="stylesheet"/>
10+
<link href="https://cdn.jsdelivr.net/npm/codemirror@5.58.3/addon/hint/show-hint.css" rel="stylesheet"/>
11+
<style>
12+
:root {
13+
--border-color: #000000;
14+
}
15+
.box {
16+
border: 2px solid var(--border-color);
17+
--width: 80ch;
18+
width: calc(var(--width) + 20px + 200px);
19+
height: calc(var(--height, 500) * 1px);
20+
border-radius: 5px;
21+
}
22+
/*
23+
* button generated by
24+
* https://www.bestcssbuttongenerator.com/
25+
*/
26+
.download {
27+
box-shadow:inset 0px -3px 7px 0px #29bbff;
28+
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
29+
background-color:#2dabf9;
30+
border-radius:3px 3px 3px 0;
31+
border: none;
32+
display:inline-block;
33+
cursor:pointer;
34+
color:#ffffff;
35+
font-family:Arial;
36+
font-size:15px;
37+
padding:9px 23px;
38+
text-decoration:none;
39+
text-shadow:0px 1px 0px #263666;
40+
}
41+
.download:hover {
42+
background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
43+
background-color:#0688fa;
44+
}
45+
.download:active {
46+
position:relative;
47+
top:1px;
48+
}
49+
.box > header {
50+
border-bottom: 2px solid var(--border-color);
51+
}
52+
.wrapper {
53+
background: #ABB8C3;
54+
width: calc(var(--width) + 100px);
55+
height: calc((var(--height, 500) - 100) * 1px);
56+
}
57+
.position {
58+
margin: 10px;
59+
}
60+
.box {
61+
margin: 0 auto;
62+
margin-top: 100px;
63+
position: relative;
64+
max-width: 100%;
65+
}
66+
.position, .cm-shadow-box, .wrapper {
67+
display: flex;
68+
justify-content: center;
69+
align-items: center;
70+
max-width: 100%;
71+
}
72+
.cm-dialog {
73+
width: var(--width);
74+
height: auto;
75+
border-radius: 5px;
76+
box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
77+
--background: #151718;
78+
background: var(--background, white);
79+
z-index: 100;
80+
overflow: hidden;
81+
}
82+
.cm-dialog header {
83+
padding: 10px;
84+
}
85+
.cm-dialog .cm-body {
86+
height: calc(100% - 38px);
87+
}
88+
.cm-dialog .CodeMirror {
89+
background: var(--background, white);
90+
line-height: 1.4em;
91+
height: 100%;
92+
}
93+
.cm-dialog .cm-s-seti .CodeMirror-gutters {
94+
background-color: var(--background, white);
95+
}
96+
.cm-icons {
97+
list-style: none;
98+
margin: 0;
99+
padding: 0;
100+
}
101+
.cm-icons li {
102+
display: inline-block;
103+
width: 12px;
104+
height: 12px;
105+
background: red;
106+
border-radius: 50%;
107+
}
108+
.cm-icons li:first-child {
109+
background: #FF5F56;
110+
}
111+
.cm-icons li:nth-child(2) {
112+
background: #FFBD2E;
113+
}
114+
.cm-icons li:last-child {
115+
background: #27C93F;
116+
}
117+
118+
.note a, .note a:visited {
119+
color: #005DB6;
120+
text-decoration: none;
121+
}
122+
.note a:hover {
123+
text-decoration: underline;
124+
}
125+
</style>
126+
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png"/>
127+
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png"/>
128+
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png"/>
129+
<link rel="manifest" href="favicon/site.webmanifest"/>
130+
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5"/>
131+
<link rel="shortcut icon" href="favicon/favicon.ico"/>
132+
<meta name="msapplication-TileColor" content="#ff6600"/>
133+
<meta name="msapplication-config" content="favicon/browserconfig.xml"/>
134+
<meta name="theme-color" content="#ffffff"/>
135+
<!--[if IE]>
136+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
137+
<![endif]-->
138+
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin/>
139+
<link href="https://cdn.jsdelivr.net/combine/npm/jquery.terminal/css/jquery.terminal.min.css,npm/terminal-prism/css/prism-coy.css" rel="stylesheet"/>
140+
<link href="https://cdn.jsdelivr.net/npm/@jcubic/lips@beta/lib/css/terminal.css" rel="stylesheet"/>
141+
<link href="./examples/common.css" rel="stylesheet"/>
142+
<link href="style.css" rel="stylesheet"/>
143+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
144+
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Crimson+Text|Play&display=swap"/>
145+
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Play&display=swap"
146+
media="print"
147+
onload="this.media='all'"
148+
rel="stylesheet"/>
149+
<meta property="og:locale" content="en_US"/>
150+
<meta property="og:type" content="website"/>
151+
<meta property="og:title" content="LIPS Is Pretty Simple"/>
152+
<meta property="og:description" content="Powerful Scheme based lisp in JavaScript"/>
153+
<meta property="og:url" content="https://lips.js.org"/>
154+
<meta property="og:site_name" content="lips"/>
155+
<meta property="og:image" content="https://lips.js.org/banner.png"/>
156+
157+
<meta name="twitter:image" content="https://lips.js.org/banner.png"/>
158+
<meta name="twitter:image:alt" content="Logo and text 'LIPS Is Pretty Simple'"/>
159+
<meta name="twitter:title" content="LIPS Is Pretty Simple"/>
160+
<meta name="twitter:description" content="Powerful Scheme based lisp in JavaScript"/>
161+
<meta name="twitter:card" content="summary_large_image"/>
162+
<meta name="twitter:site" content="@jcubic"/>
163+
<meta name="twitter:creator" content="@jcubic"/>
164+
165+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
166+
<script type="application/ld+json">{
167+
"@context": "https://schema.org/",
168+
"@type": "https://schema.org/SoftwareSourceCode",
169+
"about": "LIPS: Scheme based powerful lips language, interpreter written in JavaScript",
170+
"programmingLanguage": "JavaScript",
171+
"codeRepository": "https://github.com/jcubic/lips",
172+
"runtimePlatform": "Browser, Node.js",
173+
"targetProduct": "Cross plaform",
174+
"author": {"@type":"Person","url":"https://jcubic.pl/me/","name":"Jakub T. Jankiewicz","givenName":"Jakub","familyName":"Jankiewicz","additionalName":"T.","alternateName":"jcubic","image":"https://live.staticflickr.com/65535/50132910231_73d867794f_k_d.jpg","gender":"https://schema.org/Male","jobTitle":"Software Engineer - Front-End Developer","sameAs":["https://twitter.com/jcubic","https://www.facebook.com/jcubic/","https://www.instagram.com/jcubic/","https://www.flickr.com/photos/jcubic","https://www.reddit.com/user/jcubic","https://github.com/jcubic","https://dribbble.com/jcubic","https://stackoverflow.com/users/387194/jcubic"],"knowsAbout":["Front-End","JavaScript","NodeJS","Python","R","PHP","TypeScript","Bash","SVG","CSS","Shiny","Jekyll","GIT","GNU Emacs","GNU/Linux","Inkscape","SQL","SEO","Graphic Design","Security","lisp","scheme","programming","software development","Web Development","Photography"],"knowsLanguage":["en-US","en-GB","pl-PL"],"worksFor":{"@type":"Organization","legalName":"ASTEK Polska sp. z o.o.","slogan":"Tworzymy zepół Expertów","url":"https://astek.pl/"}},
175+
176+
"sdLicense": "https://github.com/jcubic/lips/blob/master/LICENSE",
177+
"license": "MIT"
178+
}</script>
179+
</head>
180+
<body>
181+
<header class="main">
182+
<a href="/" title="LIPS Home Page">
183+
<img src="logo.svg" width="280" height="146" alt="LIPS Logo: Scheme (lisp dialect) in JavaScript"/>
184+
<h1>
185+
Powerful Scheme lisp in JavaScript
186+
</h1>
187+
</a>
188+
<nav>
189+
<ul>
190+
<li><a href="/#demo">Demo</a></li>
191+
<li><a href="/docs.html">Docs</a></li>
192+
<li><a href="https://github.com/jcubic/lips/wiki/Getting-Started">Get Started</a></li>
193+
<li><a href="https://github.com/jcubic/lips">source</a></li>
194+
<li><a href="/examples/index.html">Hyper App</a></li>
195+
<li><a href="/screenshot.html">Screenshoter</a></li>
196+
<li><a href="https://gitter.im/jcubic/lips">Chat</a></li>
197+
</ul>
198+
</nav>
199+
</header>
200+
<a href="https://github.com/jcubic/lips" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
201+
202+
203+
<div class="box">
204+
<header>
205+
<button class="download">Screenshot</button>
206+
</header>
207+
<div class="position">
208+
<div class="wrapper">
209+
<div class="cm-dialog">
210+
<header>
211+
<ul class="cm-icons">
212+
<li></li>
213+
<li></li>
214+
<li></li>
215+
</ul>
216+
</header>
217+
<div class="cm-body"></div>
218+
</div>
219+
</div>
220+
</div>
221+
</div>
222+
223+
<template id="tmpl">
224+
<pre>
225+
(define re #/&lt;h1&gt;([^>]+)&lt;\/h1&gt;/)
226+
(define str "hello")
227+
228+
(define obj &(:foo 10
229+
:bar 20))
230+
231+
(let iter ((i 10))
232+
(unless (zero? i)
233+
(display i)
234+
(newline)
235+
(iter (- i 1))))
236+
</pre>
237+
</template>
238+
<script src="https://cdn.jsdelivr.net/npm/html-to-image@1.10.4/dist/html-to-image.js"></script>
239+
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.3/lib/codemirror.js"></script>
240+
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.3/mode/javascript/javascript.js"></script>
241+
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.3/addon/edit/matchbrackets.js"></script>
242+
<script src="https://cdn.jsdelivr.net/gh/jcubic/lips@devel/lib/js/codemirror.js"></script>
243+
<script>
244+
const code = tmpl.content.querySelector('pre').innerText;
245+
const box = document.querySelector('.box');
246+
const dialog = document.querySelector('.cm-body');
247+
248+
CodeMirror.commands.autocomplete = function(cm) {
249+
cm.showHint({ hint: CodeMirror.hint.scheme });
250+
};
251+
252+
var myCodeMirror = CodeMirror(dialog, {
253+
value: code,
254+
mode: "lips",
255+
lineWrapping: true,
256+
lineNumbers: true,
257+
matchBrackets: true,
258+
theme: 'twilight',
259+
inputStyle: "contenteditable",
260+
extraKeys: { "Ctrl-Space": "autocomplete" }
261+
});
262+
263+
function download(url) {
264+
var a = document.createElement('a');
265+
a.download = 'screenshot.png';
266+
a.href = url;
267+
a.style.display = 'none';
268+
document.body.appendChild(a);
269+
a.click();
270+
document.body.removeChild(a);
271+
}
272+
273+
var button = document.querySelector('button');
274+
button.addEventListener('click', () => {
275+
const node = document.querySelector(".wrapper");
276+
htmlToImage.toPng(node)
277+
.then(download)
278+
.catch(function(error) {
279+
console.error('oops, something went wrong!', error);
280+
});
281+
});
282+
let height;
283+
const body = document.body;
284+
myCodeMirror.on('change', function() {
285+
var rect = dialog.getBoundingClientRect();
286+
if (height !== rect.height) {
287+
height = rect.height;
288+
body.style.setProperty('--height', rect.height + 300);
289+
}
290+
});
291+
</script>
292+
</body>
293+
</html>

0 commit comments

Comments
 (0)