gnis-ld.org

Frontend for https://gnis-ld.org

Building

To build the source, run gulp from the project root.

When building a development docker image, run

docker build -t thomasthelen/gnis-ld:dev .

When building a production docker image, run

docker build -t thomasthelen/gnis-ld .

Finally, push the image to thomasthelen/gnis-ld:<dev/latest>

Differentiating Between Production & Development

The main difference between production and development builds is the base URL. For example, development builds that are deployed on the develop cluster have address stage.gnis-ld.org while production builds have gnis-ld.org. This value is controlled by the DEPLOYMENT_ADDRESS variable in config.app.js.

Running

To run the website, run the following from the project root

npm i -g gulp
npm i
gulp

Developing

Website Design

The website uses pug templates with less css. layout.pug holds the base template for each page. In it, it has the layout for the banner, page content, and the footer. The HTML for the banner and footer are generated by calling mixings. The page content is defined in an external file. Examples of these include 'about.pug' and 'queries.pug'. The content in these files are passed into the main template and the result is a page that should look okay with the rest of the site. If a page needs to have any content in the header (for linking scripts, stylesheets, etc), block content-header can be defined with the requirements.

For example, to create a new page called news, create a new pug file as lib/webapp/_layout/news.pug.

news.pug

block content-header
  link(rel='stylesheet', type='text/css', href='/style/news.css')
  script(src='/script/news.js')

block content-block
  body
    .content-layout
      .left-col 
      .content
        .page-content
          .news-content1
            p Breaking News Story 1
          .news-content2
            p foo
          .news-content3
            p bar

One shortcoming of the template is the tricky rule that every page must have, at a minimum in their content-block.

  body
    .content-layout
      .left-col 
      .content
        .page-content

New page content is inserted underneath the page-content div.

Next, add a route in server.js so that connecting clients get the correct page delivered.

k_app.get([
	'/news',
], (d_req, d_res) => {
	d_res.type('text/html');
	d_res.render('news');
  d_res.set('Access-Control-Allow-Origin', '*');
});

Finally, add the page to the navigation bar.

Build System

gulpfile.js contains the gulp tasks for building and running the application. Each gulp task accomplishes a small part in the build process. For example, there's a task for turning the less styling sheets into css and another for compiling the pug files. There are also higher level tasks that combine these steps, for example the default task (which performs a build).

One potentially confusing part of the build/content serving system is that not all files are served from dist/. The paths to the files (css, ontology files, robots.txt, etc) are defined in server.js. Some of the files are being directly served from the lib directory.

Acknowledgments

Work on this package was supported by:

• NSF OIA grant 2033521 to Krzysztof Janowicz