#414986 > improvements and lcp by metadata

blocks/header/header.css

@@ -1,4 +1,3 @@
 raqn-header {
-  margin: var(--scope-margin, 20px);
   max-width: var(--scope-max-width, 100%);
 }

blocks/header/header.js

@@ -1,5 +1,12 @@
 import ComponentBase from '../../scripts/component-base.js';
+import { eagerImage } from '../../scripts/libs.js';
 
 export default class Header extends ComponentBase {
   external = '/header.plain.html';
+
+  async processExternal(response) {
+    await super.processExternal(response);
+    console.log(this);
+    eagerImage(this, 1);
+  }
 }

blocks/navigation/navigation.css

@@ -21,7 +21,7 @@ raqn-navigation ul li a {
   transition: background-color 0.2s ease-in-out;
 }
 
-raqn-navigation ul ul {
+raqn-navigation div > div > ul > li > ul {
   display: none;
   position: absolute;
   top: 100%;
@@ -32,6 +32,6 @@ raqn-navigation ul ul {
   box-shadow: var(--box-shadow);
 }
 
-raqn-navigation ul li:hover > ul {
+raqn-navigation div > div > ul > li:hover > ul {
   display: block;
 }

blocks/navigation/navigation.js

@@ -1,6 +1,12 @@
 import Column from '../column/column.js';
 
 export default class Navigation extends Column {
+  constructor() {
+    super();
+    this.compact = this.getAttribute('compact') || false;
+    this.icon = this.getAttribute('icon') || 'menu';
+    console.log('Navigation', this.compact, this.icon);
+  }
   connected() {
     super.connected();
   }

scripts/component-loader.js

@@ -1,4 +1,4 @@
-import { config, getBreakPoint, getBreakPoints } from './libs.js';
+import { config, getBreakPoint } from './libs.js';
 
 export default class ComponentLoader {
   constructor(blockName, element) {

scripts/libs.js

@@ -42,6 +42,7 @@ export const debounce = (func, wait, immediate) => {
 };
 
 export const eagerImage = (block, length = 1) => {
+  console.log(block, block.querySelectorAll('img'));
   const imgs = Array.from(block.querySelectorAll('img')).slice(0, length);
   imgs.forEach((img) => {
     img.setAttribute('loading', 'eager');

styles/styles.css

@@ -43,7 +43,7 @@ img {
 }
 
 header {
-  height: var(--raqn-header-height, 180px);
+  min-height: var(--raqn-header-height, 160px);
 }
 
 @keyframes placeholder {