Initiating notes (inspo notes)

content/notes/_index.md

@@ -1,4 +1,4 @@
 ---
 title: Notes
-description: Here I compile a list of material I have enjoyed reading, watching or listening to.
+description: 'Here I compile a list of material I have enjoyed. It might include books, articles, videos, songs, podcasts, websites or other forms of media. The displayed date is when I accessed each piece.'
 ---

content/notes/createmore.md

@@ -0,0 +1,7 @@
+---
+title: "Create More Than You Consume if You Want to Worry Less and Feel More Fulfilled"
+date: 2024-04-03
+publisedDate: 2021-28-01
+author: Omar Itani
+source: https://www.omaritani.com/blog/create-more-consume-less
+---

content/notes/stopactinglikeurfamous.md

@@ -0,0 +1,10 @@
+---
+title: "Stop Acting Like You're Famous"
+date: 2024-04-17
+publishedDate: 2024-04-16
+author: "Ash Newman"
+source: "https://ajkprojects.com/stopactinglikeyourefamous"
+description: "jjsjs "
+---
+
+akfakkfkfak

content/notes/youarewhatyouread.md

@@ -0,0 +1,8 @@
+---
+title: 'You Are What You Read, Even If You Don’t Always Remember It'
+date: 2024-04-25
+publishedDate: 2024-04-09
+author: Jim Nielsen
+source: https://blog.jim-nielsen.com/2024/you-are-what-you-read/
+roughdate: true
+---

content/posts/inspo.md

@@ -0,0 +1,16 @@
+links.net
+
+modern info overload is like info scarcity or scarcity of links in the past
+now it's all muddy and full of shit so clean quality links is like a cleansing pipeline of enlightnment
+
+those that inspired me to get started
+
+fight perfectionism
+
+don't take yourself too seriously
+
+talk about notes, information diet, we are what we eat like we are what we read or goes through our brain literally
+
+talk about pocket, then omnivore
+
+talk about design of a notes interface to (a) encourage people reading my notes rather than going away from my site and (b) encourage users to access more of my notes by having them under collapsible sections.

themes/hugo-and-luis/archetypes/default.md

@@ -1,4 +1,4 @@
-+++
-title = '{{ replace .File.ContentBaseName "-" " " | title }}'
-date = {{ .Date }}
-+++
+---
+title: '{{ replace .File.ContentBaseName "-" " " | title }}'
+date: {{ now.Format "2006-01-02" }}
+---

themes/hugo-and-luis/layouts/_default/list.html

@@ -2,7 +2,7 @@
 
 <h1>{{ .Title }}</h1>
 
-<p>{{ .Description }}</p>
+<p>{{ .Description | safeHTML }}</p>
 
 <hr>
 

themes/hugo-and-luis/layouts/notes/list.html

@@ -0,0 +1,44 @@
+{{ partial "header.html" . }}
+
+<h1>{{ .Title }}</h1>
+
+<p>{{ .Description | safeHTML }}</p>
+
+<hr>
+
+{{ .Content }}
+
+{{ $pages := .Pages.ByDate.Reverse }}
+{{ $currentYear := 0 }}
+
+<div class="notes-list">
+  {{ range $pages }}
+  {{ $year := .Date.Format "2006" }}
+  {{ if ne $year $currentYear }}
+  {{ if ne $currentYear 0 }}
+</div>
+{{ end }}
+<h2 class="year-heading">{{ $year }}</h2>
+<div class="year-entries">
+  {{ $currentYear = $year }}
+  {{ end }}
+  <div class="note-entry">
+    <span class="note-date">{{ .Date.Format "Jan 2" }}</span>
+    <div class="note-content">
+      <div class="note-header">
+        <button class="note-expand-btn" aria-expanded="false" aria-controls="note-{{ .File.UniqueID }}">
+          <span class="sr-only">Expand note</span>
+          <span aria-hidden="true">▶</span>
+        </button>
+        <a href="{{ .Params.source }}" class="note-title" target="_blank" rel="noopener noreferrer">{{ .Title }}</a> - {{ .Params.author }} ({{ .Params.source | urls.Parse | replaceRE "^https?://(www\\.)?([^/]+).*" "$2"}})
+      </div>
+      <div id="note-{{ .File.UniqueID }}" class="note-description hidden">
+        <a href="{{ .RelPermalink }}" target="_blank" rel="noopener noreferrer">(Read in new tab)</a>{{ .Content }}
+      </div>
+    </div>
+  </div>
+  {{ end }}
+</div>
+</div>
+
+{{ partial "footer.html" . }}

themes/hugo-and-luis/static/css/style.css

@@ -26,16 +26,13 @@ body {
   transition: margin-top 0.5s ease-in-out;
 }
 
-/* margins in paragraphs (p) default above*/
-
 p {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
 #footer {
   margin-top: 2rem;
-  /* space footer down a bit */
 }
 
 h1 {
@@ -49,7 +46,98 @@ h3.date {
   font-weight: bold;
 }
 
-/* tooltip  *//* tooltip  */
+/* NOTES LIST */
+
+.note-entry {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 0.5rem;
+}
+
+.note-date {
+  flex: 0 0 80px;
+  color: #888;
+  font-size: 0.9em;
+}
+
+.note-content {
+  flex: 1;
+}
+
+.note-title {
+  text-decoration: none;
+  color: #4a0e77;
+  margin-right: 0.5rem;
+}
+
+.note-title:hover {
+  text-decoration: underline;
+}
+
+.note-expand-btn {
+  background: none;
+  border: none;
+  color: #4a0e77;
+  cursor: pointer;
+  padding: 0;
+  margin-right: 0.5rem;
+}
+
+.note-expand-btn span[aria-hidden="true"] {
+  display: inline-block;
+  font-size: 1em;
+  transition: transform 0.3s ease;
+}
+
+.note-expand-btn[aria-expanded="false"] span[aria-hidden="true"] {
+  transform: rotate(0deg);
+}
+
+.note-expand-btn[aria-expanded="true"] span[aria-hidden="true"] {
+  transform: rotate(0deg);
+}
+
+.note-description {
+  margin-top: 0.5rem;
+  color: #666;
+  font-size: 0.9em;
+  overflow: hidden;
+  display: none;
+}
+
+.note-description.expanded {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+
+.year-heading {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+  color: #333;
+}
+
+.year-entries {
+  margin-left: 1rem;
+}
+
+/* TOOLTIP */
+
 .tooltip-wrapper {
   position: relative;
   display: inline-block;
@@ -87,15 +175,13 @@ h3.date {
   text-decoration: underline;
 }
 
-/* Hover styles for non-touch devices */
 @media (hover: hover) and (pointer: fine) {
   .tooltip-wrapper:hover .tooltip-content {
     visibility: visible;
     opacity: 1;
   }
 }
 
-/* Active class for touch devices */
 .tooltip-content.active {
   visibility: visible;
   opacity: 1;
@@ -111,7 +197,6 @@ footer {
 hr {
   border: 0;
   margin: 0;
-  /*above we reset the defaults, otherwise hr wouldn't show*/
   height: 1px;
   background-image: linear-gradient(to left, purple, white);
 }
@@ -142,27 +227,23 @@ blockquote p {
   display: flex;
   justify-content: flex-end;
   color: white;
-  /*make it look like a button with rectangular pill shape*/
   padding: 0.1em 0.4em;
   margin: 0.1em 0;
   border: 1px solid none;
   border-radius: 10px;
-  /*remove underlines*/
   text-decoration: none;
 }
 
 .site-nav a:hover {
   background: rgba(200, 180, 220, 0.5);
-  color: purple
+  color: purple;
 }
 
 .site-nav .logo {
   font-weight: bold;
   padding-left: 1%;
-  /*logo different colour*/
   color: purple;
   justify-content: flex-start;
-
 }
 
 .main-menu {
@@ -207,7 +288,6 @@ blockquote p {
 /* SMALL SCREENS / MOBILE */
 
 @media screen and (max-width: 600px) {
-
   .main-menu {
     display: none;
     flex-direction: column;
@@ -228,7 +308,6 @@ blockquote p {
     transform: scaleY(1);
   }
 
-
   .menu-toggle {
     display: flex;
   }

themes/hugo-and-luis/static/js/features.js

@@ -28,4 +28,27 @@ document.addEventListener('DOMContentLoaded', function() {
       wrapper.addEventListener('mouseleave', () => wrapper.querySelector('.tooltip-content').classList.remove('active'));
     });
   }
+
+  // Expandable notes functionality using event delegation
+  document.querySelector('.notes-list').addEventListener('click', (e) => {
+    const button = e.target.closest('.note-expand-btn');
+    if (button) {
+      e.preventDefault();
+      const noteDescription = button.closest('.note-content').querySelector('.note-description');
+      const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+      noteDescription.classList.toggle('expanded');
+      button.setAttribute('aria-expanded', !isExpanded);
+      button.querySelector('[aria-hidden]').textContent = isExpanded ? '▶' : '▼';
+    }
+  });
+
+  // Close expanded notes when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.note-entry')) {
+      document.querySelectorAll('.note-expand-btn[aria-expanded="true"]').forEach(button => {
+        button.click();
+      });
+    }
+  });
 });