• What is it?
• Alerts & block content
• Images:
• Equations
• 3D viewer
• Bibliography
  • Loading Bibliography
  • Citing References
  • Multiple Citations
  • Citation Styles
  • Complete Bibliography
    • Default
    • apa

What is it?

SKCG is a custom gem that works with jekyll and provides useful liquid tags to create more academic posts. It is useful to create equations, images and references to them. Also provides bibliography funcitonalities.

Alerts & block content

Alerts are just a wrapper div with background color. We use bootstrap styles in the background.

Images:

• Multiple images in a single figure 1:

Multiple images in a single figure  {% ref figure:1:2:3 %}

{% figure id="1:2:3" size="1.0" 
  caption="Three images but only a max of two images per row"
  col="2" %}
  /images/image-not-found.png
  /images/image-not-found-long.png
  /images/image-not-found-long.png
{% endfigure %}

• multiple figures in the same line 2 3 4:

multiple figures in the same line {% ref figure:img %} {% ref figure:img3 %} {% ref figure:img2 %}: 

{% figure id="img" size="0.49" caption="square image" %}
/images/image-not-found.png
{% endfigure %}

{% figure id="img3" size="0.49" caption="long image" %}
/images/image-not-found-long.png
{% endfigure %}

{% figure id="img2" size="0.49" caption="long image" %}
/images/image-not-found-long.png
{% endfigure %}

Equations

As shown in equation 1, energy is proportional to mass. Also we can write in line equations as $E = mc^2$

{% equation id="energy" %}
E = mc^2
{% endequation %}

As shown in equation {% ref equation:energy %}, energy is proportional to mass. Also we can write in line equations as {% equation_inline E = mc^2 %}

3D viewer

I personally like to keep the code clean. For this reason I delegate the render properties to files like shaders and jsons that define Properties and render pipeline.

Additionally, all models will be stored in a unique path (even though you can add subpaths) because they can be heavy and I like to reuse them. The same idea with materials. Textures should be placed wherever you think is best for the shaders.

This is the structure I use:

assets/
├── models/
│   ├── model1.glb
│   ├── model2.glb
│   └── materials/
│       ├── material1/
│       │   ├── fragment.glsl
│       │   ├── uniforms.json
│       │   └── vertex.glsl
│       └── material2/
│           ├── fragment.glsl
│           ├── uniforms.json
│           └── vertex.glsl

{% glb_viewer 
id        = 'viewer-1' 
models    = 'suzane,    sphere' 
materials = 'material1, enviorment' 
%}

Bibliography

Bibliography management allows you to load references from a BibTeX file and cite them throughout your document. The gem supports both IEEE and APA citation styles.

Loading Bibliography

First, load your bibliography file at the beginning of your document:

{% bibliography_loader _bibliography/references.bib %}

Citing References

You can cite references anywhere in your text using the cite tag. For example, citing Ruby [1: The Ruby Programming Language; Flanagan, David, Matsumoto, Yukihiro; 2008]:

We can reference bibliography elements {% cite ruby %} with a liquid tag.

Multiple Citations

You can cite multiple sources in the same paragraph. Here’s an example citing different programming languages [1: The Ruby Programming Language; Flanagan, David, Matsumoto, Yukihiro; 2008] and [2: Flow Cytometry: The Glass Is Half Full; Shapiro, Howard M.; 2018] frameworks:

Multiple citations can be used like {% cite ruby %} and {% cite my001 %}.

Citation Styles

The bibliography tag supports different citation styles (IEEE by default, APA available):

<!-- Default IEEE style -->
{% bibliography %}

<!-- APA style -->
{% bibliography apa %}

Complete Bibliography

The bibliography displays all cited references in the order they appear in your document:

Default

apa