New website

.github/workflows/pages.yaml

@@ -0,0 +1,48 @@
+# https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+      - uses: actions/configure-pages@v4
+      - run: |
+          sudo apt-get -y satisfy '
+            hugo,
+            npm,
+          '
+      - run: npm install
+      - run: npm run build
+      - uses: actions/upload-pages-artifact@v3
+        id: deployment
+        with:
+          path: public/
+
+  deploy:
+    if: github.ref == 'refs/heads/master'
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/deploy-pages@v4
+        id: deployment

.gitignore

@@ -1 +1,11 @@
-.#*
+.DS_store
+data/assetHashes.json
+node_modules/
+public/
+/resources/
+static/css/style-*.css
+.sass-cache/
+.hugo_build.lock
+*.code-workspace
+static/pagefind
+hugo_stats.json

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "themes/dot-org-hugo-theme"]
+	path = themes/dot-org-hugo-theme
+	url = https://github.com/cncf/dot-org-hugo-theme.git

CNAME

@@ -0,0 +1 @@
+gramineproject.io

Makefile

@@ -0,0 +1,28 @@
+serve:
+	hugo server \
+		--disableFastRender \
+		--buildDrafts \
+		--buildFuture \
+		--ignoreCache \
+		--printI18nWarnings \
+		--printMemoryUsage \
+		--printPathWarnings \
+		--printUnusedTemplates \
+		--templateMetrics \
+		--templateMetricsHints \
+		--gc
+
+production-build:
+	git submodule update --init --recursive
+	hugo \
+		--minify
+	npx -y pagefind --site public
+
+preview-build:
+	git submodule update --init --recursive
+	hugo \
+		--baseURL $(DEPLOY_PRIME_URL) \
+		--buildDrafts \
+		--buildFuture \
+		--minify
+	npx -y pagefind --site public

README.md

@@ -1,14 +1,63 @@
-# gramineproject.io website
+# Gramine website
 
-This website uses the [Lektor](https://www.getlektor.com/) static generator/CMS.
+The code in this repo powers the Gramine website. The website runs in Hugo and uses [the Dot-Org Hugo theme](https://github.com/cncf/dot-org-hugo-theme/). The theme has many [custom shortcodes](https://github.com/cncf/dot-org-hugo-theme/?tab=readme-ov-file#custom-shortcodes) that can be used to style content in markdown files.
 
-To develop, [install Lektor](https://www.getlektor.com/docs/installation/) and
-then use the `lektor serve` command:
+
+## 🧩 Editing the site
+
+In order to locally develop the website, you'll need to install [Hugo](https://gohugo.io) and [node.js](https://nodejs.org/en).
+
+```bash
+# macOS
+brew install hugo node
+```
+
+Then follow these instructions:
+
+1. Clone this repo to a local directory on your computer.
+
+2. Navigate to the newly created directory, and pull in the theme:
+
+```bash
+git submodule update --init --recursive
+```
+
+3. Install dependencies:
+
+```bash
+npm install
+```
+
+4. Build the site:
+
+```bash
+npm run build
+```
+
+5. Start the local server with live reload:
+
+```bash
+npm run start
+```
+
+Or use the following command if you'd like the PageFind search to work locally:
+
+```bash
+npm run dev:start:with-pagefind
+```
+
+This should give an address you can visit on your local machine to see the local copy of your site. Typically this is `localhost:1313`. Just navigate to http://localhost:1313 in your browser and you should see the site running.
+
+Don't edit the theme that is imported via the git submodule as otherwise your changes will be overwritten the next time the theme is updated. Changes should be made to files inside the root directory as this will correctly override the theme directory files. [Read the Hugo docs](https://gohugo.io/getting-started/directory-structure/) for more info.
+
+### Local testing
+
+Because subresource integrity doesn't work with file:// URLs, you need to
+remove `integrity=` attributes from CSS tags to get proper preview. Then you
+can render with a browser:
 
 ```sh
-apt-get install lektor
-git clone https://github.com/gramineproject/gramineproject.io
-cd gramineproject.io
-lektor serve &
-firefox http://localhost:5000
+npm run build
+sed -i -e 's/ integrity="[^"]*"//g' $(find public -name \*.html)
+firefox public/index.html
 ```

archetypes/default.md

@@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+

assets/scss/_hamburger.scss

@@ -0,0 +1,136 @@
+/*
+Hamburger
+Based on Hamburgers by Jonathan Suh @jonsuh
+SCSS-ified, variablified, spin mode default by James Hunt @thetwopct
+@site https://jonsuh.com/hamburgers
+@link https://github.com/jonsuh/hamburgers
+*/
+
+// Setup variables for the hamburger.
+$hamburger-color: white;
+$hamburger-color-hover: #cfcfcf;
+$hamburger-active-color: white;
+$hamburger-active-color-hover: #cfcfcf;
+$hamburger-padding-x: 0;
+$hamburger-padding-y: 10px;
+$hamburger-layer-width: 26px;
+$hamburger-layer-height: 4px;
+$hamburger-layer-spacing: 3px;
+$hamburger-hover-opacity: 1;
+$hamburger-active-hover-opacity: 1;
+$hamburger-z-index: 10;
+$hamburger-responsive-hide: $min-desktop;
+
+.hamburger {
+    padding: $hamburger-padding-y $hamburger-padding-x;
+    cursor: pointer;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: linear;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    overflow: visible;
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    z-index: $hamburger-z-index;
+    @media (min-width: $hamburger-responsive-hide) {
+        display: none;
+    }
+    &:hover {
+        opacity: $hamburger-hover-opacity;
+        .hamburger-inner {
+            &,
+            &::before,
+            &::after {
+                background-color: $hamburger-color-hover;
+            }
+        }
+    }
+    &.is-active {
+        .hamburger-inner {
+            transform: rotate(225deg);
+            transition-delay: 0.12s;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+            &::before {
+                top: 0;
+                opacity: 1;
+                transition:
+                    top 0.1s ease-out,
+                    opacity 0.1s 0.12s ease-out;
+            }
+            &::after {
+                bottom: 0;
+                transform: rotate(-90deg);
+                transition:
+                    bottom 0.1s ease-out,
+                    transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+            &,
+            &::before,
+            &::after {
+                background-color: $hamburger-active-color;
+            }
+        }
+        &:hover {
+            opacity: $hamburger-active-hover-opacity;
+            .hamburger-inner {
+                &,
+                &::before,
+                &::after {
+                    background-color: $hamburger-active-color-hover;
+                }
+            }
+        }
+    }
+}
+
+.hamburger-box {
+    width: $hamburger-layer-width;
+    height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+    display: inline-block;
+    position: relative;
+}
+
+.hamburger-inner {
+    display: block;
+    top: 50%;
+    margin-top: calc($hamburger-layer-height / -2);
+    transition-duration: 0.22s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    @media (prefers-reduced-motion: reduce) {
+        transition: none !important;
+    }
+    &,
+    &::before,
+    &::after {
+        width: $hamburger-layer-width;
+        height: 3px;
+        background-color: $hamburger-color;
+        position: absolute;
+        transition-property: transform;
+        transition-duration: 0.15s;
+        transition-timing-function: ease;
+        will-change: transform, opacity;
+    }
+
+    &::before,
+    &::after {
+        content: "";
+        display: block;
+    }
+
+    &::before {
+        top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+        transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
+    }
+    &::after {
+        bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+        transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+}