Nick TaylorOn October 22nd, DEV Community member Marie Antons joined Christina and I on the pairing stream to work on improving the Twitch liquid tag.
Aside from code, we talked about culinary school, and some embarrassing things that happened to me. 🤣
While Marie and I didn't get a chance to start working on the actual issue of podcast validation live, we did discuss what liquid tags are, how to create a podcast on Forem, and debugging my local environment.
After walking through these concepts together, Marie is now able to start working on the issue!
Styling on rendered podcast liquid tags when browsing in light mode
#3588
Describe the bug
When a post uses the podcast liquid tag:
{% podcast url-for-episode-here %}
and it is viewed in light mode (i.e. dark mode is disabled), the styling on the rendered podcast component means that the component cannot be seen - white text on a white background. Please see the Screenshots section for a visual on this issue.
To Reproduce
- Ensure that you are using dev.to in light mode
- Open the following url in a chrome-based browser or Firefox: https://dev.to/dotnetcoreblog/the-net-core-podcast-episode-30-reflections-on-net-with-pablo-santos-and-phil-haack-257e
- Scroll down to the rendered podcast liquid tag; it will be displayed with white text on a white background
- Swap to dark mode for dev.to
- Refresh the page (may not be necessary)
- Scroll down to the rendered podcast liquid tag; it will be displayed with white text on a dark background.
Alternate steps to reproduce
- Create a dev.to article which contains a podcast liquid tag similar to the following:
{% podcast https://dev.to/dotnetcorepodcast/reflections-on-net-with-pablo-santos-and-phil-haack %} - Preview the post in light mode; the podcast liquid tag will be rendered as white text on a white background
- Preview the post in dark mode; the podcast liquid tag will be rendered as white text on a dark background.
Expected behavior
The rendered podcast liquid tag-based component does not have white text on a dark background when the page is viewed in light mode. There should be sufficient contrast such that the text and controls are easy to see and interact with.
The fix should not affect behaviour in dark mode.
Screenshots
In light mode:
the same component, when viewed in dark mode:
Desktop:
- OS: Pop!Os 19.04
- Browser: Brave & Firefox
- Version: Brave 0.66.101 - Chromium 75.0.3770.142 (Official Build) (64-bit); Firefox 68.01
Output from lsb_release -a:
Distributor ID: Ubuntu
Description: Pop!_OS 19.04
Release: 19.04
Codename: disco
You can also find the three of us all over the web here:
Marie:
Nick:
Christina:
Looking forward to seeing you on future streams! Follow DEV on Twitch to be notified when future streams begin.
I hope everyone had as fun and productive a Hacktoberfest as I did.
