Websites: E-help and ET Arena


#1

Using HUGO i have put together this http://e-pomoc.ff.uni-lj.si/ e-pomoc means e-help The content is not in English language.

i only did the subdomain, the rest is not me. I am not sure if i can say i used HUGO as it should be or as i could have. I am not a designer or a programmer. I attempted some “advanced stuff” and quickly found myself in The Undiscovered Country (golang docs).

The purpose of the website is to provide some self help or support to faculty personal, mostly teaching staff, along with some other information.

Each page includes {{ .Hugo.Generator }} It works (or it should) ok in firefox, safari and chrome. It displays satisfactory in ie and edge although there are some glitches, but since this is not a commercial web page i do not care for those who actually use such browsers. Nibbler gives it a rating of 7,7 and if you ignore the popularity and social media presence ratings it is close to 10. If that means anything.

Previously i used Drupal but since i am the only person changing the content and since the content itself does not change often i decided to drop the cms. Drupal is nice and all, has great modules like views and panels but also had some issues with it.

So i already had most of the text content from before and a vague idea on how i want to change the design. It used to look very different. The photos on the website were also made by me.


#2

i have made another website. Content is in English, address is http://etarena.org/ This time bundle functionality is being used. One of the things i use it for is image meta tag (where specified). Same partial template used for content with different images but same resource name. Not sure if this is the way to do it but it works. most of the code i stole from this forum and docs and then adapted it to my needs.

example for images

---
resources:
- name: subject
  src: william-hamilton.jpg
---

and then

{{ $img := (.Resources.ByType "image").GetMatch "*subject*" }}
{{ with $img }}
<meta property="og:image" content="{{ .Permalink }}">
<meta name="twitter:image" content="{{ .Permalink }}">
{{ end }}

i made greater use of front matter, each stars website, email, social… is specified in front matter, ranged through and then displayed

---
- name: web1
  url: http://projectcamelot.org/bill_hamilton.html
email:
- name: email1
  url: n/a
---

and then

<h3>Websites</h3>
{{ range .Params.web }}
{{if eq .url "n/a"}}
<p>n/a</p>
{{else}}
<a href="{{ .url }}" title="{{ .url }}" target="_blank">{{ .url }}</a><br/>
{{ end }}
{{ end }}

there is a dynamic alphabetical content index, displaying content of specific section. it also displays every tag used on the website. all of it linked, with its own partial template for meta tags where description matches {{ .Title }} i do hope this will not be understood by Google as a keyword abuse

<h2>Tag Index</h2>
{{ $letters := split "ABCČĆDEFGHIJKLMNOPQRSŠTUVWXYZŽ0123456789" "" }}
{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
{{ $firstChar := substr $name 0 1 | upper }}
{{ if $firstChar | in $letters }}
{{ $curLetter := $.Scratch.Get "curLetter" }}
{{ if ne $firstChar $curLetter }}
{{ $.Scratch.Set "curLetter" $firstChar }}
<h3>{{ $firstChar }}</h3>
{{ end }}
<li><a href="/tags/{{ $name | urlize }}" title="{{ $name }}">{{ $name }}</a></li>
{{ end }}
{{ end }}

recently added part on the home page is also dynamically generated whenever new content is added, no additional work required. it ranges through specified sections, grabs an image, title and summary. title is linked. summary length has been adjusted.

<div class="col-md-6">
{{ range where .Site.Pages.ByDate "Section" "star" | last 4  }}
{{ if not (eq .Title "Star") }}
<div class="row recent-content shadow">
<div class="col-md-5">
{{ partial "recent-content-image" . }}
</div>
<div class="col-md-7">
{{ partial "recent-content-text" . }}
</div>
</div>
{{ end }}
{{ end }}
</div>

As far as the design goes, turns out full dark design with a lot of text is not easy to do for a non designer. Fancy elements (like catchy graphics) are not there since i do not own the rights for any. It is what it is, for now at least. Still considering what could be done, improved, changed and added both in terms of functionality and design. The website is (or should be) fully responsive.

Website is running on Debian9, i set it up with nginx

EDIT:

Being somewhat unhappy as to how each stars web, mail and social links are displayed i decided to go all “advanced” and adjusted some of the things. Main problem was long urls used for display text - does not work well for small screens. So i decided to do “Name X” where X is a number of the link unless there is only one link, then there is no number.

---
web:
- name: web1
  url: http://projectcamelotportal.com/
- name: web2
  url: http://musicwarrior.org/
- name: web3
  url: http://www.blue-science.org/
---

and then

<h2>Websites</h2>
{{ range $i, $e := .Params.web }}
{{if eq .url "n/a"}}
<p>n/a</p>
{{else}}
{{if eq $i 0 }}
<a href="{{ .url }}" title="{{ .url }}" target="_blank">WEB</a><br/>
{{else}}
<a href="{{ .url }}" title="{{ .url }}" target="_blank">WEB {{ add $i 1 }}</a><br/>
{{ end }}
{{ end }}
{{ end }}

Because it might be better to display the innards of the website url address that part can be changed to

<h2>Websites</h2>
{{ range .Params.web }}
{{if eq .url "n/a"}}
<p>n/a</p>
{{else}}
{{ $trim :=  replaceRE "^https?://(?:www.)?([^/]+).(\\w{3})" "$1" .url }}
<a href="{{ .url }}" title="{{ .url }}" target="_blank">{{ $trim | upper }}</a><br/>
{{ end }}
{{ end }}

This will remove any http:// https:// www. and any three letters at the end

from http://www.example.com to EXAMPLE