update theme; add new event;

nginx.conf

@@ -5,7 +5,7 @@ error_log  /var/log/nginx/error.log;
 pid        /var/run/nginx.pid;
 
 #daemon     off;
-events {
+events {<
     worker_connections  1024;
 }
 
@@ -24,6 +24,7 @@ http {
     server {
         listen 8080 default_server;
         server_name _;
+        absolute_redirect off;
 
         location / {
             index index.html;

package.json

@@ -12,12 +12,18 @@
     "dev": "vuepress dev src",
     "build": "vuepress build src"
   },
-  "license": "MIT",
   "devDependencies": {
-    "vuepress": "^1.5.3"
+    "dart-sass": "^1.25.0",
+    "sass": "^1.54.9",
+    "sass-loader": "^10.3.1",
+    "vuepress": "^1.5.3",
+    "webpack": "^4.46.0"
   },
   "dependencies": {
-    "@vue-a11y/dark-mode": "^1.1.1",
+    "@vuepress/plugin-search": "^1.9.7",
-    "vuepress-theme-default-vue-a11y": "^0.1.15"
+    "@vuepress/theme-default": "^1.9.7",
+    "bootstrap": "^5.2.1",
+    "bootstrap-darkmode": "^5.0.1",
+    "bootstrap-icons": "^1.9.1"
   }
 }

src/.vuepress/components/FolderList.vue

@@ -0,0 +1,43 @@
+<template>
+  <ul>
+    <slot
+      v-for="page of $site.pages
+        .filter(page => page.regularPath.match(new RegExp(`^${ path }.`)))
+        .sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
+        .slice(0, limit)
+      "
+      :page="page"
+    >
+      <li>
+        <router-link :to="page.regularPath">{{ page.title }}</router-link>
+        <ul v-if="page.regularPath === $page.regularPath && $page.frontmatter.toc && page.headers">
+          <li v-for="header of page.headers">
+            <router-link :to="`${ page.regularPath }#${ header.slug }`">{{ header.title }}</router-link>
+          </li>
+        </ul>
+      </li>
+    </slot>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "FolderList",
+  props: {
+    path: String,
+    limit: {
+      type: Number,
+      default: 8,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+ul {
+  * {
+    color: #fff !important;
+    text-decoration: none;
+  }
+}
+</style>

src/.vuepress/components/HomeContent.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">
+            Music
+          </div>
+          <div class="card-body">
+            We play all the good stuff, but mostly Trance, Progressive and Techno.
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header">
+            People
+          </div>
+          <div class="card-body">
+            We work together with lots of different people and DJs to provide you stunning events.
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header">
+            Strobe
+          </div>
+          <div class="card-body">
+            We love to create amazing events to make you feel the power of music.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HomeContent"
+}
+</script>
+
+<style scoped>
+
+</style>

src/.vuepress/components/TableOfContents.vue

@@ -0,0 +1,28 @@
+<template>
+  <ul>
+    <slot
+        v-for="page of []
+        .filter(page => page.regularPath.match(new RegExp(`^${ path }.`)))
+        .slice(0, limit)
+      "
+        :page="page"
+    >
+      <li>
+        <router-link :to="page.regularPath">{{ page.title }}</router-link>
+      </li>
+    </slot>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "TableOfContents",
+  props: {
+    path: String,
+    limit: {
+      type: Number,
+      default: 8,
+    },
+  },
+};
+</script>

src/.vuepress/components/ToggleDarkMode.vue

@@ -1,27 +0,0 @@
-<template>
-  <ClientOnly>
-    <DarkMode
-      defaultMode="dark"
-      :modes="[
-        'light',
-        'dark',
-        'system',
-        'sepia',
-      ]"
-    >
-      <template v-slot="{ mode }">
-        Color mode: <span>{{ mode }}</span>
-      </template>
-    </DarkMode>
-  </ClientOnly>
-</template>
-
-<script>
-import { DarkMode } from '@vue-a11y/dark-mode';
-
-export default {
-  components: {
-    DarkMode
-  }
-}
-</script>

src/.vuepress/config.js

@@ -1,61 +1,40 @@
-const { description } = require('../../package')
-
 module.exports = {
-  /**
-   * Ref：https://v1.vuepress.vuejs.org/config/#title
-   */
   title: 'Strobe Town',
-  /**
+  description: 'stunning events',
-   * Ref：https://v1.vuepress.vuejs.org/config/#description
-   */
-  description: description,
-
-  /**
-   * Extra tags to be injected to the page HTML `<head>`
-   *
-   * ref：https://v1.vuepress.vuejs.org/config/#head
-   */
   head: [
-    ['meta', { name: 'theme-color', content: '#2e454d' }],
+    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
     ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
     ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
   ],
-
+  markdown: {
-  /**
+    anchor: { permalink: false },
-   * Theme configuration, here is the default theme configuration for VuePress.
+    extendMarkdown: md => {
-   *
+      md.set({ breaks: true });
-   * ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
+    }
-   */
+  },
-  theme: 'vuepress-theme-default-vue-a11y',
+  dest: "./dist",
   themeConfig: {
+    repo: '',
     editLinks: false,
     docsDir: '',
     editLinkText: '',
     lastUpdated: false,
-    //logo: '/assets/img/logo.png',
+    searchMaxSuggestions: 10,
-    defaultMode: 'sepia',
+    searchHotkeys: ['s', 'k', '/'],
+    searchPlaceholder: 'Ctrl + S',
+    test: [/.+.md/],
     nav: [
       {
-        text: 'Events',
+        text: 'events',
-        link: '/events/',
+        link: '/events',
       },
       {
-        text: 'About us',
+        text: 'about us',
-        link: '/about-us/'
+        link: '/about-us',
       },
-      {
-        text: 'Tickets',
-        link: 'https://tickets.strobe.town'
-      }
     ],
-    sidebar: {}
   },
-
-  /**
-   * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
-   */
   plugins: [
-    '@vuepress/plugin-back-to-top',
+    '@vuepress/plugin-search',
-    '@vuepress/plugin-medium-zoom',
+  ],
-  ]
 }

src/.vuepress/enhanceApp.js

@@ -1,8 +1,4 @@
-/**
+const matchPath = /(?<path>|.+)\/(?<filename>[-_\w]+)(?<filetype>|\/|\.html|\.md)$/;
- * Client app enhancement file.
- *
- * https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
- */
 
 export default ({
   Vue, // the version of Vue being used in the VuePress app
@@ -10,5 +6,15 @@ export default ({
   router, // the router instance for the app
   siteData // site metadata
 }) => {
-  // ...apply enhancements for the site.
+  router.beforeEach((to, from, next) => {
+    if (!to.name) {
+      const { filename } = to.fullPath.match(matchPath).groups;
+      next(
+        siteData.pages
+          .find((page) => page.regularPath.match(matchPath)?.groups?.filename === filename)
+          ?.regularPath
+      );
+    }
+    next();
+  });
 }

src/.vuepress/styles/index.styl

@@ -1,9 +1,3 @@
-/**
- * Custom Styles here.
- *
- * ref：https://v1.vuepress.vuejs.org/config/#index-styl
- */
-
 .home .hero img
   max-width 600px!important
   width 100%

src/.vuepress/styles/palette.styl

@@ -1,9 +1,3 @@
-/**
- * Custom palette here.
- *
- * ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
- */
-
 $accentColor = #399d9d
 $textColor = #2c3e50
 $borderColor = #eaecef

src/.vuepress/theme/Layout.vue

@@ -0,0 +1,68 @@
+<template>
+  <section class="layout" data-theme="dark">
+    <header>
+      <div class="bg-darkmode-dark shadow">
+        <site-header class="container" />
+      </div>
+    </header>
+
+    <main class="content">
+      <div v-if="$page.frontmatter.sidebar || $page.frontmatter.toc" class="container">
+        <div class="row">
+          <div class="col-xl-4 p-4">
+            <div class="card toc my-2">
+              <div class="card-header">
+                <router-link :to="`/${$page.path.split('/')[1]}/`"><b>/{{ $page.path.split('/')[1] }}/</b></router-link>
+              </div>
+              <div class="card-body">
+                <FolderList :path="`/${$page.path.split('/')[1]}/`" />
+              </div>
+            </div>
+          </div>
+          <Content class="col-xl-8 p-4" />
+        </div>
+      </div>
+      <div v-else>
+        <div class="container">
+          <Content class="p-4" />
+        </div>
+      </div>
+    </main>
+
+    <footer class="footer my-3">
+      <site-footer class="container" />
+    </footer>
+  </section>
+</template>
+
+<script>
+import SiteHeader from "./SiteHeader";
+import SiteFooter from "./SiteFooter";
+import FolderList from "../components/FolderList";
+
+import "bootstrap-icons/font/bootstrap-icons.scss";
+import "./main.scss";
+
+import "@vuepress/theme-default/styles/code.styl";
+
+export default {
+  components: { SiteFooter, SiteHeader, FolderList },
+};
+</script>
+
+<style scoped lang="scss">
+header {
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  font-size: 1.2rem;
+}
+main {
+  padding: 5rem 0 2rem 0;
+  background-color: #1f262b;
+  .toc {
+    position: sticky;
+    top: 5rem;
+  }
+}
+</style>

src/.vuepress/theme/NotFound.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="m-4">
+    <h1>404 Not Found</h1>
+    <router-link class="btn btn-primary" to="/">Zur Startseite</router-link>
+  </div>
+</template>
+
+<script>
+import "bootstrap/scss/bootstrap.scss";
+
+export default {
+  name: "NotFound"
+}
+</script>

src/.vuepress/theme/SiteFooter.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="footer border-top py-2">
+    <span class="copyright">Copyright © {{ (new Date).getFullYear() }}</span>
+  </div>
+</template>
+
+<style scoped></style>

src/.vuepress/theme/SiteHeader.vue

@@ -0,0 +1,66 @@
+<template>
+  <nav class="navbar px-4">
+    <router-link class="btn d-flex" to="/">
+      <div class="flex-column justify-content-center">
+        <b>{{ $site.title }}</b>
+      </div>
+    </router-link>
+    <div class="row align-items-center">
+      <SearchBox class="col-auto" />
+      <div v-for="nav of $site.themeConfig.nav" class="col-auto d-none d-xl-block">
+        <div v-if="nav.children || nav.path" class="category dropdown">
+          <router-link :to="nav.link" class="link btn">{{ nav.text }} <i class="bi-chevron-down" /></router-link>
+          <div class="dropdown-menu">
+            <router-link
+              v-for="site of (nav.children || [])
+                .concat(nav.path
+                  ? $site.pages
+                    .filter(page => page.regularPath.match(new RegExp(`${nav.path}.`)))
+                    .map(page => ({ text: page.title, link: page.regularPath }))
+                  : []
+                )
+              "
+              :to="site.link"
+              class="dropdown-item"
+            >
+              {{ site.text }}
+            </router-link>
+          </div>
+        </div>
+        <div v-else class="site">
+          <router-link :to= "nav.link" class="link btn">{{ nav.text }}</router-link>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import SearchBox from "@vuepress/plugin-search/SearchBox";
+
+export default {
+  components: { SearchBox },
+};
+</script>
+
+<style scoped lang="scss">
+.header-title {
+  color: black;
+}
+
+.header-img {
+  height: 3.5rem;
+}
+
+.dropdown:hover .dropdown-menu {
+  display: block;
+}
+
+.dropdown-item {
+}
+
+.link {
+  color: rgb(27, 29, 29);
+}
+
+</style>

src/.vuepress/theme/fonts.css

@@ -0,0 +1,19 @@
+/* roboto-mono-100 - latin */
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 100;
+    src: local(''),
+    url('../assets/fonts/roboto-mono-v22-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('../assets/fonts/roboto-mono-v22-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* roboto-mono-regular - latin */
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: local(''),
+    url('../assets/fonts/roboto-mono-v22-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('../assets/fonts/roboto-mono-v22-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

src/.vuepress/theme/main.scss

@@ -0,0 +1,41 @@
+$dark-body-bg: #1f262b;
+
+@import "bootstrap/scss/bootstrap";
+@import "bootstrap-darkmode/scss/darktheme";
+@import "fonts.css";
+
+
+
+
+html, body {
+  background-color: $dark-body-bg;
+  line-break: loose;
+  word-break: break-word;
+  font-family: "Roboto Mono", monospace;
+}
+
+img {
+  max-width: 100% !important;
+  border-radius: .25rem;
+}
+
+table {
+  @extend .table;
+}
+
+.search-box{
+  input {
+    background-color: $dark !important;
+    color: $light !important;
+  }
+}
+
+h1, h2, h3, h4, h5 {
+  margin-top: 1em;
+}
+
+:not(pre) > code {
+  background-color: #aaa2;
+  border-radius: .4rem;
+  padding: .2rem .4rem;
+}

src/about-us/README.md

@@ -1,5 +1,5 @@
 ---
-sidebar: auto
+sidebar: false
 ---
 
 # About us

src/events/README.md

@@ -1,46 +1,20 @@
 ---
-sidebar: auto
+sidebar: true
+toc: true
 ---
-Events
-===
 
-## Strobe Night - Alte Meierei Kiel - 16. July 2022
+# Events
 
-<img src="/images/9v2MusLZ.png" alt="event image">
+We are Strobe Town
 
-<TextButton to="#get-tickets">to the ticket section →</TextButton>
+<FolderList path="/events/" v-slot="{ page }" class="m-0 p-0">
-
+  <div class="card my-2">
-### When?
+    <div class="card-header"><router-link :to="page.regularPath">{{ page.title }}</router-link></div>
-16th July 2022 (2022-07-16)
+    <div class="card-body">
-
+      <router-link :to="page.regularPath">
-### Time plan
+        <img class="card-img" :src="page.frontmatter.imgSrc" />
-**(in progress...)**
+      </router-link>
-| Time | DJ | notes |
+      <p class="my-2">{{ page.frontmatter.excerpt }}</p>
-| - | - | - |
+    </div>
-| 19:30 | 0xADB | Entry / warm up |
+  </div>
-| 20:00 | * | Beginn - Club House |
+</FolderList>
-| 22:00 | * | Progressive House |
-|  0:00 | 0xADB | DnB |
-|  1:00 | * | Trap |
-|  2:00 | 0xADB | Trance & Techno |
-|  5:00 | * | GOA / Psytrance |
-|  6:00 | * | open End: minimal Techno |
-
-\* planning in progress - just send us an email ([info@strobe.town](mailto:info@strobe.town)), if you want to play
-
-### Where?
-**Alte Meierei**, Hornheimer Weg 2, 24113 Kiel, Germany
-
-<iframe scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=10.112786293029785%2C54.29945983622587%2C10.136733055114746%2C54.30632110137844&amp;layer=mapnik&amp;marker=54.3028906117479%2C10.124759674072266" width="100%" height="350" frameborder="0"></iframe>
-
-### Get Tickets
-
-
-[tickets.strobe.town](https://tickets.strobe.town/adb/strobe-night-alte-meierei-kiel-2022-07-16/)
-
-We offer our tickets **for free**!
-
-But **the event heavily relies on your donations**. You can set the amount you are willing to pay at out ticket store. (We will collect your donations at the entry of the event.)
-Please help us organize the event and secure a ticket **early**.
-
-<TextButton to="https://tickets.strobe.town/adb/strobe-night-alte-meierei-kiel-2022-07-16/" target="_blank" rel="noopener noreferrer">Get Ticket</TextButton>

src/events/strobe-night-alte-meierei-kiel-16-juni-2022.md

@@ -0,0 +1,48 @@
+---
+sidebar: true
+excerpt: "techno event in Kiel"
+imgSrc: "/images/9v2MusLZ.png"
+toc: true
+date: 2022-07-16
+---
+# Strobe Night - 16. July 2022
+
+<img src="/images/9v2MusLZ.png" alt="event image">
+
+<router-link to="#get-tickets" class="btn btn-primary my-2">to the ticket section →</router-link>
+
+## When?
+16th July 2022 (2022-07-16)
+
+## Time plan
+**(in progress...)**
+| Time | DJ | notes |
+| - | - | - |
+| 19:30 | 0xADB | Entry / warm up |
+| 20:00 | * | Beginn - Club House |
+| 22:00 | * | Progressive House |
+|  0:00 | 0xADB | DnB |
+|  1:00 | * | Trap |
+|  2:00 | 0xADB | Trance & Techno |
+|  5:00 | * | GOA / Psytrance |
+|  6:00 | * | open End: minimal Techno |
+
+\* planning in progress - just send us an email ([info@strobe.town](mailto:info@strobe.town)), if you want to play
+
+## Where?
+**Alte Meierei**, Hornheimer Weg 2, 24113 Kiel, Germany
+
+<iframe scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=10.112786293029785%2C54.29945983622587%2C10.136733055114746%2C54.30632110137844&amp;layer=mapnik&amp;marker=54.3028906117479%2C10.124759674072266" width="100%" height="350" frameborder="0"></iframe>
+
+## Get Tickets
+
+
+[tickets.strobe.town](https://tickets.strobe.town/adb/strobe-night-alte-meierei-kiel-2022-07-16/)
+
+We offer our tickets **for free**!
+
+But **the event heavily relies on your donations**. You can set the amount you are willing to pay at out ticket store. (We will collect your donations at the entry of the event.)
+Please help us organize the event and secure a ticket **early**.
+
+
+<a href="https://tickets.strobe.town/adb/strobe-night-alte-meierei-kiel-2022-07-16/" class="btn btn-primary my-2" target="_blank" rel="noopener noreferrer">Get Ticket</a>

src/events/strobe-night-alte-meierei-kiel-26-november-2022.md

@@ -0,0 +1,38 @@
+---
+sidebar: true
+excerpt: "techno event in Kiel"
+imgSrc: "/images/9v2MusLZ.png"
+toc: true
+date: 2022-11-26
+---
+# Strobe Night - 25. November 2022
+
+<img src="/images/9v2MusLZ.png" alt="event image">
+
+## When?
+26th November 2022 (2022-11-26)
+
+## Time plan
+**(in progress...)**
+
+<div class="alert alert-info">
+  planning in progress - just send us an email 
+  (<a href="mailto:info@strobe.town">info@strobe.town</a>),
+  if you want to play
+</div>
+
+## Where?
+**Alte Meierei**, Hornheimer Weg 2, 24113 Kiel, Germany
+
+<iframe scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=10.112786293029785%2C54.29945983622587%2C10.136733055114746%2C54.30632110137844&amp;layer=mapnik&amp;marker=54.3028906117479%2C10.124759674072266" width="100%" height="350" frameborder="0"></iframe>
+
+## Get Tickets
+
+We offer our tickets **for free**!
+
+But **the event heavily relies on your donations**. You can set the amount you are willing to pay at out ticket store. (We will collect your donations at the entry of the event.)
+Please help us organize the event and secure a ticket **early**.
+
+<div class="alert alert-info">
+  Link to the ticket shop will come soon.
+</div>

src/index.md

@@ -1,26 +1,17 @@
 ---
 home: true
-//heroImage: /images/logo.png
-heroText: Strobe Town
-tagline: events you keep in mind
-actionText: Events →
-actionLink: /events/
-features:
-- title: Music
-  details: We play all the good stuff, but mostly Trance, Progressive and Techno.
-- title: People
-  details: We work together with lots of different people and DJs to provide you stunning events.
-- title: Strobe
-  details: We love to create amazing events to make you feel the power of music.
-footer: Strobe Town | Copyright © 2022
 ---
-<ASCIILogo/>
 
-We are Strobe Town
+# We are Strobe Town
-===
+![logo](/images/logo.png)
 
-## Discover:
+<div class="row my-4 justify-content-center">
-- [Events →](/events/)
+  <router-link class="col-auto mx-2 btn btn-outline-light" to="/events">events</router-link>
-  - [Stobe Night →](/events/#strobe-night-alte-meierei-kiel-16-july-2022)
+  <router-link class="col-auto mx-2 btn btn-outline-light" to="/about-us">about us</router-link>
-- [About us →](/about-us/)
+</div>
-  - [Music we Love →](/about-us/#what-we-love)
+
+## Discover
+<HomeContent />
+
+## Events
+<FolderList path="/events/" />