Switch to hugo modules (#319)

[#110] Migrate Kanto's website to Hugo modules
 -  Fix URLs
 -  Switch to hugo modules
 - Fix hugo.toml and add scss for the nav bar
 - Fix the padding of nav bar
 - Update README.md for the documentation and correct link

Signed-off-by: Kristiyan Gostev <kristiyan.gostev@bosch.com>
Signed-off-by: Antonia Avramova <antonia.avramova@bosch.io>
Co-authored-by: Kristiyan Gostev <kristiyan.gostev@bosch.com>

.github/workflows/documentation.yaml

@@ -28,10 +28,15 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           path: ${{ env.WEBSITE_CONTENT_DIR }}
 
+      - name: Setup Go
+        uses: actions/setup-go@v2
+        with:
+          go-version: 1.21.9
+
       - name: Setup Hugo
         uses: peaceiris/actions-hugo@v2
         with:
-          hugo-version: '0.100.2'
+          hugo-version: '0.122.0'
           extended: true
 
       - name: Setup Node

.github/workflows/release.yaml

@@ -83,7 +83,7 @@ jobs:
           path: ${{ env.BUILD_TMP }}/update-manager
           ref: ${{ github.ref }}
           token: ${{ secrets.WF_AUTH }}
-      - name: Set up Go
+      - name: Setup Go
         uses: actions/setup-go@v2
         with:
           go-version: 1.21.0

web/README.md

@@ -1,4 +1,4 @@
-![Kanto logo](https://github.com/eclipse-kanto/kanto/raw/master/logo/kanto.svg)
+[![Kanto logo](https://github.com/eclipse-kanto/kanto/raw/main/logo/kanto.svg)](https://eclipse.dev/kanto/)
 
 # Eclipse Kanto Site and Documentation
 
@@ -9,12 +9,11 @@ This is the repository used to build and publish the official Eclipse Kanto [web
 We use [Hugo](https://gohugo.io/) and the [Docsy theme](https://docsy.dev/)
 to build and render the site. You will need the “extended”
 Sass/SCSS version of the Hugo binary to work on this site. We recommend
-to use Hugo 0.83.1 or higher.
+to use Hugo 0.122.0 or higher.
 
 Steps needed to have this working locally and work on it:
 
-- Follow the [Install Hugo](https://docsy.dev/docs/getting-started/#install-hugo) instructions from Docsy
+- Follow the [Install Hugo](https://www.docsy.dev/docs/get-started/docsy-as-module/) instructions from Docsy
 - Clone this repository
-- Run `git submodule update --init --recursive`
 - Run `cd site`
 - Run `hugo server`

web/build-site.sh

@@ -12,9 +12,6 @@ fi
 echo -e "\033[0;32mDeleting Hugo previously generated directories...\033[0m"
 rm -rf site/public
 
-echo -e "\033[0;32mGit init for Docsy...\033[0m"
-git submodule update -f --init --recursive
-
 echo -e "\033[0;32mSwitching to Docsy theme directory...\033[0m"
 cd site && npm install
 

web/netlify.toml

@@ -2,18 +2,21 @@
 publish = "site/public"
 command = "chmod +x build-site.sh && ./build-site.sh"
 
+[build.environment]
+GO_VERSION = "1.21.4"
+
 [context.production.environment]
-HUGO_VERSION = "0.83.1"
+HUGO_VERSION = "0.122.0"
 HUGO_ENV = "production"
 
 [context.deploy-preview]
 command = "chmod +x build-site.sh && ./build-site.sh"
 
 [context.deploy-preview.environment]
-HUGO_VERSION = "0.83.1"
+HUGO_VERSION = "0.122.0"
 
 [context.branch-deploy]
 command = "chmod +x build-site.sh && ./build-site.sh"
 
 [context.branch-deploy.environment]
-HUGO_VERSION = "0.83.1"
+HUGO_VERSION = "0.122.0"

web/site/assets/scss/_alignments.scss

@@ -1,3 +1,14 @@
+.td-search__input {
+  max-width: 90%;
+  border-radius: 1rem;
+  width: 360px;
+}
+
+.td-navbar .navbar-nav {
+  padding-bottom: 0rem;
+  padding-top: 0rem;
+}
+
 .block-center {
   max-width: 1200px;
   margin: 0 auto;

web/site/assets/scss/_borders.scss

@@ -1,9 +1,11 @@
 .border-bottom-light {
   border-color: $kanto-gold-color !important;
   border-bottom: 1px solid $kanto-gold-color !important;
+  width: fit-content;
 }
 
 .border-bottom-dark {
   border-color: $primary !important;
   border-bottom: 1px solid $primary !important;
+  width: fit-content;
 }

web/site/assets/scss/_buttons.scss

@@ -72,7 +72,7 @@ button[aria-expanded=false] .show-expanded {
 }
 
 // Extra small devices (portrait phones, less than 576px)
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .kanto-button {
     height: 35px;
     width: 130px;

web/site/assets/scss/_colors.scss

@@ -9,6 +9,49 @@ h1, .h1 {
   font-weight: 200;
 }
 
+display-1, .display-1 {
+  font-size: 3rem;
+  width: max-content;
+}
+
+display-2, .display-2 {
+  font-size: 2.5rem;
+}
+
+.h1 .display-1 .mt-0 .mt-md-2 .pb-3 .border-bottom {
+  width: max-content;
+}
+
+display-5, .display-5 {
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.td-box .row {
+  padding-left: 5vw;
+  padding-right: 5vw;
+  width: auto;
+}
+
+.td-box--100 {
+  color: #2a4d14;
+}
+
+.row > * {
+  flex-shrink: 1;
+}
+.alert-primary {
+  background-color: #fff;
+}
+
+.alert-secondary {
+  background-color: #fff;
+  color: #2a4d14;
+  border-style: solid;
+  border-color: #a19f20;
+  border-width: 0 0 0 4px
+}
+
 .kanto-feature {
   color: $kanto-feature-color;
 }

web/site/assets/scss/_images.scss

@@ -13,7 +13,7 @@ img {
 }
 
 // Extra small devices (portrait phones, less than 576px)
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .wide-photo-container {
     width: 100%;
     height: 500px;

web/site/assets/scss/_links.scss

@@ -17,6 +17,14 @@ p > a:hover, main a:hover {
   color: $kanto-gold-color !important;
 }
 
+.td-page-meta > a {
+  color: #616013;
+}
+
+.td-page-meta > a:hover {
+  color: #212107;
+}
+
 .td-navbar .nav-link{
   transition: 0.3s;
   font-size: larger;

web/site/assets/scss/_logo.scss

@@ -20,15 +20,15 @@
 footer {
   min-height: 200px;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     min-height: 200px;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     min-height: 210px;
   }
 
-  @include media-breakpoint-down(lg) {
+  @include media-breakpoint-down(xl) {
     min-height: 260px;
   }
 }