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 https://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 with 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 star website, email, social… is specified in front matter, ranged through and then displayed

---
- name: web1
  url: http://something.html
email:
- name: email1
  url: info@domain.com
  - name: email1
  url: contact@domain.com  
---

and then the code which 1st checks if param exists before it displays anything. Naming is done with “Name X” where X is a number of the link unless there is only one link, then there is no number

{{ if .Params.email }}
<h2>Email</h2>
{{ range $i, $e := .Params.email }}
{{if eq $i 0 }}
<a href="mailto:{{ .url }}" title="{{ .url }}">eMAIL</a><br/>
{{ else }}
<a href="mailto:{{ .url }}" title="{{ .url }}">eMAIL {{ add $i 1 }}</a><br/>
{{ end }}
{{ end }}
{{ end }}

websites are displayed a bit differently


web:
- name: web1
  url: http://domain1.com/
- name: web2
  url: http://domain2.org/
- name: web3
  url: http://www.domain3.org/
---

and then regexp is used

{{ if .Params.web }}
<h2>Websites</h2>
{{ range .Params.web }}
{{ $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 after a dot

So http://www.example.com becomes EXAMPLE and https://domain.org becomes DOMAIN
It will not work as desired if the suffix is not exactly 3 letters.

Social part consists of YouTube, Twitter and FaceBook. First a check is made if any of the three exists and then a check is again made for each individually as above. If none exist nothing is shown, If any of them exist just that one is shown

{{ if or (.Params.fb) (.Params.tw) (.Params.yu) }}
<h2>Social</h2>
{{ if .Params.fb }}
<h3>FaceBook</h3>
{{ range $i, $e := .Params.fb }}
{{if eq $i 0 }}
<a href="{{ .url }}" title="{{ .url }}" target="_blank">FB</a><br/>
{{ else }}
<a href="{{ .url }}" title="{{ .url }}" target="_blank">FB {{ add $i 1 }}</a><br/>
{{ end }}
{{ end }}
{{ end }}
{{ if .Params.tw }}
etc...

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">
<h2>RECENT STARS</h2>
{{ range where .Site.Pages.ByDate.Reverse "Section" "star" | first 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>

Maybe above examples will be of use to someone.

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