diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..c3684f2 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,36 @@ +name: Test +on: + push: + branches: + - new-design + pull_request: + +env: + CI: "true" + +jobs: + test: + name: Test + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + + - name: Cache .npm + uses: actions/cache@v1 + env: + cache-name: cache-dot-npm + with: + path: ~/.npm + key: ${{ runner.os }}-build-${{ env.cache-name }} + + - name: Setup Node 12 + uses: actions/setup-node@v1 + with: + node-version: 12 + + - name: Install dependencies + run: npm ci + + - name: Run build + run: npm run build diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..1eb3892 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,17 @@ +name: Deploy website +on: + push: + branches: + - develop + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + + - uses: enriikke/gatsby-gh-pages-action@v2 + with: + deploy-branch: master +# gatsby-args: --prefix-paths + access-token: ${{ secrets.ACCESS_TOKEN }} diff --git a/.gitignore b/.gitignore index b3d476f..e293ee0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,5 @@ -*.gem -.bundle -.sass-cache -_site -Gemfile.lock -.idea +.cache/ +node_modules/ +public/ .DS_Store +npm-debug.log diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 6017dba..0000000 --- a/.travis.yml +++ /dev/null @@ -1,18 +0,0 @@ -language: ruby - -# Assume bundler is being used, therefore -# the `install` step will run `bundle install` by default. -script: ./script/cibuild.sh - -env: - global: - - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer - -# Upgrade the SSL otherwise outwards connections will fail -addons: - apt: - packages: - - libcurl4-openssl-dev - -# Cache the budler results so repeat builds get some speed -cache: bundler diff --git a/CNAME b/CNAME index b1f2f95..50a0a94 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -openzaak.publiccode.net +openzaak.org diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8ca88cd..27a1bb5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,20 +1,37 @@ -# CONTRIBUTING +# Contributing -Welcome, new contributors! +We – the maintainers of this project – value your input, enjoy feedback and welcome improvements to our Open Source projects. -Please: +We love issues and pull requests from everyone. -- contribute [by making pull requests](https://github.com/publiccodenet/repository-template/pulls) -- give us feedback by [raising an issue](https://github.com/publiccodenet/repository-template/issues) +## Problems, suggestions and questions -## How to get involved +You don't need to change any of our code or documentation to be a contributor. Many contributors add to our software by reporting problems, suggesting changes and asking simple and difficult questions. To do this, you can create a [GitHub Issue](https://help.github.com/articles/creating-an-issue/) for this project. -[Explain how contributors can get involved.] +## Documentation and code -## Contact us +If you want to add to the documentation or code of one of our projects you should make a Pull Request. If you never used GitHub, get up to speed with [Understanding the GitHub Flow](https://guides.github.com/introduction/flow/). -You can contact the maintainers at: [add email address, forum, mailing list, etc] +### 1. Make your changes -## Responsible disclosure +Add your changes in commits [with a message that explains them](https://github.com/alphagov/styleguides/blob/master/git.md#commit-messages). Document choices or decisions you make in the commit message, this will enable everyone to be informed of your choices in the future. -[Add an email address for security issues and responsible disclosure.] +If you are adding code, make sure it adheres to the project's code and documentation style guide before you submit your pull request. If the project uses tests, make sure to write tests that show the behaviour of the newly added or changed code. You can read more about how to document, test and style your code in the project's [`README`](README.md). + +### 2. Pull Request + +When submitting the pull request, please accompany it with a description of the problem you are trying to address and the issue numbers that this Pull Request fixes/addresses. + +### 3. Improve + +It could be that your contribution can be merged immediately by a maintainer. However, usually, a new Pull Request needs some improvements before it can be merged. Other contributors (or helper robots) might have feedback. If this is the case the reviewing maintainer will help you improve your documentation and code. + +If your documentation and code have passed human review and have passed the automated tests, it is merged. + +### 4. Celebrate + +Your ideas, documentation and code have become an integral part of this project. You are the Open Source hero we need. + +--- + +For more information on how to use and contribute to this project, please read the [`README`](README.md). diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..9645932 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,33 @@ +FROM node:12.18.0 AS build + +RUN apt-get update && \ + apt-get install -y libgl1-mesa-glx + +COPY package.json \ + package-lock.json \ + /app/ + +WORKDIR /app + +RUN npm install + +COPY . /app + +ENV GATSBY_TELEMETRY_DISABLED=1 +RUN ./node_modules/.bin/gatsby build --prefix-paths + +FROM nginx:alpine +EXPOSE 8080 + +RUN adduser -D -u 1001 appuser + +RUN touch /var/run/nginx.pid && \ + chown -R appuser /var/run/nginx.pid && \ + chown -R appuser /var/cache/nginx + +COPY docker/nginx.conf /etc/nginx/nginx.conf +COPY docker/default.conf /etc/nginx/conf.d/default.conf + +COPY --from=build /app/public /usr/share/nginx/html + +USER appuser diff --git a/Gemfile b/Gemfile deleted file mode 100644 index d9a98cb..0000000 --- a/Gemfile +++ /dev/null @@ -1,16 +0,0 @@ -# frozen_string_literal: true - -source "https://rubygems.org" -gemspec - -group :jekyll_plugins do - gem "jekyll-feed", "~> 0.6" - gem "jekyll-sitemap" - gem "jekyll-paginate" - gem "jekyll-seo-tag" - gem "jekyll-polyglot" - gem "github-pages" - gem "html-proofer" - gem "mdl" - gem "faraday", "~> 0.17" -end diff --git a/LICENSE.md b/LICENSE.md index b00cf9c..d214661 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,23 +1,286 @@ -# LICENSE +# EUROPEAN UNION PUBLIC LICENCE v. 1.2 -The MIT License (MIT) +EUPL © the European Union 2007, 2016 -Copyright (c) 2018 chrisrhymes +This European Union Public Licence (the ‘EUPL’) applies to the Work (as defined +below) which is provided under the terms of this Licence. Any use of the Work, +other than as authorised under this Licence is prohibited (to the extent such +use is covered by a right of the copyright holder of the Work). The Work is +provided under the terms of this Licence when the Licensor (as defined below) +has placed the following notice immediately following the copyright notice for +the Work: -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: +> Licensed under the EUPL -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. +or has expressed by any other means his willingness to license under the EUPL. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. +## 1. Definitions + +In this Licence, the following terms have the following meaning: + +- ‘The Licence’: this Licence. + +- ‘The Original Work’: the work or software distributed or communicated by the + Licensor under this Licence, available as Source Code and also as Executable + Code as the case may be. + +- ‘Derivative Works’: the works or software that could be created by the + Licensee, based upon the Original Work or modifications thereof. This Licence + does not define the extent of modification or dependence on the Original Work + required in order to classify a work as a Derivative Work; this extent is + determined by copyright law applicable in the country mentioned in Article 15. + +- ‘The Work’: the Original Work or its Derivative Works. + +- ‘The Source Code’: the human-readable form of the Work which is the most + convenient for people to study and modify. + +- ‘The Executable Code’: any code which has generally been compiled and which is + meant to be interpreted by a computer as a program. + +- ‘The Licensor’: the natural or legal person that distributes or communicates + the Work under the Licence. + +- ‘Contributor(s)’: any natural or legal person who modifies the Work under the + Licence, or otherwise contributes to the creation of a Derivative Work. + +- ‘The Licensee’ or ‘You’: any natural or legal person who makes any usage of the + Work under the terms of the Licence. + +- ‘Distribution’ or ‘Communication’: any act of selling, giving, lending, + renting, distributing, communicating, transmitting, or otherwise making + available, online or offline, copies of the Work or providing access to its + essential functionalities at the disposal of any other natural or legal + person. + +## 2. Scope of the rights granted by the Licence + +The Licensor hereby grants You a worldwide, royalty-free, non-exclusive, +sublicensable licence to do the following, for the duration of copyright vested +in the Original Work: + +- use the Work in any circumstance and for all usage, +- reproduce the Work, +- modify the Work, and make Derivative Works based upon the Work, +- communicate to the public, including the right to make available or display + the Work or copies thereof to the public and perform publicly, as the case may + be, the Work, +- distribute the Work or copies thereof, +- lend and rent the Work or copies thereof, +- sublicense rights in the Work or copies thereof. + +Those rights can be exercised on any media, supports and formats, whether now +known or later invented, as far as the applicable law permits so. + +In the countries where moral rights apply, the Licensor waives his right to +exercise his moral right to the extent allowed by law in order to make effective +the licence of the economic rights here above listed. + +The Licensor grants to the Licensee royalty-free, non-exclusive usage rights to +any patents held by the Licensor, to the extent necessary to make use of the +rights granted on the Work under this Licence. + +## 3. Communication of the Source Code + +The Licensor may provide the Work either in its Source Code form, or as +Executable Code. If the Work is provided as Executable Code, the Licensor +provides in addition a machine-readable copy of the Source Code of the Work +along with each copy of the Work that the Licensor distributes or indicates, in +a notice following the copyright notice attached to the Work, a repository where +the Source Code is easily and freely accessible for as long as the Licensor +continues to distribute or communicate the Work. + +## 4. Limitations on copyright + +Nothing in this Licence is intended to deprive the Licensee of the benefits from +any exception or limitation to the exclusive rights of the rights owners in the +Work, of the exhaustion of those rights or of other applicable limitations +thereto. + +## 5. Obligations of the Licensee + +The grant of the rights mentioned above is subject to some restrictions and +obligations imposed on the Licensee. Those obligations are the following: + +**Attribution right**: The Licensee shall keep intact all copyright, patent or +trademarks notices and all notices that refer to the Licence and to the +disclaimer of warranties. The Licensee must include a copy of such notices and a +copy of the Licence with every copy of the Work he/she distributes or +communicates. The Licensee must cause any Derivative Work to carry prominent +notices stating that the Work has been modified and the date of modification. + +**Copyleft clause**: If the Licensee distributes or communicates copies of the +Original Works or Derivative Works, this Distribution or Communication will be +done under the terms of this Licence or of a later version of this Licence +unless the Original Work is expressly distributed only under this version of the +Licence — for example by communicating ‘EUPL v. 1.2 only’. The Licensee +(becoming Licensor) cannot offer or impose any additional terms or conditions on +the Work or Derivative Work that alter or restrict the terms of the Licence. + +**Compatibility clause**: If the Licensee Distributes or Communicates Derivative +Works or copies thereof based upon both the Work and another work licensed under +a Compatible Licence, this Distribution or Communication can be done under the +terms of this Compatible Licence. For the sake of this clause, ‘Compatible +Licence’ refers to the licences listed in the appendix attached to this +Licence. Should the Licensee's obligations under the Compatible Licence conflict +with his/her obligations under this Licence, the obligations of the Compatible +Licence shall prevail. + +**Provision of Source Code**: When distributing or communicating copies of the +Work, the Licensee will provide a machine-readable copy of the Source Code or +indicate a repository where this Source will be easily and freely available for +as long as the Licensee continues to distribute or communicate the Work. Legal +Protection: This Licence does not grant permission to use the trade names, +trademarks, service marks, or names of the Licensor, except as required for +reasonable and customary use in describing the origin of the Work and +reproducing the content of the copyright notice. + +## 6. Chain of Authorship + +The original Licensor warrants that the copyright in the Original Work granted +hereunder is owned by him/her or licensed to him/her and that he/she has the +power and authority to grant the Licence. + +Each Contributor warrants that the copyright in the modifications he/she brings +to the Work are owned by him/her or licensed to him/her and that he/she has the +power and authority to grant the Licence. + +Each time You accept the Licence, the original Licensor and subsequent +Contributors grant You a licence to their contributions to the Work, under the +terms of this Licence. + +## 7. Disclaimer of Warranty + +The Work is a work in progress, which is continuously improved by numerous +Contributors. It is not a finished work and may therefore contain defects or +‘bugs’ inherent to this type of development. + +For the above reason, the Work is provided under the Licence on an ‘as is’ basis +and without warranties of any kind concerning the Work, including without +limitation merchantability, fitness for a particular purpose, absence of defects +or errors, accuracy, non-infringement of intellectual property rights other than +copyright as stated in Article 6 of this Licence. + +This disclaimer of warranty is an essential part of the Licence and a condition +for the grant of any rights to the Work. + +## 8. Disclaimer of Liability + +Except in the cases of wilful misconduct or damages directly caused to natural +persons, the Licensor will in no event be liable for any direct or indirect, +material or moral, damages of any kind, arising out of the Licence or of the use +of the Work, including without limitation, damages for loss of goodwill, work +stoppage, computer failure or malfunction, loss of data or any commercial +damage, even if the Licensor has been advised of the possibility of such +damage. However, the Licensor will be liable under statutory product liability +laws as far such laws apply to the Work. + +## 9. Additional agreements + +While distributing the Work, You may choose to conclude an additional agreement, +defining obligations or services consistent with this Licence. However, if +accepting obligations, You may act only on your own behalf and on your sole +responsibility, not on behalf of the original Licensor or any other Contributor, +and only if You agree to indemnify, defend, and hold each Contributor harmless +for any liability incurred by, or claims asserted against such Contributor by +the fact You have accepted any warranty or additional liability. + +## 10. Acceptance of the Licence + +The provisions of this Licence can be accepted by clicking on an icon ‘I agree’ +placed under the bottom of a window displaying the text of this Licence or by +affirming consent in any other similar way, in accordance with the rules of +applicable law. Clicking on that icon indicates your clear and irrevocable +acceptance of this Licence and all of its terms and conditions. + +Similarly, you irrevocably accept this Licence and all of its terms and +conditions by exercising any rights granted to You by Article 2 of this Licence, +such as the use of the Work, the creation by You of a Derivative Work or the +Distribution or Communication by You of the Work or copies thereof. + +## 11. Information to the public + +In case of any Distribution or Communication of the Work by means of electronic +communication by You (for example, by offering to download the Work from a +remote location) the distribution channel or media (for example, a website) must +at least provide to the public the information requested by the applicable law +regarding the Licensor, the Licence and the way it may be accessible, concluded, +stored and reproduced by the Licensee. + +## 12. Termination of the Licence + +The Licence and the rights granted hereunder will terminate automatically upon +any breach by the Licensee of the terms of the Licence. + +Such a termination will not terminate the licences of any person who has +received the Work from the Licensee under the Licence, provided such persons +remain in full compliance with the Licence. + +## 13. Miscellaneous + +Without prejudice of Article 9 above, the Licence represents the complete +agreement between the Parties as to the Work. + +If any provision of the Licence is invalid or unenforceable under applicable +law, this will not affect the validity or enforceability of the Licence as a +whole. Such provision will be construed or reformed so as necessary to make it +valid and enforceable. + +The European Commission may publish other linguistic versions or new versions of +this Licence or updated versions of the Appendix, so far this is required and +reasonable, without reducing the scope of the rights granted by the Licence. +New versions of the Licence will be published with a unique version number. + +All linguistic versions of this Licence, approved by the European Commission, +have identical value. Parties can take advantage of the linguistic version of +their choice. + +## 14. Jurisdiction + +Without prejudice to specific agreement between parties, + +- any litigation resulting from the interpretation of this License, arising + between the European Union institutions, bodies, offices or agencies, as a + Licensor, and any Licensee, will be subject to the jurisdiction of the Court + of Justice of the European Union, as laid down in article 272 of the Treaty on + the Functioning of the European Union, + +- any litigation arising between other parties and resulting from the + interpretation of this License, will be subject to the exclusive jurisdiction + of the competent court where the Licensor resides or conducts its primary + business. + +## 15. Applicable Law + +Without prejudice to specific agreement between parties, + +- this Licence shall be governed by the law of the European Union Member State + where the Licensor has his seat, resides or has his registered office, + +- this licence shall be governed by Belgian law if the Licensor has no seat, + residence or registered office inside a European Union Member State. + +## *Appendix* + +‘Compatible Licences’ according to Article 5 EUPL are: + +- GNU General Public License (GPL) v. 2, v. 3 +- GNU Affero General Public License (AGPL) v. 3 +- Open Software License (OSL) v. 2.1, v. 3.0 +- Eclipse Public License (EPL) v. 1.0 +- CeCILL v. 2.0, v. 2.1 +- Mozilla Public Licence (MPL) v. 2 +- GNU Lesser General Public Licence (LGPL) v. 2.1, v. 3 +- Creative Commons Attribution-ShareAlike v. 3.0 Unported (CC BY-SA 3.0) for + works other than software +- European Union Public Licence (EUPL) v. 1.1, v. 1.2 +- Québec Free and Open-Source Licence — Reciprocity (LiLiQ-R) or Strong + Reciprocity (LiLiQ-R+). + +The European Commission may update this Appendix to later versions of the above +licences without producing a new version of the EUPL, as long as they provide +the rights granted in Article 2 of this Licence and protect the covered Source +Code from exclusive appropriation. + +All other changes or additions to this Appendix require the production of a new +EUPL version. diff --git a/README.md b/README.md index 5ed817c..bdfa145 100644 --- a/README.md +++ b/README.md @@ -1,576 +1,66 @@ -# jekyll-theme-codebase-starter-kit +# OpenZaak website -This is a theme which can be used a starting point to created a product website supporting a codebase. This theme requires Jekyll 3.8 so it is compatible with GitHub Pages. +![Test](https://github.com/open-zaak/open-zaak-website/workflows/Test/badge.svg) +![Deploy website](https://github.com/open-zaak/open-zaak-website/workflows/Deploy%20website/badge.svg) -It is a modified version of the Bulma Clean Theme. The original theme can be found here: . The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT). +A website to get potential new users of OpenZaak to get to know it and get them started. -Official manual of this theme can be found at: +This site is a collaborative project by the OpenZaak community and is meant to be [easy to contribute to](CONTRIBUTING.md). -Following features where added: +## Building, testing and deploying -- Multi language support using Polyglot plugin including multi lingual switcher () -- Simple-Jekyll-Search based on -- Collection of communities to present organizations using the Codebase -- Collection of vendors who can support organization with implementing a codebase into a organization +This site is built using [Gatsby](https://www.gatsbyjs.org/). First make sure you have [Node](https://nodejs.org/en/) installed on your machine. Then install the dependencies with the `npm install` command. After this you can use the `npm start` to start a local webserver and build/update the site. -# Short Manual +The website is automatically deployed with pull request on `develop` using a combination Github actions. The workflow for this is configured in `.github/workflows/deploy.yml`. A deploy script is added to `package.json` with the line ` "deploy": "gatsby build"` . More info about the implementation or additional configuration options refer to https://github.com/marketplace/actions/gatsby-publish. -Below is a short manual explaining the specific structure and configurations made for using this theme to create a website to support a codebase. +Pull request to the `develop` branch of this repository are automatically tested by building the Gatsby site using Github actions. The workflow for this is configure in in `.github/workflows/ci.yml` -## Installation -To set up your environment to develop this theme, run `bundle install`. +## Localization +This site has basic multilingual support using the gatsby-plugin-i18n. +It is implemented by the guidelines written in this blogpost: +https://www.gatsbyjs.com/blog/2020-02-19-how-to-build-multilingual-sites-with-gatsby/ -Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. +You can start your won translation by prefixing the extenstions of files which serve up pages by using the ISO countrie codes. Files which do not include such a prefix will be defaulted to the language as configured in the `gatbsy-config.js` file. -## Site structure - -## configuration - -## Multi-language support and how it works - -## Overriding theme CSS styles - -## Notes - -@TODO: create more complete documentation - -This theme is capable of supporting multiple languages. describe config Default language is EN and can be set in `` - -# Original Manual - -For the most up-to-date version please refer to: .
-Below is a copy of the manual based on the version this theme is orginally based on. - -- [Installation](#installation) -- [Usage](#usage) - - - [Pages](#pages) - - - [Page Hero](#page-hero) - - [Table Of Contents](#table-of-contents) - - - [Posts](#posts) - - - [Navigation](#navigation) - - - [Colours and Styles](#colours-and-styles) - - - [Sidebar Visibility](#sidebar-visibility) - - [Menubar](#menubar) - - [Tabs](#tabs) - - [Google Analytics](#google-analytics) - - [Footer](#footer) - - [Products](#products) - - [Scripts](#scripts) - - [Callouts](#callouts) - - [Favicon](#favicon) - - [Showcases](#showcases) - - [Sponsors](#sponsors) - - [Disqus](#disqus) - -- [Contributing](#contributing) - -- [Development](#development) - -- [Licence](#licence) - -## Installation - -**This theme requires Jekyll 3.8 so it is compatible with GitHub Pages.** - -Add this line to your Jekyll site's `Gemfile`: - -```ruby -gem "bulma-clean-theme" -``` - -And add this line to your Jekyll site's `_config.yml`: - -```yaml -theme: bulma-clean-theme -``` - -And then execute: - -``` -$ bundle -``` - -Or install it yourself as: - -``` -$ gem install bulma-clean-theme -``` - -## Usage - -### Pages - -Create your pages as individual markdown files and use the `layout: page` for normal pages. Set the pages title and subtitle in the front matter and it will appear in the hero. - -#### Page Hero - -**New in 0.2** Heros can now display a background image if you provide a `hero_image: /path/to/image.jpg` setting in your page front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml` - -You can also set the height of the hero by providing a bulma hero height class in your front matter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to is-medium - -**New in 0.5.4** If you would like to add a call to action button in the hero then add `hero_link` and `hero_link_text` to the page's front matter. - -**New in 0.5.7** If you would like to hide the hero, you can set `hide_hero: true` in the page's front matter. - -**New in 0.7.1** If you would like to darken the hero so the title stands out more, you can set `hero_darken: true` in the page's front matter. You can overwrite the default background colour by setting the `$hero-darken` sass variable. - -#### Table Of Contents - -**New in 0.5.8** If you want to display a table of contents (toc) then add `toc: true` to your page's front matter. You can customise the default table of contents title by setting `toc_title: My Custom Title` in the page's front matter. - -### Posts - -If you want posts, create a `_posts` directory to store your posts as per normal Jekyll usage, with the `layout: post`. Next create a `blog` directory with an index.html file that has `layout: blog` - -Set the paginate and the paginate_path up in the `_config.yaml` to configure the posts per page and the blog pagination path. - -```yaml -paginate: 5 -paginate_path: "/blog/page:num" -``` - -**New in 0.2** It will now display an image in the blog page if you set `image: /path/to/image.jpg` in your post's or page's front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml` - -You can also set the height of the hero by providing a Bulma hero height class in your front matter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to is-medium - -### Navigation - -For the top navigation, create a navigation.yml file in `_data` directory with the following format with the pages you want to include in the top navigation. You can now also add items to a dropdown menu. - -```yaml -- name: Page 1 - link: /page-1/ -- name: Blog - link: /blog/ - dropdown: - - name: Page 2 - link: /page-2/ -``` - -For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with `permalink: pretty` setting in your `_config.yml` - -### Colours and Styles - -To overwrite the primary theme colour, set a sass variable in `assets/css/app.scss` before importing `main` - -``` -$primary: #333333; -// Import Main CSS file from theme -@import "main"; -``` - -You can overwrite any of the [Bulma initial variables](http://versions.bulma.io/0.7.0/documentation/overview/variables/) in this way as long as they are declared before the `@import "main"'` - -### Sidebar Visibility - -**New in 0.2** - -If you want to show the sidebar with latest posts then set `show_sidebar: true` in the pages frontmatter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml` - -### Menubar - -**New in 0.3** - -The menubar gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the frontmatter. - -```yaml -show_sidebar: false -menubar: example_menu -``` - -You will probably want to disable the show_sidebar otherwise there will be little room for the page content. - -#### Creating a menubar data file - -Create a data file in the _data directory and use the following format (if using yml) - -```yaml -- label: Example Menu - items: - - name: Home - link: / - - name: Pages - link: # - items: - - name: Page With Sidebar - link: /page-1/ - - name: Page Without Sidebar - link: /page-2/ - - name: Page With Menubar - link: /page-3/ - - name: Blog - link: /blog/ -``` - -For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with `permalink: pretty` setting in your `_config.yml` - -#### Multiple menus - -You may make multiple menus in the same file, separated by the label - -```yaml -- label: Menu Label - items: - - name: Example item - link: /example-item/ -- label: Second Menu Label - items: - - name: Parent Item - link: /parent-item/ - items: - - name: Sublink - link: /sublink/ - - name: Sublink 2 - link: /sublink2/ -- label: Third Menu Label - items: - - name: Another example item - link: /another-example-item/ -``` - -### Tabs - -**New in 0.4** - -The tabs gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the front matter. - -```yaml -title: Page with tabs -subtitle: Demo page with tabs -layout: page -show_sidebar: false -menubar: example_menu -tabs: example_tabs -``` - -Tabs can be used in conjunction with menubar and/or sidebar if you wish. - -#### Creating a tabs data file - -Create a data file in the _data directory and use the following format (if using yml) - -```yaml -alignment: is-left -style: is-boxed -size: is-large -items: - - name: Tabs - link: /page-4/ - icon: fa-smile-wink - - name: Sidebar - link: /page-1/ - icon: fa-square - - name: No Sidebar - link: /page-2/ - icon: fa-ellipsis-v - - name: Menubar - link: /page-3/ - icon: fa-bars -``` - -#### Settings - -You can control the alignment, style and size of the tabs by using the relevant [Bulma tabs classes](https://bulma.io/documentation/components/tabs/). - -#### Active Tab Highlighting - -It will automatically mark the active tab based on the current page. - -#### Icons - -You can add icons to your tab by passing in the [Font Awesome icon class](https://fontawesome.com/icons?d=gallery). - -If you don't wish to show icons then simply omit the option from your yaml file. - -### Google Analytics - -**New in 0.2** - -To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property - -### Footer - -**New in 0.4.1** - -To add some footer links, create a yaml file in the `_data` directory using the following format - -```yaml -- name: Blog - link: /blog/ -- name: About - link: /about/ -- name: Privacy Policy - link: /privacy-policy/ -``` - -Then add the name of your yaml file (without the .yml extension) into the footer_menu setting in the `_config.yml` - -```yaml -footer_menu: example_footer_menu -``` - -#### Hiding the footer - -**New in 0.5.2** - -If you would like to hide the footer on a particular page then set `hide_footer: true` in the page's frontmatter. - -### Products - -**New in 0.5** - -Now you can add simple product pages to your site using collections. - -#### Product pages - -Start by creating a `_products` directory to hold your product pages and create a new page for each product, such as `product1.md`. In the front matter for this page you can set the standard settings, such as your title, subtitle, description (for meta-description), hero_image, as well as the additional product settings such as price, product_code, image, features and rating. - -```yaml -title: Product 1 Name -subtitle: Product 1 tagline here -description: This is a product description -hero_image: /img/hero-img.jpg -product_code: ABC124 -layout: product -image: https://via.placeholder.com/640x480 -price: £1.99 + VAT -features: - - label: Great addition to any home - icon: fa-location-arrow - - label: Comes in a range of styles - icon: fa-grin-stars - - label: Available in multiple sizes - icon: fa-fighter-jet -rating: 3 +```example: +index.en.js serves the english equivalent of that page. ``` +The plugin makes all the language specific files available under the site-root/ so in the case of english site-root/en/. -The text you write for the page content will be displayed as the product description. - -Next, add the following to your `_config.yml` to use collections to process the product pages and output them as individual pages. +### Navigation menu +The navigation menu uses a a key-value list to translate the seperate navigation itmems. The `pages/menu.json` file +contains all the items and translations. To add a new language simply copy another language array, insert the language code and make the language specific translations. -```yaml -collections: - products: - output: true - layout: product - image: https://via.placeholder.com/800x600 - show_sidebar: false ``` - -You can also set default product page values here if you like, such as the layout or image. - -#### Product Reviews - -To add reviews to your product page, create a `reviews` directory in the `_data` directory and add a yml file with the name of the product_code from the product page, for example `_data/reviews/ABC124.yml`. Create the reviews using the following format: - -```yaml -- name: Mr E Xample - rating: 4 - title: Great product, highly recommended - date: 01/01/2019 - avatar: https://bulma.io/images/placeholders/128x128.png - description: > - The product worked really well. I would recommend this to most people to use. Delivery was quick and reasonable. - Would recommend this to my friends. -- name: Mrs R E View - rating: 5 - title: Nice, really liked this - date: 02/02/2019 - description: > - The product worked exactly as described. +"nl": [ + { + "title": "Over OpenZaak", + "link": "/#over-openzaak", + "partiallyActive": false + }, ``` +The footer part of the website is generated using the values listed in the `menu.json` file. -If you don't want to display an avatar image then a default user icon will be displayed. If you don't want to display a rating then omit it from the yml. +### IMPORTANT: Internal linking from within markdown files ot other markdown files. +Markdown files in the `pages` folder are converted to HTML during build time using the `/templates/default.js script`. Note that when you refer from one markdown file to the other always to include a trailing slash or the GraphQL query will fail and result in a failing build. -#### Product Category Page - -To create a page listing your products you will need to create a product category page. Create a page, for example `products.md`, with the `layout: product-category` in the frontmatter. You can set the sort order of the products using `sort: title` to sort by the title, or by any setting in your product pages, such as price, rating or any custom frontmatter tags you wish to set. - -```yaml -title: Products -subtitle: Check out our range of products -layout: product-category -show_sidebar: false -sort: title -``` +### Imported pages do not automatically resolve to language specific versions -### Scripts +Imports in pages need to be referenced explicitly and do not resolve automatically. -**New in 0.5.2** +For example `import Payoff from '../components/Payoff/` will always resolve to `import Payoff from '../components/Payoff/index.js`. So if you need to reference a language specific version you should indicate the filename `import Payoff from '../components/Payoff/index.en.js`. -There are two new files within the includes directory called `head-scripts.html` and `footer-scripts.html`. These are empty files by default but allow you to add any additional JavaScript to your site, such as the script for AddThis share buttons, in the `` or after the `