Developers and Designers
We welcome input from users and Chrome extension developers. The best way to contact us is to visit the WebHaste Github repo to report issues or request features.
We built this extension to be useful to our clients, but also to be helpful to the Internet at large. We encourage you to submit suggestions or bugs you may find, or event fork the project and make improvements.
Website Designers
A big part of setting up your website managers for success is to give them a well thought-out template, complete with blocks that they can use in various places on the website. To help you get started, we've created a Starter Template for Bootstrap 5.x, which you can download or fork from Github. This project folder includes a basic template and several content blocks you can easily modify.
The starter template shows you how the WebHaste structure with the template and blocks work, and also shows how to wire up CSS, JS and favicon resources.
How a WebHaste project is put together
| index.html, etc. | Content partials for each page in your site (no template applied) |
| 404.html | The default 404 page needed for Cloudflare and Netlify |
| assets/ | Images and files available to be inserted into your pages |
| elements/ | Favicons, template backgrounds, shims |
| scripts/ | Any scripts or styles needed by your template |
| dist/ (can vary) | Local deployment directory for your finished website |
| .webhaste/site.config.json | Important site settings |
| .webhaste/nav.json | Sitewide menus (header, footer, etc) |
| .webhaste/pages.json | Page settings, titles, meta descriptions |
| .webhaste/block-library.md | Generated list of available blocks (do not edit) |
| .webhaste/blocks/ | Partials for any template-specific blocks |
| .webhaste/templates/ | Page layouts available for this site |
| .webhaste/compose.js | Generated — headless preview renderer |
| .webhaste/compose-core.js | Generated — shared substitution logic |
Where to build my template?
As a designer, most of your work will be with the /.webhaste/tempates/template.html file that you will create for your site (or whatever you call it).
Any custom CSS or JS should be stored in:
- scripts/yourfile.css
- scripts/yourfile.js
Any design elements that your template needs (icons, favicons, backgrounds, etc.) should be stored in elements/.
Any reusable elements you want users to have direct access to (logos, maps, etc) should be stored in assets/.
Paths
When including images and other files in your template, be sure to use root-specific paths, i.e. "/scripts/styles.css" instead of relative paths, which can cause problems on pages not at the site root.
A note about CSS backgrounds
If you have an element or div that has a background image defined in CSS, it may not display correctly in the preview windows even if you use root-relative paths, i.e. background-image: url(/assets/workspace.jpg); This is the correct method, however, and these should display correctly when deployed.