Merge pull request #209 from earthpulse/178-add-tutorials-section-in-ui

178 add tutorials section in UI
earthpulse · Jul 29, 2024 · 5819b40 · 5819b40
2 parents 189c848 + c4c6a30
commit 5819b40
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 0 deletions.
diff --git a/ui/src/routes/Nav2.svelte b/ui/src/routes/Nav2.svelte
@@ -7,6 +7,7 @@
     import CogOutline from "svelte-material-icons/CogOutline.svelte";
     import CloudCogOutline from "svelte-material-icons/CloudCogOutline.svelte";
     import ChartBoxPlusOutline from "svelte-material-icons/ChartBoxPlusOutline.svelte";
+    import SchoolOutline from "svelte-material-icons/SchoolOutline.svelte";
     export let loading;
 
     const links = [
@@ -19,6 +20,7 @@
             icon: CloudCogOutline,
         },
         { href: "/applications", label: "Applications", icon: CogOutline },
+        { href: "/tutorials", label: "Tutorials", icon: SchoolOutline },
         { href: "/docs", label: "Docs", icon: TextBoxMultipleOutline },
     ];
     const secondary_links = [

diff --git a/ui/src/routes/tutorials/+page.svelte b/ui/src/routes/tutorials/+page.svelte
@@ -0,0 +1,71 @@
+<script>
+	import { tutorials, workshops } from "./tutorials"
+</script>
+
+<div class="w-full flex flex-col items-center justify-between h-full grow">
+	<div
+		class="px-3 py-10 mt-10 w-full max-w-6xl flex flex-col items-center h-full"
+	>
+		<div class="flex flex-col justify-between mb-6 w-full gap-2">
+			<h1 class="font-bold text-3xl">Workshops</h1>
+			<p>
+				Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium debitis.
+			</p>
+		</div>
+		<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 w-full mt-3">
+			{#each workshops as workshop}
+				<div
+					class="border border-gray-200 shadow-lg p-4 rounded-lg flex flex-col justify-between"
+				>
+					<div class="text-left">
+						<h2 class="font-bold mb-2 mt-0 text-lg">
+							{workshop.name}
+						</h2>
+						<img
+							class="w-full h-48 object-cover mb-2"
+							src={workshop.thumbnail}
+							alt={workshop.name}
+						/>
+						<p class="mb-2 text-sm">{workshop.description}</p>
+					</div>
+					<div class="text-left">
+						<a class="hover:underline text-blue-800" href="{workshop.link}">{workshop.name}</a>
+					</div>
+				</div>
+			{/each}
+		</div>
+
+		<div class="flex flex-col justify-between mb-6 mt-12 w-full gap-2">
+			<h1 class="font-bold text-3xl">Tutorials</h1>
+			<p>
+				Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium debitis.
+			</p>
+		</div>
+		<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 w-full mt-3">
+			{#each tutorials as tutorial}
+				<div
+					class="border border-gray-200 shadow-lg p-4 rounded-lg flex flex-col h-fit"
+				>
+					<div class="text-left">
+						<h2 class="font-bold mb-2 mt-0 text-lg">
+							{tutorial.name}
+						</h2>
+						<img
+							class="w-full h-48 object-cover mb-2"
+							src={tutorial.thumbnail}
+							alt={tutorial.name}
+						/>
+						<p class="mb-2 text-sm">{tutorial.description}</p>
+					</div>
+					<div class="grid grid-cols-1">
+						{#each Object.keys(tutorial.links) as key}
+
+							<a class="hover:underline text-blue-800" href="{tutorial.links[key]}">{key}</a>
+
+						{/each}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
diff --git a/ui/src/routes/tutorials/tutorials.js b/ui/src/routes/tutorials/tutorials.js
@@ -0,0 +1,56 @@
+const workshops = [
+    {
+        name: "PhiLab 2024",
+        thumbnail: "",
+        description:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium debitis voluptates corporis enim mollitia voluptatum officia impedit minus sit, modi, nesciunt perspiciatis fuga eum molestias eaque similique alias, quos vel.",
+        link: "https://github.com/earthpulse/eotdl/blob/main/tutorials/workshops/philab24/README.md",
+    },
+    {
+        name: "BiDS 2023",
+        thumbnail: "",
+        description:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium debitis voluptates corporis enim mollitia voluptatum officia impedit minus sit, modi, nesciunt perspiciatis fuga eum molestias eaque similique alias, quos vel.",
+        link: "https://github.com/earthpulse/eotdl/blob/main/tutorials/workshops/bids23/README.md",
+    },
+];
+
+const tutorials = [
+        {
+        name: "Datasets",
+        thumbnail: "",
+        description:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium debitis voluptates corporis enim mollitia voluptatum officia impedit minus sit, modi, nesciunt perspiciatis fuga eum molestias eaque similique alias, quos vel.",
+        links: {"Introducing the EOTDL":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/00_eotdl.ipynb",
+            "Exploring the EOTDL":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/01_exploring.ipynb",
+            "Ingesting in the EOTDL":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/02_ingesting.ipynb",
+            "Creating and ingesting Q1 datasets":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/03_q1_datasets.ipynb",
+            "Creating and ingesting Q2 datasets":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/04_q2_datasets.ipynb",
+            "Training and Inference with Sentinel Hub":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/forest-map.ipynb",
+        	}
+		},
+        {
+        name: "Data access",
+        thumbnail: "",
+        description:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium debitis voluptates corporis enim mollitia voluptatum officia impedit minus sit, modi, nesciunt perspiciatis fuga eum molestias eaque similique alias, quos vel.",
+        links: {"Search Sentinel imagery":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/10_search_sentinel_imagery.ipynb",
+            "Download Sentinel imagery":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/11_download_sentinel_imagery.ipynb",
+        	}
+		},
+        {
+        name: "STAC",
+        thumbnail: "",
+        description:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium debitis voluptates corporis enim mollitia voluptatum officia impedit minus sit, modi, nesciunt perspiciatis fuga eum molestias eaque similique alias, quos vel.",
+        links: {"Generate STAC metadata ":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/20_stac.ipynb",
+            "Generate STAC metadata with extensions":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/21_stac_extensions.ipynb",
+            "Introducing the STACDataFrame labeling strategy":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/22_stac_df_labeling.ipynb",
+            "Introducing the STACDataFrame items parser":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/23_stac_item_parsers.ipynb",
+            "Introducing the STACDataFrame assets generator":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/24_stac_assets_generator.ipynb",
+            "Generate STAC labels generated from SCANEO":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/25_stac_labels_scaneo.ipynb",
+            "Generate STAC labels from the filename":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/26_stac_labels_name.ipynb",
+            "Add the ML-Dataset STAC extension to a Catalog":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/27_stac_ml_dataset.ipynb",
+            "Calculate Quality metrics from your Catalog with the ML-Dataset extension":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/28_ml_dataset_quality_metrics.ipynb",
+            "Get a GeoDataFrame from STAC items":"https://github.com/earthpulse/eotdl/blob/main/tutorials/notebooks/29_stac_to_geodataframe.ipynb",
+        	}
+		},
+	];
+
+
+export {tutorials, workshops};