First (?) commit (0.10.4)

.gitignore

@@ -2,3 +2,4 @@ node_modules
 /*.log
 .idea/
 size-plugin.json
+dist/

package.json

@@ -1,32 +1,38 @@
 {
   "private": false,
   "name": "bluelib",
-  "version": "0.8.1",
+  "version": "0.10.3",
   "license": "AGPL-3.0-or-later",
-  "main": "src/index.js",
+  "source": "src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.module.js",
+  "unpkg": "dist/index.umd.js",
+  "files": ["dist/*"],
   "scripts": {
     "start": "preact watch",
-    "build": "preact build --no-prerender --dest docs && git add docs",
+    "dist": "microbundle && npm publish"
-    "ghpages": "npm run -s build && git add . && cross-env-shell git commit -m \"$npm_package_version\" && git push && cross-env-shell hub release create -m \"$npm_package_version\" \"$npm_package_version\" && cross-env-shell sentry-cli releases set-commits \"$npm_package_version\" --auto && cross-env-shell sentry-cli releases deploys \"$npm_package_version\" new --env production -n \"gh-pages\""
   },
   "devDependencies": {
     "cross-env": "^7.0.2",
-    "preact-cli": "^3.0.0-rc.14"
+    "preact-cli": "^3.0.0-rc.14",
+    "webpack-cli": "^3.3.11",
+    "microbundle": "^0.12.1"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-regular-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@fortawesome/react-fontawesome": "^0.1.11",
-    "css-loader": "^3.5.3",
+    "css-loader": "^3.6.0",
     "file-loader": "^5.0.2",
-    "less": "^3.11.1",
+    "less": "^3.11.3",
     "less-loader": "^5.0.0",
     "preact": "^10.4.4",
     "preact-render-to-string": "^5.1.8",
     "react-syntax-highlighter": "^12.2.1",
     "showdown": "^1.9.1",
-    "style-loader": "^1.2.1"
+    "style-loader": "^1.2.1",
+    "webpack": "^4.43.0"
   }
 }

preact.config.js

@@ -1,6 +1,3 @@
-const DefinePlugin = require("webpack/lib/DefinePlugin");
-
-
 export default function (config, env, helpers) {
     // noinspection JSUnresolvedVariable
     config.resolve.alias["react"] = "preact/compat";

src/components/Elements/Timer.less

@@ -1,4 +1,4 @@
-@import "../../styles/constants";
+@import "../../styles/constants.less";
 
 .timer {
     display: grid;
@@ -42,6 +42,7 @@
 
 .unknown {
     color: @magenta;
+    border: 2px solid fade(@magenta, 20%);
 
     .count {
         color: @magenta;
@@ -50,6 +51,7 @@
 
 .expired {
     color: @red;
+    border: 2px solid fade(@red, 20%);
 
     .count {
         color: @red;

src/components/Layout/Footer.js

@@ -1,18 +0,0 @@
-import style from './Footer.less';
-import { Component } from 'preact';
-
-export default function(props) {
-	return (
-		<div class={style.footer}>
-			© {new Date().getFullYear()}
-			&nbsp;-&nbsp;
-			<a href={"https://steffo.eu/"}>Stefano Pigozzi</a>
-			&nbsp;-&nbsp;
-			<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
-			&nbsp;-&nbsp;
-			<a href="https://github.com/Steffo99/appuntiweb">uni.steffo.eu {process.env.RELEASE}</a>
-			&nbsp;-&nbsp;
-			<a href={"https://ko-fi.com/steffo"}>Supportami</a>
-		</div>
-	);
-}

src/components/Layout/Footer.less

@@ -1,8 +0,0 @@
-@import "../../styles/constants.less";
-
-.footer {
-  margin-top: 8px;
-  color: @accent;
-  text-align: center;
-  font-size: x-small;
-}

src/components/Rendering/BLatex.js

@@ -1,7 +1,7 @@
-import Latex from "./Latex";
+import Latex, {LatexDisplay} from "./Latex";
 
 export default function (props) {
     return (
-        <Latex inline={false}>{props.children}</Latex>
+        <Latex inline={false} display={LatexDisplay.BLOCK}>{props.children}</Latex>
     );
 }

src/components/Rendering/ILatex.js

@@ -1,7 +1,7 @@
-import Latex from "./Latex";
+import Latex, {LatexDisplay} from "./Latex";
 
 export default function (props) {
     return (
-        <Latex inline={true}>{props.children}</Latex>
+        <Latex inline={true} display={LatexDisplay.INLINE}>{props.children}</Latex>
     );
 }

src/components/Rendering/Latex.js

@@ -2,38 +2,61 @@ import style from './Latex.less';
 import {useContext} from "preact/hooks";
 import LatexRenderColor from "../../contexts/LatexRenderColor";
 import LatexDefaultInline from "../../contexts/LatexDefaultInline";
+import LatexDefaultDisplay from "../../contexts/LatexDefaultDisplay";
+import stripTabs from "../../utils/stripTabs";
+
+export const LatexDisplay = Object.freeze({
+    INLINE: style.inline,
+    BLOCK: style.block,
+})
 
 export default function(props) {
-	// black, blue, brown, cyan, darkgray, gray, green, lightgray, lime, magenta, olive, orange, pink, purple, red, teal, violet, white, yellow
+    // black, blue, brown, cyan, darkgray, gray, green, lightgray, lime, magenta, olive, orange, pink, purple, red, teal, violet, white, yellow
-	let renderColor = useContext(LatexRenderColor);
+    let renderColor = useContext(LatexRenderColor);
-	let defaultInline = useContext(LatexDefaultInline);
+    let defaultInline = useContext(LatexDefaultInline);
+    let defaultDisplay = useContext(LatexDefaultDisplay);
 
-	let is_inline;
+    let inline;
-	if(props.inline === undefined) {
+    if(props.inline === undefined) {
-		is_inline = defaultInline;
+        inline = defaultInline;
-	}
+    }
-	else {
+    else {
-		is_inline = props.inline;
+        inline = props.inline;
-	}
+    }
 
-	if(is_inline) {
+    let display;
-		let equation = `\\inline {\\color{${renderColor}} ${props.children} }`;
+    if(props.display === undefined) {
-		return (
+        if(defaultDisplay === null) {
-			<img src={`https://latex.codecogs.com/svg.latex?${equation}`}
+            display = LatexDisplay.INLINE;
-				 alt={props.children}
+        }
-				 title={props.children}
+        else {
-				 class={style.latex + " " + style.inline}
+            display = defaultDisplay;
-			/>
+        }
-		);
+    }
-	}
+    else {
-	else {
+        display = props.display;
-		let equation = `{\\color{${renderColor}} ${props.children} }`;
+    }
-		return (
+
-			<img src={`https://latex.codecogs.com/svg.latex?${equation}`}
+    let contents = stripTabs(props.children);
-				 alt={props.children}
+
-				 title={props.children}
+    if(inline) {
-				 class={style.latex + " " + style.block}
+        let equation = `\\inline {\\color{${renderColor}} ${contents} }`;
-			/>
+        return (
-		);
+            <img src={`https://latex.codecogs.com/svg.latex?${equation}`}
-	}
+                 alt={contents}
+                 title={contents}
+                 class={style.latex + " " + display}
+            />
+        );
+    }
+    else {
+        let equation = `{\\color{${renderColor}} ${contents} }`;
+        return (
+            <img src={`https://latex.codecogs.com/svg.latex?${equation}`}
+                 alt={contents}
+                 title={contents}
+                 class={style.latex + " " + display}
+            />
+        );
+    }
 }

src/contexts/LatexDefaultDisplay.js

@@ -0,0 +1,3 @@
+import {createContext} from "preact";
+
+export default createContext(null);

src/index.js

@@ -1,21 +1,30 @@
-import Box from "./components/Elements/Box"
+import Box from "./components/Elements/Box";
 import {BoxColors} from "./components/Elements/Box";
-import Image from "./components/Elements/Image"
+import Image from "./components/Elements/Image";
 import Panel from "./components/Elements/Panel";
 import Section from "./components/Elements/Section";
 import TablePanel from "./components/Elements/TablePanel";
 import Timer from "./components/Elements/Timer";
 import Todo from "./components/Elements/Todo";
-import Footer from "./components/Layout/Footer";
+
 import Split from "./components/Layout/Split";
-import Code from "./components/Rendering/Code";
+
-import Latex from "./components/Rendering/Latex";
 import BLatex from "./components/Rendering/BLatex";
+import Code from "./components/Rendering/Code";
 import ILatex from "./components/Rendering/ILatex";
+import Latex from "./components/Rendering/Latex";
+import {LatexDisplay} from "./components/Rendering/Latex";
+import Markdown from "./components/Rendering/Markdown";
 import PLatex from "./components/Rendering/PLatex";
+
+import LatexDefaultDisplay from "./contexts/LatexDefaultDisplay";
 import LatexDefaultInline from "./contexts/LatexDefaultInline";
 import LatexRenderColor from "./contexts/LatexRenderColor";
-import Markdown from "./components/Rendering/Markdown";
+
+import theme from "./styles/theme.less";
+
+import stripTabs from "./utils/stripTabs";
+
 
 export {
     Box,
@@ -26,39 +35,17 @@ export {
     TablePanel,
     Timer,
     Todo,
-    Footer,
     Split,
-    Code,
-    Latex,
     BLatex,
+    Code,
     ILatex,
+    Latex,
+    LatexDisplay,
+    Markdown,
     PLatex,
+    LatexDefaultDisplay,
     LatexDefaultInline,
     LatexRenderColor,
-    Markdown,
+    theme,
-};
+    stripTabs
-
-
-import {Fragment} from "preact";
-// noinspection JSUnusedGlobalSymbols
-export default function() {
-    require("./styles/theme.less");
-    return (
-        <Fragment>
-            <h1>
-                bluelib
-            </h1>
-            <Split>
-                <Box>
-                    Hi. I'm a box!
-                </Box>
-                <Box color={BoxColors.RED}>
-                    Hi. I'm a box, but I'm red!
-                </Box>
-                <Box color={BoxColors.LIME}>
-                    Hi. I was here third!
-                </Box>
-            </Split>
-        </Fragment>
-    )
 }

src/styles/theme.less

@@ -1,154 +1,156 @@
 @import "constants.less";
 
-* {
+.bluelib {
-    box-sizing: border-box;
+    * {
-}
+        box-sizing: border-box;
-
-body {
-    background-color: @bg;
-    color: @fg;
-    font-family: @sans;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin-top: 4px;
-    margin-bottom: 4px;
-    color: @accent;
-    font-family: @title;
-    font-weight: normal;
-    text-align: center;
-}
-
-// By default h1 are as large as h2
-h1 {
-    font-size: xx-large;
-}
-
-a {
-    color: @link;
-    text-decoration: none;
-
-    &:hover {
-        color: @linkhover;
     }
 
-    &:active {
+    body {
-        color: @linkactive;
+        background-color: @bg;
-    }
-}
-
-img, iframe {
-    max-width: 100%;
-    max-height: 300px;
-    border-radius: 4px;
-}
-
-pre, code {
-    font-family: @mono;
-    font-size: 14px;
-}
-
-blockquote {
-    color: @fg;
-    border-left: 3px solid @plusplusplusplus;
-    background-color: @plus;
-    padding: 4px 4px 4px 8px;
-    margin: 8px 0;
-}
-
-input[type="text"], input[type="password"] {
-    color: @fg;
-    background-color: @bg;
-    border: 1px solid @plusplus;
-    border-radius: 4px;
-    padding: 4px;
-    font-size: medium;
-
-    &:disabled, &.disabled {
-        color: @disabledfg;
-        background-color: @disabledbg;
-        border-style: dotted;
-        cursor: not-allowed;
-    }
-}
-
-button {
-    color: @fg;
-    background-color: @bg;
-    border: 1px solid @plusplus;
-    border-radius: 4px;
-    padding: 4px;
-    font-size: medium;
-
-    &:hover, &.hover {
-        background-color: @plusplus;
-        border: 1px solid @fg;
         color: @fg;
+        font-family: @sans;
     }
 
-    &:active, &.active {
+    h1, h2, h3, h4, h5, h6 {
-        background-color: fade(@accent, 20%);
+        margin-top: 4px;
-        border: 1px solid @accent;
+        margin-bottom: 4px;
         color: @accent;
+        font-family: @title;
+        font-weight: normal;
+        text-align: center;
     }
 
-    &:disabled, &.disabled {
+    // By default h1 are as large as h2
-        color: @disabledfg;
+    h1 {
-        background-color: @disabledbg;
+        font-size: xx-large;
-        border-style: dotted;
-        cursor: not-allowed;
     }
-}
 
-hr {
+    a {
-    border: 1px solid @plusplusplusplus;
+        color: @link;
-    margin-top: 24px;
+        text-decoration: none;
-    margin-bottom: 24px;
-}
 
-table {
+        &:hover {
-    border-spacing: 0;
+            color: @linkhover;
-    border: 2px solid @plusplus;
+        }
-    background-color: @plus;
-    border-collapse: collapse;
 
-    thead, tbody {
+        &:active {
-        th, td {
+            color: @linkactive;
-            padding: 4px;
-            border: 1px solid @plusplus;
         }
     }
 
-    thead {
+    img, iframe {
-        background-color: @plusplus;
+        max-width: 100%;
+        max-height: 300px;
+        border-radius: 4px;
+    }
+
+    pre, code {
+        font-family: @mono;
+        font-size: 14px;
+    }
+
+    blockquote {
+        color: @fg;
+        border-left: 3px solid @plusplusplusplus;
+        background-color: @plus;
+        padding: 4px 4px 4px 8px;
+        margin: 8px 0;
+    }
+
+    input[type="text"], input[type="password"] {
+        color: @fg;
+        background-color: @bg;
+        border: 1px solid @plusplus;
+        border-radius: 4px;
+        padding: 4px;
+        font-size: medium;
+
+        &:disabled, &.disabled {
+            color: @disabledfg;
+            background-color: @disabledbg;
+            border-style: dotted;
+            cursor: not-allowed;
+        }
+    }
+
+    button {
+        color: @fg;
+        background-color: @bg;
+        border: 1px solid @plusplus;
+        border-radius: 4px;
+        padding: 4px;
+        font-size: medium;
+
+        &:hover, &.hover {
+            background-color: @plusplus;
+            border: 1px solid @fg;
+            color: @fg;
+        }
+
+        &:active, &.active {
+            background-color: fade(@accent, 20%);
+            border: 1px solid @accent;
+            color: @accent;
+        }
+
+        &:disabled, &.disabled {
+            color: @disabledfg;
+            background-color: @disabledbg;
+            border-style: dotted;
+            cursor: not-allowed;
+        }
+    }
+
+    hr {
+        border: 1px solid @plusplusplusplus;
+        margin-top: 24px;
+        margin-bottom: 24px;
+    }
+
+    table {
+        border-spacing: 0;
+        border: 2px solid @plusplus;
+        background-color: @plus;
+        border-collapse: collapse;
+
+        thead, tbody {
+            th, td {
+                padding: 4px;
+                border: 1px solid @plusplus;
+            }
+        }
+
+        thead {
+            background-color: @plusplus;
+            color: @accent;
+        }
+    }
+
+    li {
+        margin: 10px 0;
+    }
+
+    p:first-child {
+        margin-top: 0;
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+
+    b {
         color: @accent;
     }
-}
 
-li {
+    abbr[title] {
-    margin: 10px 0;
+        cursor: help;
-}
+    }
 
-p:first-child {
+    aside {
-    margin-top: 0;
+        margin: 4px 0;
-}
+        padding: 4px;
-
+        font-size: smaller;
-p:last-child {
+        background-color: @plus;
-    margin-bottom: 0;
+        border-radius: 4px;
-}
+    }
-
-b {
-    color: @accent;
-}
-
-abbr {
-    cursor: help;
-}
-
-aside {
-    margin: 4px 0;
-    padding: 4px;
-    font-size: smaller;
-    background-color: @plus;
-    border-radius: 4px;
 }