Nice looking hero image

themes/acoeur/assets/ananke/css/custom.css

@@ -2,6 +2,10 @@
 	transition: all 1s;
 }
 
+body > header {
+	text-shadow: 0 0 4px black;
+}
+
 .breadcrumb {
 	display: none;
 	padding: 0;

themes/acoeur/assets/js/misc.js

@@ -1,3 +1,6 @@
+/*
+ * Some javascript trick to sleep for some number of seconds
+ */
 const sleep = (seconds) => new Promise(resolve => {
   document.body.classList.add('sleeping')
   setTimeout(() => {
@@ -5,3 +8,13 @@ const sleep = (seconds) => new Promise(resolve => {
     resolve()
   }, seconds * 1000)
 })
+
+/*
+ * From the current URL generate an UUID
+ */
+getUuidFromUrl = (pathname = document.location.pathname) =>
+  pathname
+    .split('')
+    .reverse()
+    .filter(l => l.match(/[0-9a-f]/))
+    .join('')

themes/acoeur/assets/js/notes.js

@@ -10,7 +10,7 @@ note = (context, freq, counter) => {
   // console.log("Note n°", counter, freq)
 
   const oscil = context.createOscillator()
-  oscil.type = 'triangle'
+  oscil.type = 'sine'
   oscil.frequency.value = freq
 
   const gainNode = context.createGain()
@@ -20,37 +20,27 @@ note = (context, freq, counter) => {
   const notesPerSecond = 5 // In Hertz
   // All are in seconds
   const start = counter / notesPerSecond
-  const duration = 1.2 / notesPerSecond
+  const duration = 1 / notesPerSecond
   const ramp = .2 / notesPerSecond / 3 // Exponential increase
 
   // Increase volume
-  gainNode.gain.setTargetAtTime(1, start, ramp)
-  // Decrease volume
-  gainNode.gain.setTargetAtTime(0, start + duration - ramp * 3, ramp)
-
+  gainNode.gain.linearRampToValueAtTime(1, start)
   oscil.start(start)
+
+  // Decrease volume
+  gainNode.gain.exponentialRampToValueAtTime(0.001, start + 1);
   oscil.stop(start + duration)
 }
 
-/*
- * From the current URL generate an UUID
- */
-getUuidFromUrl = () =>
-  document.location.pathname
-    .split('')
-    .reverse()
-    .filter(l => l.match(/[0-9a-f]/))
-    .join('')
-
 /*
  * Launch notes based on the current URL
  */
 launchNotes = (event, counter = 0, uuid = getUuidFromUrl()) => {
   if (counter >= uuid.length || counter >= 5) return
 
-  const context = new AudioContext()
+  const context = new (window.AudioContext || window.webkitAudioContext)();
 
-  const freq = tons[parseInt(uuid[counter], 16) % tons.length] / 2
+  const freq = tons[parseInt(uuid[counter], 16) % tons.length]
   // freq *= Math.max(1, parseInt(uuid[counter], 16)) / Math.max(1, parseInt(uuid[counter + 1], 16))
   // freq = Math.min(2000, Math.round(freq))
 
@@ -58,3 +48,5 @@ launchNotes = (event, counter = 0, uuid = getUuidFromUrl()) => {
 
   launchNotes(event, counter + 1, uuid)
 }
+
+// document.onclick = launchNotes

themes/acoeur/assets/js/prettify.js

@@ -0,0 +1,25 @@
+/**
+ * Generate some random css effects on a specific item
+ */
+
+const nextDigit = (uuid, counter) => parseInt(uuid[counter], 16)
+
+const generateColor = (uuid, counter = 0) =>
+	`rgb(${nextDigit(uuid, counter) * 16 + nextDigit(uuid, counter + 1)},
+		${nextDigit(uuid, counter + 2) * 16 + nextDigit(uuid, counter + 3)},
+		${nextDigit(uuid, counter + 4) * 16 + nextDigit(uuid, counter + 5)})`
+
+const prettify = (element, uuid = getUuidFromUrl()) => {
+	if (element.style.backgroundImage || uuid.length < 6) return
+
+	element.style.backgroundImage = `linear-gradient(black, ${generateColor(uuid)}, ${generateColor(uuid, 6)})`
+	element.style.boxShadow = `0 0 1em inset ${generateColor(uuid, 6)}`
+
+	Array.from(element.children)
+		.forEach(c => c.style.backgroundColor = 'transparent')
+}
+
+prettify(document.querySelector('body > header'))
+
+Array.from(document.querySelectorAll('a.hero-pill'))
+	.forEach(element => prettify(element, getUuidFromUrl(element.href)))

themes/acoeur/assets/js/prop.js

@@ -114,5 +114,5 @@ uuid = () => {
   const temp_url = URL.createObjectURL(new Blob())
   const uuid = temp_url.toString()
   URL.revokeObjectURL(temp_url)
-  return uuid.substr(uuid.lastIndexOf('/') + 1) // remove prefix (e.g. blob:null/, blob:www.test.com/, ...)
+  return uuid.substring(uuid.lastIndexOf('/') + 1) // remove prefix (e.g. blob:null/, blob:www.test.com/, ...)
 }

themes/acoeur/layouts/_default/group.html

@@ -9,10 +9,17 @@
   {{ end }}
 
   {{ range .Pages }}
-  {{ .Render "summary-with-image" }}
+  {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
+  <article class="bb b--black-10 w-100 mb4 bg-white pa3-ns flex flex-column flex-row-ns relative">
+    {{ if $featured_image }}
+    <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
+    {{ end }}
+    {{ .Title }}
+    -
     {{ range (.Paginate .RegularPagesRecursive).Pages }}
     {{ .Title }}
     {{ end }}
+  </article>
   {{ end }}
 </section>
 {{ end }}

themes/acoeur/layouts/_default/summary-with-image.html

@@ -9,9 +9,12 @@
       <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
     </a>
   </div>
+  {{ else }}
+  <a class="hero-pill fl w-10-ns bg-black mr3"
+     href="{{.RelPermalink}}"></a>
   {{ end }}
 
-  <div class="blah w-100{{ if $featured_image }} w-60-ns{{ end }}">
+  <div class="blah w-100{{ if $featured_image }} w-60-ns{{ else }} w-90-ns{{ end }}">
     <header>
       <time class="db f6 fr" datetime="{{ .Date }}">
         {{ .Date | time.Format .Site.Params.date_format }}

themes/acoeur/layouts/partials/head-additions.html

@@ -1,7 +1,7 @@
 <script>const file = '{{ .File }}'</script>
 
 <script defer
-				src="https://unpkg.com/tinymce@6.3.0/tinymce.js"
+				src="https://unpkg.com/tinymce@6.3.1/tinymce.js"
 				referrerpolicy="origin"></script>
 
 <script defer
@@ -36,3 +36,7 @@
 {{ with resources.Get "js/notes.js" | minify | fingerprint }}
 <script defer src="{{ .Permalink }}"></script>
 {{ end }}
+
+{{ with resources.Get "js/prettify.js" | minify | fingerprint }}
+<script defer src="{{ .Permalink }}"></script>
+{{ end }}