commit ef0cd5703d44899097f708fcba029686a212c452
parent 2a470dfc272c35447f127a175ba91efd31414c21
Author: Oscar Benedito <oscar@oscarbenedito.com>
Date: Fri, 14 Aug 2020 00:51:03 +0200
Composer is now a single HTML file
CSS and JS included. This makes it more portable (you can save the HTML
and use it offline), and the assets are not used anywhere else on the
site anyway.
Diffstat:
4 files changed, 82 insertions(+), 95 deletions(-)
diff --git a/assets/css/composer.css b/assets/css/composer.css
@@ -0,0 +1,74 @@
+:root {
+ --font-family: 'serif';
+ --nav-height: 3em;
+ --text-color: #000;
+ --bg-color: #fff;
+ --nav-color: hsl(0, 0%, 46%);
+}
+.toggled {
+ --text-color: hsl(0, 0%, 93%);
+ --bg-color: hsl(0, 0%, 13%);
+ --nav-color: hsl(0, 0%, 56%);
+}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text-color: hsl(0, 0%, 93%);
+ --bg-color: hsl(0, 0%, 13%);
+ --nav-color: hsl(0, 0%, 56%);
+ }
+}
+@media (prefers-color-scheme: dark) {
+ .toggled {
+ --text-color: #000;
+ --bg-color: #fff;
+ --nav-color: hsl(0, 0%, 46%);
+ }
+}
+.mono {
+ --font-family: 'mono';
+}
+html {
+ background-color: var(--bg-color);
+}
+textarea {
+ line-height: 1.4em;
+ font-family: var(--font-family);
+ padding: 1em calc((100% - 720px)/2);
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ margin: 0;
+ height: calc(100% - var(--nav-height));
+ font-size: 1.2em;
+ box-sizing: border-box;
+ resize: none;
+ right: 0;
+ top: var(--nav-height);
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ position: fixed;
+ border: 0;
+ outline: 0;
+}
+nav {
+ text-align: center;
+ height: var(--nav-height);
+ line-height: var(--nav-height);
+ font-size: 1.2em;
+ opacity: 0;
+ color: var(--nav-color);
+ background-color: var(--bg-color);
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 1;
+}
+nav a {
+ color: var(--nav-color);
+ text-decoration: none;
+ cursor: pointer;
+}
+nav:hover {
+ opacity: 1;
+}
diff --git a/assets/css/composer.scss b/assets/css/composer.scss
@@ -1,89 +0,0 @@
-/*
-Copyright (C) 2020 Oscar Benedito
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-*/
-@mixin lightcolors {
---text-color: #000;
---bg-color: #fff;
---nav-color: hsl(0, 0%, 46%);
-}
-@mixin darkcolors {
---text-color: hsl(0, 0%, 93%);
---bg-color: hsl(0, 0%, 13%);
---nav-color: hsl(0, 0%, 56%);
-}
-:root {
- --font-family: 'serif';
- --nav-height: 3em;
-
- @include lightcolors;
- @media (prefers-color-scheme: dark) {
- @include darkcolors;
- }
-}
-.toggled {
- @include darkcolors;
- @media (prefers-color-scheme: dark) {
- @include lightcolors;
- }
-}
-.mono {
- --font-family: 'mono';
-}
-html {
- background-color: var(--bg-color);
-}
-textarea {
- line-height: 1.4em;
- font-family: var(--font-family);
- padding: 1em calc((100% - 720px)/2);
- background-color: var(--bg-color);
- color: var(--text-color);
- margin: 0;
- height: calc(100% - var(--nav-height));
- font-size: 1.2em;
- box-sizing: border-box;
- resize: none;
- right: 0;
- top: var(--nav-height);
- bottom: 0;
- left: 0;
- width: 100%;
- position: fixed;
- border: 0;
- outline: 0;
-}
-nav {
- text-align: center;
- height: var(--nav-height);
- line-height: var(--nav-height);
- font-size: 1.2em;
- opacity: 0;
- color: var(--nav-color);
- background-color: var(--bg-color);
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: 1;
- a {
- color: var(--nav-color);
- text-decoration: none;
- cursor: pointer;
- }
-}
-nav:hover {
- opacity: 1;
-}
diff --git a/content/jsweblabels.html b/content/jsweblabels.html
@@ -17,7 +17,6 @@ type: page
</tr>
</thead>
<tbody>
- {{< js-label asset="js/composer.js" license-slug="GNU-AGPL-3.0-or-later" license-url="http://www.gnu.org/licenses/agpl-3.0.html" >}}
<tr>
<td><a href="/js/mathjax-3.0.1/tex-chtml.js">/js/mathjax-3.0.1/tex-chtml.js</a></td>
<td><a href="http://www.apache.org/licenses/LICENSE-2.0">Apache-2.0-only</a></td>
diff --git a/layouts/composer/single.html b/layouts/composer/single.html
@@ -2,16 +2,19 @@
<html lang="en">
<head>
{{ partial "head-base.html" . }}
- {{- $style := resources.Get "css/composer.scss" | toCSS | minify | fingerprint }}
- <link rel="stylesheet" type="text/css" href="{{ $style.RelPermalink }}">
+ <style>
+{{ (resources.Get "css/composer.css").Content | safeCSS }}
+ </style>
</head>
<body>
<nav>
<span id="word-count">0 words · 0 minutes</span> · <a onclick="toggleTheme()">Toggle theme</a> · <a onclick="toggleFont()">Toggle font</a>
</nav>
<textarea id="composer" placeholder="Start writing..." autofocus></textarea>
- {{- $js := resources.Get "js/composer.js" | minify | fingerprint }}
- <script type="text/javascript" src="{{ $js.RelPermalink }}"></script>
- <a href="/jsweblabels/" rel="jslicense" style="display: none;">JavaScript Web Labels</a>
+ <script type="text/javascript">
+{{ printf "// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later" | safeJS }}
+{{ (resources.Get "js/composer.js").Content | safeJS }}
+{{ printf "// @license-end" | safeJS }}
+ </script>
</body>
</html>
