[Posts] Add a wiki excerpt to the search page (#861)

app/controllers/posts_controller.rb

@@ -15,9 +15,22 @@ class PostsController < ApplicationController
     else
       @post_set = PostSets::Post.new(tag_query, params[:page], limit: params[:limit], random: params[:random])
       @posts = PostsDecorator.decorate_collection(@post_set.posts)
+
+      @query = tag_query.nil? ? [] : tag_query.strip.split(/ /, 2).compact_blank
+      if @query.length == 1
+        @wiki_page = WikiPage.titled(@query[0])
+        @wiki_text = @wiki_page.present? ? @wiki_page.body : ""
+        if @wiki_text.present?
+          @wiki_text = @wiki_text
+                       .gsub(/thumb #\d+ ?/, "")
+                       .strip
+                       .truncate(512)
+        end
+      end
+
       respond_with(@posts) do |format|
         format.json do
-          render json: @post_set.api_posts, root: 'posts'
+          render json: @post_set.api_posts, root: "posts"
         end
         format.atom
       end

app/javascript/packs/application.js

@@ -34,6 +34,8 @@ importAll(require.context('../src/javascripts', true, /\.js(\.erb)?$/));
 
 require.context("../../../public/images", true)
 
+export { default as LStorage } from "../src/javascripts/utility/storage.js";
+
 export { default as Autocomplete } from '../src/javascripts/autocomplete.js.erb';
 export { default as Blacklist } from '../src/javascripts/blacklists.js';
 export { default as Blip } from '../src/javascripts/blips.js';

app/javascript/src/javascripts/post_search.js

@@ -1,9 +1,15 @@
+import LStorage from "./utility/storage";
+
 const PostSearch = {};
 
 PostSearch.init = function () {
   $(".post-search").each((index, element) => {
     PostSearch.initialize_input($(element));
   });
+
+  $(".wiki-excerpt").each((index, element) => {
+    PostSearch.initialize_wiki_preview($(element));
+  });
 };
 
 PostSearch.initialize_input = function ($form) {
@@ -27,6 +33,24 @@ PostSearch.initialize_input = function ($form) {
   $textarea.trigger("input");
 };
 
+PostSearch.initialize_wiki_preview = function ($preview) {
+  let visible = LStorage.Posts.WikiExcerpt;
+  if (visible)
+    $preview.removeClass("hidden");
+  console.log("init", visible);
+
+  $($preview.find("a.wiki-excerpt-toggle")).on("click", (event) => {
+    event.preventDefault();
+
+    visible = !visible;
+    $preview.toggleClass("hidden", !visible);
+    LStorage.Posts.WikiExcerpt = visible;
+    console.log("state", visible);
+
+    return false;
+  });
+};
+
 $(() => {
   PostSearch.init();
 });

app/javascript/src/javascripts/utility/storage.js

@@ -82,6 +82,9 @@ LStorage.Posts = {
 
   /** @returns {number} ID of the user's selected set */
   Set: ["set", 0],
+
+  /** @returns {boolean} True if the wiki excerpt should be visible */
+  WikiExcerpt: ["e6.posts.wiki", true],
 };
 StorageUtils.bootstrapMany(LStorage.Posts);
 

app/javascript/src/styles/specific/post_index.scss

@@ -26,6 +26,94 @@
     #edit-dialog textarea {
       margin-bottom: 0.25em;
     }
+
+    // Actual content area:
+    // posts and pagination
+    .post-index-gallery {
+      display: flex;
+      flex-flow: column;
+      gap: 1em;
+
+      .wiki-excerpt {
+        display: flex;
+        flex-flow: column;
+        position: relative;
+        padding: 1em 1em 0;
+        gap: 0.5em;
+
+        background: var(--color-section);
+        max-width: 60em;
+
+        .wiki-excerpt-toggle {
+          position: absolute;
+          top: 0;
+          right: 0;
+          padding: 1em;
+          outline: none;
+
+          transition: transform 0.25s;
+
+          &::after {
+            @include font-awesome-icon;
+            content: unicode("f0d8");
+          }
+        }
+
+        .styled-dtext {
+          background: linear-gradient(to top, var(--color-section), var(--color-text));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          max-height: 10em;
+          overflow: hidden;
+
+          transition: max-height 0.25s;
+
+          // Disable links
+          pointer-events: none;
+          cursor: unset;
+
+          a {
+            color: unset;
+            text-decoration: underline;
+            &::after { content: none; }
+          }
+        }
+
+        .wiki-excerpt-readmore {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 3em;
+
+          // Makes the button appear in the middle of the animation
+          transition: visibility 0s 0.125s;
+
+          span {
+            padding: 0.5em 1em;
+            background: var(--color-section);
+            border-radius: 6px;
+          }
+        }
+
+        &.hidden{
+          .wiki-excerpt-toggle { transform: rotate(-90deg); }
+          .styled-dtext {
+            max-height: 0;
+          }
+          .wiki-excerpt-readmore { visibility: hidden; }
+        }
+      }
+
+      .paginator {
+        padding: 1em 0;
+      }
+    }
   }
 
   // 3. Sidebar

app/views/posts/partials/index/_posts.html.erb

@@ -1,4 +1,12 @@
-<div id="posts" class="user-disable-cropped-<%= Danbooru.config.enable_image_cropping? && CurrentUser.user.disable_cropped_thumbnails? %>">
+<div id="posts" class="post-index-gallery user-disable-cropped-<%= Danbooru.config.enable_image_cropping? && CurrentUser.user.disable_cropped_thumbnails? %>">
+  <% if @wiki_text.present? %>
+    <section class="wiki-excerpt hidden">
+      <h3><%= @wiki_page.pretty_title %></h3>
+      <a href="" class="wiki-excerpt-toggle" role="button"></a>
+      <%= format_text(@wiki_text, allow_color: true, max_thumbs: 0) %>
+      <a href="<%= wiki_page_path(@wiki_page) %>" class="wiki-excerpt-readmore"><span>Read More</span></a>
+    </section>
+  <% end %>
   <section class="posts-container">
     <% if @posts.empty? %>
       <%= render "posts/blank" %>