work on post previews

[benjaminpreiss]

Write a preview variant of canvas that can be used in:

• the comments section of a post
• the breadcrumb exploded view.

This preview variant should (for now) contain:

• A visual component - the first app (e.g. image) that can be found in the post
• A number / visual stack with number indicating how many more apps / contents are associated, excluding the first app (e.g. image) and the first text content
• A text component - the first elements of the text added to the app

If it contains no text, just show as many image(s) as possible
If it contains only text just show the text

[benjaminpreiss]

Some more details for the previews. Pick your poison!

Please vote as comments on what combinations you like. E.g. your vote like:

small-square: a, breadcrumb: b for text and images, a for images only, ...

Also, we need to decide whether we

• crop the images into place or ...
• contain them within their parent and blur the background

The big post previews will be coming right after.

[benjaminpreiss]

After discussing the above, we agreed on implementing this for MVP.

this is the gallery for the post preview used in the comment section:

[benjaminpreiss]

And a written representation of the visuals:

We define 4 preview types:

• small square
• breadcrumb
• quote in chat
• post preview

Small square: Tiny rectangle. Fits parent in dimensions.

• If the post has an image, display only the image. Crop center aligned to fit
• If the post has only text, display The first two letters of the text.
• We don't display any indicators on whether there are more elements than the ones displayed

Breadcrumb: Small - minimal height (~height of 1 line of text) and parent constrained max-width.

• max-width to: max(0.2, 1 / #_breadcrumb_elements) * width_of_breadcrumb_area (parent div)
• If the post has an image, display only the image.
  The image is of square shape.
  Crop center aligned to fit
• If the post has text and no image, display the text. Truncate text to fit max-width.

Quote in chat: Medium size - medium height (~height of 2 lines of text) and parent-constrained max-width.

• Max-width to: 100% of parent div
• If post has image: square image fitting, crop center aligned, left aligned in quote div
• Author name on first line of text, truncate to fit max-width
• One or two lines of text filling remaining width, truncate to fit

Post-preview: Large size - varying height and screen width (max. ideal text width)

• max-width to: 100% of parent div
• If post has image(s):
  Gallery layout.
  First image full-width, max. height to result in square aspect ratio
  Rest of image below first image as squares, left aligned.
  All images crop center aligned
• If post has text:
  full width
  if post has images - truncate to 3 lines
  If not - truncate to 7 lines
• Buttons below post to:
  "open" post (navigate to)
  "show more" (expand post to real size)

The Preview component requires each of the utilized apps to produce usable and composable output when a preview is requested from them.

[benjaminpreiss]

• make button dark mode compatible
• make text in preview render without style, e.g. using unified.js
• fix regular post view for images
• add "show more" functionality
• fix chat bar padding
• after that go straight to breadcrumb previews

[marcus-pousette]

Full size post previews are sadly broken on safari.. :) The scaling does not work and instead it crops interestingly

[benjaminpreiss]

Also, square previews of horizontal images are broken in the edit bar