Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mdn/bob

Package Overview
Dependencies
Maintainers
0
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mdn/bob

Builder of Bits aka The MDN Web Docs interactive examples, example builder

  • 6.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
160
increased by201.89%
Maintainers
0
Weekly downloads
 
Created
Source

BoB

Builder of Bits aka The MDN Web Docs interactive examples example builder.

Contributing

If you want to contribute to BoB, please follow these steps:

Thank you for your interest in contributing to MDN Web Docs.

NOTE: By contributing to BoB and MDN Web Docs you acknowledge that you have read and agree to our code of conduct.

Source Folder Structure

-editor # All files related to the interactive examples editor
|--> css
|--> js
|--> media # media used only by the editor
|--> tmpl
-live-examples # All example related files and media (only used for testing purposes)
|--> css-examples
|--> fonts # fonts used by the editor and examples
|--> html-examples
|--> js-examples
|--> mathml-examples
|--> media # media used only by the examples

Generated Folder Structure

-docs
|--> css # All editor related CSS
|--> js # All editor related JS
|--> live-examples # All custom CSS and JS for the examples
|--> media # All media and fonts for the examples
|--> pages # All generated interactive example pages
|----> css # All CSS examples
|----> js # All JS examples
|----> tabbed # All examples using the tabbed UI
|----> wat # WebAssembly examples
|----> mathml # MathML examples
|----> webapi-tabbed # Web API examples (not currently used in production)

Testing Bob without the interactive examples repository

As mentioned above, this repository contains a couple of representative examples that you can use to test Bob. For most use cases, this should be enough and allow you to test your changes without installing BoB locally and integrating it with the interactive examples repository.

To test your changes, run:

npm start

You should see output similar to the following:

MDN-BOB: Cleaning or creating ./docs/....
MDN-BOB: Copying static assets....
MDN-BOB: Compiling editor JavaScript....
MDN-BOB:  ../editor/js/editable-css-bundle.js written to disk
MDN-BOB:  ../editor/js/editable-js-bundle.js written to disk
MDN-BOB:  ../editor/js/editable-wat-bundle.js written to disk
MDN-BOB:  ../editor/js/editor-bundle.js written to disk
MDN-BOB: Pages built successfully

This will build the local examples and startup a local server serving the examples. Navigate to localhost:4444 and open one of the examples to test your changes.

Testing Bob as part of interactive examples

When working on changes to BoB, you might need to test against more examples than those that are a part of this repository. In those cases, you will need to run a local version of Bob inside the interactive-examples repo. Use the following command from the root of your local copy of the interactive-examples repo:

npx install-local ~/path/to/bob && node node_modules/.bin/mdn-bob

Stuck? Ask for help.

If you get stuck while working on BoB, there are a couple of ways to get help.

  • Add a comment to the issue you are working on and tag the @mdn/code-dev team.
  • Open a discussion in the platform category.
  • Connect with the team and the rest of the community on Matrix.

Keywords

FAQs

Package last updated on 14 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc