Skip to content

Resolve "Create a tutorial/getting started page"

This MR overhauls the giro3d.org website with several additions :

  • Add a "getting started" section with a step by step tutorial (#170 (closed))
  • Display source code in each example page (similar to what OpenLayers do) (#169 (closed))
  • Removes a lot of boiler plate HTML in examples.
  • Cleanup example code (#204)
  • Add OpenGraph/Twitter headers to enable sharing URLs to giro3d.org on social networks (#221 (closed))

To build and run the site on localhost:

npm run build-site
npm run serve-site

Add a "getting started" section with a step by step tutorial (#170 (closed))

The tutorial page is the transformation of the planar.js (renamed getting-started.js) example using docco-next.

This page contains two panes : the left pane is the rendered comments of the getting-started.js example. The right pane is the rendered JavaScript code.

The comments contain links to the relevant section of the API documentation (Extent, Map, Layer, etc.).

We use the original docco.ejs template slightly modified to include the navbar and the bootstrap styles.

We use the original docco.css style sheet slightly modified to stop overriding bootstrap's default fonts, in order to be as close as possible to the other site pages (examples, API, and the front page).

The tutorial page is built at the same time as the rest of the site.

image

image

image

Display source code in each example page (#169 (closed))

We use shiki to highlight the source code of examples. The example page now also displays the title and description.

image

Removes a lot of boiler plate HTML in examples.

A lot of HTML code is moved to the example template, so that we don't repeat the same HTML code over and over. Now, if an example does not include any custom HTML (buttons, sliders, etc.), the content of the example stub is just the title and description metadata:

---
title: IGN data
shortdesc: Display a map of France with various IGN datasets (elevation and orthophotography).
---

Add OpenGraph/Twitter headers to enable sharing URLs to giro3d.org on social networks (#221 (closed))

Each page in the website now include OpenGraph and Twitter headers so that sharing a link to the page on social networks now include the title, description and thumbnail :

image

Note: the URL displayed in the social card is a temporary URL used to test the rendered resul. The final URL will be giro3d.org.

Edited by Sébastien Guimmara

Merge request reports