feat: add Bootstrap

bsidesgrunn · Aug 17, 2024 · 07c4f42 · 07c4f42
1 parent aaf7f8f
commit 07c4f42
Show file tree

Hide file tree

Showing 23 changed files with 172 additions and 25 deletions.
diff --git a/config.yml b/config.yml
@@ -1,7 +1,15 @@
 baseURL: "https://bsidesgrunn.org/"
 languageCode: en-us
 title: BSides Groningen
-theme: default
 params:
   slogan: BSides Groningen is an Information Security conference organized by the community for the community.
-  mastodon: "https://infosec.exchange/@bsidesgrunn"
+  mastodon: "https://infosec.exchange/@bsidesgrunn"
+
+menus:
+  main:
+    - name: Home
+      url: "/"
+      weight: 10
+    - name: About
+      url: "/about"
+      weight: 20
diff --git a/content/about/index.md b/content/about/index.md
@@ -0,0 +1,5 @@
+# What is BSides?
+Each BSides is a community-driven framework for building events for and by information security community members. The goal is to expand the spectrum of conversation beyond the traditional confines of space and time. It creates opportunities for individuals to both present and participate in an intimate atmosphere that encourages collaboration. It is an intense event with discussions, demos, and interaction from participants. It is where conversations for the next-big-thing are happening.
+
+## What is BSides Groningen?
+BSides Groningen is an Information Security conference organized by the community for the community.
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,39 @@
+const gulp = require('gulp');
+const prefix = require('gulp-autoprefixer');
+const minify = require('gulp-clean-css');
+const rename = require('gulp-rename');
+const sass = require('gulp-sass')(require('sass'));
+
+const paths = {
+    src: {
+        css: {
+            dir: './static/css'
+        },
+        scss: {
+            main: './scss/theme.scss'
+        },
+        js: {
+            dir: './static/js'
+        }
+    }
+}
+
+gulp.task('scss', function() {
+    return gulp
+        .src(paths.src.scss.main)
+        .pipe(sass().on('error', sass.logError))
+        .pipe(prefix())
+        .pipe(minify())
+        .pipe(rename({ suffix: '.min' }))
+        .pipe(gulp.dest(paths.src.css.dir));
+});
+
+gulp.task('js', function() {
+    return gulp.src([
+        'node_modules/bootstrap/dist/js/bootstrap.min.js'
+    ])
+    .pipe(gulp.dest(paths.src.js.dir));
+});
+
+
+gulp.task('default', gulp.series('scss', 'js'));
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    {{- partial "site-head.html" . -}}
+    <body>
+        {{- partial "site-nav.html" . -}}
+        <main>
+            {{- block "main" . }}{{- end }}
+        </main>
+        {{- partial "site-footer.html" . -}}
+        {{- partial "site-scripts.html" . -}}
+    </body>
+</html>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -0,0 +1,5 @@
+{{ define "main" }}
+<div class="container">
+    {{ .Content }}
+</div>
+{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -0,0 +1,5 @@
+{{ define "main" }}
+<div class="container">
+    {{ .Content }}
+</div>
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,4 +1,6 @@
 {{ define "main" }}
-<h1>{{ .Site.Title }}</h1>
-<p>{{ .Site.Params.Slogan }}</p>
+<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
+    <h1>{{ .Site.Title }}</h1>
+    <p>{{ .Site.Params.Slogan }}</p>
+</div>
 {{ end }}
diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html
@@ -0,0 +1,26 @@
+
+<footer class="py-5 bg-light">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-3 mb-3">
+                <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="{{ .Site.BaseURL }}">
+                    <span class="fs-5">{{ .Site.Title }}</span>
+                </a>
+                <ul class="list-unstyled small text-muted">
+                    <li class="mb-2">{{ .Site.Params.slogan }}</li>
+                    <li class="mb-2">&copy; 2024 {{ .Site.Title }}. All rights reserved.</li>
+                  </ul>
+            </div>
+            {{ if .Site.Menus.main }}
+            <div class="col-6 col-lg-2 offset-lg-1 mb-3">
+                <h5>Links</h5>
+                <ul class="list-unstyled">
+                  {{ range .Site.Menus.main }}
+                  <li class="mb-2"><a href="{{ .URL | absURL }}" class="link-dark text-decoration-none">{{ .Name }}</a></li>
+                  {{ end }}
+                </ul>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</footer>
diff --git a/layouts/partials/site-head.html b/layouts/partials/site-head.html
@@ -0,0 +1,10 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>{{ .Site.Title }}</title>
+
+    <link rel="stylesheet" href="{{ "css/theme.min.css" | absURL }}">
+
+    {{ if .Site.Params.Mastodon }}<link rel="me" href="{{ .Site.Params.Mastodon }}" />{{ end }}
+</head>
diff --git a/layouts/partials/site-nav.html b/layouts/partials/site-nav.html
@@ -0,0 +1,19 @@
+<div class="container py-3">
+    <header>
+      <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
+        <a href="{{ .Site.BaseURL }}" class="d-flex align-items-center text-dark text-decoration-none">
+          <span class="fs-4">{{ .Site.Title }}</span>
+        </a>
+
+        {{ if .Site.Menus.main }}
+        {{ $menu := (.Site.Menus.main) }}
+        {{ $length := (len $menu) }}
+        <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
+          {{ range $index, $element := $menu }}
+          <a class="{{ if not (eq (add $index 1) $length) }}me-3 {{ end }}py-2 text-dark text-decoration-none" href="{{ .URL | absURL }}">{{ .Name }}</a>
+          {{ end }}
+        </nav>
+        {{ end }}
+      </div>
+    </header>
+</div>
diff --git a/layouts/partials/site-scripts.html b/layouts/partials/site-scripts.html
@@ -0,0 +1 @@
+<script src="{{ "js/bootstrap.min.js" | absURL }}"></script>
diff --git a/package.json b/package.json
@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "bootstrap": "^5.3.3"
+  },
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.69.6"
+  }
+}
diff --git a/themes/default/layouts/partials/header.html → scss/custom.scss b/themes/default/layouts/partials/header.html → scss/custom.scss
diff --git a/scss/theme.scss b/scss/theme.scss
@@ -0,0 +1,11 @@
+// Bootstrap functions
+@import '../node_modules/bootstrap/scss/functions';
+
+// Custom variables
+@import 'variables';
+
+// Bootstrap core
+@import '../node_modules/bootstrap/scss/bootstrap';
+
+// Custom core
+@import 'custom';
diff --git a/scss/variables.scss b/scss/variables.scss
diff --git a/static/css/theme.min.css b/static/css/theme.min.css
diff --git a/static/js/bootstrap.min.js b/static/js/bootstrap.min.js
diff --git a/themes/default/layouts/_default/baseof.html b/themes/default/layouts/_default/baseof.html
diff --git a/themes/default/layouts/_default/list.html b/themes/default/layouts/_default/list.html
diff --git a/themes/default/layouts/_default/single.html b/themes/default/layouts/_default/single.html
diff --git a/themes/default/layouts/partials/footer.html b/themes/default/layouts/partials/footer.html
diff --git a/themes/default/layouts/partials/head.html b/themes/default/layouts/partials/head.html
diff --git a/themes/default/theme.toml b/themes/default/theme.toml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="{{ "js/bootstrap.min.js" \| absURL }}"></script>