Add item details modal to embed view

Signed-off-by: Sergio Castaño Arteaga <[email protected]>
Signed-off-by: Cintia Sanchez Garcia <[email protected]>
Co-authored-by: Sergio Castaño Arteaga <[email protected]>
Co-authored-by: Cintia Sanchez Garcia <[email protected]>

.gitignore

@@ -10,9 +10,13 @@ lcov.info
 npm-debug.log*
 target
 target-wasm
+ui/common/dist
+ui/common/node_modules
 ui/embed/dist
 ui/embed/node_modules
 ui/embed/static/*
+ui/embed-item/dist
+ui/embed-item/node_modules
 ui/webapp/dist
 ui/webapp/node_modules
 ui/webapp/static/*

crates/cli/askama.toml

@@ -1,2 +1,6 @@
 [general]
-dirs = ["templates", "../../ui/webapp/dist"]
+dirs = [
+    "templates",
+    "../../ui/embed-item/dist",
+    "../../ui/webapp/dist"
+]

crates/cli/build.rs

@@ -9,8 +9,12 @@ fn main() -> Result<()> {
     // Tell Cargo to rerun this build script if the source changes
     println!("cargo:rerun-if-changed=../wasm/overlay");
     println!("cargo:rerun-if-changed=../wasm/quiz");
+    println!("cargo:rerun-if-changed=../../ui/common/src");
     println!("cargo:rerun-if-changed=../../ui/embed/src");
     println!("cargo:rerun-if-changed=../../ui/embed/embed.html");
+    println!("cargo:rerun-if-changed=../../ui/embed-item/public/embed-item.js");
+    println!("cargo:rerun-if-changed=../../ui/embed-item/src");
+    println!("cargo:rerun-if-changed=../../ui/embed-item/embed-item.html");
     println!("cargo:rerun-if-changed=../../ui/webapp/src");
     println!("cargo:rerun-if-changed=../../ui/webapp/static");
     println!("cargo:rerun-if-changed=../../ui/webapp/index.html");
@@ -65,10 +69,18 @@ fn main() -> Result<()> {
         ],
     )?;
 
+    // Build common
+    run("yarn", &["--cwd", "../../ui/common", "install"])?;
+    run("yarn", &["--cwd", "../../ui/common", "build"])?;
+
     // Build embed
     run("yarn", &["--cwd", "../../ui/embed", "install"])?;
     run("yarn", &["--cwd", "../../ui/embed", "build"])?;
 
+    // Build embed item
+    run("yarn", &["--cwd", "../../ui/embed-item", "install"])?;
+    run("yarn", &["--cwd", "../../ui/embed-item", "build"])?;
+
     // Build web application
     run("yarn", &["--cwd", "../../ui/webapp", "install"])?;
     run("yarn", &["--cwd", "../../ui/webapp", "build"])?;

crates/cli/src/build/mod.rs

@@ -30,11 +30,11 @@ use landscape2_core::{
     datasets::{embed::EmbedView, full::Full, Datasets, NewDatasetsInput},
     games::{GamesSource, LandscapeGames},
     guide::{GuideSource, LandscapeGuide},
-    settings::{self, Analytics, LandscapeSettings, LogosViewbox, Osano, SettingsSource},
+    settings::{self, Analytics, Colors, LandscapeSettings, LogosViewbox, Osano, SettingsSource},
 };
 use qrcode::render::svg;
 use reqwest::StatusCode;
-use rust_embed::RustEmbed;
+use rust_embed::{EmbeddedFile, RustEmbed};
 use std::{
     collections::{BTreeMap, HashMap},
     ffi::OsStr,
@@ -91,6 +91,12 @@ const PREPARE_LOGOS_MAX_CONCURRENCY: usize = 20;
 #[folder = "../../ui/embed/dist"]
 struct EmbedAssets;
 
+/// Embed landscape embeddable views (item details) assets into binary.
+/// (these assets will be built automatically from the build script)
+#[derive(RustEmbed)]
+#[folder = "../../ui/embed-item/dist"]
+struct EmbedItemAssets;
+
 /// Embed web application assets into binary.
 /// (these assets will be built automatically from the build script)
 #[derive(RustEmbed)]
@@ -212,8 +218,9 @@ pub async fn build(args: &BuildArgs) -> Result<()> {
         &args.output_dir,
     )?;
 
-    // Render index file and write it to the output directory
-    render_index(&settings.analytics, &datasets, &settings.osano, &args.output_dir)?;
+    // Render index and embed-item html files and write them to the output dir
+    render_index_html(&settings.analytics, &datasets, &settings.osano, &args.output_dir)?;
+    render_embed_item_html(&settings.colors, &args.output_dir)?;
 
     // Copy embed and web application assets files to the output directory
     copy_embed_assets(&args.output_dir)?;
@@ -382,14 +389,28 @@ async fn copy_data_sources_files(args: &BuildArgs, output_dir: &Path) -> Result<
 fn copy_embed_assets(output_dir: &Path) -> Result<()> {
     debug!("copying embed assets to output directory");
 
-    for asset_path in EmbedAssets::iter() {
-        if let Some(embedded_file) = EmbedAssets::get(&asset_path) {
-            let path = Path::new(EMBED_PATH).join(asset_path.as_ref());
-            if let Some(parent_path) = path.parent() {
-                fs::create_dir_all(output_dir.join(parent_path))?;
-            }
-            let mut file = File::create(output_dir.join(path))?;
-            file.write_all(&embedded_file.data)?;
+    let copy_embed_asset = |path: &str, embedded_file: EmbeddedFile| -> Result<()> {
+        let path = Path::new(EMBED_PATH).join(path);
+        if let Some(parent_path) = path.parent() {
+            fs::create_dir_all(output_dir.join(parent_path))?;
+        }
+        let mut file = File::create(output_dir.join(path))?;
+        file.write_all(&embedded_file.data)?;
+        Ok(())
+    };
+
+    for path in EmbedAssets::iter() {
+        if let Some(embedded_file) = EmbedAssets::get(&path) {
+            copy_embed_asset(&path, embedded_file)?;
+        }
+    }
+    for path in EmbedItemAssets::iter() {
+        if path == "embed-item.html" {
+            // This file is a template that will be rendered later on
+            continue;
+        }
+        if let Some(embedded_file) = EmbedItemAssets::get(&path) {
+            copy_embed_asset(&path, embedded_file)?;
         }
     }
 
@@ -401,18 +422,17 @@ fn copy_embed_assets(output_dir: &Path) -> Result<()> {
 fn copy_webapp_assets(output_dir: &Path) -> Result<()> {
     debug!("copying web application assets to output directory");
 
-    for asset_path in WebappAssets::iter() {
-        // The index document is a template that we'll render, so we don't want
-        // to copy it as is.
-        if asset_path == "index.html" || asset_path == ".keep" {
+    for path in WebappAssets::iter() {
+        if path == "index.html" || path == ".keep" {
+            // This file is a template that will be rendered later on
             continue;
         }
 
-        if let Some(embedded_file) = WebappAssets::get(&asset_path) {
-            if let Some(parent_path) = Path::new(asset_path.as_ref()).parent() {
+        if let Some(embedded_file) = WebappAssets::get(&path) {
+            if let Some(parent_path) = Path::new(path.as_ref()).parent() {
                 fs::create_dir_all(output_dir.join(parent_path))?;
             }
-            let mut file = File::create(output_dir.join(asset_path.as_ref()))?;
+            let mut file = File::create(output_dir.join(path.as_ref()))?;
             file.write_all(&embedded_file.data)?;
         }
     }
@@ -834,32 +854,51 @@ fn prepare_view_full_dataset(full: &Full, view: &EmbedView) -> Full {
     }
 }
 
-/// Template for the index document.
+/// Template for the index html document.
 #[derive(Debug, Clone, Template)]
 #[template(path = "index.html", escape = "none")]
-struct Index<'a> {
+struct IndexHtml<'a> {
     analytics: &'a Option<Analytics>,
     datasets: &'a Datasets,
     osano: &'a Option<Osano>,
 }
 
-/// Render index file and write it to the output directory.
+/// Render index html file and write it to the output directory.
 #[instrument(skip_all, err)]
-fn render_index(
+fn render_index_html(
     analytics: &Option<Analytics>,
     datasets: &Datasets,
     osano: &Option<Osano>,
     output_dir: &Path,
 ) -> Result<()> {
     debug!("rendering index.html file");
 
-    let index = Index {
+    let html = IndexHtml {
         analytics,
         datasets,
         osano,
     }
     .render()?;
-    File::create(output_dir.join("index.html"))?.write_all(index.as_bytes())?;
+    File::create(output_dir.join("index.html"))?.write_all(html.as_bytes())?;
+
+    Ok(())
+}
+
+/// Template for the embed item html document.
+#[derive(Debug, Clone, Template)]
+#[template(path = "embed-item.html", escape = "none")]
+struct EmbedItemHtml<'a> {
+    colors: &'a Option<Colors>,
+}
+
+/// Render embed item html file and write it to the output directory.
+#[instrument(skip_all, err)]
+fn render_embed_item_html(colors: &Option<Colors>, output_dir: &Path) -> Result<()> {
+    debug!("rendering embed-item.html file");
+
+    let path = output_dir.join(EMBED_PATH).join("embed-item.html");
+    let html = EmbedItemHtml { colors }.render()?;
+    File::create(path)?.write_all(html.as_bytes())?;
 
     Ok(())
 }
@@ -879,6 +918,7 @@ fn setup_output_dir(output_dir: &Path) -> Result<()> {
         API_PATH,
         DATASETS_PATH,
         DOCS_PATH,
+        EMBED_PATH,
         IMAGES_PATH,
         LOGOS_PATH,
         SOURCES_PATH,

ui/common/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

ui/common/eslint.config.js

@@ -0,0 +1,39 @@
+// eslint.config.js
+
+import js from '@eslint/js';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import solidPlugin from 'eslint-plugin-solid';
+import tseslint from 'typescript-eslint';
+
+export default [
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  solidPlugin.configs['flat/recommended'],
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: 'error',
+    },
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      'eslint-plugin-solid': solidPlugin.configs['flat/typescript'],
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+      'solid/no-innerhtml': [
+        1,
+        {
+          allowStatic: true,
+        },
+      ],
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+  },
+];

ui/common/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "common",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "format:diff": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "lint": "eslint src --max-warnings 0",
+    "lint:fix": "eslint src --max-warnings 0 --fix"
+  },
+  "dependencies": {
+    "@solid-primitives/resize-observer": "^2.0.25",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "solid-js": "^1.8.15",
+    "solid-styled-components": "^0.28.5"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.5",
+    "esbuild": "^0.21.5",
+    "esbuild-plugin-solid-js": "^1.0.1",
+    "eslint": "^9.4.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-plugin-solid": "^0.14.0",
+    "prettier": "^3.3.1",
+    "tsup": "^8.1.0",
+    "tsup-preset-solid": "^2.2.0",
+    "typescript": "^5.2.2",
+    "typescript-eslint": "^7.12.0",
+    "vite": "^5.2.0",
+    "vite-plugin-solid": "^2.10.2"
+  },
+  "exports": {
+    "solid": "./dist/index.jsx",
+    "import": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "require": {
+      "types": "./dist/index.d.cts",
+      "default": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "browser": {},
+  "typesVersions": {}
+}