Skip to content

Blog/Mobile-friendly tables and Components

Warren Gifford requested to merge friendly-tables into main

Created by: zlonko

This closes #5454 (closed) and #5529 (closed). It implements components to abstract common design patterns in the blog. It also makes tables mobile-friendly.

Changelog

  • Adds Alert, Figure and TableWrapper components
  • Standardize figure/figcaption instances with Figure component
  • Implements the following components
    • Alert
    • Figure
    • TableWrapper
    • Video
    • YouTube

Notes

  • imgs are converted to Figures in https://github.com/sourcegraph/about/pull/5536 to merge into this PR
  • Opted for a wrapper component around tables because they are often written in Markdown instead of HTML. This allows for some flexibility for our author's preferences. Bootstrap's table-responsive utility did not appear to read within the markdown, so the class table-overflow was created.
  • Noting that some tables were difficult to read even when made scrollable on mobile.
  • One table on blog/optimizing-a-code-intel-backend is changed into a series of figures to make the images more accessible.

Test

  1. Ensure prettier has standardized the proposed changes.
  2. Navigate to blog/a-programmers-guide-to-find-and-replace or any other blogpost with tables to check that tables are rendered with a horizontal scroll on mobile
  3. Please see that images and videos render as expected on blogposts

Merge request reports