Examples

Examples of various useful techniques for UWE websites designed to accompany the documentation and so people can see each technique in isolation and build the projects to view the result. This document assumes you have already installed the tools.

Clone the repository, change directory and preview the website for a project:

git clone https://github.com/uwe-app/examples.git uwe-examples
cd uwe-examples/collections/document
uwe dev

Build Tools

To use a build tool the --exec capability must be granted, eg: uwe dev --exec.

• babel Transpile Javascript with babel
• esbuild Transpile Javascript with esbuild
• postscss Transpile CSS with postcss
• sass Transpile CSS with sass
• swc Transpile Javascript with swc
• tailwind-postscss Use the tailwind design system with postcss
• webpack Transpile Javascript with webpack

Content

• alerts Show info, tips, error and warning alerts
• crumbtrails Navigate to ancestor folders
• directory-listing Link to pages in a folder
• imports Use imports for page headers and footers
• includes Include example text files
• table-of-contents Link to page headings

Collections

• csv-table Render an HTML table from a CSV document
• document Generate a collection from a single document
• pagination Create pages from a collection and provide navigation controls
• rss-podcast Render from an RSS XML podcast feed

Syntax Highlight

• inline Syntax highlight using inline styles
• external Syntax highlight using an external stylesheet
• runtime Syntax highlight using highlight.js

Notes

Developers can compile the entire workspace using uwe build at the root of the repository to quickly test for any errors. Build tools are treated as a separate workspace as they need the --exec capability, cd build && uwe build --exec.