FISO theme

README.md

@@ -0,0 +1,22 @@
+# FISO theme
+Theme created for the Stichting FISO Eindhoven website.
+
+## Installing Grav development env
+1. Install Docker & Docker compose
+2. Run `docker compose up -d` with the `./fiso-theme:/var/www/html/user/themes/fiso-theme:ro` line commented out in `docker-compose.yml`.
+3. Run `docker exec -it fiso-site-grav-1 gpm install admin` and install all plugins requested.
+4. Run `docker compose down`
+5. Uncomment the `fiso-theme` line in `docker-compose.yml`
+6. Run `docker compose up` to start the development env.
+7. Open Grav on port 8000 (http://localhost:8000)
+8. Create an example admin account to manage the dev install (I always create `admin`/`FISOisTHEbest!123`)
+
+## Preparing the FISO theme
+1. Open the `fiso-theme` folder in your preferred terminal
+2. Run `npm install`
+3. Run `npm run dev` to build the Tailwind CSS classes
+
+## Installing it on the webserver
+1. Run `npm run build` in the `fiso-theme` folder in your terminal
+2. Copy the `fiso-theme` folder to the webhosting `user/themes` folder.
+3. Pick it in Grav admin.

docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  grav:
+    image: shinsenter/grav:latest
+    volumes:
+      - grav_install:/var/www/html
+      # Only uncomment this after the initial volume has been filled
+      # Otherwise, it will not auto-install.
+      - ./fiso-theme:/var/www/html/user/themes/fiso-theme:ro
+    ports:
+      - 8000:80
+    restart: unless-stopped
+volumes:
+  grav_install:

fiso-theme/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+assets/css

fiso-theme/blueprints.yaml

@@ -0,0 +1,11 @@
+name: FISO Theme
+slug: fiso-theme
+type: theme
+version: 1.0.0
+description: "Theme created for the FISO website"
+author:
+  name: Christiaan Goossens
+  email: fiso@christiaangoossens.nl
+
+dependencies:
+    - { name: grav, version: '>=1.6.0' }

fiso-theme/blueprints/frontpage.yaml

@@ -0,0 +1,50 @@
+'@extends':
+    type: default
+    context: blueprints://pages
+
+form:
+  fields:
+    tabs:
+      type: tabs
+      active: 1
+
+      fields:
+        theme:
+          type: tab
+          title: Theme
+
+          fields:
+            header.frontPageBoxTitle:
+                type: string
+                label: Frontpage Box Title
+                default: "Just be you."
+            header.frontPageBoxSubtitle:
+                type: string
+                label: Frontpage Box Subtitle
+                default: "FISO is the umbrella representing internationalisation, inclusivity and wellbeing for students in Eindhoven." 
+            header.boardIntro:
+                type: string
+                label: Board Introduction Text (displayed above board members)
+                default: "The FISO board for the academic year of 2024-2025 consists of:" 
+            header.board:
+                type: list
+                label: Board
+                style: vertical
+                fields:
+                  .name:
+                    type: text
+                    label: Board Member Name
+                  .function:
+                    type: text
+                    label: Board Member Function
+                  .email:
+                    type: text
+                    label: Board Member Email
+                  .photo:
+                    type: filepicker
+                    folder: 'self@'
+                    preview_images: true
+                    label: Select the board member photo (upload it to the page first)
+                    accept:
+                      - .png
+                      - .jpg

fiso-theme/css/main.css

@@ -0,0 +1,85 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.grav-body-styling {
+    h1 {
+        @apply text-3xl font-header font-bold text-fisoPrimary mt-6 mb-4;
+    }
+
+    h2 {
+        @apply text-2xl font-header font-bold text-fisoSecondary mt-4 mb-2;
+    }
+
+    h3 {
+        @apply text-xl font-semibold text-slate-600 mt-6 mb-2;
+    }
+
+    h4 {
+        @apply text-xl text-slate-600 mt-6 mb-2;
+    }
+
+    h5 {
+        @apply font-medium text-slate-600 mt-4 mb-2;
+    }
+
+    h6 {
+        @apply text-sm font-medium text-slate-600 mt-2 mb-2;
+    }
+
+    p {
+        @apply mt-6;
+    }
+
+    a {
+        @apply whitespace-nowrap font-medium text-slate-500 hover:text-fisoSecondary;
+    }
+
+    ul {
+        @apply list-disc list-outside ml-4;
+    }
+
+    ol {
+        @apply list-decimal list-outside ml-4;
+    }
+
+    .notices {
+        p {
+            @apply m-0;
+        }
+
+        @apply rounded-md px-6 py-4 mt-6;
+    }
+
+    .notices.yellow {
+        p {
+            @apply text-yellow-800;
+        }
+
+        @apply bg-yellow-50;
+    }
+
+    .notices.red {
+        p {
+            @apply text-red-800;
+        }
+
+        @apply bg-red-50;
+    }
+
+    .notices.blue {
+        p {
+            @apply text-blue-800;
+        }
+
+        @apply bg-blue-50;
+    }
+
+    .notices.green {
+        p {
+            @apply text-green-800;
+        }
+
+        @apply bg-green-50;
+    }
+}

fiso-theme/fiso-theme.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Grav\Theme;
+
+use Grav\Common\Theme;
+
+class FISO extends Theme
+{
+    public static function getSubscribedEvents()
+    {
+        return [
+            'onThemeInitialized'    => ['onThemeInitialized', 0],
+            'onTwigLoader'          => ['onTwigLoader', 0],
+            'onTwigInitialized'     => ['onTwigInitialized', 0],
+        ];
+    }
+
+    public function onThemeInitialized()
+    {
+        // When using Composer
+        //require_once __DIR__ . '/vendor/autoload.php';
+    }
+
+    public function onTwigLoader() {}
+
+    public function onTwigInitialized() {}
+}

fiso-theme/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "fiso-theme",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "npx tailwindcss -i ./css/main.css -o ./assets/css/main.css --watch",
+    "build": "npx tailwindcss -i ./css/main.css -o ./assets/css/main.css"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.14"
+  }
+}

fiso-theme/tailwind.config.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './templates/**/*.html.twig',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        header: ['MuseoModerno', 'sans-serif'],
+        sans: ['"Open Sans"', 'sans-serif'],
+      },
+      colors: {
+        fisoPrimary: '#614eff',
+        fisoSecondary: '#a116ff',
+        fisoSecondaryOther: '#00a2ff',
+        fisoSupport1: '#43076b',
+        fisoSupport2: '#d9f11f',
+      }
+    }
+  },
+  plugins: [],
+}
+

fiso-theme/templates/default.html.twig

@@ -0,0 +1,12 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block body %}
+<div class="bg-white overflow-hidden shadow sm:rounded-lg">
+	<div class="px-4 py-5 sm:p-6">
+		<h1 class="text-2xl font-header font-bold text-fisoSecondary">{{ page.title }}</h1>
+		<div class="mt-6 grav-body-styling">
+			{{ page.content | raw }}
+		</div>
+	</div>
+</div>
+{% endblock %}

fiso-theme/templates/error.html.twig

@@ -0,0 +1 @@
+{% extends 'default.html.twig' %}

fiso-theme/templates/frontpage.html.twig

@@ -0,0 +1,43 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block body %}
+<div class="bg-white overflow-hidden shadow sm:rounded-lg">
+	<div class="px-4 py-5 sm:p-6">
+		<h1 class="text-3xl font-header font-bold text-fisoPrimary">{{ header.frontPageBoxTitle }}</h1>
+		<h2 class="text-xl font-medium text-slate-600">{{ header.frontPageBoxSubtitle }}</h2>
+
+		<div class="mt-6 grav-body-styling">
+			{{ page.content | raw }}
+		</div>
+	</div>
+</div>
+
+<div class="bg-white overflow-hidden shadow sm:rounded-lg my-6">
+	<div class="px-4 py-5 sm:p-6">
+		<h2 class="text-2xl font-header font-bold text-fisoSecondary">Our Board</h2>
+		<p>{{ header.boardIntro }}</p>
+		<ul role="list" class="grid gap-y-8 my-8">
+			{% for boardie in header.board %}
+			<li>
+				<div class="flex items-center gap-x-6">
+					<img class="h-16 w-16 rounded-full" src="{{ page.media[boardie.photo].url }}">
+					<div>
+						<h3 class="text-base/7 font-semibold tracking-tight text-gray-900">{{ boardie.name }}</h3>
+						<p class="text-sm/6 font-semibold">
+							<span class="text-slate-600">{{ boardie.function }}</span><br />
+							<span class="text-fisoPrimary">{{ boardie.email }}</span>
+						</p>
+					</div>
+				</div>
+			</li>
+			{% endfor %}
+		</ul>
+
+		<hr>
+		<p class="my-4 text-sm">
+			Supervised by the Supervisory Council<br />
+			<span class="text-fisoPrimary">supervisory-council@fiso-eindhoven.nl</span>
+		</p>
+	</div>
+</div>
+{% endblock %}

fiso-theme/templates/partials/base.html.twig

@@ -0,0 +1,53 @@
+{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
+<!doctype html>
+
+<html lang="{{ grav.language.getActive ?: theme_config.default_lang }}">
+
+<head>
+	{% block head %}
+	<meta charset="utf-8">
+
+	{% block title %}
+	<title>{% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ site.title|e('html') }}</title>
+	{% endblock %}
+
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link
+		href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@500;700&family=Open+Sans:wght@300;400;600;700;800&display=swap"
+		rel="stylesheet">
+	<link rel="stylesheet" href="{{ url('theme://assets/css/main.css') }}">
+	<meta name="theme-color" content="#614eff">
+	<link rel="canonical" href="{{ page.url(true, true) }}" />
+	{% endblock head%}
+</head>
+
+<body class="bg-gray-100">
+
+	<div class="my-4 mx-auto max-w-4xl">
+		<img width="150" class="mx-auto my-6" src="{{ url('theme://assets/img/logo.png') }}" alt="FISO"></img>
+
+		<div class="flex gap-x-12 justify-center mb-8">
+			{% for page in pages.children.visible %}
+			<a href="{{ page.url }}" class="font-semibold hover:text-fisoPrimary text-slate-900">{{ page.title }}</a>
+			{% endfor %}
+		</div>
+	</div>
+
+	<div class="container mx-auto max-w-2xl sm:px-6 lg:px-8 my-4 mb-12">
+		{% block body %}
+		{% endblock %}
+
+		<footer class="text-center text-sm text-slate-600 mt-6">
+			Designed & developed with ❤️ by <a href="https://christiaangoossens.nl"
+				class="hover:text-fisoSecondary">Christiaan
+				Goossens</a>.<br />
+			© {{ 'now' | date('Y') }} - Stichting FISO Eindhoven
+		</footer>
+	</div>
+</body>
+
+</html>