added plausible

added matrix profile updated footer
5 months ago · 32d0b4b990
5 changed files with 52 additions and 14 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -12,7 +12,24 @@ steps:
    commands:
      - npm install
      - npm run build
-  - name: deploy
+  - name: deploy-develop
+    image: alpine
+    environment:
+      FTP_HOST:
+        from_secret: FTP_HOST
+      FTP_USERNAME:
+        from_secret: FTP_USERNAME
+      FTP_PASSWORD:
+        from_secret: FTP_PASSWORD
+    commands:
+      - which lftp || ( apk --update add lftp )
+      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/ dev.sp-magic.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
+    when:
+      branch:
+        - develop
+      event:
+        - push
+  - name: deploy-master
    image: alpine
    environment:
      FTP_HOST:
--- a/README.md
+++ b/README.md
@ -10,8 +10,8 @@ Website for sp-magic.de
 The following Parameters are set directly on the Web-Server.

 ```
-Content-Security-Policy: default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'
-Referrer-Policy: same-origin
+Content-Security-Policy: default-src 'none'; script-src 'self' https://plausible.sp-codes.de; object-src 'none'; style-src 'self'; img-src 'self' https://img.shields.io; media-src 'none'; frame-src 'none'; font-src 'self'; connect-src 'self' https://plausible.sp-codes.de
+Referrer-Policy: strict-origin-when-cross-origin
 Feature-Policy: sync-xhr 'self'
 Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
 X-Content-Type-Options: nosniff
@ -19,4 +19,4 @@ X-Frame-Options: DENY
 X-XSS-Protection: 1; mode=block
 ```

-There is also a `301` Redirect from http to https.
+There is also a `301` Redirect from http to https.
--- a/src/img/matrix.png
+++ b/src/img/matrix.png
--- a/src/index.html
+++ b/src/index.html
@ -24,13 +24,13 @@
    <meta property="og:description" content="Samuel Philipp - Software Engineer & Magician">
    <meta property="og:site_name" content="sp-magic">
    <meta property="og:image" content="https://sp-magic.de/img/sp-magic.jpg">
-    <!--<meta property="og:updated_time" content="">-->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="sp-magic">
    <meta name="twitter:description" content="Samuel Philipp - Magician from Magdeburg">
    <meta name="twitter:image" content="https://sp-magic.de/img/sp-magic.jpg">
    <link rel="shortcut icon" href="img/samuel.png">
    <link rel="stylesheet" href="css/main.min.css">
+    <script async defer data-domain="sp-magic.de" src="https://plausible.sp-codes.de/js/plausible.js"></script>
 </head>
 <body class="d-flex flex-column">
 <div class="container flex-column flex-grow p-3">
@ -54,10 +54,12 @@
    </div>

    <div class="d-flex justify-content-center flex-wrap my-3">
-        <div class="m-2"><a rel="me" href="https://social.tchncs.de/@samuel_p"><span
-                class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
        <div class="m-2"><a href="mailto:mail@sp-magic.de"><span
                class="fas fa-fw fa-4x fa-envelope"></span></a></div>
+        <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+            <img class="matrix-icon" src="../img/matrix.png" alt=""></a></div>
+        <div class="m-2"><a rel="me" href="https://social.tchncs.de/@samuel_p"><span
+                class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
    </div>

    <div class="d-flex justify-content-center mb-3">
@ -66,15 +68,21 @@
        </div>
    </div>
 </div>
-<div class="d-flex justify-content-end flex-wrap p-2 menu">
-    <div class="mr-3"><span class="far fa-copyright mr-2"></span>Samuel Philipp</div>
-    <div class="flex-grow-1"></div>
-    <div><a href="https://sp-codes.de/de/imprint"><span
+<div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
+    <div class="d-flex justify-content-start flex-wrap">
+        <div class="mr-3">Made with <span class="fas fa-heart highlight"></span> in Germany</div>
+        <div class="mr-3"><span class="far fa-copyright mr-2"></span>Samuel Philipp</div>
+    </div>
+    <div class="flex-sm-grow-1"></div>
+    <div class="d-flex justify-content-sm-start flex-wrap">
+    <div class="mr-3"><a href="https://sp-codes.de/de/imprint"><span
            class="fas fa-info-circle mr-2"></span>Impressum</a></div>
-    <div class="ml-3"><a href="https://sp-codes.de/de/privacy"><span
+    <div class="mr-3"><a href="https://sp-codes.de/de/privacy"><span
            class="fas fa-user-secret mr-2"></span>Datenschutz</a></div>
-    <div class="ml-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-magic.de"><span
+    <div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-magic.de"><span
            class="fas fa-code mr-2"></span>Code</a></div>
+    <div><a target="_blank" href="https://plausible.sp-codes.de/sp-magic.de"><span
+            class="fas fa-chart-line mr-2"></span>Statistiken</a></div>
 </div>
 </body>
 </html>
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@ -81,4 +81,17 @@ a:hover {
  .fa-4x {
    font-size: 2em;
  }
-}
+}
+
+.matrix-icon {
+  margin: 0 8px;
+  width: 4em;
+  height: 4em;
+}
+
+@media (max-width: 767.98px) {
+  .matrix-icon {
+    width: 2em;
+    height: 2em;
+  }
+}