add View event link to embedded events

assets/styles/article.css

@@ -122,11 +122,6 @@ blockquote p {
     color: var(--color-text-mid);
 }
 
-.comments-quotes__outlink {
-    color: var(--color-link);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-}
 
 .comment--quote .metadata {
     flex-wrap: wrap;

assets/styles/components/_nostr_previews.scss

@@ -102,3 +102,18 @@
         outline-offset: 2px;
     }
 }
+
+.nostr-jumble-outlink {
+    color: var(--color-link);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+
+    &:hover {
+        color: var(--color-link-hover);
+    }
+}
+
+.nostr-preview-card__sep {
+    margin: 0 0.25rem;
+    color: var(--color-text-mid);
+}

assets/styles/nostr-previews.css

@@ -115,3 +115,19 @@
     outline: 2px solid var(--color-focus-ring);
     outline-offset: 2px;
 }
+
+/* Jumble feed viewer — shared by embedded previews and quote metadata */
+.nostr-jumble-outlink {
+    color: var(--color-link);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.nostr-jumble-outlink:hover {
+    color: var(--color-link-hover);
+}
+
+.nostr-preview-card__sep {
+    margin: 0 0.25rem;
+    color: var(--color-text-mid);
+}

templates/components/Molecules/NostrPreviewContent.html.twig

@@ -10,6 +10,11 @@
                 <p class="card-text">{{ tag[1] }}</p>
             {% endif %}
         {% endfor %}
+        {% if preview.id is defined and preview.id %}
+            <div class="card-footer nostr-preview-card__meta text-subtle">
+                <a href="https://jumble.imwald.eu/feed/notes/{{ preview.id }}" class="nostr-jumble-outlink" target="_blank" rel="noopener noreferrer">View event</a>
+            </div>
+        {% endif %}
     </div>
 {% elseif preview.type == 'nevent' %}
     {% if preview.kind == 9802 %}
@@ -37,6 +42,11 @@
                     </blockquote>
                 {% endif %}
             </div>
+            {% if preview.id is defined and preview.id %}
+                <div class="card-footer nostr-preview-card__meta text-subtle">
+                    <a href="https://jumble.imwald.eu/feed/notes/{{ preview.id }}" class="nostr-jumble-outlink" target="_blank" rel="noopener noreferrer">View event</a>
+                </div>
+            {% endif %}
         </div>
     {% else %}
         {% set is_longform = preview.kind == 30023 or preview.kind == 30024 %}
@@ -78,6 +88,10 @@
             </div>
             <div class="card-footer nostr-preview-card__meta text-subtle">
                 <small>{{ preview.created_at is defined ? preview.created_at|date('F j Y') : '' }}</small>
+                {% if preview.id is defined and preview.id %}
+                    <span class="nostr-preview-card__sep">·</span>
+                    <a href="https://jumble.imwald.eu/feed/notes/{{ preview.id }}" class="nostr-jumble-outlink" target="_blank" rel="noopener noreferrer">View event</a>
+                {% endif %}
             </div>
         </div>
     {% endif %}

templates/components/Organisms/Comments.html.twig

@@ -51,7 +51,7 @@
                         {% if cts is not null and cts != '' %}{{ cts|date('F j Y') }}{% endif %}
                         {% if cid != '' %}
                             <span class="comments-quotes__sep">·</span>
-                            <a href="https://jumble.imwald.eu/feed/notes/{{ cid }}" class="comments-quotes__outlink" target="_blank" rel="noopener noreferrer">View event</a>
+                            <a href="https://jumble.imwald.eu/feed/notes/{{ cid }}" class="nostr-jumble-outlink" target="_blank" rel="noopener noreferrer">View event</a>
                         {% endif %}
                     </small>
                 </div>