Post-Footer Implementation

[Akamig]

Current Prototype

• Flexbox based (flex-basis 50% on over-bp.sm)
• Seperated with borders

Problems inferred from prototype

• adjacent border lines are causing eyestrain.
• double column layout seems a bit distracting because of obscured information order.
• uneven space reservation
  For example, short metadata (post language, date, authors, related links, files) are shove-able in a small box, even in 20~33% width of full layout, without causing much distraction.
  while longer metadata (license information, description) requires larger space, more like post-body.

so when these two mixed together and laid without length consideration (ie. samely), since the content length keeps changing extremely, it really hurts constant read flow.

• I'm not sure how should I handle conditional metadata.

1. even should these metadata be conditional or not? (from seeing wikidata, conditional metadata is not much frustration)

2. different metadata sometimes can be very different when it comes to representation. (Tag requires Tagbox component), so I can't just simply map them out on the same styled box component with a key-value data.

3. what kind of structure should I pass as props?
   3.1. how about make some special case components and conditionally render them when these specific props exists, and non-crucial non-special other values can be given as key-value structure and just default-render them out?
   3.2 3.1 is quite hard to handle when using it on pages (like, a lot of props should be nullable, and that's not good.)

4. how the hell should I store these conditional metadata in markdown? I'm pretty sure just simple frontmatter won't do it.

Improvements

Maybe this wikidata style layout would help. this title left, desc right layout helps, but I don't like it in mobile.

As I first intended, I should be more focused on this nutrition facts layout style, on shorter metadata, this layout can be really effective and unified even if some ingredients missing.

• Focusing on separate some longer / shorter, crucial / non-crucial metadata will certainly help readability

• I need to sleep

• Create special case subcomponents

• Thinking about how can I put these subcomponents without making a ton of nullable props.

• Make these collapsible <- Not so important, but will help readability a lot.