markbind icon indicating copy to clipboard operation
markbind copied to clipboard

docs: add custom CSS usage and warnings to user guide (#2705)

Open arshinsikka opened this issue 6 months ago • 2 comments

What is the purpose of this pull request?

  • [x] Documentation update
  • [ ] Bug fix
  • [ ] Feature addition or enhancement
  • [ ] Code maintenance
  • [ ] DevOps
  • [ ] Improve developer experience
  • [ ] Others, please explain:

Overview of changes:

  • Adds a new section titled "Using Custom CSS in MarkBind" at the bottom of usingHtmlJavaScriptCss.md

  • Explains two methods to add custom styles:

  • Site-wide styles using site.json

  • Page-specific inline

  • Includes warnings about conflicts with MarkBind’s built-in component styles

  • Provides code examples and best practices

Anything you'd like to highlight/discuss:

  • The section was added just before the {% previous_next %} block to maintain structure

  • IntelliJ may show false warnings (e.g., unrecognized tags), but site renders fine

  • Let me know if you'd like it moved to a different file or split out for better discoverability

Testing instructions:

  1. Serve the site locally: npx markbind serve packages/core/docs/userGuide

  2. Navigate to "Using HTML, JavaScript, CSS" in the user guide sidebar

  3. Scroll to the bottom and verify:

  • The section on Using Custom CSS is visible
  • Code samples are highlighted correctly
  • Warnings and tips are clearly displayed

Proposed commit message: (wrap lines at 72 characters)

docs: add custom CSS usage and warnings to user guide (#2705)

Adds documentation to explain how users can add site-wide or inline custom CSS in MarkBind. Also includes best practices and warnings about overriding MarkBind's default component styles.


Checklist: :ballot_box_with_check:

  • [x] Updated the documentation for feature additions and enhancements
  • [ ] Added tests for bug fixes or features
  • [x] Linked all related issues
  • [x] No unrelated changes

Reviewer checklist:

Indicate the SEMVER impact of the PR:

  • [ ] Major (when you make incompatible API changes)
  • [x] Minor (when you add functionality in a backward compatible manner)
  • [ ] Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

  • To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

  • what was the old feature that was made obsolete
  • any replacement feature (if any), and
  • how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

arshinsikka avatar Jul 11 '25 18:07 arshinsikka

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 52.84%. Comparing base (f681976) to head (3709477).

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #2736   +/-   ##
=======================================
  Coverage   52.84%   52.84%           
=======================================
  Files         130      130           
  Lines        7162     7162           
  Branches     1591     1596    +5     
=======================================
  Hits         3785     3785           
  Misses       3072     3072           
  Partials      305      305           

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

:rocket: New features to boost your workflow:
  • :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

codecov[bot] avatar Aug 04 '25 08:08 codecov[bot]

Hi @arshinsikka, thanks for the contribution. As mentioned by Copilot, it would be good to include a warning to users about the use of custom css as it may conflict with MarkBind's default css, leading to unexpected behavior. You also mentioned "two common ways" but only included one way 😅

Regarding the site-wide custom stylesheet you mentioned, I wasn't able to get it to work using those instructions. Its possible that this method of adding custom css isn't actually implemented by MarkBind yet as the user guide doesn't seem to mention "head" being a possible config option for site.json. Its also possible I messed up on my end so if you were able to get it to work, do let me know!

AgentHagu avatar Aug 04 '25 08:08 AgentHagu