96Boards.ai Static Jekyll Site

This is the git repository for the 96Boards.ai static Jekyll-based website.

Hosted in this repo are the markdown content files associated with the website. Feel free to submit a PR / Issue if there is anything you would like to change.

This static Jekyll site is using the jumbo-jekyll-theme. Please take a moment to review the guides on the theme's GitHub wiki.

Contributing

To make it easier to contribute to the content, Linaro provides a couple of Docker containers for building and checking the site. All you need is Docker installed on your computer and enough RAM and disc space.

To build the site:

cd <git repository directory>
./build-site.sh

To build the site and then serve it so that you can check your contribution appears:

cd <git repository directory>
JEKYLLACTION="serve" ./build-site.sh

To check that your contribution doesn't include any broken links:

cd <built web site directory>
../check-links.sh

The built web site directory will be production.96boards.ai. There isn't a staging site any longer as the GitHub build process now automatically generates a preview website.

For more information, please see the build container wiki and the link checker wiki.

Adding products to the homepage carousel

In order to add products to the homepage carousel you must make a few changes. Firstly, if you are changing the number of elements in the carousel then change the $n sass variable (in the /assets/css/app/home-carousel.scss sass partial) to the number of products that the carousel contains. This will ensure that the 3d translations account for n number of products.

Add your new image to the carousel in index.html. Simply replace the image/add a new one to the figure element.

This is the figure element you will need to add to/amend.

 <figure>
    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="/assets/images/ultra-96-front-hd.png" id="1" data-url="/products/ultra96/" alt="Ultra96">
    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="/assets/images/sophon-edge-tpu-board.png" id="2" data-url="https://www.96boards.org/product/sophon-edge/" alt="Sophon Edge">
    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="/assets/images/rock960_front-resized.png" id="3" data-url="/products/rock960/" alt="Rock960">
    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="/assets/images/hikey970-optimized.png" id="4" data-url="/products/hikey970/" alt="HiKey970">
</figure>

Change the image src, alt, id and data-url to suit. The ID attribute is used by the carousels javascript to retreive the data-url and alt attributes. If there are 4 images in the carousel then the first the id's will be 1 - 4.