* Add og:image:width, og:image:height, and og:image:type tags.
* Use og:video tags for videos.
* Use 720x720 instead of 150x150 preview images for videos.
* Add duration tag to JSON-LD data for videos.
* Add OpenGraph tags to media assets show page.
* Respect Twitter max image size limits.
* Don't include OpenGraph image tags when someone shares a plain https://danbooru.donmai.us link
with no tag search. This caused random potentially NSFW images to be shown when someone shared a
https://danbooru.donmai.us link on social media, which could be cached for long periods of time.
* Add a global /post_events page that shows the history of all approvals,
disapprovals, flags, appeals, and replacements on a single page.
* Redesign the /posts/:id/events page to show all approval, disapproval,
flag, appeal, and replacement events for a single post (before it only
showed approvals, flags, and appeals).
* Remove the replacement history link from the post show page. Replacements
are now included in the post events page (closes#4948: Highlighed replacements).
* Add /post_approvals/:id and /post_replacements/:id routes (these are
used by the "Details" link on the post events page).
Add options to disable comments, the forum, and autocomplete. This is
for personal boorus and potentially for safe mode. Note that disabling
the forum may cause difficulties with creating and approving BURs.
Disabling comments and the forum merely hides them from most areas,
rather than completely removing them.
Refactor CSS to use standard Tailwind-style utility classes instead of
ad-hoc rules. This eliminates a lot of single-purpose rules for specific
UI elements and standardizes margins to be more consistent throughout
the site.
Utility classes are defined manually on an as-needed basis instead of
importing Tailwind as a whole. Naming conventions mostly follow
Tailwind's conventions, otherwise they follow Bootstrap.
* https://tailwindcss.com/docs/
* https://getbootstrap.com/docs/5.0/utilities/spacing/
* Factor out the post navbar into a component. The post navbar is the
part of the post containing the current search, the list of pools, and
the list of favgroups, along with next/prev navigation links.
* Change navbar markup: remove various unused CSS classes/IDs, change
pools to use same markup as favgroups, replace nested <div>'s with
flat <ul>/<li> list.
* Use CSS to truncate long searches/pool names/favgroup names if they're
too wide for the screen (especially on mobile).
Factor out FontAwesome icons into a set of helpers. This is so that it's
easier to keep track of which icons we're using and easier to change
icons globally.
Previously thresholded comments were hidden completely. You had to click
the "Show X hidden comments" button to unhide all hidden comments in a
thread. Now it works like this:
* When a comment is below your threshold, the comment text is hidden and
replaced by a `[hidden]` link, which you can click to unhide the comment.
* When a comment is at half your threshold (for example, your threshold
is -8 but the comment is at -4), then the comment is greyed out.
This means that comments aren't completely hidden, they're just
collapsed, so you can see the commenter and the score without unhiding
the comment. It also means you don't have to scroll back up to unhide a
comment, and threads aren't disrupted by comments being secretly
hidden (which is confusing when people are replying to hidden comments,
which forces you to go back up and unhide to find).
Refactor the post preview html to use the ViewComponent framework. This
lets us encapsulate all the HTML, CSS, and helper methods for a UI
component in a single place.
See https://viewcomponent.org.
* Remove the PostRegeneration model. Instead just use a mod action
to log when a post is regenerated.
* Change it so that IQDB is also updated when the image samples are
regenerated. This is necessary because when the images samples are
regenerated, the thumbnail may change, which means IQDB needs to be
updated too. This can happen when regenerating old images with
transparent backgrounds where the transparency was flattened to black
instead of white in the thumbnail.
* Only display one "Regenerate image" option in the post sidebar, to
regenerate both the images and IQDB. Regenerating IQDB only can be
done through the API. Having two options in the sidebar is too much
clutter, and it's too confusing for Mods who don't know the difference
between an IQDB-only regeneration and a full image regeneration.
* Add a confirm prompt to the "Regenerate image" link.
* Remove the data-is-favorited attribute from post thumbnails.
* Remove the is_favorited attribute from the /posts.json API.
* Remove the fav_string attribute from the /posts.json API (only visible
to moderators).
* Change `Post#favorited_by?` to not use the fav_string.
Further addresses #4652 by eliminating the last places where fav_string
was used.
Rewrite the notes Javascript from a procedural style to an
object-oriented style.
Before the notes Javascript had a lot of problems:
* There was hidden state everywhere, both locally and globally. We had
state in global variables, in <meta> tags, in DOM data-* attributes
(on multiple elements), and in jQuery .data() properties (which are
different from data-* attributes, because they aren't visible in the
DOM).
* Local state was hard to reason about. There was lots of direct DOM
manipulation in random places. Functions had to constantly pass around
note ids and look up elements in the DOM to get the state. State was
invisible because it was stored as jQuery .data() properties. It was
hard to follow where state was stored, how it was initialized, and how
it changed.
* Global state was also a mess. There were a lot of global flags and
variables only used in specific situations. Almost all of this state was
unnecessary. Global state also prevented us from doing things like
loading or unloading posts dynamically, or showing multiple posts with
notes on the same page.
* There was a lot of duplication of code, especially for placing notes,
and for loading or saving new notes versus saved notes.
Now the code is organized in an object-oriented fashion:
* The Note class represents a single note. A post has a list of notes,
and each note object has a Note.Box and a Note.Body. Together these
objects encapsulate the note's state.
* Notes have methods for doing things like placing note boxes, or showing
and hiding note bodies, or creating, saving, or deleting notes. This
makes the JS API cleaner.
* Global state is kept to a minimum.
This is one big patch because it was too hard to make these changes
incrementally. There are a couple minor bugfixes, but the actual
behavior of notes should remain unchanged.
Bugfixes:
* It was possible to enter translation mode, start dragging a new note,
then press N to leave translation mode while still dragging the note.
If you did this, then you would be stuck in translation mode and you
couldn't stop dragging the note.
* Placement of new notes is now pixel-perfect. Before when placing a
note, the note would shift by 1-2 pixels.
* Previewing an empty note didn't show the "Click to edit" message.
Other noteworthy changes:
* Most global state has been eliminated. There were a lot of flags and
variables stored as global variables on `Danbooru.Note`. Most of these
turned out to be either unnecessary or even unused.
* Notes now have an explicit minimum size of 10x10 pixels. Before this
limit was hardcoded and undocumented.
* A lot of the note placement and note creation code has been simplified.
* `Note.add()` and `Note.create()` have been refactored into `new Note()`.
Before `Note.add` was used to load an existing note, while `Note.create`
was used to create a new note. These did the same thing, but had
slightly different behavior.
* `Note.Box.scale()` and `Note.box.update_data_attributes` have been
refactored into `Note.Box.place_note()`. Contrary to their names,
these functions were actually both used to place notes.
Standardize font sizes and heading tags (<h1>-<h6>) to be more
consistent across the site.
Changes:
* Introduce font size CSS variables and start replacing hardcoded font
sizes with standard sizes.
* Change header tags to use only one <h1> per page. One <h1> per page is
recommended for SEO purposes. Usually this is for the page title, like
in forum threads or wiki pages.
* Standardize on <h2> for section headers in sidebars and <h3> for
smaller subsection headers. Don't use <h4>-<h6>.
* In DText, make h1-h4 headers all the same size. Standard wiki style is
to ignore h1-h3 and start at h4.
* In DText, make h4-h6 the same size as the h1-h3 tags outside of DText.
* In the tag list, change the <h1> and <h2> tag category headers to <h3>.
* Make usernames in comments and forum posts smaller. Also change the
<h4> tag for the commenter name to <div class="author-name">.
* Make the tag list, paginator, and nav menu smaller on mobile.
* Change h1#app-name-header to a#app-name-header.
* Fix incorrect canonical tags. Before we were using
`<meta name="canonical" content="...">`. This is wrong, it should have been
`<link rel="canonical" href="...">`.
* Add a default canonical tag on all pages. Fixes Google treating the
same content on different subdomains (safebooru, shima, kagamihara, etc)
as duplicate content. Also fixes Google sometimes treating similar but
distinct content on the same domain as duplicate content.
* Add back "Resize to window" link.
* Add Z shortcut for resize to window link (mnemonic: Z for zoom image).
* Resize images to screen width by default on both desktop and mobile.
* Make it so that notes are nested directly inside the .image-container
element with the image, instead of inside a separate .note-container
element. This means .image-container and .note-container are now the
same element. This is so that the size of the .note-container is
driven by the size of the image, which ensures that notes are
automatically resized as the image is resized.
Change #image-container and #note-container from IDs to classes. This is
necessary so that we can use one container element for both the image
container and the note container. This may break custom CSS and
userscripts.
* Fix og:site to og:site_name.
* Fix open graph properties to use <meta property="...">, not <meta name="...">>
* Set og:type, og:site_name, twitter:site globally (not just on post pages).
* Set og:url.
* Remove unused always-resize-images, report-server <meta> tags from
post show pages.
* Fix inconsistencies in how wiki pages were linked.
* Link directly to the wiki instead of to a title search that is expected
to redirect to the wiki.
* Factor out common sidebar layout template.
* Convert wiki pages and posts to use this template.
* Add data-layout attribute to <body> element indicating the current layout.
Certain parts of comment rendering triggered sql queries that we didn't
really need to do. Rework things to avoid this.
* Preload comment creators in order to display commenter names with link_to_user.
* Preload comment votes in order to display "undo vote" links. Only preload
votes for members since anonymous users can't vote and don't have "undo
vote" links.
* Rework various conditionals to do the filtering in Ruby so that we
avoid issuing any extra queries in sql.
* Avoid issuing any queries at all when the post doesn't have any
comments (when last_commented_at is blank).
