infotorg-api-jekyll-theme 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 717b7d207f91d28db853e13264fd2f508c4c567a6badefec130896a8dcfa359d
-  data.tar.gz: 986add89717e2844e8bec65487f2fd0ef0b49c3ed3cafd81ea6ba0a6e7836e32
+  metadata.gz: cba7c91f77b12e7b42e66927fe584aa719cade56c4884bfb9aa57a666f19f799
+  data.tar.gz: edc3fd8edb0ca5f7dfa095f471efcbd81b480f9a34118f39eb2b57804d06159a
 SHA512:
-  metadata.gz: 7045b2aaab1355f5fe104c27c40c69296cc7890800a7436f72921bbde57bbe4128651060916c8a66c5ce885315be01c128f1ded4ccdbc28fa5c2952e025e5d1f
-  data.tar.gz: f1ef1380cbb6994cba17835c19a39c132fb3790b8c6c3740973a5753cfb8888455dbf9f35ecf8b7514cbf049e0709ebd30142e216ff4ea0328d4053206760f93
+  metadata.gz: 064adbe8b0973b79f6d393e815838ac400f99a9a078516923908282be9cafa4ca1f4a9f9f471669a3f8d22626c1082ce411a33904148f996b59a98dc9884a012
+  data.tar.gz: '080b7722f01466f75aac1c1f8e3c9abf81e621de4d5e3bd82f13f1de5e70c6d4dc2a285e5c75ee05577af6bab2c6c668c90dba008b6c8991a362ecf1477cccec'

data/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-2021 Volodymyr Chumak
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -1,2 +1,41 @@
-# Jekyll theme for Infotorg APIs
+# Jekyll Infotorg APIs theme Quickstart
+> Scaffold for a basic Jekyll theme for use as a reference or template
+
+[![Ruby - >=2.3](https://img.shields.io/badge/Ruby->=2.3-green?logo=ruby&logoColor=white)](https://ruby-lang.org)
+[![Jekyll - 3.9](https://img.shields.io/badge/Jekyll-3.9-green?logo=jekyll&logoColor=white)](https://jekyllrb.com)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green)](#license)
+
 ![Theme screenshot](screenshot.png)
+
+## How to use this project
+
+### Quickstart
+
+Create a new project from this template. Or just use the code or docs here as a reference.
+
+<div align="center">
+
+[![Use this template](https://img.shields.io/badge/Use_this_template-2ea44f?style=for-the-badge&logo=github)](https://github.com/coderua/infotorg-api-jekyll-theme/generate)
+
+</div>
+
+### Demo
+
+View a live demo on GH Pages:
+
+<div align="center">
+
+[![GH Pages - View demo](https://img.shields.io/badge/GH_Pages-View_demo-green?style=for-the-badge)](https://coderua.github.io/infotorg-api-jekyll-theme/)
+
+</div>
+
+## What is a Jekyll theme?
+
+If you build a Jekyll site, you'll typically use a theme to style your site or at least give a base which you and customize on top of.
+
+A theme is a way of packaging layout files, CSS styling and includes files to be installed in another Jekyll project. A theme might be made from scratch or based on a static HTML. A theme is a great way of making styling reusable across projects by you and other people.
+
+A good example of a theme is Minima, which is the default theme used when running `jekyll new PATH`.
+
+[![jekyll - minima](https://img.shields.io/static/v1?label=jekyll&message=minima&color=blue&logo=github)](https://github.com/jekyll/minima)
+

data/_config.yml

@@ -21,7 +21,7 @@ google_analytics_tag_manager: ''
 # --- Swagger UI configuration ---
 # Path to Open API file name, used for Swagger UI.
 # As a convention, all Open API files should be stored in the /assets/openapi folder.
-openapi: ''
+openapi: '/assets/openapi/eiendom.json'
 
 # Swagger UI Theme
 # If not set will fetch the latest default theme css from an official CDN.

data/_includes/footer.html

@@ -5,7 +5,9 @@
         </div>
         <div class="company">
             <span class="service-from-text">En tjeneste fra</span>
-            <a href="https://www.tietoevry.com/"><img src="assets/images/tieto-evry-logo.svg" width="100px" alt="TietoEVRY"/></a>
+            <a href="https://www.tietoevry.com/">
+                <img src="{{ 'assets/images/tieto-evry-logo.svg' | relative_url }}" width="100px" alt="TietoEVRY"/>
+            </a>
         </div>
     </div>
 </footer>

data/_includes/head-app-css.html

@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="{{ 'assets/css/main.css?v=' | append: site.github.build_revision }}">
-<link rel="stylesheet" href="{{ 'assets/css/print.css?v=' | append: site.github.build_revision }}">
+<link rel="stylesheet" href="{{ 'assets/css/main.css?v=' | append: site.github.build_revision | relative_url }}">
+<link rel="stylesheet" href="{{ 'assets/css/print.css?v=' | append: site.github.build_revision | relative_url }}">

data/_includes/head-favicon.html

@@ -0,0 +1,85 @@
+<!-- Favicons -->
+<link
+    rel="shortcut icon"
+    href="{{ 'assets/images/favicon/favicon.ico' | relative_url }}"
+    type="image/x-icon"
+/>
+<link
+    rel="apple-touch-icon"
+    sizes="57x57"
+    href="{{ 'assets/images/favicon/apple-touch-icon-57x57.png' | relative_url }}"
+/>
+<link
+    rel="apple-touch-icon"
+    sizes="60x60"
+    href="{{ 'assets/images/favicon/apple-touch-icon-60x60.png' | relative_url }}"
+/>
+<link
+    rel="apple-touch-icon"
+    sizes="72x72"
+    href="{{ 'assets/images/favicon/apple-touch-icon-72x72.png' | relative_url }}"
+/>
+<link
+    rel="apple-touch-icon"
+    sizes="76x76"
+    href="{{ 'assets/images/favicon/apple-touch-icon-76x76.png' | relative_url }}"
+/>
+<link
+    rel="apple-touch-icon"
+    sizes="114x114"
+    href="{{ 'assets/images/favicon/apple-touch-icon-114x114.png' | relative_url }}"
+/>
+<link
+    rel="apple-touch-icon"
+    sizes="120x120"
+    href="{{ 'assets/images/favicon/apple-touch-icon-120x120.png' | relative_url }}"
+/>
+<link
+    rel="apple-touch-icon"
+    sizes="144x144"
+    href="{{ 'assets/images/favicon/apple-touch-icon-144x144.png' | relative_url }}"
+/>
+<link
+    rel="apple-touch-icon"
+    sizes="152x152"
+    href="{{ 'assets/images/favicon/apple-touch-icon-152x152.png' | relative_url }}"
+/>
+<link
+    rel="apple-touch-icon"
+    sizes="180x180"
+    href="{{ 'assets/images/favicon/apple-touch-icon-180x180.png' | relative_url }}"
+/>
+<link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="{{ 'assets/images/favicon/favicon-32x32.png' | relative_url }}"
+/>
+<link
+    rel="icon"
+    type="image/png"
+    sizes="194x194"
+    href="{{ 'assets/images/favicon/favicon-194x194.png' | relative_url }}"
+/>
+<link
+    rel="icon"
+    type="image/png"
+    sizes="96x96"
+    href="{{ 'assets/images/favicon/favicon-96x96.png' | relative_url }}"
+/>
+<link
+    rel="icon"
+    type="image/png"
+    sizes="192x192"
+    href="{{ 'assets/images/favicon/android-chrome-192x192.png' | relative_url }}"
+/>
+<link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="{{ 'assets/images/favicon/favicon-16x16.png' | relative_url }}"
+/>
+<link
+    rel="mask-icon" color="#505f6c"
+    href="{{ 'assets/images/favicon/safari-pinned-tab.svg' | relative_url }}"
+/>

data/_includes/navigation.html

@@ -1,19 +1,19 @@
-<nav class="navbar navbar-expand-lg navbar-light {{ include.class | default: 'mb-3' }}">
+<nav class="navbar navbar-expand-lg navbar-light flex-shrink-0 {{ include.class }}">
     <div class="container-lg">
-        {% if page.show_navigation %}
         <a
             href="/"
             class="navbar-brand infotorg-developer-logo"
         >
             <img
-                src="assets/images/infotorg-developer.png"
-                srcset="assets/images/infotorg-developer@2x.png 2x,
-                assets/images/infotorg-developer@3x.png 3x"
+                src="{{ 'assets/images/infotorg-developer.png' | relative_url }}"
+                srcset="{{ 'assets/images/infotorg-developer@2x.png' | relative_url }} 2x,
+                {{ 'assets/images/infotorg-developer@3x.png' | relative_url }} 3x"
                 width="232"
                 height="40"
                 alt="infotorg developer"
             />
         </a>
+        {% if page.show_navigation %}
         <button
             class="navbar-toggler"
             type="button"

data/_layouts/default.html

@@ -10,6 +10,7 @@
 
     {% include head-fonts.html %}
     {% include head-app-css.html %}
+    {% include head-favicon.html %}
     {% include head-google-analytics.html %}
 </head>
 <body class="d-flex flex-column h-100">
@@ -24,7 +25,7 @@
 
 <!-- Main content -->
 <main class="flex-shrink-0 mt-3">
-    <div class="container">
+    <div class="container layout-{{ page.layout }}">
         {{ content }}
 
         <div class="bg-cube"></div>
@@ -33,6 +34,6 @@
 
 <!-- Footer -->
 {% include footer.html %}
-<script src="assets/bootstrap.min.js"></script>
+<script src="{{ 'assets/bootstrap.min.js' | relative_url }}"></script>
 </body>
 </html>

data/_layouts/services.html

@@ -3,3 +3,85 @@ layout: default
 comment: Infotorg Services APIs layout
 ---
 {{ content }}
+
+{% comment %} Visible Services List {% endcomment %}
+{% assign services = site.data.services | where:'show', true %}
+
+{% if services and services.size > 0 %}
+<div
+    id="services-list"
+    class="services-list accordion accordion-flush"
+>
+    {% for item in services %}
+        <div class="service-item">
+            <h2
+                id="heading-{{ forloop.index }}"
+                class="accordion-header"
+            >
+                {% assign icons_dir = "assets/images/icons/services/" %}
+                {% assign icon_path = icons_dir | prepend: '/' | append: item.icon %}
+
+                {% for static_file in site.static_files %}
+                    {% if static_file.path == icon_path %}
+                        {% assign icon_exists = true %}
+
+                        {% break %}
+                    {% endif %}
+                {% endfor %}
+
+                <button
+                    id="collapse-item-toggler-{{ forloop.index }}"
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapse-{{ forloop.index }}"
+                    aria-expanded="false"
+                    aria-controls="collapse-{{ forloop.index }}"
+                >
+                <span class="service-icon">
+                    {% if icon_exists == true %}
+                        <img src="{{ icons_dir }}{{ item.icon }}">
+                    {% endif %}
+                </span>
+
+                    {{ item.name }}
+                </button>
+            </h2>
+            <div
+                id="collapse-{{ forloop.index }}"
+                class="collapse"
+                aria-labelledby="heading-{{ forloop.index }}"
+            >
+                <div class="accordion-body">
+                    {{ item.info }}
+
+                    {% if item.url %}
+                        <p class="d-flex justify-content-between align-items-center pt-3">
+                            {% comment %} Link to a documentation page {% endcomment %}
+                            <a
+                                href="{{ item.url }}"
+                                class="btn btn-outline-secondary"
+                                role="button"
+                            >
+                                {{ item.name }} API pages
+                            </a>
+
+                            <button
+                                type="button"
+                                class="btn btn-link btn-hide-details d-flex align-items-center"
+                                role="button"
+                                onclick="document.getElementById('collapse-item-toggler-{{ forloop.index }}').click()"
+                            >
+                                Hide details
+                            </button>
+                        </p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+</div>
+{% else %}
+    <p>There are no API services. To add an API service create file <code>/_data/services.yml</code>.</p>
+    <p>For more information please read the theme documentation.</p>
+{% endif %}

data/_layouts/swagger-ui.html

@@ -10,6 +10,8 @@
 
     {% include head-fonts.html %}
     {% include head-app-css.html %}
+    {% include head-favicon.html %}
+
     {% include head-google-analytics.html %}
 
     {% if site.swaggerui_theme and site.swaggerui_theme != '' %}
@@ -42,7 +44,7 @@
 <!-- Footer -->
 {% include footer.html %}
 
-<script src="assets/bootstrap.min.js"></script>
+<script src="{{ 'assets/bootstrap.min.js' | relative_url }}"></script>
 <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-standalone-preset.js"></script>
 <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js" charset="UTF-8"></script>
 <script>

data/_sass/_bootstrap_variables.scss

@@ -18,6 +18,22 @@ $danger: $color-error-red;
 //$light: #f8f9fa;
 //$dark: #343a40;
 
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+$spacer: 1rem;
+$spacers: (
+    0: 0,
+    1: $spacer / 4,
+    2: $spacer / 2,
+    3: $spacer,
+    4: $spacer * 1.5,
+    5: $spacer * 3,
+    6: $spacer * 4
+);
+
 // Body
 //
 // Settings for the `<body>` element.

data/_sass/_typography.scss

@@ -13,3 +13,25 @@ body {
 h1, .h1 {
   font-weight: normal;
 }
+
+main .layout-default {
+  & h1:first-child {
+    font-size: 1.75rem;
+    margin-bottom: 2rem;
+  }
+
+  h2 {
+    @extend .mt-6;
+  }
+
+  h3 {
+    color: $color-calm-grey-darkest;
+    @extend .mt-5;
+  }
+
+  @include media-breakpoint-up(lg) {
+    & h1:first-child  {
+      font-size: $font-size-h1;
+    }
+  }
+}

data/_sass/_variables.scss

@@ -12,6 +12,7 @@ $color-happy-green-lightest: rgb(232, 252, 232);
 $color-navy-blue: rgb(6, 58, 86);
 $color-clear-blue-lightest: rgb(222, 242, 253);
 $color-calm-grey-lighter: rgb(224, 228, 230);
+$color-nice-grey: rgb(247, 248, 250); // #f7f8fa
 $color-clear-blue: rgb(12, 113, 167);
 $color-happy-green: rgb(68, 153, 51);
 $color-clear-purple: rgb(89, 41, 137);

data/assets/css/main.scss

@@ -14,6 +14,7 @@
     background-image: url('../images/it-gears.svg');
     background-repeat: no-repeat;
     padding: 20px 0;
+    margin-bottom: 1.3rem;
     background-position: right top;
     background-size: 40%;
 }
@@ -58,11 +59,13 @@
 @include media-breakpoint-up(lg) {
     #navbarNav {
         margin-left: -12px;
+        white-space: nowrap;
     }
 
     .navbar {
         padding-top: 38px;
         padding-bottom: 0;
+        margin-bottom: 2rem;
         background-color: #dfe3e6;
         background-image: url('../images/it-gears.svg');
         background-repeat: no-repeat;
@@ -191,6 +194,10 @@
         color: $color-clear-blue;
     }
 
+    .accordion-button:hover {
+        background-color: $color-nice-grey;
+    }
+
     .service-item:last-child .accordion-button.collapsed {
         border-bottom: 1px solid rgba(0, 0, 0, 0.125);
     }
@@ -206,6 +213,10 @@
         font-size: 0.875rem;
     }
 
+    .btn-hide-details:hover {
+        background-color: $color-nice-grey;
+    }
+
     .btn-hide-details:after {
         content: "";
         width: 24px;
@@ -215,3 +226,7 @@
         margin-left: 4px;
     }
 }
+
+.table thead > tr > th {
+    vertical-align: middle;
+}