Skip to content
This repository has been archived by the owner. It is now read-only.
Frontend partials to include in non-react applications
JavaScript HTML Dockerfile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.gitlab-ci/runner
flow-typed/npm
helpers
src
.dockerignore
.eslintrc.js
.flowconfig
.gitignore
.gitlab-ci.yml
.nvmrc
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
jest.config.js
nginx.conf
nodemon.json
package-lock.json
package.json
settings.yml
webpack.config.js

README.md

Frontend Skeleton

GitHub release GitHub license CircleCI

This is a boilerplate for React Redux applications.

Usage

Dependencies

You will need to import the following dependencies. We recommend doing this at the bottom of the page.

<script type="text/javascript"
        src="https://unpkg.com/@babel/polyfill@7.2.5/dist/polyfill.min.js"></script>
<script type="text/javascript"
        src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script type="text/javascript"
        src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script type="text/javascript"
        src="https://unpkg.com/react-redux@6.0.0/dist/react-redux.min.js"></script>
<script type="text/javascript"
        src="https://unpkg.com/react-router-dom@4.3.1/umd/react-router-dom.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/redux@4.0.1/dist/redux.min.js"></script>
<script type="text/javascript"
        src="https://unpkg.com/redux-saga@0.16.2/dist/redux-saga.min.js"></script>
<script type="text/javascript"
        src="https://unpkg.com/styled-components@4.1.3/dist/styled-components.min.js"></script>

Additionally, there is some code shared between the partials, this should come after the above.

<script type="text/javascript"
        src="https://unpkg.com/@apolitical/frontend-partials@0.6.0/dist/vendors~footer~header.js"></script>

Script files for the partials should come after this. The elements they hook into should come before the script files.

Header

Include the header.js script, you can use unpkg to get this.

<script type="text/javascript"
        src="https://unpkg.com/@apolitical/frontend-partials@0.6.0/dist/header.js"></script>

Where you want to place the header, add an element with a data attribute partial-app set to header:

<div data-partial-app="header"></div>

By default, the header will not react to someone being logged out. If you wish for something else to happen (such as a redirect) you can pass in the name of a function in the global scope using the header-logged-out data attribute;

<script>
function goToLogin(e) {
    // console.error(e);
    window.location = '/login';
}
</script>
<div data-partial-app="header" data-header-logged-out="goToLogin"></div>

Footer

Include the footer.js script, you can use unpkg to get this.

<script type="text/javascript"
        src="https://unpkg.com/@apolitical/frontend-partials@0.6.0/dist/footer.js"></script>

Where you want to place the header, add an element with a data attribute partial-app set to footer:

<div data-partial-app="footer"></div>

There are no options for the footer.

Versioning

Use npm version to edit the version number. Either:

  • npm version major|minor|patch for a full release or
  • npm version premajor|preminor|prepatch --preid=meta.data.here for a pre-release

Contributing

If you want to help, that's brilliant! Have a look at our Contributing Guide. We also adhere to a Code of Conduct, so please check that out, it includes details on who to contact if you have any concerns.

You can’t perform that action at this time.