The current website can be viewed at:
Make sure you have installed:
Then, install bibtexparser for Python:
python3 -m pip install bibtexparser
Sass is a preprocessor for CSS, and Node.js uses nunjucks to preprocess .njk files to .html. In this project, sass and nunjuck sourcefiles (extensions .scss and .njk) are in the sass and njk directories respectively.
To download, click on the Code green button on top of this website, then click Download ZIP
To clone, run this command in your Terminal:
git clone https://github.com/GregAbram/SculptingVisWebsite.git
- If you are using MacOS or Linux:
- In your Terminal program, run
./setup.sh
- In your Terminal program, run
- If you are using Windows:
- In your Powershell or Command Prompt, run
./setup.bat
- In your Powershell or Command Prompt, run
This will create 2 new folders html and css filled with the website's content
Open html/index.html in your web browser to see the website locally
Anytime you add/change files in the sass, njk, or html/publications directories, you will need to run:
./setup.shif you are using MacOS or Linux- Or
./setup.batif you are using Windows
This will keep the css and html directories up to date so a clean checkout can be immediately used.
The files setup.sh (MacOS/Linux) or setup.bat (Windows) will apply Sass and nunjucks preprocessing and places the results in the html and css directories.
When you want to update your publication:
- Locate the corresponding
html/publications/[year]/[title]folder. - Then edit the
image.pngorpub.bibfile inside.
After you're done editing, run ./setup.sh or ./setup.bat.
When you want to add new publications, create a new folder html/publications/[year]/[title]. Each folder should include at least these 2 files:
image.png: A square image that represents your publication.pub.bib: The BibTeX citation for your publication.
A simple pub.bib file may look like this:
@article{Author1_Author2_Author3_Year,
title={Our Awesome Publication},
journal={IEEE Transactions on Visualization and Computer Graphics (to be published)},
author={Author1, Author2, and Author3},
year={2022},
url={link-to-my-publication}
}
After you're done adding your files, run ./setup.sh or ./setup.bat.
Pointers to each page (and subsections, as appropriate) should be added in two places: the lists.njk directory, which is the site map found under the toolbar's Thrusts & Apps button, and html/footer.html, which is the directory that appears at the bottom of each page. When these files are changes, you need to run make.
Here are a list of re-usable assets for each thrust and application page. Unique sections are usually marked with a css id instead of a class.
There are two sizes at the moment: Regular and Big-Text. The use of these can help create emphasis for important ideas.
The default size is regular. To make a big-text paragraph, add class="big-paragraph" to the opening <p> html tag:
<p class="big-paragraph">Sculpting Visualization is a research project</p>
Hero Image
The hero image is the big image that users see when they first land on the page. This lives at the top of the #page-container:
<div id="hero-image">
<img src="./images/path-to-image.jpg">
</div>
Single Paragraph Image
For a single image, insert this code snippet anywhere directly inside the #content container:
<div class="single-image">
<div class="first-image">
<img src="images/path-to-image.jpg">
<h5>Fig. of a really badass render to show how color should be used to graph field data.</h5>
</div>
</div>
Double Paragraph Image
For two images side-by-side in a paragraph, use this directly in the #contentcontainer:
<div class="dual-images">
<div class="first-image">
<img src="images/sample.jpg">
<h5>Other cool things.</h5>
</div>
<div class="second-image">
<img src="images/sample.jpg">
<h5>Hey this is information that is cool and important.</h5>
</div>
</div>
It is recommended to use .jpg image types, as they reduce page load times.