Feat/image optimization

src/components/demo-page-components/P2PDemo.astro

@@ -87,7 +87,7 @@
         >
       </form>
       <div id="graph"></div>
-      <h3>Trackers:</h3>
+      <span class="h2">Trackers:</span>
       <div id="announce"></div>
     </div>
   </div>
@@ -1308,3 +1308,17 @@
   demo.init();
 </script>
 <!-- End demo copy paste -->
+
+<style>
+  .h2 {
+    display: block;
+    font-size: 1.17em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+  }
+</style>

src/components/index-page-components/ServicesList.astro

@@ -1,7 +1,11 @@
+---
+import "../../styles/services-list.css";
+---
+
 <div class="page container content">
   <div class="services-container">
     <div class="services">
-      <div class="title"><h3><span>P2P Solutions</span></h3></div>
+      <div class="title"><h2><span>P2P Solutions</span></h2></div>
       <div class="list">
         <ul>
           <li>
@@ -21,7 +25,7 @@
       </div>
     </div>
     <div class="services">
-      <div class="title"><h3><span>Web Development</span></h3></div>
+      <div class="title"><h2><span>Web Development</span></h2></div>
       <div class="list">
         <ul>
           <li>Full stack web development</li>
@@ -39,7 +43,7 @@
       </div>
     </div>
     <div class="services">
-      <div class="title"><h3><span>Software Development</span></h3></div>
+      <div class="title"><h2><span>Software Development</span></h2></div>
       <div class="list">
         <ul>
           <li>Product design</li>

src/components/shared/Header.astro

@@ -6,6 +6,8 @@
           class="brand-logo"
           src="/images/novage-logo.svg"
           alt="Novage logo"
+          height="48px"
+          width="173px"
         />
       </a>
       <button class="navbar-toggle" aria-label="Toggle navigation"
@@ -14,7 +16,7 @@
     </div>
     <ul class="menu">
       <li class="menu-item arrow">
-        <a><span>P2P Media Loader</span></a>
+        <a href="/"><span>P2P Media Loader</span></a>
         <ul class="sub-menu">
           <li class="sub-menu-item">
             <a href="/p2p-media-loader/demo"><span>Demo</span></a>
@@ -43,7 +45,7 @@
         <a href="/blog"><span>Blog</span></a>
       </li>
       <li class="menu-item arrow">
-        <a><span>Contact</span></a>
+        <div class="anchor"><span>Contact</span></div>
         <ul class="sub-menu">
           <li class="sub-menu-item"><a href="" id="email"><span></span></a></li>
         </ul>

src/layouts/Layout.astro

@@ -29,29 +29,26 @@ const { title } = Astro.props;
       rel="icon"
       type="image/png"
       sizes="96x96"
-      href="/images/favicon-96x96.png"
+      href="/images/favicon-96x96.webp"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="/images/favicon-32x32.png"
+      href="/images/favicon-32x32.webp"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="/images/favicon-16x16.png"
+      href="/images/favicon-16x16.webp"
     />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <meta name="description" content="Consulting & Full Development Cycle" />
-
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=UA-123521518-1"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8XFLFKSSL7"
+    ></script>
     <script is:inline>
       window.dataLayer = window.dataLayer || [];
 
@@ -60,7 +57,7 @@ const { title } = Astro.props;
       }
 
       gtag("js", new Date());
-      gtag("config", "UA-123521518-1");
+      gtag("config", "G-8XFLFKSSL7");
     </script>
 
     <meta name="description" content="Consulting & Full Development Cycle" />

src/pages/p2p-media-loader/demo.astro

@@ -47,6 +47,7 @@ import "../../styles/demo.css";
       <PageHeader htmlTitle="P2P Media Loader<br>Demo" />
       <div id="demo" class="container content">
         <iframe
+          title="GitHub"
           src="https://ghbtns.com/github-btn.html?user=novage&repo=p2p-media-loader&type=star&count=true&size=large"
           style="width: 160px; height: 30px; border: none; overflow: scroll;"
         ></iframe>

src/pages/p2p-media-loader/overview.astro

@@ -13,7 +13,7 @@ import Layout from "../../layouts/Layout.astro";
       <PageHeader htmlTitle="P2P Media Loader<br/> Overview" />
       <div class="page container content">
         <ImageBlock
-          imgSrc="/images/p2p-assisted-media-delivery.png"
+          imgSrc="/images/p2p-assisted-media-delivery.webp"
           alt="P2P assisted media delivery"
         >
           <p>

src/pages/p2p-media-loader/technical-overview.astro

@@ -14,7 +14,7 @@ import Layout from "../../layouts/Layout.astro";
       <div class="page container content">
         <h2>Key components of the P2P network</h2>
         <ImageBlock
-          imgSrc="/images/p2p-media-loader-network.png"
+          imgSrc="/images/p2p-media-loader-network.webp"
           alt="P2P Media Loader network"
         >
           <p>All the components of the P2P network are free and open-source.</p>