Webseite der O-Phasen Gruppe »Studier Langsam« der Informatiker am Karlsruher Institut für Technologie https://studierlangsam.de

Joshua Gleitze 52834d44fa Merge branch 'update2019' of studierlangsam/webseite into master 4 months ago
content 71eb7a8890 add room numbers for seminar rooms to schedule 4 months ago
graphic df2e26818b Add the new banner 1 year ago
images 3ff2b1ac9d add missing tutor image 4 months ago
layout 8d69f1d217 Preload coda font 2 years ago
script 79249ff857 Piwik tracking script comment formatting 2 years ago
static 4f31de5f7b Google Search Console Verification Page 2 years ago
style 879581b316 Improve styling of analytics opt-out form 11 months ago
.dockerignore 06805ff8b2 Deploy with Kubernetes 7 months ago
.eslintrc ce5ea8b58e + linter config 3 years ago
.gitignore 068b781c75 Ignore IntelliJ config folder 11 months ago
.scss-lint.yml 1403f9875a Allow IdSelectors in scss 2 years ago
.tern-project ce5ea8b58e + linter config 3 years ago
Dockerfile 06805ff8b2 Deploy with Kubernetes 7 months ago
README.md e84ad6768d Use podman instead of docker 4 months ago
deployment.yaml 06805ff8b2 Deploy with Kubernetes 7 months ago
favicon.ico 92a8e68f62 favicon tweak 3 years ago
gulpfile.js e84ad6768d Use podman instead of docker 4 months ago
httpd.conf 06805ff8b2 Deploy with Kubernetes 7 months ago
package-lock.json 0aac2d3b35 update sass 5 months ago
package.json 0aac2d3b35 update sass 5 months ago

README.md

studierlangsam.de Website

This website is written using Pug, a template language. Styling is done in SCSS. The site can be built using gulp.

Getting started

To build the page, you need to install Node JS. See the official download page for Windows and Mac and the official documentation for package managers for Linux distributions.

Then you can install all dependencies by running npm install from the project folder.

Additionally, you’ll need to install graphicsmagick and imagemagick. For more information about that, see gulp-image-resize. On Debian, run:

sudo apt install imagemagick graphicsmagick

In order install gulp’s CLI globally (which is much more comfortable), run (on Debian):

sudo npm install gulp-cli -g

Overview

The project consists of these folders:

  • build (not in git) contains the development build of the page.
  • content contains the content pages. These pages use the layouts from the layout folder. The contained .pug files will be rendered using Pug and be copied to the web page root. Any file [name].pug will be copied to [name]/index.html if [name] is not already index. Keep that in mind when creating links!
  • graphic contains graphics that are part of the pages’ layout. The folder will be copied to the web page without modification. Some contained SVG pages will be inlined into the rendered HTML pages.
  • images contains content images in their original resolution and quality. They will be copied to the web page after being scaled as needed.
  • layout contains Pug files that form the page’s layout. These layouts are used in the content pages using Pug’s Inheritance and Blocks mechanism.
  • node_modules (not in git) is used by npm to store dependencies.
  • release (not in git) contains the release build of the page. These are the exact files that will be uploaded by gulp deploy.
  • script contains Javascript files for the page. They are currently not copied to the web pages as all scripts are being inlined into the result HTML.
  • style contains SCSS files that will be rendered into the web page.

Building

There are two types of builds for this project: Development builds and release builds. The page should look the same for both builds. However, the results produced by a development build are better suited for debugging, while the results of a release build are significantly better optimised.

During development, run gulp watch from the project folder. This will start a development server at localhost:3000 (or the next free port after that). The page is automatically rebuilt and reloaded in the browser as you make changes to the source files.

To check the source files against the coding conventions, run gulp check from the project folder.

In order to upload the site to the production server, you need to have podman and kubectl installed. Additionally, you have to ask Joshua Gleitze (mail@joshuagleitze.de) for credentials. After that, you can upload the page by running gulp deploy --dversion <version> from the project folder. The command will produce a release build, build a container image with it, and deploy a container using the image. Replace <version> in the command with the new deployment version. Please pick the new deployment version according to Semantic Versioning rules. You can query the currently deployed version by running:

kubectl -n studierlangsam get pod --selector app=studierlangsam.de --output "custom-columns=deployed image:.spec.containers[0].image"

If you want to preview what exactly will be uploaded, run gulp serverelease. The command serves the release build through a local web server. It will however, unlike gulp watch, not pick up any changes to the source files.

Writing

When writing, please look at other pages to get the general structure and style of this project. Some notes:

  • Helper mixins, like for creating mail links and including emojis, can be found in layout/mixins. Please look at what is already there and always use the mixins if applicable. Feel free to add other helper mixins there and include them in layout/base.pug.
  • Content pages should set page metadata in the Pug block properties by defining them as Javascript constants. Constants that should always be set are Titel (page title), Link (URI path to the page) and Schlagwörter (keywords for the page). Other constants can be set for later usage in the page.
  • Try to keep the markup simple. For example, long links should be defined in constants and used from that constants to improve readability. Such constants are named in German and using uppercased words and underscores by convention.