svg.escobar.life

A simple SVG markup editor for the web

Commit: e4cf9723d8e7c38af4683c1a2e98eaf9bee9f460
Parent: 4927c08d3c3bc5884289ef4e613481730ceaa3fd
Author: Pablo <pablo-escobar@riseup.net>
Date: Thu, 1 Apr 2021 21:52:24 +0000

Fixed the PWA webmanifest

Also refactored the directory structure

Diffstat

9 files changed, 242 insertions, 233 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	Makefile	4	2	2
Added	assets/favicon.svg	2	2	0
Added	css/base.css	2	2	0
Added	css/ibm-plex.css	2	2	0
Added	css/styles.css	208	208	0
Deleted	css/svg.css	206	0	206
Modified	index.html	11	6	5
Deleted	js/app.webmanifest	20	0	20
Added	manifest.json	20	20	0

diff --git a/Makefile b/Makefile
@@ -7,12 +7,12 @@ build:
 	elm make --optimize --output=/tmp/elm-script.js src/Main.elm
 	uglifyjs --compress --mangle -o _site/js/script.min.js -- /tmp/elm-script.js
 	rm /tmp/elm-script.js
-	cp index.html css assets _site/ -r
+	cp index.html manifest.json css assets _site/ -r
 	cp js/* _site/js/
 
 deploy: build
 	rsync -rtv _site/ root@escobar.life:/var/www/svg
 
 auto-compile:
-	ls src/*.elm js/* css/* assets/* index.html Makefile | entr make build
+	ls src/*.elm js/* css/* assets/* manifest.json index.html Makefile | entr make build

diff --git a/assets/favicon.svg b/assets/favicon.svg
@@ -0,0 +1 @@
+/home/pablo/Documents/website/pablo/images/icons/favicon.svg+
\ No newline at end of file

diff --git a/css/base.css b/css/base.css
@@ -0,0 +1 @@
+/home/pablo/Documents/website/pablo/css/styles.css+
\ No newline at end of file

diff --git a/css/ibm-plex.css b/css/ibm-plex.css
@@ -0,0 +1 @@
+/home/pablo/Documents/website/pablo/css/ibm-plex.css+
\ No newline at end of file

diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,208 @@
+@import url('/css/base.css');
+
+:root {
+    align-self: center;
+    align-content: center;
+    align-items: center;
+    
+    cursor: default;
+    user-select: none;
+    scrollbar-width: none;
+
+    --selection: #A599E940;
+    --dark: #000011;
+
+    --tag: #9EFFFF;
+    --attribute: var(--accent);
+    --string: #A5FF90;
+    --comm: #B362FF;
+
+    --indent: 3em;
+}
+
+body {
+    height: 100vh;
+    min-height: 25vw;
+
+    padding: 0;
+}
+
+#container {
+    display: grid;
+
+    grid-gap: 1em;
+    grid-template-rows: 30vh auto;
+
+    height: calc(100% - 2em);
+    padding: 1em;
+}
+
+@media (orientation: landscape) {
+    #container {
+        grid-template-columns: 1fr 2fr;
+        grid-template-rows: 100%;
+    }
+}
+
+#container #display img {
+    grid-area: image;
+
+    max-width: 100% !important;
+    max-height: 100% !important;
+
+    justify-self: center;
+    align-self: center;
+}
+
+@media (orientation: portrait) {
+  #container #display img#image {
+    max-height: calc(30vh - 4.8em) !important;
+  }
+}
+
+#container, #container * {
+    transition: background-color .25s ease, fill .25s ease;
+}
+
+#container #display {
+    display: grid;
+
+    grid-template-rows: auto 2em;
+    grid-template-columns: repeat(3, 2em) auto;
+    grid-template-areas: "image  image  image  image"
+                         "button button button .";
+    grid-gap: 1em;
+
+    padding: 1em;
+    background: var(--foreground);
+}
+
+#container #display.dark {
+    background: var(--dark);
+}
+
+#container #display button {
+    grid-area: auto;
+    display: flex;
+
+    background: var(--background);
+    border: none;
+
+    cursor: pointer;
+}
+
+#container #display button img {
+    width: 70% !important;
+    height: 70% !important;
+    margin: auto;
+}
+
+#container #display img#error {
+    width: 100%;
+    height: 100%;
+}
+
+#container #display img#error, #container.error #display img#image {
+    display: none;
+}
+
+#container.error #display #error {
+    display: block;
+}
+
+#container #editor {
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+
+    overflow: hidden;
+    line-height: 1em;
+}
+
+#container #editor > * {
+    position: absolute;
+    will-change: transform;
+}
+
+#container #editor * {
+  margin: 0;
+}
+
+#container #editor textarea {
+    z-index: 1;
+
+    resize: none;
+    white-space: pre;
+    overflow: scroll;
+
+    width: calc(100% - var(--indent));
+    height: 100%;
+    margin-left: var(--indent);
+
+    font-family: 'IBM Plex Mono', 'EmojiOne Color', monospace;
+    font-size: 15pt;
+    line-height: 1.4em;
+    outline: none;
+
+    border: none;
+    background: transparent;
+
+    color: transparent;
+    caret-color: var(--foreground);
+
+    scrollbar-color: var(--foreground) transparent;
+    scrollbar-width: thin;
+}
+
+#container #editor textarea::-webkit-scrollbar,
+#container #editor textarea::-webkit-scrollbar-track {
+    width: 11px;
+    height: 11px;
+    background: transparent;
+    outline: none;
+}
+
+#container #editor textarea::-webkit-scrollbar-thumb {
+    background: var(--foreground);
+    outline: none;
+}
+
+#container #editor textarea::selection {
+    background: var(--selection);
+    color: transparent;
+}
+
+#noscript {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+#noscript > * {
+  margin: auto;
+}
+
+.elmsh {
+  line-height: 1.4em;
+}
+
+.elmsh-line::before {
+  display: inline-block;
+  width: calc(var(--indent) - 1em);
+  margin-right: 1em;
+
+  content: attr(data-elmsh-lc);
+  font-weight: bold;
+}
+
+.elmsh-comm {
+    font-style: italic;
+    color: var(--comm);
+}
+
+.elmsh , .elmsh7 { color: var(--foreground); }
+.elmsh1, .elmsh2, .elmsh6 { color: var(--string); }
+.elmsh3, .elmsh4 { color: var(--tag); }
+.elmsh5 { color: var(--attribute); }
+

diff --git a/css/svg.css b/css/svg.css
@@ -1,206 +0,0 @@
-@import url('/css/styles.css');
-
-:root {
-    align-self: center;
-    align-content: center;
-    align-items: center;
-    
-    cursor: default;
-    user-select: none;
-    scrollbar-width: none;
-
-    --selection: #A599E940;
-    --dark: #000011;
-
-    --tag: #9EFFFF;
-    --attribute: var(--accent);
-    --string: #A5FF90;
-    --comm: #B362FF;
-
-    --indent: 3em;
-}
-
-body {
-    height: 100vh;
-    min-height: 25vw;
-
-    padding: 0;
-}
-
-#container {
-    display: grid;
-
-    grid-gap: 1em;
-    grid-template-rows: 30vh auto;
-
-    height: calc(100% - 2em);
-    padding: 1em;
-}
-
-@media (orientation: landscape) {
-    #container {
-        grid-template-columns: 1fr 2fr;
-        grid-template-rows: 100%;
-    }
-}
-
-#container #display img {
-    grid-area: image;
-
-    max-width: 100% !important;
-    max-height: 100% !important;
-
-    justify-self: center;
-    align-self: center;
-}
-
-@media (orientation: portrait) {
-  #container #display img#image {
-    max-height: calc(30vh - 4.8em) !important;
-  }
-}
-
-#container, #container * {
-    transition: background-color .25s ease, fill .25s ease;
-}
-
-#container #display {
-    display: grid;
-
-    grid-template-rows: auto 2em;
-    grid-template-columns: repeat(3, 2em) auto;
-    grid-template-areas: "image  image  image  image"
-                         "button button button .";
-    grid-gap: 1em;
-
-    padding: 1em;
-    background: var(--foreground);
-}
-
-#container #display.dark {
-    background: var(--dark);
-}
-
-#container #display button {
-    grid-area: auto;
-
-    background: var(--background);
-    border: none;
-
-    cursor: pointer;
-}
-
-#container #display button img {
-    width: 100% !important;
-    height: 100% !important;
-}
-
-#container #display img#error {
-    width: 100%;
-    height: 100%;
-}
-
-#container #display img#error, #container.error #display img#image {
-    display: none;
-}
-
-#container.error #display #error {
-    display: block;
-}
-
-#container #editor {
-    position: relative;
-
-    width: 100%;
-    height: 100%;
-
-    overflow: hidden;
-    line-height: 1em;
-}
-
-#container #editor > * {
-    position: absolute;
-    will-change: transform;
-}
-
-#container #editor * {
-  margin: 0;
-}
-
-#container #editor textarea {
-    z-index: 1;
-
-    resize: none;
-    white-space: pre;
-    overflow: scroll;
-
-    width: calc(100% - var(--indent));
-    height: 100%;
-    margin-left: var(--indent);
-
-    font-family: 'IBM Plex Mono', 'EmojiOne Color', monospace;
-    font-size: 15pt;
-    line-height: 1.4em;
-    outline: none;
-
-    border: none;
-    background: transparent;
-
-    color: transparent;
-    caret-color: var(--foreground);
-
-    scrollbar-color: var(--foreground) transparent;
-    scrollbar-width: thin;
-}
-
-#container #editor textarea::-webkit-scrollbar,
-#container #editor textarea::-webkit-scrollbar-track {
-    width: 11px;
-    height: 11px;
-    background: transparent;
-    outline: none;
-}
-
-#container #editor textarea::-webkit-scrollbar-thumb {
-    background: var(--foreground);
-    outline: none;
-}
-
-#container #editor textarea::selection {
-    background: var(--selection);
-    color: transparent;
-}
-
-#noscript {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-#noscript > * {
-  margin: auto;
-}
-
-.elmsh {
-  line-height: 1.4em;
-}
-
-.elmsh-line::before {
-  display: inline-block;
-  width: calc(var(--indent) - 1em);
-  margin-right: 1em;
-
-  content: attr(data-elmsh-lc);
-  font-weight: bold;
-}
-
-.elmsh-comm {
-    font-style: italic;
-    color: var(--comm);
-}
-
-.elmsh , .elmsh7 { color: var(--foreground); }
-.elmsh1, .elmsh2, .elmsh6 { color: var(--string); }
-.elmsh3, .elmsh4 { color: var(--tag); }
-.elmsh5 { color: var(--attribute); }
-

diff --git a/index.html b/index.html
@@ -3,14 +3,15 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="stylesheet" href="css/svg.css">
+  <meta name="description" 
+        content="Edit the source code and preview the results">
 
+	<link rel="stylesheet" href="/css/styles.css">
   <link rel="icon" 
         type="image/svg+xml" 
-        sizes="16x16 24x24 32x32 48x48 64x64 128x128 256x256 512x512" 
-        href="https://pablo.escobar.life/images/icons/favicon.svg">
-
-  <link rel="manifest" href="js/app.webmanifest">
+        sizes="16x16 24x24 32x32 48x48 64x64 128x128 192x192 256x256 512x512" 
+        href="/assets/favicon.svg">
+  <link rel="manifest" href="manifest.json">
   <script src="js/script.min.js"></script>
 </head>
 <body>

diff --git a/js/app.webmanifest b/js/app.webmanifest
@@ -1,20 +0,0 @@
-{
-  "name": "RawSvg",
-  "short_name": "RawSvg",
-  "display": "standalone",
-  "icons": [
-    {
-      "src": "assets/icons/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/icons/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "start_url": "index.html",
-  "background_color": "#eeeeff",
-  "theme_color": "#B362FF"
-}

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,20 @@
+{
+  "name": "SVG Editor",
+  "short_name": "SVG Editor",
+  "description": "Edit the source code and preview the results",
+  "display": "standalone",
+  "lang": "en-US",
+  "category": ["productivity", "graphics"],
+  "start_url": "index.html",
+  "dir": "ltr",
+  "scope": "https://svg.escobar.life/",
+  "icons": [
+    {
+      "src": "assets/favicon.svg",
+      "sizes": "16x16 24x24 32x32 48x48 64x64 128x128 192x192 256x256 512x512",
+      "type": "image/xml+svg"
+    }
+  ],
+  "theme_color": "#0D1928",
+  "background_color": "#0D1928"
+}