gallary tutorials

try to fix gallary

add assets back to correct place

gallery?

docs/src/.vitepress/config.mts

@@ -49,15 +49,7 @@ export default defineConfig({
       { text: 'Home', link: '/' },
       { text: 'Getting Started', link: '/introduction' },
       { text: 'Background', link: '/background/harmonic_balance' },
-      {
-        text: 'Tutorials', items: [
-          { text: 'Steady states', link: '/examples/simple_Duffing.md' },
-          { text: 'Transient dynamics', link: '/examples/time_dependent.md' },
-          { text: 'Classifying solutions', link: '/examples/parametron.md' },
-          { text: 'Linear response', link: '/examples/linear_response.md' },
-          { text: 'Limit cycle', link: '/examples/limit_cycles.md' },
-        ]
-      },
+      { text: 'Tutorials', link: '/tutorials' },
       { text: 'Examples', link: '/examples/overview' },
       {
         text: 'Manual', items: [
@@ -89,11 +81,11 @@ export default defineConfig({
       },
       "/tutorials/": {
         text: 'Tutorials', collapsed: false, items: [
-          { text: 'Steady states', link: '/examples/simple_Duffing' },
-          { text: 'Transient dynamics', link: '/examples/time_dependent' },
-          { text: 'Classifying solutions', link: '/examples/parametron' },
-          { text: 'Linear response', link: '/examples/linear_response' },
-          { text: 'Limit cycle', link: '/examples/limit_cycles' },
+          { text: 'Steady states', link: '/tutorials/simple_Duffing' },
+          { text: 'Transient dynamics', link: '/tutorials/time_dependent' },
+          { text: 'Classifying solutions', link: '/tutorials/parametron' },
+          { text: 'Linear response', link: '/tutorials/linear_response' },
+          { text: 'Limit cycle', link: '/tutorials/limit_cycles' },
         ]
       },
       "/manual/": {

docs/src/components/Gallery.vue

@@ -0,0 +1,39 @@
+<!-- https://codepen.io/heyDante/pen/bxEYOw -->
+
+<script setup lang="ts">
+import GalleryImage, { type Props } from './GalleryImage.vue';
+
+defineProps<{
+  images: Props[];
+}>();
+</script>
+
+<template>
+  <div class="gallery-image">
+    <GalleryImage v-for="image in images" v-bind="image" />
+  </div>
+</template>
+
+<style scoped>
+.heading {
+  text-align: center;
+  font-size: 2em;
+  letter-spacing: 1px;
+  padding: 40px;
+  color: white;
+}
+
+.gallery-image {
+  padding: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.gallery-image :deep(img) {
+  height: 350px;
+  width: 250px;
+  transform: scale(1);
+  transition: transform 0.4s ease;
+}
+</style>

docs/src/components/GalleryImage.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+export interface Props {
+  href: string;
+  src: string;
+  caption: string;
+  desc: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div class="img-box">
+    <a :href="href">
+      <img :src="withBase(src)" height="150px" alt="">
+      <div class="transparent-box1">
+        <div class="caption">
+          <h2>{{ caption }}</h2>
+        </div>
+      </div>
+      <div class="transparent-box2">
+        <div class="subcaption">
+          <p class="opacity-low">{{ desc }}</p>
+        </div>
+      </div>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.img-box {
+  box-sizing: content-box;
+  border-radius: 14px;
+  margin: 20px;
+  height: 350px;
+  width: 250px;
+  overflow: hidden;
+  display: inline-block;
+  color: white;
+  position: relative;
+  background-color: transparent;
+  border: 2px solid var(--vp-c-bg-alt);
+}
+
+.img-box h2 {
+  border-top: 0;
+}
+
+.img-box img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  opacity: 0.3;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.caption {
+  position: absolute;
+  bottom: 30px;
+  color: var(--vp-c-text-1);
+  left: 10px;
+  opacity: 1;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.subcaption {
+  position: absolute;
+  bottom: 5px;
+  color: var(--vp-c-text-1);
+  left: 10px;
+  opacity: 0;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.transparent-box1 {
+  height: 250px;
+  width: 250px;
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: background-color 0.3s ease;
+}
+
+.transparent-box2 {
+  height: 100px;
+  width: 250px;
+  background-color: transparent;
+  position: absolute;
+  top: 250px;
+  left: 0;
+  transition: background-color 0.3s ease;
+}
+
+.img-box:hover img {
+  transform: scale(1.1);
+}
+
+.img-box:hover .transparent-box1 {
+  background-color: var(--vp-c-bg-alt);
+}
+
+.img-box:hover .transparent-box2 {
+  background-color: var(--vp-c-bg-alt);
+}
+
+.img-box:hover .caption {
+  transform: translateY(-20px);
+  opacity: 1;
+}
+
+.img-box:hover .subcaption {
+  transform: translateY(-20px);
+  opacity: 1;
+}
+
+.img-box:hover {
+  border: 2px solid var(--vp-c-brand-light);
+  cursor: pointer;
+}
+
+.caption>p:nth-child(2) {
+  font-size: 0.8em;
+}
+
+.subcaption>p:nth-child(2) {
+  font-size: 0.8em;
+}
+
+.opacity-low {
+  opacity: 0.85;
+}
+</style>

docs/src/examples/index.md

@@ -0,0 +1,5 @@
+::: tip
+
+If you wrote an amazing tutorial showcasing `HarmonicBalance.jl` yourself, please open an issue or PR to add it to the list!
+
+:::

docs/src/tutorials/index.md

@@ -0,0 +1,47 @@
+
+```@raw html
+<script setup lang="ts">
+import Gallery from "../components/Gallery.vue";
+
+const beginner = [
+  {
+    href: "tutorials/simple_Duffing",
+    src: "../assets/response_single.png",
+    caption: "Finding the steady states",
+    desc: "How to get started with Julia and HarmonicBalance for those who have never used Julia before."
+  },
+  {
+    href: "tutorials/linear_response",
+    src: "../assets/nonlin_F_noise.png",
+    caption: "Compute the linear response",
+    desc: "Learn how to compute the linear response of a steady state."
+  },
+  {
+    href: "tutorials/time_dependent",
+    src: "../assets/evo_to_steady.png",
+    caption: "Evolve the stroboscopic system in time",
+    desc: "Learn how to investigate custom layers and train an RNN on time-series data."
+  },
+  {
+    href: "tutorials/limit_cycles",
+    src: "../assets/vdp_degenerate.png",
+    caption: "Find limit cycles",
+    desc: "Learn how to find the limit cycles of your system."
+  },
+  {
+    href: "tutorials/parametron",
+    src: "../assets/2d_phase_diagram.png",
+    caption: "Adding parametric driving",
+    desc: "Learn how to add different types of drives."
+  }
+];
+
+
+</script>
+
+# Tutorials
+
+We show the capabilities of the package by providing a series of tutorials. Here we use the duffing oscillator as a typical example. Examples of other systems can be found in the example tab.
+
+<Gallery :images="beginner" />
+```