Skip to content

MDX support & component documentation
Compare
Choose a tag to compare
@bradmering bradmering released this 30 Sep 16:24
· 47 commits to main since this release
v0.14.0
84942ec

[0.14.0] - 2024-09-26

This release enables creation of complex documentation pages, with storybook compatible formats. It has two main features - MDX support for adding react components to your documentation pages, and Snippet Previews - a system for using Handoff's existing html build process to create complex component previews.

Features

  • MDX Support Support for MDX files in Handoff Documentation App
    • MDX Files Markdown files with react components
    • Any react component can be imported
    • Handoff exposes a number of custom react components that you can use in MDX pages to build
  • Snippet Previews Create html snippets that will render as a preview with html, js, css and sass code below the preview
    • Place a file ending with .html in the /integration/snippets file or run the make:snippet [name] cli command
    • Handoff will detect the file and make it available to the SnippetPreview component
    • If Handoff detects a snippet file ending in js or scss, with the same name as the html file, Handoff will automatically use webpack and node-sass to build those files and make the compiled code available to html template.
    • If Handoff detects a css file with the same name, it will use that file for styling the preview
      • The html file is a Mustache template. At present there are two variables that can be used in these files
      • {{{style}}} a compressed inline style of either the compiled sass code or the raw css code provided.
      • {{{script}}} a compressed inline script of the output of the js compilation
    • In your MDX files you can display the snippets using SnippetPreview. This component accepts 2 - 3 properties, plus a react fragment as the children.
      • title accepts a string as the h2 title. Set to false or exclude if you don't want it
      • id is the name of your snippet {name}.html The snippet will load dynamical
      • height accepts a string to set the height of the preview. If you leave it off, Handoff will set the height of the preview automatically from the contents of the snippet.
<SnippetPreview title="A Testimonial Component" id="testimonial" height="725px">
  <p>Render a testimonial inline with other content.</p>
</SnippetPreview>

Additional CLI Commands

  • build:snippets <name> will either rebuild all the snippets for you, or if an optional name is passed, will rebuild a single snippet
  • rename:snippet <source> <destination> will rename a snippet and its js and scss files

Bugfixes

  • Fixes a bug introduced in 0.13.0 where the integration preprocess would try to execute handlebars insertion even on non text files
  • Fixes a bug in the foundation page templates where the markdown would be included outside of the section wrapper
  • Fixes a bug in the start command where every doc page would be flagged as changed on watch.

Changes

  • Lint 5255667
  • Merge pull request #158 from Convertiv/release/0.14.0 09176ad
  • build 629512d
  • Merge branch 'main' into release/0.14.0 76fba18
  • Release note tweaks b76ae2d
  • Adding quick rename command ca3a0e2
  • Improving snippet and integration watch 0412600
  • Merge branch 'release/0.14.0' of github.com:Convertiv/handoff-app into release/0.14.0 1e8807e
  • Fixing bug in foundations page when using markdonw 19e87a1
  • Reflowing snippet transformer into its own transformer 7fdc676
  • Update integration build to not perform any additional processing on files that are not CSS, SCSS or JSON files. 04b90fa
  • Changing make:page to address the correct directory, and allow you to choose mdx or md file db24596
  • Documentation and adding cli make:snippet e206ac8
  • build 0b270e9
  • Merge branch 'main' into feature/mdx-pages d8194f7
  • Removing grid from code in components 0d2afc7
  • Allowing snippet previews to be loaded async bd61393
  • Allowing js compilation to run in dev mode and adding a full breakpoint toggle 5075fd8
  • removing debugging 46e8687
  • adding height setting to component preview and inlining styles 6ddbed6
  • Changing mdx hero and code highlight behavior 3d4b3dc
  • Fixing selected bug on nav 119241b
  • buidl 07ccf37
  • Fixing bug in parser b228111
  • removing unneded preset env 8952162
  • Improving code highlighting 90f3cdd
  • Working on multicolumn code 5ccde27
  • Improvements to code previews for mdx c0b2837
  • improving code formating for mdx 4bf0747
  • Creating abstract webpack transformer 05c5c9d
  • Renaming preview 31bc383
  • Update 69aa948
  • Adding prototype inline css transpiler 688c441
  • Fixing path issue e6a0331
  • Fixing build problem 66d056a
  • Small tweaks to mdx building a0268a6
  • Improvements to MDX component preview context dd97345
  • Building context handling f3adf57
  • Removing mdx debugging f4a5429
  • Fixing link bugs 7b6e1c0
  • Merge branch 'feature/mdx-pages' of github.com:Convertiv/handoff-app into feature/mdx-pages e3b71d2
  • Reducing the alert on page change b210ff5
  • Filter out mdx from l1 l2 build efe6079
  • Fixing lint issues 8b66620
  • adding active trail in side menus 4c53ed1
  • Tweaking responsive frame layout 4e072b5
  • Adding mdx recursion 641126c
  • Tuning third level pages 858aca1
  • Adding breakpoint config, and updating component preview to support scrolling 8e7a974
  • Fixing a lint error 94f81dc
  • Adding breakpoint toggle 95abc97
  • Implementing simple code switcher 026ff31
  • Allowing custom blocks to document js 21db22a
  • Updating component list tool 363ba78
  • Adding component list cbd2a09
  • Removing frontmatter plugin 8bf5470
  • Build cleanup 22d89b2
  • First end to end clean draft of MDX rendering with frontmatter 47b5263
  • Adding some helpful debugging c23d822
  • Building initial working draft of mdx reader 5dd8c3d
  • Updating next to 14.2.4 3991dd3
  • Initial draft of mdx page builder with layout e1a344f

v0.13.2...v0.14.0

Assets 2
Loading