Rendering HTML.

Test to add a theme and a default page structure than can be customized. Rendering is XSLT based.
geonetwork · Nov 20, 2020 · 2eb32fd · 2eb32fd
1 parent f532e67
commit 2eb32fd
Show file tree

Hide file tree

Showing 16 changed files with 379 additions and 2 deletions.
diff --git a/.../src/main/java/org/fao/geonet/common/search/processor/impl/XsltResponseProcessorImpl.java b/.../src/main/java/org/fao/geonet/common/search/processor/impl/XsltResponseProcessorImpl.java
@@ -53,7 +53,7 @@ public void processResponse(HttpSession httpSession,
     XMLStreamWriter generator = s.getXMLStreamWriter();
 
     String xsltFileName = String.format(
-        "xslt/%s.xsl", transformation);
+        "xslt/collections/items/formats/%s.xsl", transformation);
     File xsltFile = new ClassPathResource(xsltFileName).getFile();
 
     if (!xsltFile.exists()) {

diff --git a/modules/services/searching/src/main/java/org/fao/geonet/searching/GnSearchApp.java b/modules/services/searching/src/main/java/org/fao/geonet/searching/GnSearchApp.java
@@ -11,8 +11,11 @@
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.boot.autoconfigure.domain.EntityScan;
 import org.springframework.cloud.context.config.annotation.RefreshScope;
+import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.ComponentScan;
 import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
+import org.springframework.web.servlet.ViewResolver;
+import org.springframework.web.servlet.view.xslt.XsltViewResolver;
 
 @SpringBootApplication
 @RefreshScope
@@ -26,4 +29,16 @@ public class GnSearchApp {
   public static void main(String[] args) {
     SpringApplication.run(GnSearchApp.class, args);
   }
+
+
+  @Bean
+  public ViewResolver xsltViewResolver() {
+    XsltViewResolver viewResolver = new XsltViewResolver();
+    viewResolver.setPrefix("classpath:/xslt/");
+    viewResolver.setSuffix(".xsl");
+    viewResolver.setSourceKey("source");
+    viewResolver.setCacheTemplates(false);
+    viewResolver.setCache(false);
+    return viewResolver;
+  }
 }
diff --git a/...es/searching/src/main/java/org/fao/geonet/searching/controller/CollectionsController.java b/...es/searching/src/main/java/org/fao/geonet/searching/controller/CollectionsController.java
@@ -0,0 +1,69 @@
+/**
+ * (c) 2020 Open Source Geospatial Foundation - all rights reserved This code is licensed under the
+ * GPL 2.0 license, available at the root application directory.
+ */
+
+package org.fao.geonet.searching.controller;
+
+import io.swagger.v3.oas.annotations.Parameter;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import java.util.Random;
+import java.util.UUID;
+import java.util.stream.Stream;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpSession;
+import javax.ws.rs.Produces;
+import org.apache.commons.io.IOUtils;
+import org.fao.geonet.common.search.Constants;
+import org.fao.geonet.common.search.ElasticSearchProxy;
+import org.fao.geonet.common.xml.XsltUtil;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpEntity;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.ResponseStatus;
+import org.springframework.web.servlet.ViewResolver;
+import org.springframework.web.servlet.view.ContentNegotiatingViewResolver;
+import org.springframework.web.servlet.view.xslt.XsltViewResolver;
+
+@RequestMapping(value = {
+    "/landingpage"
+})
+@Controller
+public class CollectionsController {
+
+  @Autowired
+  ViewResolver viewResolver;
+
+  /**
+   * Catalogue landing page.
+   */
+  @GetMapping
+  @Produces(value = "text/html")
+  public String landingpage(
+      @RequestParam(defaultValue = "false")
+      boolean debug,
+      Model model) throws Exception {
+    if (debug) {
+      ((ContentNegotiatingViewResolver) viewResolver)
+          .getViewResolvers()
+          .stream()
+          .filter(v -> v instanceof XsltViewResolver)
+          .map(v -> (XsltViewResolver) v)
+          .forEach(v -> v.clearCache());
+    }
+
+    model.addAttribute("source",  IOUtils.toInputStream(
+        String.format("<source id='%s'/>", UUID.randomUUID())));
+    model.addAttribute("language", "fre");
+    return "landingpage";
+  }
+}
diff --git a/...ces/searching/src/main/resources/META-INF/services/javax.xml.transform.TransformerFactory b/...ces/searching/src/main/resources/META-INF/services/javax.xml.transform.TransformerFactory
@@ -0,0 +1 @@
+net.sf.saxon.TransformerFactoryImpl
diff --git a/modules/services/searching/src/main/resources/bootstrap.yml b/modules/services/searching/src/main/resources/bootstrap.yml
@@ -33,12 +33,17 @@ eureka:
 logging:
   level:
     org.springframework.security: DEBUG
+
+
 ---
+# Use this profile when running on a GN4 database on localhost and Elasticsearch index.
+# Turn off security, config & discover.
 spring:
   profiles: standalone
+  rabbitmq.host: localhost
   datasource:
     driver-class-name: org.postgresql.Driver
-    url: jdbc:postgresql://localhost:5432/sextant7
+    url: jdbc:postgresql://localhost:5432/geonetwork
     username: www-data
     password: www-data
   jpa:

diff --git a/modules/services/searching/src/main/resources/xslt/collections/collections.xsl b/modules/services/searching/src/main/resources/xslt/collections/collections.xsl
diff --git a/...earching/src/main/resources/xslt/copy.xsl → ...s/xslt/collections/items/formats/copy.xsl b/...earching/src/main/resources/xslt/copy.xsl → ...s/xslt/collections/items/formats/copy.xsl
diff --git a/...earching/src/main/resources/xslt/dcat.xsl → ...s/xslt/collections/items/formats/dcat.xsl b/...earching/src/main/resources/xslt/dcat.xsl → ...s/xslt/collections/items/formats/dcat.xsl
diff --git a/modules/services/searching/src/main/resources/xslt/collections/items/items.xsl b/modules/services/searching/src/main/resources/xslt/collections/items/items.xsl
diff --git a/modules/services/searching/src/main/resources/xslt/commons/xsl-params-core.xsl b/modules/services/searching/src/main/resources/xslt/commons/xsl-params-core.xsl
@@ -0,0 +1,9 @@
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                xmlns:gmd="http://www.isotc211.org/2005/gmd"
+                xmlns:gco="http://www.isotc211.org/2005/gco"
+                xmlns:xs="http://www.w3.org/2001/XMLSchema"
+                version="3.0">
+  <xsl:param name="language" select="'en'" as="xs:string"/>
+  <xsl:param name="language3letter" select="'eng'" as="xs:string"/>
+
+</xsl:stylesheet>
diff --git a/modules/services/searching/src/main/resources/xslt/error.xsl b/modules/services/searching/src/main/resources/xslt/error.xsl
@@ -0,0 +1,13 @@
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                xmlns:gmd="http://www.isotc211.org/2005/gmd"
+                xmlns:gco="http://www.isotc211.org/2005/gco"
+                xmlns:xs="http://www.w3.org/2001/XMLSchema"
+                version="3.0">
+
+  <xsl:template match="/">
+    <xsl:message><xsl:copy-of select="."/></xsl:message>
+    <error>
+      <xsl:copy-of select="."/>
+    </error>
+  </xsl:template>
+</xsl:stylesheet>
diff --git a/modules/services/searching/src/main/resources/xslt/landingpage.xsl b/modules/services/searching/src/main/resources/xslt/landingpage.xsl
@@ -0,0 +1,136 @@
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                xmlns:gmd="http://www.isotc211.org/2005/gmd"
+                xmlns:gco="http://www.isotc211.org/2005/gco"
+                xmlns:xs="http://www.w3.org/2001/XMLSchema"
+                version="3.0">
+  <xsl:output method="html"
+              media-type="text/html"
+              encoding="UTF-8"
+              indent="no"/>
+
+  <xsl:import href="commons/xsl-params-core.xsl"/>
+  <xsl:import href="themes/default/theme.xsl"/>
+
+  <xsl:template match="/">
+    <xsl:message>Processing doc: <xsl:copy-of select="."/></xsl:message>
+    <html>
+      <xsl:attribute name="lang" select="$language"/>
+      <xsl:call-template name="html-head"/>
+      <xsl:call-template name="html-body">
+        <xsl:with-param name="content">
+          <div class="pt-24">
+            <div class="container px-3 mx-auto flex flex-wrap flex-col md:flex-row items-center">
+              <div class="flex flex-col w-full md:w-2/5 justify-center items-start text-center md:text-left">
+                <p class="uppercase tracking-loose w-full">Looking for data?</p>
+                <h1 class="my-4 text-5xl font-bold leading-tight">
+                  Search over 12534 data sets, services and maps, ...
+                </h1>
+                <p class="leading-normal text-2xl mb-8">
+                  ... <xsl:value-of select="/source/@id"/>
+                </p>
+                <button class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
+                  Browse ...
+                </button>
+              </div>
+
+              <div class="w-full md:w-3/5 py-6 text-center">
+              </div>
+            </div>
+          </div>
+          <div class="relative -mt-12 lg:-mt-24">
+            <svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
+                  <path d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z" opacity="0.100000001"></path>
+                  <path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" id="Path-4" opacity="0.200000003"></path>
+                </g>
+                <g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <path d="M0.457,34.035 C57.086,53.198 98.208,65.809 123.822,71.865 C181.454,85.495 234.295,90.29 272.033,93.459 C311.355,96.759 396.635,95.801 461.025,91.663 C486.76,90.01 518.727,86.372 556.926,80.752 C595.747,74.596 622.372,70.008 636.799,66.991 C663.913,61.324 712.501,49.503 727.605,46.128 C780.47,34.317 818.839,22.532 856.324,15.904 C922.689,4.169 955.676,2.522 1011.185,0.432 C1060.705,1.477 1097.39,3.129 1121.236,5.387 C1161.703,9.219 1208.621,17.821 1235.4,22.304 C1285.855,30.748 1354.351,47.432 1440.886,72.354 L1441.191,104.352 L1.121,104.031 L0.457,34.035 Z"></path>
+                </g>
+              </g>
+            </svg>
+          </div>
+          <section class="bg-white border-b py-8">
+            <div class="container mx-auto flex flex-wrap pt-4 pb-12">
+              <h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
+                Thematic portals
+              </h1>
+              <div class="w-full mb-4">
+                <div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
+              </div>
+              <div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
+                <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
+                  <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+                    <p class="w-full text-gray-600 text-xs md:text-sm px-6">
+                      xGETTING STARTED aaa
+                    </p>
+                    <div class="w-full font-bold text-xl text-gray-800 px-6">
+                      Biodiversity
+                    </div>
+                    <p class="text-gray-800 text-base px-6 mb-5">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
+                    </p>
+                  </a>
+                </div>
+                <div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow p-6">
+                  <div class="flex items-center justify-start">
+                    <button class="mx-auto lg:mx-0 hover:underline gradient text-white font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
+                      More ...
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
+                <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
+                  <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+                    <p class="w-full text-gray-600 text-xs md:text-sm px-6">
+                      xGETTING STARTED
+                    </p>
+                    <div class="w-full font-bold text-xl text-gray-800 px-6">
+                      Climate change
+                    </div>
+                    <p class="text-gray-800 text-base px-6 mb-5">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
+                    </p>
+                  </a>
+                </div>
+                <div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow p-6">
+                  <div class="flex items-center justify-center">
+                    <button class="mx-auto lg:mx-0 hover:underline gradient text-white font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
+                      More ...
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
+                <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
+                  <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+                    <p class="w-full text-gray-600 text-xs md:text-sm px-6">
+                      xGETTING STARTED
+                    </p>
+                    <div class="w-full font-bold text-xl text-gray-800 px-6">
+                      Water
+                    </div>
+                    <p class="text-gray-800 text-base px-6 mb-5">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
+                    </p>
+                  </a>
+                </div>
+                <div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow p-6">
+                  <div class="flex items-center justify-end">
+                    <button class="mx-auto lg:mx-0 hover:underline gradient text-white font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
+                      More ...
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+
+        </xsl:with-param>
+      </xsl:call-template>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
diff --git a/modules/services/searching/src/main/resources/xslt/themes/default/footer.html b/modules/services/searching/src/main/resources/xslt/themes/default/footer.html
@@ -0,0 +1,44 @@
+<footer class="bg-white">
+  <div class="container mx-auto px-8">
+    <div class="w-full flex flex-col md:flex-row py-6">
+      <div class="flex-1 mb-6 text-black">
+        <a class="text-orange-600 no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="#">
+          /
+        </a>
+      </div>
+      <div class="flex-1">
+        <p class="uppercase text-gray-500 md:mb-6">Links</p>
+        <ul class="list-reset mb-6">
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:underline text-gray-800 hover:text-orange-500">Help</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:underline text-gray-800 hover:text-orange-500">Support</a>
+          </li>
+        </ul>
+      </div>
+      <div class="flex-1">
+        <p class="uppercase text-gray-500 md:mb-6">Legal</p>
+        <ul class="list-reset mb-6">
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:underline text-gray-800 hover:text-orange-500">Terms</a>
+          </li>
+        </ul>
+      </div>
+      <div class="flex-1">
+        <p class="uppercase text-gray-500 md:mb-6">Social</p>
+        <ul class="list-reset mb-6">
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:underline text-gray-800 hover:text-orange-500">Facebook</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:underline text-gray-800 hover:text-orange-500">Linkedin</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:underline text-gray-800 hover:text-orange-500">Twitter</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</footer>
diff --git a/modules/services/searching/src/main/resources/xslt/themes/default/head.html b/modules/services/searching/src/main/resources/xslt/themes/default/head.html
@@ -0,0 +1,18 @@
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title></title>
+  <meta name="description" content="" />
+  <meta name="keywords" content="" />
+  <meta name="author" content="" />
+  <link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
+  <!--Replace with your tailwind.css once created-->
+  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" />
+  <style>
+    .gradient {
+      background: rgb(0,92,161);
+      background: linear-gradient(126deg, rgba(0,92,161,1) 7%, rgba(202,201,0,1) 90%);
+    }
+  </style>
+</head>
diff --git a/modules/services/searching/src/main/resources/xslt/themes/default/nav.html b/modules/services/searching/src/main/resources/xslt/themes/default/nav.html
@@ -0,0 +1,39 @@
+<nav id="header" class="fixed w-full z-30 top-0 text-white">
+  <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2">
+    <div class="pl-4 flex items-center">
+      <a class="toggleColour text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl"
+         href="#">
+        /
+      </a>
+    </div>
+    <div class="block lg:hidden pr-4">
+      <button id="nav-toggle"
+              class="flex items-center p-1 text-orange-800 hover:text-gray-900 focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
+        <svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <title>Menu</title>
+          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
+        </svg>
+      </button>
+    </div>
+    <div
+        class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-white lg:bg-transparent text-black p-4 lg:p-0 z-20"
+        id="nav-content">
+      <ul class="list-reset lg:flex justify-end flex-1 items-center">
+        <li class="mr-3">
+          <a class="inline-block py-2 px-4 text-black font-bold no-underline" href="#">Discover</a>
+        </li>
+        <li class="mr-3">
+          <a class="inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4"
+             href="#">Map</a>
+        </li>
+      </ul>
+      <button
+          id="navAction"
+          class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full mt-4 lg:mt-0 py-4 px-8 shadow opacity-75 focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
+      >
+        Sign in
+      </button>
+    </div>
+  </div>
+  <hr class="border-b border-gray-100 opacity-25 my-0 py-0"/>
+</nav>