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",
-    "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\""
+    "dist": "microbundle && npm publish"
   },
   "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",
-    "css-loader": "^3.5.3",
+    "@fortawesome/react-fontawesome": "^0.1.11",
+    "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,37 +2,60 @@ 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
     let renderColor = useContext(LatexRenderColor);
     let defaultInline = useContext(LatexDefaultInline);
+    let defaultDisplay = useContext(LatexDefaultDisplay);
 
-	let is_inline;
+    let inline;
     if(props.inline === undefined) {
-		is_inline = defaultInline;
+        inline = defaultInline;
     }
     else {
-		is_inline = props.inline;
+        inline = props.inline;
     }
 
-	if(is_inline) {
-		let equation = `\\inline {\\color{${renderColor}} ${props.children} }`;
+    let display;
+    if(props.display === undefined) {
+        if(defaultDisplay === null) {
+            display = LatexDisplay.INLINE;
+        }
+        else {
+            display = defaultDisplay;
+        }
+    }
+    else {
+        display = props.display;
+    }
+
+    let contents = stripTabs(props.children);
+
+    if(inline) {
+        let equation = `\\inline {\\color{${renderColor}} ${contents} }`;
         return (
             <img src={`https://latex.codecogs.com/svg.latex?${equation}`}
-				 alt={props.children}
-				 title={props.children}
-				 class={style.latex + " " + style.inline}
+                 alt={contents}
+                 title={contents}
+                 class={style.latex + " " + display}
             />
         );
     }
     else {
-		let equation = `{\\color{${renderColor}} ${props.children} }`;
+        let equation = `{\\color{${renderColor}} ${contents} }`;
         return (
             <img src={`https://latex.codecogs.com/svg.latex?${equation}`}
-				 alt={props.children}
-				 title={props.children}
-				 class={style.latex + " " + style.block}
+                 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,
-};
-
-
-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>
-    )
+    theme,
+    stripTabs
 }

src/styles/theme.less

@@ -1,5 +1,6 @@
 @import "constants.less";
 
+.bluelib {
     * {
         box-sizing: border-box;
     }
@@ -141,7 +142,7 @@ b {
         color: @accent;
     }
 
-abbr {
+    abbr[title] {
         cursor: help;
     }
 
@@ -152,3 +153,4 @@ aside {
         background-color: @plus;
         border-radius: 4px;
     }
+}