remark icon indicating copy to clipboard operation
remark copied to clipboard

Add `remark-videos` to list of plugins

Open Chailotl opened this issue 1 year ago • 6 comments

Initial checklist

  • [x] I read the support docs
  • [x] I read the contributing guide
  • [x] I agree to follow the code of conduct
  • [x] I searched issues and couldn’t find anything (or linked relevant results below)
  • [x] If applicable, I’ve added docs and tests

Description of changes

I added a link to the remark-videos plugin that I developed.

Chailotl avatar Feb 26 '24 05:02 Chailotl

:warning: Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 100.00%. Comparing base (d993c7f) to head (52b8553). Report is 23 commits behind head on main.

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #1289   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            6         6           
  Lines          142       142           
=========================================
  Hits           142       142           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov-commenter avatar Feb 26 '24 05:02 codecov-commenter

Thanks!

Some suggestions:

  • Generating HTML is better done in a rehype plugin.
  • It would be nice if the plugin accept an option to allow different file extensions.
  • It would be nice if the plugin handles alt descriptions.

remcohaszing avatar Feb 26 '24 13:02 remcohaszing

Generating HTML is better done in a rehype plugin.

I saw some remark plugins that generate HTML, such as remark-callouts, and to me it logically makes more sense as a remark plugin because it operates on markdown syntax, but I'll give it some thought.

It would be nice if the plugin accept an option to allow different file extensions.

The <video> tag already works with any video extension. This plugin just puts the video file link into the src attribute.

It would be nice if the plugin handles alt descriptions.

That's a fair suggestion, I'll look into adding it.

Chailotl avatar Feb 26 '24 14:02 Chailotl

Welcome @Chailotl! Thanks for sharing!

The <video> tag already works with any video extension.

The <video> tag does, this plugin currently only works for MP4. https://github.com/Chailotl/remark-videos/blob/851c332993210e6f091453f7ed887be24492bcee/index.js#L7 There are a lot more, consider leveraging https://www.npmjs.com/package/is-video or https://github.com/sindresorhus/video-extensions

I saw some remark plugins that generate HTML, such as remark-callouts

Those add new syntax features to markdown, they need to integrate with the parser. This plugin does not, it can work on the HTML syntax tree.

ChristianMurphy avatar Feb 26 '24 14:02 ChristianMurphy

Oh- right, my plugin only checks for the .mp4 extension 😅 I wrote the plugin well past midnight so forgive my memory

Chailotl avatar Feb 26 '24 15:02 Chailotl

No worries!

Some other ideas:

  1. consider adding more automation like:
    1. adding some test cases with node:test to make it easier to confirm the plugin works and easier for others to contribute
    2. leveraging lint and formatting tools like xo and prettier for code style and structure consistency
    3. using GitHub actions to automatically run tests and lint checkers for new contributions
  2. consider leveraging JSDoc + TypeScript for automated option checking and better autocomplete https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html (this also benefits non-typescript users leveraging an IDE)
  3. consider annotating the project as side effect free for better optimization from build tools https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

It would be nice if the plugin handles alt descriptions

Adding on to this. Images have both alt and title text

![alternate text](http://example.com/url "title text")

alternate text


There could be an opportunity to offer some combination of:

  • SRT/webVTT track as an alternate to audio https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia#video_text_tracks
  • fallback if video is not supported https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia#accessible_audio_and_video_controls
  • multiple video source tracks

ChristianMurphy avatar Feb 26 '24 21:02 ChristianMurphy

Closing this as it seems abandoned. This also makes more sense as a rehype plugin I think!

wooorm avatar Sep 27 '24 11:09 wooorm

Hi! This was closed. Team: If this was merged, please describe when this is likely to be released. Otherwise, please add one of the no/* labels.

github-actions[bot] avatar Sep 27 '24 11:09 github-actions[bot]