Merge pull request #6 from wiremock/ui-tweaks

UI tweaks

Author: limptwiglet

assets/css/style.css

@@ -1345,6 +1345,10 @@ video {
   transform: none;
 }
 
+.resize {
+  resize: both;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1461,12 +1465,6 @@ video {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
-.-space-y-10 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(-2.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(-2.5rem * var(--tw-space-y-reverse));
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2121,6 +2119,10 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
 .hover\:opacity-90:hover {
   opacity: 0.9;
 }

config.yml

@@ -8,6 +8,8 @@ enableGitInfo: true
 enableRobotsTXT: true
 canonifyURLs: true
 
+googleAnalytics: UA-36386229-2
+
 paginate: 24
 
 taxonomies:
@@ -67,8 +69,7 @@ params:
   twitter: "https://twitter.com/wiremockorg"
   description: "Mock API library: samples, templates, and quick starts"
   mainSections:
-  - catalog/api
-
+  - catalog
   cta:
     heading: Ready to accelerate your development flow
     subheading: Shorter release cycles, more predictable schedules and fewer defects in production.

layouts/_default/baseof.html

@@ -10,6 +10,7 @@
     {{ partialCached "navbar.html" . }}
     {{ block "main" . }}{{ end }}
     {{ partialCached "footer.html" . }}
+    {{ template "_internal/google_analytics_async.html" . }}
 </body>
 </html>
 

layouts/catalog/single.html

@@ -53,32 +53,36 @@ <h2 class="text-sky-990 font-medium text-lg lg:text-xl mb-5">{{ i18n "use_api" }
                   px-2 py-3 text-lg
                   text-white border border-sky-500 bg-sky-500 hover:bg-sky-600 hover:border-sky-600" target="_blank" rel="noopener noreferrer">
                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clip-path="url(#clip0_18373_127)">
-                    <path d="M9 5V7H15.59L4 18.59L5.41 20L17 8.41V15H19V5H9Z" fill="currentColor"/>
+                    <g clip-path="url(#clip0_18373_798)">
+                      <path d="M19 12V19H5V12H3V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V12H19ZM13 12.67L15.59 10.09L17 11.5L12 16.5L7 11.5L8.41 10.09L11 12.67V3H13V12.67Z" fill="white"/>
                     </g>
                     <defs>
-                    <clipPath id="clip0_18373_127">
-                    <rect width="24" height="24" fill="white"/>
-                    </clipPath>
+                      <clipPath id="clip0_18373_798">
+                        <rect width="24" height="24" fill="currentColor"/>
+                      </clipPath>
                     </defs>
-                  </svg>                    
+                  </svg>
                   <span class="pr-4">Download WireMock JSON</span>
                 </a>
+              <a
+                href="https://github.com/wiremock/api-template-library/blob/main/docs/HOW_TO_RUN_IN_WIREMOCK.md"
+                title="Learn how to load this API template in WireMock"
+                class="mt-2 block text-sky-600 hover:underline">Learn how to use WireMock JSON</a>
               {{ end }}
               {{ with .Resources.GetMatch .Params.stubs }}
-                <a href="https://app.wiremock.cloud/new-mock/{{ $.Params.slug }}" class="mt-5 flex items-center justify-center space-x-2 transition rounded-md focus:outline-none font-semibold antialiased
+                <a href="https://app.wiremock.cloud/new-mock/{{ $.Params.slug }}" class="mt-3 flex items-center justify-center space-x-2 transition rounded-md focus:outline-none font-semibold antialiased
                   px-2 py-3 text-lg
                   text-white border border-sky-500 bg-sky-500 hover:bg-sky-600 hover:border-sky-600" target="_blank" rel="noopener noreferrer">
                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clip-path="url(#clip0_18373_798)">
-                    <path d="M19 12V19H5V12H3V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V12H19ZM13 12.67L15.59 10.09L17 11.5L12 16.5L7 11.5L8.41 10.09L11 12.67V3H13V12.67Z" fill="white"/>
+                    <g clip-path="url(#clip0_18373_127)">
+                      <path d="M9 5V7H15.59L4 18.59L5.41 20L17 8.41V15H19V5H9Z" fill="currentColor"/>
                     </g>
                     <defs>
-                    <clipPath id="clip0_18373_798">
-                    <rect width="24" height="24" fill="currentColor"/>
-                    </clipPath>
+                      <clipPath id="clip0_18373_127">
+                        <rect width="24" height="24" fill="white"/>
+                      </clipPath>
                     </defs>
-                  </svg>                                       
+                  </svg>
                   <span class="pr-4">Run in WireMock Cloud</span>
                 </a>
               {{ end }}