Examples

General remarks

Please be careful about indentation.

Sidenote: The .pug files are converted to .html files which are then sent to your browser when you type in the url of the website. You can put html code directly into the pug code. HTML code can be reconized by these two brackets: "<" and ">"

Formatting your text

Paragraphs

This is a very nice paragraph

The code for a paragraph:

p This is a very nice paragraph

Headings

heading 2

The main headings in your page.

heading 3

The subheadings in your page.

heading 4

The subsubheadings in your page.

heading 5

The subsubsubheadings in your page.

heading 6

The subsubsubsubheadings in your page.

The code for headings:

h2 heading 2
p The main headings in your page.
h3 heading 3
p The subheadings in your page.
h4 heading 4
p The subsubheadings in your page.
h5 heading 5
p The subsubsubheadings in your page.
h6 heading 6
p The subsubsubsubheadings in your page.

Bold

To make something bold you need to wrap html tags around

The code for bold text:

To make something <strong>bold</strong> you need to wrap html tags around

Italics

To use italics you can use

The code for italics text:

To use <i>italics</i> you can use

Special characters

Characters such as: &, >, €, ≠, ...

They have usually this format: &#number

You need to use entity numbers in the pug code so they show properly.

Here a website where you can find a few entity numbers. Use entity numbers not names pls. But you can also Google yourself.

Highlight abstract text

HESTIA aims to develop a new insulative material to meet climate needs and revolutionize the building industry. Made of a cellulose aerogel coated with recombinant proteins to impart modular properties such as fire and water resistance, this innovative material has great insulating properties and is biodegradable.

On this page, we present the results of our experiments, starting from the aerogel production, continuing with the protein expression and purification, finishing with the binding between our modular coating and the aerogel.

The code for the abstract highlight:

.abstract-highlight
  p HESTIA aims to develop a new insulative material to meet climate needs and revolutionize the building industry. Made of a cellulose aerogel coated with recombinant proteins to impart modular properties such as fire and water resistance, this innovative material has great insulating properties and is biodegradable.
  p On this page, we present the results of our experiments, starting from the aerogel production, continuing with the protein expression and purification, finishing with the binding between our modular coating and the aerogel.

Lists

Bullet points

  • myText1

  • myText2

  • myText3

The code for the bullet points:

ul
  li: p myText1
  li: p myText2
  li: p myText3

Numbered list

  1. myText1
  2. myText2
  3. myText3

The code for the numbered list:

ol
  li myText1
  li myText2
  li myText3

Commenting

Please refer to pug commenting guide explaining how to comment lines and blocks in .pug files.

On the left side you see the .pug code and on the right side how this will be "printed" in html

Please try to use "//-" instead of "//"

Conditional Comments section can be ignored

Links

Links can lead you to the a different section on the same page or to the beginning of an different page or to a specific section on a different page.

In the code they look something like this:

Links can lead you to the a <a href="#abstract">different section on the same page</a> or to the beginning of an <a href="notebook.html">different page</a> or to a <a href="medals-and-awards.html#heading-2">specific section on a different page</a>.

It can also look differently, but that shouldn't be important to you:

a(href='https://2022.igem.wiki/epfl/')

If you want to link to a specific section and you look at the examples from above you see that you have to use #id. This id needs to be also added to the specific section you want to jump to. So for the "different section on the same page" example this is:

h2#abstract Abstract

And works the same for the "specific section on a different page" example. In theory it should be the code below (please don't look at the actual pug code from that site though as reference because it is a confusing special case)

h2#heading-2 Gold Medal

Note that this can look more complicated, but is essentially the same:

h2#heading-2.medal-title Gold Medal

The ".medal-title" is a class. The #id you are referencing to should be directly behind the html tag (ex: h3, p, img, etc.)

Please be careful with links. You can link anything but judges are only authorized to judge what you put on iGEM.

When linking to a an external page on the iGEM domain (for example the parts regisrty) you should make clear in your code that you are "leaving" the site and that this is an external page. You do this by adding target="_blank". Here is an example from last year's Cure iGEM Parts Overview page:

  • Part K4035002 has a flexible linker made of 3 times the GGGGS amino acid sequence.

  • Part K4035003 has a flexible linker made of 4 times the GGGGS amino acid sequence.

ul
  li: p Part <a href="http://parts.igem.org/Part:BBa_K4035002" target="_blank";>K4035002</a> has a flexible linker made of 3 times the GGGGS amino acid sequence.
  li: p Part <a href="http://parts.igem.org/Part:BBa_K4035003" target="_blank">K4035003</a> has a flexible linker made of 4 times the GGGGS amino acid sequence.

Table

Table 1Some smart caption
First column title Second column title Third, you guess..
0.54 0.75 1.72
2.45 0.75 1.55

Note that the caption for tables is above the table.

The code for the table:

table
  caption
    span Table (X)
    span Some smart caption
  thead
    tr
      th First column title
      th Second column title
      th Third, you guess..
  tbody
    tr
      td 0.54
      td 0.75
      td 1.72
    tr
      td 2.45
      td 0.75
      td 1.55

A table with merged cells:

Table 2Some smart caption
First column title Second column title Third, you guess..
Subtitle
2.45 0.75 1.55
Subtitle2 Subtitle3
0.54 0.75 1.72

The code for a table with merged cells:

table
  caption
    span Table (X)
    span Some smart caption
  thead
    tr
      th First column title
      th Second column title
      th Third, you guess..
  tbody
    tr
      td(colspan='3') Subtitle
    tr
      td 2.45
      td 0.75
      td 1.55
    tr
      td(colspan='2') Subtitle2
      td Subtitle3
    tr
      td 0.54
      td 0.75
      td 1.72

Merged cells can by produced bu adding (colspan='X') at the end of the td.

Note that Subtitle3 is formated in the normal way since it is not a merged cell.

If you want this specific cell to be also formatted like a subtitle you can add .highlight

See the example below:

Table 3Some smart caption
First column title Second column title Third, you guess..
Subtitle
2.45 0.75 1.55
Subtitle2 Subtitle3
0.54 0.75 1.72

The code for styling specific td's also as a subtitle:

table
  caption
    span Table (X)
    span Some smart caption
  thead
    tr
      th First column title
      th Second column title
      th Third, you guess..
  tbody
    tr
      td(colspan='3') Subtitle
    tr
      td 2.45
      td 0.75
      td 1.55
    tr
      td(colspan='2') Subtitle2
      td.highlight Subtitle3
    tr
      td 0.54
      td 0.75
      td 1.72

This is an example where this could become handy:

Table 4Results of implementation of the model into experiments
  01a solution 03a solution
Conc. (mol/L) 1.1293 * 1e-6 1.319 * 1e-6
Conc.(mg/L) 9.283 * 1e-2 9.427 * 1e-2
Volume (mL) 1.392 1.260 
table
    caption
      span Table (X)
      span Results of implementation of the model into experiments
    thead
      tr
        th  
        th 01a solution
        th 03a solution
    tbody
      tr
        td.highlight Conc. (mol/L)
        td  1.1293 * 1e-6
        td  1.319 * 1e-6
      tr
        td.highlight Conc.(mg/L)
        td  9.283 * 1e-2
        td  9.427 * 1e-2
      tr
        td.highlight Volume (mL)
        td  1.392
        td  1.260

Adding References

Look at some of the examples in the code.

If you want to add a reference multiple times give an id="unique_id" to the ref tag that you want to reuse. The doi, author etc. only need to be defined in the first ref.

You can look at the example below

Find optimal CSS image width

In order to find out the width you want for your single image figure you

  1. Upload the original not-yet-compressed image file to the iGEM z_testing folder and copy the image URL
  2. Open web dev tools in Browser by

    1. Chrome: pressing Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS)

    2. Firefox: pressing Command+Shift+C (Mac) or Control+Shift+C (Windows)

  3. Click on the "Select an element on the page to select it" button in left

    image to be replaced

  4. Click on the "Replace me" image

    image to be replaced

  5. Double click on the src="https://static.igem.wiki/teams/4439/wiki/z-testing/find-optimal-css-image-width-replace-me.jpeg" code
  6. Replace the URL by image URL from the original image you uploaded to iGEM and want to test

    image to be replaced

  7. Hit enter (the image should change). In the example above you can see that the text is too small and the CSS width should be increased.
  8. Change the CSS width width="600" to other sizes in order to test which size you want your image to have. (you do this again by double clicking, modifying and then enter). Keep in mind that the CSS width should be 370 < width < 830 for single image figures.

Figure 2 is a reference image. If there is text on your image it should have roughly the same size as on the reference image. So this is clearly not the case at the moment ;)

image to be replaced
Figure 1To-be replaced imageThe description of the figure.
reference image for text size
Figure 2Reference image text sizeThe description of the figure.

Image Representations

Single Image Figure

description
Figure 3ExperimentThe description of the figure.

The code for the single image figure - marked in red what you need to change:

figure
  img(src='https://static.igem.wiki/teams/4439/wiki/z-testing/examples-testing-gel-1-2x.jpeg', alt='description', width='600', height='auto', loading='lazy')
  figcaption
    span Figure (X)
    span Experiment
    span The description of the figure.

Checklist

  1. Make sure you
    1. Know your CSS image width (width in code)
    2. Compressed the image
    3. Uploaded your compressed image to the iGEM website and have the URL
  2. Now go to your page on Gitlab and "Open in Web IDE". Copy the figure code from above and paste it where the new figure is supposed to be. Pay attention to the indents. Now you
    1. Change the CSS width of the image in code if it is ≠ 600. Modify therefore the width='600' in the code. Keep in mind that the CSS width should be 370 < width < 830. Image pixel width from the image you uploaded to iGEM should be always double the CSS width in code.
    2. Add a short alt text if you want the text to be accessible (no more than 20 words). Or leave it empty. Depending on your choice change/delete the string "description" in alt='description'.
    3. Change the span text

Slideshow of Images

The code for the slideshow:

.splide
  .splide__track
    .splide__list
      .splide__slide: img(src='https://static.igem.wiki/teams/4439/wiki/24-team/0-0.jpg')
      .splide__slide: img(src='https://static.igem.wiki/teams/4439/wiki/24-team/0-1.jpg')
      .splide__slide: img(src='https://static.igem.wiki/teams/4439/wiki/24-team/0-2.jpg')

If you want to add/remove images then add/remove a line of .splide__slide: img(src='url')

Clickable Images

Aerogel

Protein

Linking

The code for the clickable images:

.clickable-images
  a(href="#heading-8")
    p Aerogel
    img(src="https://static.igem.wiki/teams/4439/wiki/click-aerogel.png")
  a(href="#heading-8")
    p Protein
    img(src="https://static.igem.wiki/teams/4439/wiki/click-protein.png")
  a(href="#heading-8")
    p Linking
    img(src="https://static.igem.wiki/teams/4439/wiki/click-linking.png")

PDF preview

The code for the PDF preview:

iframe(src='https://static.igem.wiki/teams/4439/wiki/09-human-practices/debate-rules-of-procedure-simplified.pdf', style='width:550px; height:400px; max-width:100%')

Abstract

EMPA

Type: Research Institute

image to be replaced

Interview with EMPA

Read morearrow connected to link

Aerogel is a fairly new and niche material, a particular product of the material science field, with unique challenges in mass production. We needed a stakeholder with thorough experience in aerogels both as research materials but also in an industrial context.

The Swiss Federal Laboratories for Materials Science and Technology (EMPA) is a multidisciplinary Swiss research institute with deep connections to academia and industry. We met Dr. Ivan Lunati and Dr. Wim Malfait to understand the scientific interests and concerns behind aerogels (scientists as stakeholders), how the current industrial scale production of aerogels is achieved, how material science contributes to a more sustainable society and the challenges our solution had to overcome to compete with the existing application: silica aerogel.

20% of the global aerogel market is dedicated to insulating buildings. 25-50% of this section is in Switzerland.

ISOVER

Type: Insulation Producer

image to be replaced

Interview with ISOVER

Read morearrow connected to link

We might be consuming a lot of energy to produce glass wool. Yet if you look at the whole picture on long term scale, we have a fairly small impact on the environment.

In order to come up with a new insulation material, one should first understand the intricacies of the current applications. For that, what can be better than seeing the process firsthand by visiting an insulation material production facility?

ISOVER is the Swiss branch of the global Saint-Gobain construction group, headquartered in France. They are the leading producer of glass wool in Switzerland, with a distinct “Swiss-made” mindset. Our discussions with ISOVER gave us crucial insights about how insulation materials are produced on an industrial scale, which qualities and standards are expected from them and how to best achieve maximum insulation with minimal material usage. Through them, we also got to know the global insulation market better and received ideas for specific material implementations.

EMPA

Type: Research Institute

image to be replaced

Interview with EMPA

Read morearrow connected to link

Aerogel is a fairly new and niche material, a particular product of the material science field, with unique challenges in mass production. We needed a stakeholder with thorough experience in aerogels both as research materials but also in an industrial context.

The Swiss Federal Laboratories for Materials Science and Technology (EMPA) is a multidisciplinary Swiss research institute with deep connections to academia and industry. We met Dr. Ivan Lunati and Dr. Wim Malfait to understand the scientific interests and concerns behind aerogels (scientists as stakeholders), how the current industrial scale production of aerogels is achieved, how material science contributes to a more sustainable society and the challenges our solution had to overcome to compete with the existing application: silica aerogel.

20% of the global aerogel market is dedicated to insulating buildings. 25-50% of this section is in Switzerland.

ISOVER

Type: Insulation Producer

image to be replaced

Interview with ISOVER

Read morearrow connected to link

We might be consuming a lot of energy to produce glass wool. Yet if you look at the whole picture on long term scale, we have a fairly small impact on the environment.

In order to come up with a new insulation material, one should first understand the intricacies of the current applications. For that, what can be better than seeing the process firsthand by visiting an insulation material production facility?

ISOVER is the Swiss branch of the global Saint-Gobain construction group, headquartered in France. They are the leading producer of glass wool in Switzerland, with a distinct “Swiss-made” mindset. Our discussions with ISOVER gave us crucial insights about how insulation materials are produced on an industrial scale, which qualities and standards are expected from them and how to best achieve maximum insulation with minimal material usage. Through them, we also got to know the global insulation market better and received ideas for specific material implementations.

The code for the right-sided abstract without fade-in animations:

.abstract-container._right
  .title
    h3 Abstract title
    p Type: Stakeholder Type
  .image
    img(src='https://static.igem.wiki/teams/4439/wiki/z-testing/find-optimal-css-image-width-replace-me.jpeg', alt='abstract image description', loading='lazy')
  .links
    p Interview with someone
    a(href='https://2022.igem.wiki/epfl/')
      span
        b Read more
      img(src='https://static.igem.wiki/teams/4439/wiki/00-general/read-more.svg', alt='arrow connected to link', loading='lazy')
  .teaser
    blockquote
      p A very intelligent quote.
    p Blablabla.
    p Blablabla. #BeLikeAralAndHaveYourWikiTextsReady

The code for the left-sided abstract without fade-in animations:

.abstract-container._left
  .title
    h3 Abstract title
    p Type: Stakeholder Type
  .image
    img(src='https://static.igem.wiki/teams/4439/wiki/z-testing/find-optimal-css-image-width-replace-me.jpeg', alt='abstract image description', loading='lazy')
  .links
    p Interview with someone
    a(href='https://2022.igem.wiki/epfl/')
      span
        b Read more
      img(src='https://static.igem.wiki/teams/4439/wiki/00-general/read-more.svg', alt='arrow connected to link', loading='lazy')
  .teaser
    blockquote
      p A very intelligent quote.
    p Blablabla.
    p Blablabla. #BeLikeAralAndHaveYourWikiTextsReady

The code for the right-sided abstract with fade-in animations:

.abstract-container._right.fadein
  .title.fadein-target
    h3 Abstract title
    p Type: Stakeholder Type
  .image.fadein-target(data-delay="1")
    img(src='https://static.igem.wiki/teams/4439/wiki/z-testing/find-optimal-css-image-width-replace-me.jpeg', alt='abstract image description', loading='lazy')
  .links.fadein-target(data-delay="2")
    p Interview with someone
    a(href='https://2022.igem.wiki/epfl/')
      span
        b Read more
      img(src='https://static.igem.wiki/teams/4439/wiki/00-general/read-more.svg', alt='arrow connected to link', loading='lazy')
  .teaser.fadein-target
    blockquote
      p A very intelligent quote.
    p Blablabla.
    p Blablabla. #BeLikeAralAndHaveYourWikiTextsReady

The code for the left-sided abstract with fade-in animations:

.abstract-container._left.fadein
  .title.fadein-target
    h3 Abstract title
    p Type: Stakeholder Type
  .image.fadein-target(data-delay="1")
    img(src='https://static.igem.wiki/teams/4439/wiki/z-testing/find-optimal-css-image-width-replace-me.jpeg', alt='abstract image description', loading='lazy')
  .links.fadein-target(data-delay="2")
    p Interview with someone
    a(href='https://2022.igem.wiki/epfl/')
      span
        b Read more
      img(src='https://static.igem.wiki/teams/4439/wiki/00-general/read-more.svg', alt='arrow connected to link', loading='lazy')
  .teaser.fadein-target
    blockquote
      p A very intelligent quote.
    p Blablabla.
    p Blablabla. #BeLikeAralAndHaveYourWikiTextsReady

Checklist

  1. Image compression. You can assume that the CSS image width is 400. Pixel image width should be resized to 800 (2x400).
  2. Subpage link. Replace the link in the a tag by the corresponding subpage URL.
  3. You replace the text. Feel free to play around: make some text bold, change where the blockquote to beginning or end, etc.

Creating Subpages

Create a new file in the pages folder on Gitlab, don't forget .pug ending!

Note that the name you give this file will become the URL. For example, parts.pug will be deployed on https://2022.igem.wiki/epfl/parts.html.

References