Finishing up the MVP

templates/fragments/age_restricted_check.html

@@ -0,0 +1,20 @@
+<dialog
+  x-init="localStorage.ageVerified !== 'true' && $el.showModal()"
+  @cancel.prevent
+  @close-modal="$el.close()"
+>
+  <header>Age restricted website</header>
+  <p>You must be 18+ to access this page.</p>
+  <p>
+    By confirming that you are at least 18 years old, your selection will be
+    saved to your browser to prevent this screen from appearing in the future.
+  </p>
+  <menu>
+    <button
+      @click="localStorage.ageVerified = 'true'; $event.target.dispatchEvent(new CustomEvent('close-modal', { bubbles: true }))"
+    >
+      I agree and am 18+ years old
+    </button>
+    <button @click="location.href = 'about:blank'">Take me back!</button>
+  </menu>
+</dialog>

templates/fragments/common_headers.html

@@ -1,7 +1,7 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <script src="/static/htmx.js"></script>
+<script defer src="/static/alpine.js"></script>
 <link rel="stylesheet" href="/static/water.css" />
 <link rel="stylesheet" href="/static/samey.css" />
 <meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />
-<meta property="og:site_name" content="{{ application_name }}" />

templates/fragments/get_full_image_media.html

@@ -1,7 +0,0 @@
-<img
-  hx-get="/media/{{ post.id }}"
-  hx-swap="outerHTML"
-  id="media"
-  src="/files/{{ post.media }}"
-  style="width: {{ post.width }}px; height: {{ post.height }}px; aspect-ratio: {{ post.width }} / {{ post.height }}; cursor: zoom-out"
-/>

templates/fragments/get_image_media.html

@@ -1,7 +1,8 @@
 <img
-  hx-get="/media/{{ post.id }}/full"
-  hx-swap="outerHTML"
   id="media"
+  @click="maximized = !maximized"
+  @keyup.enter="maximized = !maximized"
+  tabindex="0"
   src="/files/{{ post.media }}"
-  style="width: 100%; height: 100%; max-width: {{ post.width }}px; max-height: {{ post.height }}px; aspect-ratio: {{ post.width }} / {{ post.height }}; cursor: zoom-in"
+  :style="maximized ? { width: width + 'px', height: height + 'px', 'aspect-ratio': width + ' / ' + height, cursor: 'zoom-out' } : { width: '100%', height: '100%', 'max-width': width + 'px', 'max-height': height + 'px', 'aspect-ratio': width + ' / ' + height, cursor: 'zoom-in' }"
 />

templates/fragments/get_video_media.html

@@ -2,5 +2,5 @@
   id="media"
   src="/files/{{ post.media }}"
   controls="controls"
-  style="width: 100%; height: 100%; max-width: {{ post.width }}px; max-height: {{ post.height }}px; aspect-ratio: {{ post.width }} / {{ post.height }}"
-/>
+  :style="{ width: '100%', height: '100%', 'max-width': width + 'px', 'max-height': height + 'px', 'aspect-ratio': width + ' / ' + height }"
+></video>

templates/fragments/post_details.html

@@ -1,55 +1,58 @@
-<div id="post-details" hx-target="this" hx-swap="outerHTML">
-  <div>
-    <label>Title</label>
-    {% if let Some(title) = post.title %}{{ title }}{% else %}<em>None</em>{%
+<article id="post-details" hx-target="this" hx-swap="outerHTML">
+  <h2>
+    {% if let Some(title) = post.title %}{{ title }}{% else %}Details{%
     endif %}
-  </div>
-  <div>
-    <label>Description</label>
-    {% if let Some(description) = post.description %}{{ description | markdown
-    }}{% else %}
-    <p><em>None</em></p>
-    {% endif %}
-  </div>
-  <div>
-    <label>Is public?</label>
-    {% if post.is_public %}Yes{% else %}No{% endif %}
-  </div>
-  <div>
-    <label>Rating</label>
-    {% match post.rating.as_ref() %} {% when "u" %} Unrated {% when "s" %} Safe
-    {% when "q" %} Questionable {% when "e" %} Explicit {% else %} Unknown {%
-    endmatch %}
-  </div>
-  <div>
-    <label>Source(s)</label>
-    {% if sources.is_empty() %}
-    <em>None</em>{% else %}
-    <ul>
-      {% for source in sources %}
-      <li id="source-{{ source.id }}">
-        <a href="{{ source.url }}">{{ source.url }}</a>
-      </li>
-      {% endfor %}
-    </ul>
-    {% endif %}
-  </div>
-  <div>
-    <label>Type</label>
-    {{ post.media_type | capitalize }}
-  </div>
-  <div>
-    <label>Width</label>
-    {{ post.width }}px
-  </div>
-  <div>
-    <label>Height</label>
-    {{ post.height }}px
-  </div>
-  <div>
-    <label>Upload date</label>
-    {{ post.uploaded_at }}
-  </div>
+  </h2>
+  {% if let Some(description) = post.description %}
+  <div id="description">{{ description | markdown }}</div>
+  {% endif %}
+  <table>
+    <tr>
+      <th>Is public post?</th>
+      <td>
+        {% if post.is_public %}Yes{% else %}No{% endif %}
+      </td>
+    </tr>
+    <tr>
+      <th>Rating</th>
+      <td>
+        {% match post.rating.as_ref() %} {% when "u" %} Unrated {% when "s" %} Safe
+        {% when "q" %} Questionable {% when "e" %} Explicit {% else %} Unknown {%
+        endmatch %}
+      </td>
+    </tr>
+    <tr>
+      <th>Source(s)</th>
+      <td>
+        {% if sources.is_empty() %}
+        <em>None</em>{% else %}
+        <ul class="reset">
+          {% for source in sources %}
+          <li id="source-{{ source.id }}">
+            <a href="{{ source.url }}">{{ source.url }}</a>
+          </li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </td>
+    </tr>
+    <tr>
+      <th>Type</th>
+      <td>{{ post.media_type | capitalize }}</td>
+    </tr>
+    <tr>
+      <th>Width</th>
+      <td>{{ post.width }}px</td>
+    </tr>
+    <tr>
+      <th>Height</th>
+      <td>{{ post.height }}px</td>
+    </tr>
+    <tr>
+      <th>Upload date</th>
+      <td>{{ post.uploaded_at }}</td>
+    </tr>
+  </table>
   {% if can_edit %}
   <button hx-get="/post_details/{{ post.id }}/edit">Edit post</button>
   {% endif %}