[UI] Make menu styles like on design

.dev/Dockerfile

@@ -43,7 +43,12 @@ ENV \
     OBJC_DISABLE_INITIALIZE_FORK_SAFETY=YES \
     PATH="/app/bin:$PATH" \
     PRECOMPILED_ASSETS=true \
-    RUBY_YJIT_ENABLE=1
+    RUBY_YJIT_ENABLE=1 \
+    TEST_SERVER_PORT=1314
+
+# Install bundle from Gemfile
+COPY ../Gemfile ../Gemfile.lock ./
+RUN bundle check || bundle install
 
 # Use Bash as the default command
 CMD ["bin/test"]

.dev/compose.yml

@@ -2,8 +2,8 @@
 x-backend: &backend
   image: jetthoughts.com-test:1.0.0
   build:
-    context: .
-    dockerfile: ./Dockerfile
+    context: ../
+    dockerfile: ./.dev/Dockerfile
   stdin_open: true
   tty: true
   volumes:

Gemfile.lock

@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/snap-diff/snap_diff-capybara.git
-  revision: 31f17556e18c0edc1f9b825191c427f073f3f193
+  revision: 2c946980d559a6b4b9baa1bff94f98e5acec34af
   specs:
     capybara-screenshot-diff (1.9.1)
       actionpack (>= 6.1, < 8)
@@ -9,9 +9,9 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actionpack (7.2.1.1)
-      actionview (= 7.2.1.1)
-      activesupport (= 7.2.1.1)
+    actionpack (7.2.2)
+      actionview (= 7.2.2)
+      activesupport (= 7.2.2)
       nokogiri (>= 1.8.5)
       racc
       rack (>= 2.2.4, < 3.2)
@@ -20,14 +20,15 @@ GEM
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
       useragent (~> 0.16)
-    actionview (7.2.1.1)
-      activesupport (= 7.2.1.1)
+    actionview (7.2.2)
+      activesupport (= 7.2.2)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    activesupport (7.2.1.1)
+    activesupport (7.2.2)
       base64
+      benchmark (>= 0.3)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
@@ -41,6 +42,7 @@ GEM
       public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.2)
     base64 (0.2.0)
+    benchmark (0.3.0)
     bigdecimal (3.1.8)
     builder (3.3.0)
     capybara (3.40.0)
@@ -63,29 +65,29 @@ GEM
     ffi (1.17.0-arm64-darwin)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    json (2.7.2)
+    json (2.7.5)
     language_server-protocol (3.17.0.3)
     launchy (3.0.1)
       addressable (~> 2.8)
       childprocess (~> 5.0)
     lint_roller (1.1.0)
     logger (1.6.1)
-    loofah (2.22.0)
+    loofah (2.23.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     matrix (0.4.2)
     mini_mime (1.1.5)
     mini_portile2 (2.8.7)
     minitest (5.25.1)
     mutex_m (0.2.0)
-    nio4r (2.7.3)
+    nio4r (2.7.4)
     nokogiri (1.16.7)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     nokogiri (1.16.7-arm64-darwin)
       racc (~> 1.4)
     parallel (1.26.3)
-    parser (3.3.5.0)
+    parser (3.3.5.1)
       ast (~> 2.4.1)
       racc
     public_suffix (6.0.1)
@@ -97,9 +99,8 @@ GEM
       rack (>= 3.0.0)
     rack-test (2.1.0)
       rack (>= 1.3)
-    rackup (2.1.0)
+    rackup (2.2.0)
       rack (>= 3)
-      webrick (~> 1.8)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -109,7 +110,7 @@ GEM
       nokogiri (~> 1.14)
     rainbow (3.1.1)
     regexp_parser (2.9.2)
-    rexml (3.3.8)
+    rexml (3.3.9)
     rubocop (1.66.1)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
@@ -120,15 +121,15 @@ GEM
       rubocop-ast (>= 1.32.2, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.32.3)
+    rubocop-ast (1.33.0)
       parser (>= 3.3.1.0)
     rubocop-performance (1.22.1)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
     securerandom (0.3.1)
-    selenium-webdriver (4.25.0)
+    selenium-webdriver (4.26.0)
       base64 (~> 0.2)
       logger (~> 1.4)
       rexml (~> 3.2, >= 3.2.5)
@@ -152,7 +153,6 @@ GEM
     useragent (0.16.10)
     vips (8.15.1)
       ffi (~> 1.12)
-    webrick (1.8.2)
     websocket (1.2.11)
     xpath (3.2.0)
       nokogiri (~> 1.8)

bin/build

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+hugo --gc --minify --environment production --forceSyncStatic --cleanDestinationDir --logLevel warn "$@"

bin/docked

@@ -2,4 +2,4 @@
 
 set -eo pipefail
 
-bin/compose run --rm "$@"
+bin/compose run --rm --quiet-pull --remove-orphans "$@"

bin/dtest

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+set -eo pipefail
+
+bin/build --destination public-test --baseURL http://localhost:1314
+bin/docked t "$@"

test/desktop_site_test.rb

@@ -34,15 +34,15 @@ def test_blog_index
       click_on "Blog"
     end
 
-    assert_matches_screenshot "blog/index"
+    assert_matches_screenshot "blog/index", skip_area: [".blog-post"]
   end
 
   def test_blog_index_pagination
     visit "/blog/"
 
     scroll_to find("#pagination")
 
-    assert_matches_screenshot "blog/index/_pagination", wait: 3, stability_time_limit: 0.25
+    assert_matches_screenshot "blog/index/_pagination", skip_area: [".blog-post"], wait: 3, stability_time_limit: 0.25
   end
 
   def test_visit_blog_post
@@ -177,7 +177,7 @@ def test_not_found
   private
 
   def within_top_bar
-    within "nav" do
+    within ".navigation" do
       yield
     end
   end

test/mobile_site_test.rb

@@ -21,15 +21,15 @@ def test_homepage
   def test_blog_index
     visit "/blog/"
 
-    assert_matches_screenshot "blog/index"
+    assert_matches_screenshot "blog/index", skip_area: [".blog-post"]
   end
 
   def test_blog_index_pagination
     visit "/blog/"
 
     scroll_to find("#pagination")
 
-    assert_matches_screenshot "blog/index/_pagination", wait: 3, stability_time_limit: 0.25
+    assert_matches_screenshot "blog/index/_pagination", skip_area: [".blog-post"], wait: 3, stability_time_limit: 0.25
   end
 
   def test_visit_blog_post

test/support/setup_capybara.rb

@@ -19,7 +19,7 @@
   "disable-dev-shm-usage" => nil,
   "disable-domain-reliability" => nil,
   "disable-extensions" => nil,
-  "disable-features" => "TranslateUI,BlinkGenPropertyTrees",
+  "disable-features" => "TranslateUI,BlinkGenPropertyTrees,LazyImageLoading",
   "disable-hang-monitor" => nil,
   "disable-infobars" => nil,
   "disable-ipc-flooding-protection" => nil,

themes/beaver/assets/css/navigation.css

@@ -1,6 +1,6 @@
 .btn,
 .btn:hover {
-  padding: 10px 18px;
+  padding: 11px 18px;
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
@@ -92,8 +92,8 @@
 
 .menu-close {
   display: none;
-  width: 25px;
-  height: 25px;
+  width: 30px;
+  height: 30px;
   position: absolute;
   top: 24px;
   left: 16px;
@@ -183,7 +183,7 @@
   transition: .3s;
 }
 
-  .navigation .-active .link {
+.navigation .-active .link {
   color: #1a8cff;
 }
 
@@ -339,7 +339,7 @@
     background-color: #121212;
     color: #fff;
     border-radius: 6px;
-    margin-top: 10px;
+    margin-top: 15px;
   }
 
   .navigation .item {
@@ -404,6 +404,17 @@
 
   .navigation .item .arrow {
     top: 25px;
+    right: 15px;
+  }
+
+  .navigation .item .arrow:before {
+    content: '';
+    position: absolute;
+    left: -15px;
+    right: -15px;
+    top: -15px;
+    bottom: -15px;
+    cursor: pointer;
   }
 
   .navigation .item.-open .arrow {
@@ -413,8 +424,14 @@
   .navigation .item:hover .arrow {
     border-color: inherit;
   }
+
   .navigation .item:hover .link,
   .navigation .sub-item:hover .sub-name {
     color: inherit;
   }
+
+  .navigation .link {
+    font-size: 18px;
+    padding-right: 15px;
+  }
 }

themes/beaver/layouts/_default/_markup/render-image.html

@@ -28,17 +28,22 @@
     {{ end }}
 {{ end }}
 
-<a href="{{ $src.RelPermalink }}">
+<a href="{{ $src.RelPermalink }}" rel="nofollow">
     <picture>
         {{ range $format := $formats }}
             {{ $srcset := slice }}
             {{ range $index, $size := $sizes }}
                 {{ $image := $data.Get (printf "%s-%d" $format $index) }}
                 {{ $srcset = $srcset | append (printf "%s %dw" $image.RelPermalink $size) }}
             {{ end }}
-            <source type="image/{{ $format }}" srcset="{{ delimit $srcset ", " }}" sizes="(max-width: 48rem) 100vw, 48rem" height="{{ $src.Height }}" width="{{ $src.Width }}">
+            <source type="image/{{ $format }}" srcset="{{ delimit $srcset ", " }}"
+                    sizes="(max-width: 48rem) 100vw, 48rem" height="{{ $src.Height }}" width="{{ $src.Width }}">
         {{ end }}
-        <img loading="lazy" src="{{ ($data.Get (printf "%s-0" $defaultFormat)).RelPermalink }}" alt="{{ $alt }}" height="{{ $src.Height }}" width="{{ $src.Width }}">
+        <img loading="lazy"
+             src="{{ ($data.Get (printf "%s-0" $defaultFormat)).RelPermalink }}"
+             alt="{{ $alt }}"
+             height="{{ $src.Height }}"
+             width="{{ $src.Width }}">
     </picture>
 </a>
 

themes/beaver/layouts/_default/list.html

@@ -54,7 +54,7 @@ <h1 class="fl-heading" style="margin: 0!important;padding: 0!important">Blog</h1
                 <br>
 
                 {{ range (.Paginate (.Pages.ByParam "created_at").Reverse).Pages }}
-                <a class="link" target="_blank" rel="noopener" href="{{ .Permalink }}">
+                <a class="link" target="_blank" rel="noopener noreferrer" href="{{ .RelPermalink }}">
 
 
                   <div class="blog-post">

themes/beaver/layouts/blog/list.html

@@ -64,7 +64,7 @@
                 <br />
 
                 {{ range (.Paginate (.Pages.ByParam "created_at").Reverse).Pages }}
-                  <a class="link" target="_blank" rel="noopener" href="{{ .Permalink }}">
+                  <a class="link" target="_blank" rel="noopener" href="{{ .RelPermalink }}">
                     <div class="blog-post">
                       <div class="post-image">
                         {{ partial "blog/img-cropped.html" (dict "Page" . "width" 180 "height" 180) }}

themes/beaver/layouts/page/careers.html

@@ -390,7 +390,7 @@ <h2 class="fl-heading">
                                                                         <li><span class="engineering">{{ .Params.position_type }}</span></li>
                                                                     </ul>
                                                                 </div>
-                                                                <h3 class="pp-content-grid-post-title"><a href='{{ .Permalink }}' title='{{ .Params.position }}'>{{ .Params.position }}</a></h3>
+                                                                <h3 class="pp-content-grid-post-title"><a href='{{ .RelPermalink }}' title='{{ .Params.position }}'>{{ .Params.position }}</a></h3>
                                                                 <div class="career-detail">
 
                                                                     {{ range .Params.requirements }}

themes/beaver/layouts/partials/blog/img-cropped.html

@@ -5,11 +5,11 @@
 
 
 <picture>
-    <source srcset="{{ $webp.Permalink }}" type="image/webp">
-    <source srcset="{{ $cropped.Permalink }}" type="{{ $cropped.MediaType }}">
-    <img src="{{ $cropped.Permalink }}" alt="{{ .Page.Title }}" width="{{ .width }}" height="{{ .height }}">
+  <source srcset='{{ $webp.RelPermalink }}' type="image/webp" width="{{ .width }}" height="{{ .height }}">
+  <source srcset='{{ $cropped.RelPermalink }}' type="{{ $cropped.MediaType }}" width="{{ .width }}" height="{{ .height }}">
+  <img alt='{{ .Page.Title }}' src="{{ $cropped.RelPermalink }}" width="{{ .width }}" height="{{ .height }}">
 </picture>
 
 {{ else }}
-<img src="{{ (resources.Get "img/no-image.svg" | resources.Fingerprint).Permalink }}" width="{{ .width }}" height="{{ .height }}" alt="Placeholder Image">
+<img src="{{ (resources.Get "img/no-image.svg" | resources.Fingerprint).RelPermalink }}" width="{{ .width }}" height="{{ .height }}" alt="Placeholder Image">
 {{ end }}

themes/beaver/layouts/partials/clients/grid-single.html

@@ -26,7 +26,7 @@
         <meta itemprop="userInteractionCount" content="0"/>
     </div>
     <div class="pp-content-grid-post-image">
-        <a href="{{ .Permalink }}">
+        <a href="{{ .RelPermalink }}">
             {{ partial "img/client-logo.html" (dict "image" $logo "title" .Params.client.name) }}
         </a>
     </div>
@@ -42,4 +42,4 @@
               </ul>
         </div>
     </div>
-</div>
+</div>