Add a way to debug information of a post by hovering over it (#25)

This information only exists while developing locally.
FAForever · Feb 25, 2025 · eff7ec8 · eff7ec8
1 parent 09e4720
commit eff7ec8
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 52 deletions.
diff --git a/src/_includes/post/featured.html b/src/_includes/post/featured.html
@@ -3,32 +3,46 @@
   - post: an instance of a post 
 {% endcomment %}
 
+<div class="post-card post-debug-container">
+  <div class="post-featured-container">
+    <div class="post-featured-item-container post-card">
+      <div class="post-featured-image-container">
+        {% include components/thumbnail.html path=include.post.image.path alt=include.post.image.alt %}
 
-<div class="post-featured-item-container post-card">
-  <div class="post-featured-image-container">
-    {% include components/thumbnail.html path=include.post.image.path alt=include.post.image.alt %}
+        {%- if include.post.event -%}
+          <span class="post-featured-meta">
+            {% include post/event/schedule.html event=include.post.event %}
+          </span>
+        {%- endif -%}
+      </div>
+      <div class="post-featured-text-container">
+        <h3 class="post-featured-header">{{ include.post.title | escape }}</h3>
 
-    {%- if include.post.event -%}
-      <span class="post-featured-meta">
-        {% include post/event/schedule.html event=include.post.event %}
-      </span>
-    {%- endif -%}
+        {% comment %} 
+          We can only support so many characters in the overview, therefore we truncate it. 
+        {% endcomment %}
+
+        <span class="post-featured-excerpt">
+          {{ include.post.excerpt | strip_html | truncate: 600 }}
+        </span>
+
+        <div class="post-featured-actions">
+          {% assign absolute_url_post = include.post.url | absolute_url %}
+          {% include components/copy-button.html title=include.post.title description=include.post.excerpt url=absolute_url_post %}
+          {% include components/url-button.html href=include.post.redirectURL %}
+        </div>
+      </div>
+    </div>
   </div>
-  <div class="post-featured-text-container">
-    <h3 class="post-featured-header">{{ include.post.title | escape }}</h3>
 
-    {% comment %} 
-      We can only support so many characters in the overview, therefore we truncate it. 
-    {% endcomment %}
+  {% if jekyll.environment != "production" %}
 
-    <span class="post-featured-excerpt">
-      {{ include.post.excerpt | strip_html | truncate: 600 }}
-    </span>
+    {% comment %}
+      This part is only shown while developing
+    {% endcomment %}
 
-    <div class="post-featured-actions">
-      {% assign absolute_url_post = include.post.url | absolute_url %}
-      {% include components/copy-button.html title=include.post.title description=include.post.excerpt url=absolute_url_post %}
-      {% include components/url-button.html href=include.post.redirectURL %}
+    <div class="post-debug-content">
+      <p>Priority: {{ include.post.priority | default: 'unknown' }}</p>
     </div>
-  </div>
-</div>
+  {% endif %}
+</div>
diff --git a/src/_includes/post/small.html b/src/_includes/post/small.html
@@ -3,41 +3,53 @@
   - post: an instance of a post
 {% endcomment %}
 
-<div class="post-small-image-container">
-  <div class="post-small-image-picture">
-    {% include components/thumbnail.html path=include.post.image.path alt=include.post.image.alt %}
-  </div>
-
+<div class="post-card post-debug-container">
+  <div class="post-small-item-container">
+    <div class="post-small-image-container">
+      <div class="post-small-image-picture">
+        {% include components/thumbnail.html path=include.post.image.path alt=include.post.image.alt %}
+      </div>
 
-    <span class="post-small-image-meta">
-      <div class="post-small-image-meta-schedule">
+      <div class="post-small-image-meta">
         {%- if include.post.event -%}
-          {% include post/event/schedule.html event=include.post.event %}
+        <div class="post-small-image-meta-schedule">
+            {% include post/event/schedule.html event=include.post.event %}
+          </div>
         {%- endif -%}
-      </div>
 
-      <div class="post-small-image-meta-actions">
-        {% include components/copy-button.html title=include.post.title description=include.post.excerpt url=include.post.url %}
+        <div class="post-small-image-meta-actions">
+          {% include components/copy-button.html title=include.post.title description=include.post.excerpt url=include.post.url %}
+        </div>
       </div>
-    </span>
+    </div>
 
-</div>
+    <div class="post-small-text-container">
+      <div class="post-small-text-body-container">
+        <h3 class="post-small-header">{{ include.post.title | escape }}</h3>
 
-<div class="post-small-text-container">
-  <div class="post-small-text-body-container">
-    <h3 class="post-small-header">{{ include.post.title | escape }}</h3>
+        {% comment %}
+          We can only support so many characters in the overview, therefore we truncate it.
+        {% endcomment %}
 
-    {% comment %}
-      We can only support so many characters in the overview, therefore we truncate it.
-    {% endcomment %}
+        <p class="post-small-excerpt"> 
+          {{ include.post.excerpt | strip_html | truncate: 600 }} 
+        </p>
+      </div>
 
-    <p class="post-small-excerpt"> 
-      {{ include.post.excerpt | strip_html | truncate: 600 }} 
-    </p>
+      <div class="post-small-actions">
+        {% include components/url-button.html href=include.post.redirectURL %}
+      </div>
+    </div>
   </div>
 
-  <div class="post-small-actions">
+  {% if jekyll.environment != "production" %}
 
-    {% include components/url-button.html href=include.post.redirectURL %}
-  </div>
-</div>
+    {% comment %}
+      This part is only shown while developing
+    {% endcomment %}
+
+    <div class="post-debug-content">
+      <p>Priority: {{ include.post.priority | default: 'unknown' }}</p>
+    </div>
+  {% endif %}
+</div>
diff --git a/src/_layouts/category_index.html b/src/_layouts/category_index.html
@@ -9,7 +9,7 @@
 <section class="wrapper">
   <ul class="post-small-item-list-container">
     {% for post in page.posts %}
-      <li class="post-small-item-container post-card">
+      <li>
         {% include post/small.html post=post %}
       </li>
     {% endfor %}

diff --git a/src/_sass/_variables.scss b/src/_sass/_variables.scss
@@ -4,6 +4,7 @@ $code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mo
 $base-font-size: 16px !default;
 $base-font-weight: 400 !default;
 $small-font-size: $base-font-size * 0.875 !default;
+$mini-font-size: $base-font-size * 0.650 !default;
 $base-line-height: 1.5 !default;
 
 $spacing-unit: 30px !default;

diff --git a/src/_sass/post/_common.scss b/src/_sass/post/_common.scss
@@ -1,6 +1,38 @@
 .post-card {
+  height: 100%;
+
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
   border: 1px solid var(--minima-border-color-01);
   border-radius: 4px;
   background-color: var(--minima-card-background-color);
 }
+
+// ------------------------------------------------------------------------- \\
+// Debugging functionality
+
+.post-debug-container {
+  position: relative; /* Needed for absolute positioning of tooltip */
+}
+
+.post-debug-content {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 0.5em;
+  border-radius: 5px;
+  font-size: 0.8rem;
+  white-space: nowrap;
+
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.post-debug-container:hover .post-debug-content {
+  opacity: 1;
+  visibility: visible;
+}
diff --git a/src/_sass/post/_small.scss b/src/_sass/post/_small.scss
@@ -23,6 +23,8 @@
   flex-wrap: wrap;
   align-content: flex-start;
   gap: 0.5rem 1rem;
+
+  height: 100%;
 
   &:focus-within {
     border: 1px solid var(--minima-border-color-02);

diff --git a/src/index.html b/src/index.html
@@ -19,12 +19,10 @@
 
 <section class="wrapper wrapper-body">
   <section class="top-container">
-    <div class="post-featured-container">
       {%- if featuredLivePosts.size > 0 -%}
         {% assign featuredLivePost = featuredLivePosts | first %}
         {% include post/featured.html post=featuredLivePost %}
       {%- endif -%}
-    </div>
     <div class="post-event-container ">
       <ul class="post-event-list post-card">
         {%- for postEvent in eventLivePosts -%}
@@ -46,7 +44,7 @@ <h4 class="post-event-header">Want to see your event here? Inform the promotions
   {%- if regularLivePosts.size > 0 -%}
     <ul class="post-small-item-list-container">
       {%- for post in regularLivePosts -%}
-        <li class="post-small-item-container post-card">
+        <li>
           {% include post/small.html post=post %}
         </li>
       {%- endfor -%}