Getting Started

Start by installing Aubade from the npm registry

	

		

			Toggle
Numbering
			Copy
		
	

	
pnpm install aubade

If you’re using any code blocks in your markdown, make sure to include the stylesheets from /styles to your app, which you can do in either a JS file or a CSS file.

	

		

			Toggle
Numbering
			Copy
		
	

	
// process with JS bundler
import 'aubade/styles/code.css';

	

		

			Toggle
Numbering
			Copy
		
	

	
/* process with CSS bundler */
@import 'aubade/styles/code.css';

Use the function from the /compass module to visit a file or traverse directories.

	

		

			Toggle
Numbering
			Copy
		
	

	
import { visit, traverse } from 'aubade/compass';

const article = visit(/* path to your file */);

const data = traverse(/* entrypoint */).hydrate(/* callback */);

Add interactivity to the code blocks with hydrate from /browser module.

	

		

			Toggle
Numbering
			Copy
		
	

	
<script>
	import { hydrate } from 'aubade/browser';
</script>

<main use:hydrate>
	<!-- content here -->
</main>