Updating documentation with images

GeoRegionsEcosystem · Oct 2, 2024 · 88ca5bb · 88ca5bb
1 parent 828ee70
commit 88ca5bb
Show file tree

Hide file tree

Showing 22 changed files with 297 additions and 17 deletions.
diff --git a/docs/make.jl b/docs/make.jl
@@ -20,14 +20,14 @@ makedocs(;
         "Home"                 => "index.md",
         "What is a GeoRegion?" => "georegions.md",
         "Basics"               => [
-            "Retrieving GeoRegions" => [
-                "Overview (START HERE)"  => "basics/read/overview.md",
-                "Predefined GeoRegions"  => "basics/read/predefined.md",
-                "Tabulating GeoRegions"  => "basics/read/tables.md",
-                "Listing All GeoRegions" => "basics/read/listall.md",
+            "Load/Read a GeoRegion"     => "basics/read.md",
+            "Creating a GeoRegion"      => "basics/create.md",
+            "Shape of a GeoRegion"      => "basics/shape.md",
+            "List Available GeoRegions" => "basics/tables.md",
+            "Predefined GeoRegions"     => [
+                "Predefined Datasets" => "basics/predefined/datasets.md",
+                "List All GeoRegions" => "basics/predefined/listall.md",
             ],
-            "Creating GeoRegions"   => "basics/create.md",
-            "Shape of a GeoRegion"  => "basics/shape.md",
         ],
         "Tutorials"            => [
             "Using GeoRegions.jl"          => [
@@ -36,7 +36,7 @@ makedocs(;
             ],
             "Equivalence in GeoRegions.jl" => "tutorials/isequal.md",
             "GeoRegions.jl for Projects"   => [
-                "Setup (START HERE)"     => "tutorials/projects/setup.md",
+                "Setting Up"             => "tutorials/projects/setup.md",
                 "Add, Read, Remove"      => "tutorials/projects/addreadrm.md",
                 "Custom GeoRegion Files" => "tutorials/projects/files.md",
             ],

diff --git a/docs/src/basics/images/create.png b/docs/src/basics/images/create.png
diff --git a/docs/src/basics/images/list.png b/docs/src/basics/images/list.png
diff --git a/docs/src/basics/images/listall.png b/docs/src/basics/images/listall.png
diff --git a/docs/src/basics/images/read.png b/docs/src/basics/images/read.png
diff --git a/docs/src/basics/images/sets.png b/docs/src/basics/images/sets.png
diff --git a/docs/src/basics/images/shape.png b/docs/src/basics/images/shape.png
diff --git a/docs/src/basics/index.md b/docs/src/basics/index.md
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import Gallery from "../components/Gallery.vue";
+
+const beginner = [
+  {
+    href: "/basics/read",
+    src: "images/read.png",
+    caption: "Read / Load",
+    desc: "How to read/load a GeoRegion into the workspace."
+  },
+  {
+    href: "/basics/create",
+    src: "images/create.png",
+    caption: "Create",
+    desc: "How to create a user-defined GeoRegion."
+  },
+  {
+    href: "/basics/shape",
+    src: "images/shape.png",
+    caption: "Shape Properties",
+    desc: "Retrieving the Shape of a GeoRegion"
+  },
+  {
+    href: "/basics/tables",
+    src: "images/list.png",
+    caption: "Tables",
+    desc: "Listing existing GeoRegions in Table Format"
+  }
+];
+
+const predefined = [
+  {
+    href: "/basics/predefined/sets",
+    src: "images/sets.png",
+    caption: "Available Datasets",
+    desc: "Different Predefined Datasets in GeoRegions.jl"
+  },
+  {
+    href: "/basics/predefined/listall",
+    src: "images/listall.png",
+    caption: "All Predefined GeoRegions",
+    desc: "Listing out all predefined GeoRegions in GeoRegions.jl"
+  }
+];
+</script>
+
+# The Basics
+
+<Gallery :images="beginner" />
+
+## Predefined GeoRegions
+
+<Gallery :images="predefined" />
diff --git a/docs/src/basics/read/predefined.md → docs/src/basics/predefined/datasets.md b/docs/src/basics/read/predefined.md → docs/src/basics/predefined/datasets.md
@@ -1,6 +1,6 @@
 # Predefined `GeoRegion`s in GeoRegions.jl
 
-In GeoRegions.jl, there are a predefined set of `GeoRegion`s.
+In GeoRegions.jl, there are several predefined sets of `GeoRegion`s.
 
 ## Adapted from Giorgi & Francisco [2000]
 

diff --git a/docs/src/basics/read/listall.md → docs/src/basics/predefined/listall.md b/docs/src/basics/read/listall.md → docs/src/basics/predefined/listall.md
diff --git a/docs/src/basics/read/overview.md → docs/src/basics/read.md b/docs/src/basics/read/overview.md → docs/src/basics/read.md
diff --git a/docs/src/basics/read/tables.md → docs/src/basics/tables.md b/docs/src/basics/read/tables.md → docs/src/basics/tables.md
diff --git a/docs/src/components/Gallery.vue b/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>
diff --git a/docs/src/components/GalleryImages.vue b/docs/src/components/GalleryImages.vue
@@ -0,0 +1,133 @@
+<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>
diff --git a/docs/src/index.md b/docs/src/index.md
@@ -18,29 +18,29 @@ hero:
       link: /basics/read/overview
     - theme: alt
       text: Tutorials
-      link: /tutorials/projects
+      link: /tutorials/using/isin
     - theme: alt
       text: View on Github
-      link: https://github.com/georegionsecosystem/GeoRegions.jl
+      link: https://github.com/GeoRegionsEcosystem/GeoRegions.jl
       
 
 features:
   - icon: <img width="64" height="64" src="https://img.icons8.com/arcade/64/markdown.png" alt="markdown"/>
     title: Simple
     details: Geographic Regions are defined using Longitude/Latitude coordinates
-    link: /basics/properties/shape
+    link: /basics/shape
   - icon: <img width="64" height="64" src="https://img.icons8.com/arcade/64/markdown.png" alt="markdown"/>
     title: Predefined GeoRegions
-    details: Many Geographic Regions have been predefined, including regions from the IPCC AR6 report
-    link: /georegions
+    details: Many predefined Geographic Regions bundled, from the IPCC AR6 report
+    link: /basics/read/predefined
   - icon: <img width="64" height="64" src="https://img.icons8.com/arcade/64/markdown.png" alt="markdown"/>
     title: Customizable
     details: Define your own custom Geographic Regions and save them for later
-    link: /tutorials/addreadrm
+    link: /tutorials/projects/addreadrm
   - icon: <img width="64" height="64" src="https://img.icons8.com/arcade/64/markdown.png" alt="markdown"/>
     title: Useful
-    details: Are points in/on a GeoRegion for extraction?
-    link: /basics/properties/isin
+    details: Check if points or a region are in/on a GeoRegion?
+    link: /tutorials/using/isin
 ---
 ```
 

diff --git a/docs/src/tutorials/images/addreadrm.png b/docs/src/tutorials/images/addreadrm.png
diff --git a/docs/src/tutorials/images/files.png b/docs/src/tutorials/images/files.png
diff --git a/docs/src/tutorials/images/isequal.png b/docs/src/tutorials/images/isequal.png
diff --git a/docs/src/tutorials/images/isin.png b/docs/src/tutorials/images/isin.png
diff --git a/docs/src/tutorials/images/ison.png b/docs/src/tutorials/images/ison.png
diff --git a/docs/src/tutorials/images/setup.png b/docs/src/tutorials/images/setup.png
diff --git a/docs/src/tutorials/index.md b/docs/src/tutorials/index.md
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import Gallery from "../components/Gallery.vue";
+
+const using = [
+  {
+    href: "/tutorials/using/isin",
+    src: "images/isin.png",
+    caption: "Is it In a GeoRegion?",
+    desc: "Check if a Point/GeoRegion is inside a GeoRegion"
+  },
+  {
+    href: "/tutorials/using/ison",
+    src: "images/ison.png",
+    caption: "Is it On a GeoRegion",
+    desc: "Check if GeoRegion Shapes are Equal"
+  },
+  {
+    href: "/tutorials/isequal",
+    src: "images/isequal.png",
+    caption: "Equivalence in GeoRegions.jl",
+    desc: "Retrieving the Shape of a GeoRegion"
+  }
+];
+
+const projects = [
+  {
+    href: "/tutorials/projects/setup",
+    src: "images/setup.png",
+    caption: "Available Datasets",
+    desc: "Different Predefined Datasets in GeoRegions.jl"
+  },
+  {
+    href: "/tutorials/projects/addreadrm",
+    src: "images/addreadrm.png",
+    caption: "All Predefined GeoRegions",
+    desc: "Listing out all predefined GeoRegions in GeoRegions.jl"
+  },
+  {
+    href: "/tutorials/projects/files",
+    src: "images/files.png",
+    caption: "Tables",
+    desc: "Listing existing GeoRegions in Table Format"
+  }
+];
+</script>
+
+# Tutorials
+
+## Using GeoRegions.jl
+
+<Gallery :images="using" />
+
+## Predefined GeoRegions
+
+<Gallery :images="projects" />