Skip to content

HOWTO.md

Latest commit

 

History

History
224 lines (176 loc) · 12.1 KB

HOWTO.md

File metadata and controls

224 lines (176 loc) · 12.1 KB

Development and release

Run live test version

make dev

Version number

  • Adapt version and version_year in src/_data/const.yml
  • or: Write version number in line 1, as array in line 2 and year in line 3 in VERSION and call 
    make versionwrite
  • or: Get version number from JSXGraph project (in same directory as this project): 
    make version

Update "releases"

  • File: src/about/releases/_releases-list.section.md

Build files in distrib/

make build

Release / Upload to server

  • build and upload:
make release
  • upload only:
make upload  # upload prebuild distrib directory

The Upload does:

  • Copy files in distrib/ to the server via: 
    scp -r distrib/ root@132.180.10.7:/net/httpd/htdocs/jsxgraph/home.new
  • Link new version to https://jsxgraph.org and link https://jsxgraph.uni-bayreuth.de via 
    ssh root@132.180.10.7 "cd /net/httpd/htdocs/jsxgraph/; rm -r home.old; mv home home.old; mv home.new home;"

Components

References and Links

To refer an image or document within this page use the reference a follows:

  1. Start the reference with {{ relBase }}.
  2. After this, add /.
  3. Now define the path to the file from root file of the homepage.

For links use one of the following syntax:

[<Text>]({{ relBase }}/<Link>)      # to refer an internal site or file.
[<Text>](https://<link>)            # to refer an external webpage.

Links are automatically supplemented with target="_blank" if

  • they contain a link beginning with http:// or https://.
  • they refer to a file ending with .pdf, .jpg, .png, .svg, .sketcho, .zip, .woff or .ttf. These links are also preceded by an icon.

JSXGraph boards

You can include any board via

{%- capture jscode %}
    ...                             // js code
{% endcapture -%}
{%
    include part/board.html
    
    js=jscode                       // mandatory
    boardid=...                     // mandatory
    title=...                       // optional
    title_pos=...                   // before or after
    link=...                        // optional
    target=...                      // _self or _blank
    class=...                       // optional
    class_title=...                 // optional
    width=...                       // optional
    height=...                      // optional
    aspect_ratio=...                // optional
    max_width=...                   // optional
%}

or with a separate file _[].js:

{%
    include part/board.html
    
    jsfile=...                      // mandatory name of file between _ and .js
    boardid=...                     // mandatory
    title=...                       // optional
    title_pos=...                   // before or after
    link=...                        // optional
    target=...                      // _self or _blank
    class=...                       // optional
    class_title=...                 // optional
    width=...                       // optional
    height=...                      // optional
    aspect_ratio=...                // optional
    max_width=...                   // optional
%}

Code highlighting

Change theme by executing

rougify style ... > src/assets/less/code_highlighting.css

Following styles are available: base16, base16.dark, base16.light, base16.monokai, base16.monokai.dark, base16.monokai.light, base16.solarized, base16.solarized.dark, base16.solarized.light, bw, colorful, github, github.dark, github.light, gruvbox, gruvbox.dark, gruvbox.light, igorpro, magritte, molokai, monokai, monokai.sublime, pastie, thankful_eyes, tulip

Buttons

<a type="button" colorclass="<colorclass>" href="{{ relBase }}/url/to/your/target">
    title
</a>

Copy button

{% include part/copybutton.html data="<content>" %}

It is important to use either <a type="button" or <button type="button" and no class. The attribute colorclass can also been omitted.

Images

Add images by using one of the following lines

<img src="{{ relBase }}/<link-to-image>" alt="<title>">
![<title>]({{ relBase }}/<link-to-image>)

by replacing <link-to-image> and <title>. Pay attention to this.

Images always have a width of 100%. If you would like to have a different formatting, use section image.

Sections

The following sections (and params) are possible:

layout data attribute type possible values and defaults effect
text class optional e.g. "bg-primary" for background color css class for div
subpages parent optional id of page (default: this page) id of parent page
polygon optional shape (default: detault_polygon) shape of boxes
image-block image obligatory url starting with / path to the image or gif
image_pos optional first | second the image is to the left or right of the text block
image1 image obligatory url starting with / path to the image or gif
title optional plain text optional title displayed in the bottom right corner
width optional dimension with unit, default: 100% optional dimension
class optional e.g. "mx-auto" for centering css class for img
blogs delimiter_header optional #␣ | @... lines beginning with this string are used as headers
delimiter_badge optional >␣ | @... badge after header line
badge_is_date optional false | @... string which formats date
delimiter_id optional >␣ | @... id after header line
n optional -1 | 1 | 2 | 3 | ... maximum entries
accordion delimiter_header optional #␣ | @... lines beginning with this string are used as headers
delimiter_badge optional >␣ | @... badge after header line
badge_is_date optional false | @... string which formats date
delimiter_id optional >␣ | @... id after header line
n optional -1 | 1 | 2 | 3 | ... maximum entries
arrows optional right | left position of arrow
open optional -1 | 0 | 1 | 2 | ... which entry should be open?
cards delimiter_header optional #␣ | @... lines beginning with this string are used as headers
delimiter_image optional >␣ | @... image after header line
delimiter_link optional >␣ | @... link after header line
delimiter_id optional >␣ | @... id after header line
n optional -1 | 1 | 2 | 3 | ... maximum entries
board-block boardid obligatory unique id unique id that is used in code_file
board_pos optional first | second the board is to the left or right of the text block
title optional plain text subtitle under the board
link optional url link for the subtitle
target optional _blank | _self target for the link (default will be calculated)
width optional 100% | ... width of the board
height optional auto | ... height of the board
aspect_ratio optional 1/1 | ... aspect-ratio of the board
code_file optional url starting with / path to the js file (default is same as file with ending .js)
board1 code_file optional url starting with / path to the js file (default is same as file with ending .js)
boardid obligatory unique id unique id that is used in code_file
title optional plain text subtitle under the board
link optional url link for the subtitle
target optional _blank | _self target for the link (default will be calculated)
width optional 500px | ... width of the board
max_width optional 100% | ... max-width of the board
height optional auto | ... height of the board
aspect_ratio optional 1/1 | ... aspect-ratio of the board
class optional e.g. "mx-auto" for centering css class for board

Notes:

Footnotes

  1. file does not determine a file .section.md but the path of the extra file. ↩ ↩2