Skip to content
📖 Preact documentation website.
JavaScript CSS HTML
Branch: master
Clone or download
size-plugin and marvinhagemeister 🚣🏾 🎨 update sizes (#433)
* 👩‍✈️ Ⓜ️ update size-plugin-ssr.json 👍

* ☯️ 👨🏼‍⚕️ update size-plugin-browser.json 👍
Latest commit 6d5eb3e Sep 18, 2019

README.md

Preact Documentation Website

Build Status Preact Slack Community

Built with preact-cli

🚀 master is automatically deployed to preactjs.com


Application Structure

This website is built as a prerendered static app, following the Application Shell pattern.

Content

Content is fetched and rendered on the fly from Markdown documents located in content/, similar to how Jekyll works. Documents can contain optional YAML FrontMatter for specifying page metadata or layout information. Once fetched, content is parsed using marked and rendered to VDOM via preact-markup.

Custom Elements

Since preact is used to render the Markdown content, HTML contained in a document reference any of the Components listed in src/components/widget.js as Custom Elements, useful for dynamic content:

## Example Page

<!-- Jumbotron and Logo are actually Preact components! -->
<jumbotron>
    <h1><logo text>Preact</logo></h1>
</jumbotron>

Navigation

Currently, the navigation menu and route handling is controlled by src/config.json. This is likely to change, but in the meantime it means any new pages must be linked from the "nav" section of the config.


Local Development

Clone & Install Dependencies

git clone https://github.com/preactjs/preact-www.git
cd preact-www

npm install

Development Workflow

To start a live-reload development server:

PORT=8080 npm run dev

Any time you make changes within the src directory, it will rebuild and even refresh your browser.

Generate a production build in ./build:

npm run build

License

MIT

You can’t perform that action at this time.