Merge pull request #72 from SwedbankPay/feature/jekyll-plantuml-1.3.8

Various post-upgrade adjustments

.github/workflows/deploy.yml

@@ -5,8 +5,7 @@ on:
     branches: [ master ]
 
 jobs:
-  build:
-    name: Deploy
+  deploy:
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/test.yml

@@ -4,7 +4,6 @@ on: [push, pull_request]
 
 jobs:
   build:
-    name: Build
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
@@ -18,7 +17,6 @@ jobs:
           --exit-code-from jekyll
 
   test:
-    name: Test
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2

.remarkrc.yaml

@@ -1,6 +1,5 @@
 plugins:
   - "remark-frontmatter"
-  - "remark-inline-links"
   - "remark-lint"
   - "remark-lint-no-empty-sections"
   - "remark-lint-code"

_includes/apple-mobile-headers.html

@@ -0,0 +1,6 @@
+{% assign design_guide_url = include.design_guide_url %}
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="{{ page.title }}">
+{% include apple-touch-icons.md design_guide_url=design_guide_url -%}
+{% include apple-touch-startup-images.md design_guide_url=design_guide_url -%}

_includes/apple-touch-icon.html

@@ -0,0 +1,4 @@
+{%- assign stripped_size = include.size | strip -%}
+{%- assign size_string = stripped_size | append: 'x' | append: stripped_size -%}
+{%- assign design_guide_url = include.design_guide_url -%}
+<link rel="apple-touch-icon" sizes="{{ size_string }}" href="{{ design_guide_url }}/icons/apple-touch-icon-{{ size_string }}.png">

_includes/apple-touch-icons.md

@@ -0,0 +1,9 @@
+{% comment -%}
+TODO: Figure out how to use front matter with proper arrays instead of split
+strings.
+{%- endcomment -%}
+{% assign design_guide_url = include.design_guide_url %}
+{%- assign sizes = "57, 60, 72, 76, 114, 120, 144, 152, 167, 180, 1024" | split: ',' -%}
+{%- for size in sizes -%}
+    {%- include apple-touch-icon.html size=size design_guide_url=design_guide_url -%}
+{%- endfor -%}

_includes/apple-touch-startup-image.html

@@ -0,0 +1,23 @@
+{%- assign device_width = include.width | strip | append: 'px' -%}
+{%- assign device_height = include.height | strip | append: 'px' -%}
+{%- assign image_size = include.size | strip -%}
+{%- assign device_orientation = include.orientation | default: nil | strip -%}
+{%- assign device_pixel_ratio = include.pixel_ratio | strip -%}
+{%- assign design_guide_url = include.design_guide_url -%}
+{%- capture device_width_string -%}
+(device-width: {{ device_width }})
+{%- endcapture -%}
+{%- capture device_height_string -%}
+(device-height: {{ device_height }})
+{%- endcapture -%}
+{%- if device_orientation != nil && device_orientation != empty -%}
+    {%- capture device_orientation_string -%}
+    (orientation: {{ device_orientation }}) and
+    {%- endcapture -%}
+{%- endif -%}
+{%- capture pixel_ratio_string -%}
+(-webkit-device-pixel-ratio: {{ device_pixel_ratio }})
+{%- endcapture -%}
+<link rel="apple-touch-startup-image"
+    media="{{ device_width_string }} and {{ device_height_string }} and {{ device_orientation_string }} {{ pixel_ratio_string }}"
+    href="{{ design_guide_url }}/icons/apple-touch-startup-image-{{- image_size -}}.png">

_includes/apple-touch-startup-images.md

@@ -0,0 +1,31 @@
+{%- assign design_guide_url = include.design_guide_url -%}
+{%- capture startup_image_configs -%}
+320,480,1,320x460
+320,480,2,640x920
+320,568,2,640x1096
+375,667,2,750x1294
+414,736,3,1182x2208,landscape
+414,736,3,1242x2148,portrait
+768,1024,1,748x1024,landscape
+768,1024,1,768x1004,portrait
+768,1024,2,1496x2048,landscape
+768,1024,2,1536x2008,portrait
+{%- endcapture -%}
+{%- assign startup_image_configs = startup_image_configs | newline_to_br | split: '<br />' -%}
+{%- for startup_image_config in startup_image_configs -%}
+    {%- assign values = startup_image_config | split: ',' -%}
+    {%- assign width = values[0] -%}
+    {%- assign height = values[1] -%}
+    {%- assign pixel_ratio = values[2] -%}
+    {%- assign size = values[3] -%}
+    {%- if values.size > 3 -%}
+        {% assign orientation = values[4] -%}
+    {%- endif -%}
+    {%- include apple-touch-startup-image.html
+        width=width
+        height=height
+        pixel_ratio=pixel_ratio
+        size=size
+        orientation=orientation
+        design_guide_url=design_guide_url -%}
+{%- endfor -%}

assets/css/swedbank-pay-design-guide-theme.scss

@@ -87,19 +87,39 @@ a.header-anchor::before {
 a[href ^= '//']:not([href *= '{{ site.url }}']):after,
 a[href ^= 'http://']:not([href *= '{{ site.url }}']):after,
 a[href ^= 'https://']:not([href *= '{{ site.url }}']):after {
-        content: url('../img/external-url.svg');;
+    content: url('../img/external-url.svg');
     margin-left: .3rem;
     display: inline-block;
     width: .8rem;
     background-repeat: none;
     color: #257886;
 }
 
+#designguide .designguide-header .topbar-info a {
+    margin-left: 5px;
+    color: rgba(34,34,34,.75);
+    fill: rgba(34,34,34,.75);
+    border: none
+}
+
 #designguide .designguide-header .topbar-info a:after {
     content: none;
     display: inline;
 }
 
+#designguide .designguide-header .topbar-info a svg {
+    overflow: visible;
+    width: 2rem;
+    height: 2rem;
+    display: inline-block;
+    vertical-align: top;
+}
+
+#designguide .designguide-header .topbar-info a:hover {
+    color: rgba(0,0,0,.75);
+    fill: rgba(0,0,0,.75)
+}
+
 .iterator {
     margin: 1rem 0;
 }

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.7'
 
 services:
   jekyll:
-    image: swedbankpay/jekyll-plantuml:1.3.7
+    image: swedbankpay/jekyll-plantuml:1.3.8
     container_name: jekyll
     ports:
       - 4000:4000

package.json

@@ -10,7 +10,6 @@
     "remark-cli": "^8.0.0",
     "remark-frontmatter": "^1.3.3",
     "remark-heading-gap": "^3.0.0",
-    "remark-inline-links": "^3.0.4",
     "remark-lint": "^6.0.0",
     "remark-lint-blockquote-indentation": "^1.0.0",
     "remark-lint-checkbox-character-style": "^1.0.0",