Improve design of website

[ErikBjare]

We might want to make some changes to the design of the website, I'll just drop some ideas here.

Features

• [ ] Style the <detail> tag better (see discussion here)
  • See http://html5doctor.com/the-details-and-summary-elements/
• [ ] Add possibility to link to suitable predecessor and successor exercises
• [ ] Add comment possibility

Some themes

• http://jekyllmaterialize.panoramedia.it/
• https://yous.be/whiteglass/about/

[gorelhedin]

A couple of more things to do:

• [ ] Simplify footer. Write the title only once.
• [ ] Fix footer text. After I changed the github repo to "lunduniversity/schoolprog", the repo text interferes with the description.
• [x] <detail> tag with <ul><li><ul> inside don't seem to work.
• [ ] Major headings (===) are styled smaller than minor headings (##).

[gorelhedin]

The http://kojojs.kogics.net online IDE for Scala is now a lot improved, and I think most of our examples could be run there as well now.

This brings up the question of if it would be possible to write conditional markdown - to let the user switch between viewing scala and python examples. Any ideas on that? This would save a lot of work in trying to keep separate files in sync.

[ahnlabb]

@gorelhedin It is possible with our current jekyll setup. Please have a look at the multilang branch in my fork, specifically: afe53ba634b46d21482de2c655564d7e8fe7c831

This is based purely on the liquid markup used by jekyll, by writing or finding a plugin specialized for this maybe we could make it cleaner but it is already fairly simple. Basically:

• separate out the front matter into separate files for each language (see scala.md and python.md)
• in these files set a variable (or two, I chose proglang and ext, we should standardise this if we go with this approach)
• include the main README.md
• in README.md use liquid markup to alter the page depending on the variables

In my README.md I've used different approaches to demonstrate what can be achieved:

• In the "Denna övning innehåller" list I've used an if block
• In all the code blocks I've substituted in the proglang variable so that the highlighting is correct
• In the first code block I've used the case block (probably the most natural for most applications)
• In the last code block I've used include_relative with the extension variable to include 1.py or 1.scala depending on the language

[gorelhedin]

@ahnlabb That sounds great! Thanks for the examples. I'll try it out.

[ErikBjare]

Just found this neat resource on how to style <details>, I'd recommend skimming it for a more fruitful discussion about how we want it: http://html5doctor.com/the-details-and-summary-elements/

[ErikBjare]

@gorelhedin <ul><li>Test</li></ul> seems to work inside <details> (the closing </li> tag is required for some XHTML-parsing reason).

Edit: <ul><li/>Test</ul> also works.

[ErikBjare]

Added some very basic styling of <details> in https://github.com/lunduniversity/schoolprog/commit/76bb4ebcfbe8922a829e8c8743aa81b041620601

[gorelhedin]

@ErikBjare Thanks, nice resource! I'd like a little more space after each </details>. Would that be possible?

[ErikBjare]

@gorelhedin Fixed in https://github.com/lunduniversity/schoolprog/commit/8266db10c8dadfda2a365acae3810b1f8076d03f

[gorelhedin]

@ErikBjare Looks great! Thanks!

[gorelhedin]

@ErikBjare Help! I did some changes to the turtle exercise, and now the web site does not build! I have tried to read the error message, but I don't understand what is wrong. Can you help?

[gorelhedin]

@ErikBjare In investigating a bit more, it seems that the only difference from the last build is that Travis fails in the last step with the message "Couldn't push the build to github.com/lunduniversity/schoolprog.git:gh-pages". In googling this, it is suggested that this kind of error occurs when the branch is protected: https://github.com/travis-ci/travis-ci/issues/8548. However, as far as I can see, we don't have any protected branches. Any more ideas?

[remexre]

@gorelhedin https://github.com/travis-ci/travis-ci/issues/9312

[gorelhedin]

@remexre Thanks a lot - the workaround solved our problem!

[gorelhedin]

Good enough for now.