https://github.com/phette23/portable-header

Portable header for inclusion as branding in 3rd-party sites
https://github.com/phette23/portable-header

Last synced: 27 days ago
JSON representation

Portable header for inclusion as branding in 3rd-party sites

• Host: GitHub
• URL: https://github.com/phette23/portable-header
• Owner: phette23
• Created: 2014-08-27T15:55:01.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-08-12T23:55:02.000Z (about 8 years ago)
• Last Synced: 2024-04-14T23:15:25.286Z (7 months ago)
• Language: JavaScript
• Homepage: https://phette23.github.io/portable-header/
• Size: 240 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Portable Header

HTML header meant for inclusion in LibGuides, OPACs, & other third-party apps where you can paste some HTML in a textarea but not much else. See [an example](https://phette23.github.io/portable-header/).

# Templating

The intention is to make this header as reusable as possible simply by specifying different configurations. To build a new header, run `grunt build` (see **Getting Started** section below) & then copy the output inside "build/index.html". To create a new configuration, write your own config.json & then point to it with the "config" flag. So for a "libguides.json" I created, I might run

```bash

grunt build --config=libguides.json

```

Inside config.json, you define text that will be replaced in the header's code. Currently, you can specify an institutional prefix to avoid code conflicts (e.g. a site might already have an `"id=header"` element), five links and their link text, and two logo images (one for larger screens and one for small). The easiest way to customize is to edit config.json but keep the existing text the same. The configuration must be valid JSON.

There are 2 example configurations in the project in the "config" folder, including one for the California College of the Arts in "config/libguides.cca.json".

# Getting Started

To work on this using its development tools:

- Install [NodeJS](http://nodejs.org/)

- Install [Grunt](http://gruntjs.com/) globally; on the command line, run `npm install -g grunt-cli`

- Inside this project, install its dependencies: `npm install`

There are 3 major Grunt tasks available:

- `grunt build` compiles the SASS into CSS, inlines the CSS & JavaScript into index.html, & puts the final product in a new "build" folder

- `grunt watch` watches for any changes to files inside the "app" folder & then runs `grunt build`

- `grunt lint` tests your code quality (JSHint on JavaScript, SCSS-lint for SASS)

# To Do

- [x] Image URLs as part of config.json

- [x] Explain JSON options

- [x] Example on GitHub pages

- [x] Bigger touch targets (`` inside `
` should be larger)

- [x] Logo should link somewhere

- [ ] Variable number of links?