add elevator

README.md

@@ -67,6 +67,13 @@ Enable math rendering inline with `$` and blocks with `$$` pairs through [Temml]
 temml = true
 ```
 
+Enable the elevator:
+
+```toml
+[extra]
+elevator = true
+```
+
 Social buttons can be added. The available icon names are the file names without `.svg` in `static/social_icons/`.
 
 ```toml

config.toml

@@ -19,6 +19,7 @@ favicon = "/images/favicon.svg"
 theme = "auto"      # either `auto`, `dark` or `light`
 use_cdn = false
 temml = true
+elevator = true
 
 menu = [
     { name = "/posts", url = "/posts", weight = 1 },

package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "elevator.js": "^1.0.1"
+  },
+  "scripts": {
+    "post-update": "npm install --prefix ./static/ --only=production"
+  }
+}

sass/parts/_misc.scss

@@ -112,6 +112,25 @@ aside {
     clear: both;
 }
 
+.elevator-button {
+    color: var(--primary-color);
+    background-color: var(--accent-bg);
+    width: 2rem;
+    height: 2rem;
+    bottom: 30px;
+    right: 30px;
+    text-align: center;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    position: fixed;
+    visibility: hidden;
+    transition: opacity 1s;
+}
+
+.elevator-button:hover {
+    cursor:pointer;
+}
+
 @media all and (max-width:719px) {
     aside {
         // force to go full width for mobile

static/js/main.js

@@ -0,0 +1,14 @@
+// Elevator
+window.addEventListener('scroll', e => {
+    const threshold = 300;
+    document.querySelector('.elevator-button').style.visibility = window.scrollY > threshold ? 'visible' : 'hidden';
+    document.querySelector('.elevator-button').style.opacity = window.scrollY > threshold ? '1' : '0';
+});
+
+window.onload = function () {
+    var elevator = new Elevator({
+        element: document.querySelector('.elevator-button'),
+        mainAudio: '/audio/elevator/music.mp3',
+        endAudio: '/audio/elevator/ding.mp3'
+    });
+}

static/js/temml_config.js

@@ -0,0 +1,18 @@
+renderMathInElement(
+    document.body,
+    {
+        delimiters: [
+            { left: "$$", right: "$$", display: true },
+            // Put $ after $$.
+            { left: "$", right: "$", display: false },
+            { left: "\\(", right: "\\)", display: false },
+            { left: "\\begin{equation}", right: "\\end{equation}", display: true },
+            { left: "\\begin{align}", right: "\\end{align}", display: true },
+            { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
+            { left: "\\begin{gather}", right: "\\end{gather}", display: true },
+            { left: "\\begin{CD}", right: "\\end{CD}", display: true },
+            { left: "\\begin{multline}", right: "\\end{multline}", display: true },
+            { left: "\\[", right: "\\]", display: true }
+        ]
+    }
+);

static/package.json

@@ -0,0 +1 @@
+../package.json

templates/base.html

@@ -22,28 +22,16 @@
                 </small>
             </footer>
         {% endif %}
+
+        {% if config.extra.elevator | default(value=false) %}
+            <button class="elevator-button"> 🛗 </button>
+        {% endif %}
     </div>
 </body>
 
 {% if config.extra.temml | default(value=false) %}
-    <script>renderMathInElement(
-        document.body,
-        {
-            delimiters: [
-                { left: "$$", right: "$$", display: true },
-                // Put $ after $$.
-                {left: "$", right: "$", display: false},
-                { left: "\\(", right: "\\)", display: false },
-                { left: "\\begin{equation}", right: "\\end{equation}", display: true },
-                { left: "\\begin{align}",    right: "\\end{align}", display: true },
-                { left: "\\begin{alignat}",  right: "\\end{alignat}", display: true },
-                { left: "\\begin{gather}",   right: "\\end{gather}", display: true },
-                { left: "\\begin{CD}",       right: "\\end{CD}", display: true },
-                { left: "\\begin{multline}", right: "\\end{multline}", display: true },
-                { left: "\\[", right: "\\]", display: true }
-            ]
-        }
-    );</script>
+    <script type="text/javascript"
+        src="{{ get_url(path="/js/temml_config.js") }}">
+    </script>
 {% endif %}
-
 </html>

templates/partials/header.html

@@ -43,6 +43,19 @@
         {% endif %}
     {% endif %}
 
+    {# Elevator #}
+    {% if config.extra.temml | default(value=false) %}
+        {% if config.extra.use_cdn | default(value=false) %}
+            <script type="text/javascript"
+                src=" https://cdn.jsdelivr.net/npm/elevator.js@1.0.1/elevator.min.js ">
+            </script>
+        {% else %}
+            <script type="text/javascript"
+                src="{{ get_url(path="/node_modules/elevator.js/elevator.min.js") }}">
+            </script>
+        {% endif %}
+    {% endif %}
+
     {# Font from cdn or local #}
     {% if config.extra.use_cdn | default(value=false) %}
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/roboto@4.5.8/400.css">
@@ -80,10 +93,13 @@
 
     <link rel="stylesheet" type="text/css" media="screen" href={{ get_url(path="main.css") }} />
 
-
     {% if config.extra.stylesheets %}
         {% for stylesheet in config.extra.stylesheets %}
             <link rel="stylesheet" href="{{ get_url(path=stylesheet) }}">
         {% endfor %}
     {% endif %}
+
+    <script type="text/javascript"
+        src="{{ get_url(path="/js/main.js") }}">
+    </script>
 </head>