From 53312c6b12d36bef7ab1de2b168357cd98f35cc0 Mon Sep 17 00:00:00 2001
From: Denys Konovalov <kontakt@denyskon.de>
Date: Tue, 28 Feb 2023 08:37:51 +0100
Subject: [PATCH] WIP

---
 assets/scss/_common.scss                   |  2 +-
 content/german/schulchronik/2018.md        |  2 +
 content/german/superhaufen/30-jahre-gcg.md | 32 +++++++++++++++
 content/german/superhaufen/_index.md       |  7 ++++
 layouts/partials/head.html                 |  2 +
 layouts/schulchronik/single.html           | 37 +++++++++++++----
 layouts/superhaufen/list.html              | 15 +++++++
 layouts/superhaufen/single.html            | 48 ++++++++++++++++++++++
 8 files changed, 137 insertions(+), 8 deletions(-)
 create mode 100644 content/german/superhaufen/30-jahre-gcg.md
 create mode 100644 content/german/superhaufen/_index.md
 create mode 100644 layouts/superhaufen/list.html
 create mode 100644 layouts/superhaufen/single.html

diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss
index 80f005f..497ff4c 100644
--- a/assets/scss/_common.scss
+++ b/assets/scss/_common.scss
@@ -432,7 +432,7 @@ details[open] summary {
 
 #wc-canvas {
   width: 100%;
-  height: 600px;
+  height: 400px;
 }
 
 .top-banner {
diff --git a/content/german/schulchronik/2018.md b/content/german/schulchronik/2018.md
index d6849a7..4af7379 100644
--- a/content/german/schulchronik/2018.md
+++ b/content/german/schulchronik/2018.md
@@ -16,6 +16,8 @@ pretext: >+
 
 topics:
   - title: 30-jähriges Jubiläum
+    superhaufen: true
+    superlink: 30-jahre-gcg
     content: |
       Inhalt
   - title: 'Projekt: "4 smarte Rallyes in Halle"'
diff --git a/content/german/superhaufen/30-jahre-gcg.md b/content/german/superhaufen/30-jahre-gcg.md
new file mode 100644
index 0000000..1bc66f0
--- /dev/null
+++ b/content/german/superhaufen/30-jahre-gcg.md
@@ -0,0 +1,32 @@
+---
+title: 30-jähriges Jubiläum
+draft: "false"
+bg_image: /media/backgrounds/page-title.webp
+description: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+image: /media/image.webp
+type: superhaufen
+gallery: false
+tiles:
+    - title: Lorem-1
+      image: /media/image.webp
+      bg_color: \#990000
+      icon: mdi mdi-pillar
+      font_color: white
+      content: |
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    - title: Lorem-2
+      image: /media/image.webp
+      bg_color: \#99ffff
+      icon: mdi mdi-head-cog-outline
+      font_color: black
+      content: |
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    - title: Lorem-3
+      image: /media/image.webp
+      bg_color: \#cc9966
+      icon: mdi mdi-fireplace
+      font_color: black
+      content: |
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+---
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
\ No newline at end of file
diff --git a/content/german/superhaufen/_index.md b/content/german/superhaufen/_index.md
new file mode 100644
index 0000000..c5291ce
--- /dev/null
+++ b/content/german/superhaufen/_index.md
@@ -0,0 +1,7 @@
+---
+title: Superhaufen
+draft: false
+bg_image: media/backgrounds/page-title.webp
+description: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+type: "superhaufen"
+---
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index af6ba4a..32221be 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -16,6 +16,8 @@
 
   <link rel="shortcut icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">
   <link rel="icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">
+
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tilt+Warp">
   
   <script src="{{ `plugins/wordcloud/wordcloud2.min.js` | absURL }}"></script>
 
diff --git a/layouts/schulchronik/single.html b/layouts/schulchronik/single.html
index 84dcba5..ebf98d5 100644
--- a/layouts/schulchronik/single.html
+++ b/layouts/schulchronik/single.html
@@ -28,9 +28,18 @@
           {{ partial "chronik-modal" (dict "id" "pretext" "title" .Title "content" .Params.pretext) }}
         {{ end }}
         <div id="wc-canvas"></div>
-        {{ $topics := slice (slice .Params.Title 100 "pretext") }}
+        {{ $topics := slice }}
+        {{ if .Params.pretext }}
+        {{ $topics = $topics | append (slice (slice .Params.Title 200 "pretext")) }}
+        {{ else }}
+        {{ $topics = $topics | append (slice (slice .Params.Title 200)) }}
+        {{ end }}
         {{ range .Params.topics }}
-          {{ $topics  = $topics | append (slice (slice .title 40 (md5 .title) )) }}
+          {{ if .superhaufen }}
+          {{ $topics  = $topics | append (slice (slice .title 30 .superlink  "superhaufen" )) }}
+          {{ else }}
+          {{ $topics  = $topics | append (slice (slice .title 30 (md5 .title) )) }}
+          {{ end }}
         {{ end }}
         {{ $topics = $topics | jsonify }}
         <script>
@@ -38,19 +47,33 @@
             document.getElementById('wc-canvas'),
             {
               click: function (item) {
-                if (item[1] != 100 || (item[1] == 100 && item[2] == "pretext")) {
-                  $('#' + item[2]).modal('show');
+                if (item[1] != 200 || (item[1] == 200 && item[2] == "pretext")) {
+                  if( item[3] == "superhaufen" ) {
+                    window.location.href = "/superhaufen/" + item[2];
+                  } else {
+                   $('#' + item[2]).modal('show');
+                  }
                 }
               },
               color: function (word, weight) {
-                return (weight === 100) ? '#ffbc3b' : '#1a1a37';
+                return (weight === 200) ? '#ffbc3b' : '#1a1a37';
               },
-              fontFamily: 'Fira Sans, serif',
+              hover: function(item, dimension, event) {
+                console.log("item:", item);
+                console.log("dimension:", dimension);
+                console.log("event:", event);
+                item && item[2] ? event.target.style.textDecorationLine = "underline" : null
+              },
+              fontFamily: 'Tilt Warp, serif',
               fontWeight: 700,
               list: JSON.parse("{{ $topics }}"),
               shrinkToFit: true,
-              gridSize: 25,
+              gridSize: 50,
               rotateRatio: 0,
+              shuffle: false,
+              shape: "square",
+              ellipticity: 1,
+              clearCanvas: true
             } 
           );
         </script>
diff --git a/layouts/superhaufen/list.html b/layouts/superhaufen/list.html
new file mode 100644
index 0000000..65793de
--- /dev/null
+++ b/layouts/superhaufen/list.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+
+<section class="section-sm pb-0">
+	<div class="container">
+		<div class="row">
+			{{ range .Data.Pages }}
+				<div class="col-lg-4 col-sm-6">
+				{{ .Render "fach" }}
+				</div>
+			{{ end }}
+		</div>
+	</div>
+</section>
+
+{{ end }}
diff --git a/layouts/superhaufen/single.html b/layouts/superhaufen/single.html
new file mode 100644
index 0000000..2a10a30
--- /dev/null
+++ b/layouts/superhaufen/single.html
@@ -0,0 +1,48 @@
+{{ define "main" }}
+
+<section class="section-sm pb-0">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 mb-4 content">
+        {{ .Content }}
+      </div>
+    </div>
+  </div>
+  <div class="container">
+    <div class="row">
+      {{ range .Params.tiles }}
+      <div id="{{ md5 .title }}" class="modal">
+        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">{{ .title }}</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <div class="content">
+                {{ .content | markdownify }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4 col-sm-6">
+        <div class="card border-primary rounded-0 hover-shadow mb-5">
+          <div class="container fb-tile-color" style="background-color:{{ .bg_color }};">
+            <i class="{{ .icon }} fb-tile-icon" style="color: {{ .font_color }};"></i>
+          </div>
+          <div class="card-body">
+            <h4 class="card-title">{{ .title | truncate 55 }}</h4>
+            <button type="button" class="btn btn-primary btn-sm" onclick="$('#{{ md5 .title }}').modal('show');">{{
+              i18n "show_more"}}</button>
+          </div>
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+
+{{ end }}
\ No newline at end of file