Merge branch 'master' of https://github.com/layer5io/layer5

Author: leecalcote

gatsby-config.js

@@ -32,6 +32,7 @@ module.exports = {
   flags: {
     FAST_DEV: false,
     DEV_SSR: false,
+    PARALLEL_SOURCING: false, // Disabled to avoid build instability and excessive resource usage in CI; re-evaluate after Gatsby/infra upgrades
     ...devFlags,
   },
   trailingSlash: "never",

src/collections/blog/Blog.style.js

@@ -41,33 +41,36 @@ export const BlogWrapper = styled.div`
     span {
       font-style: normal;
     }
-    h2,h3,h4 {
-      margin-bottom: .5rem;
-      margin-top: .5rem;
+    h2,
+    h3,
+    h4 {
+      margin-bottom: 0.5rem;
+      margin-top: 0.5rem;
     }
-    table, td {
+    table,
+    td {
       text-align: center;
       border-top: 1px dotted #3c494f;
-      th { 
+      th {
         background-color: #3c494f;
         color: #eee;
-        padding: 0rem .5rem;
+        padding: 0rem 0.5rem;
       }
     }
-    @media (max-width: 990px){
-        max-width: 100%;
-      } 
+    @media (max-width: 990px) {
+      max-width: 100%;
+    }
     @media (max-width: 699px) {
       margin-left: 0rem;
       margin-right: 0rem;
     }
   }
   h3 {
-      margin-top: .75rem;
-      margin-bottom: .75rem;
-    }
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
   ul {
-      margin-bottom: .75rem;
+    margin-bottom: 0.75rem;
   }
   .to-uppercase {
     text-transform: uppercase;
@@ -87,26 +90,29 @@ export const BlogWrapper = styled.div`
     margin-left: 1.8em;
   }
   .table-3 {
-    display: flex; 
+    display: flex;
     flex-direction: row;
     width: fit-content;
     table {
-      display: inline; 
-     }, 
-     tr:nth-child(even) {
+      display: inline;
+    }
+    ,
+    tr:nth-child(even) {
       background-color: ${(props) => props.theme.secondaryLightColorTwo};
-     },
-     tr:nth-child(odd) {
+    }
+    ,
+    tr:nth-child(odd) {
       background-color: ${(props) => props.theme.secondaryLightColor};
-     },
+    }
+    ,
     td {
       text-align: center;
       border-top: 1px dotted #3c494f;
-      th { 
-          background-color: #3c494f;
-          color: #eee;
-          padding: 0rem .5rem;
-        }
+      th {
+        background-color: #3c494f;
+        color: #eee;
+        padding: 0rem 0.5rem;
+      }
     }
   }
   .table-box {
@@ -179,14 +185,16 @@ export const BlogWrapper = styled.div`
     width: 40%;
     float: left;
     margin: 1rem 1.25rem 1rem 0rem;
-    box-shadow: 0px 5px 10px 1px ${props => props.theme.green00D3A9ToGreen00B39FFive};
+    box-shadow: 0px 5px 10px 1px
+      ${(props) => props.theme.green00D3A9ToGreen00B39FFive};
   }
 
   .image-right {
     width: 40%;
     float: right;
     margin: 1rem 0rem 1rem 1.25rem;
-    box-shadow: 0px 5px 10px 1px ${props => props.theme.green00D3A9ToGreen00B39FFive};
+    box-shadow: 0px 5px 10px 1px
+      ${(props) => props.theme.green00D3A9ToGreen00B39FFive};
   }
   .image-right-no-shadow {
     width: 40%;
@@ -276,7 +284,6 @@ export const BlogWrapper = styled.div`
     border-bottom: 1px dashed ${(props) => props.theme.primaryLightColor};
   }
 
-
   /* ==============
 styles for figure with caption
 
@@ -293,36 +300,36 @@ Example:
     margin-bottom: 1rem;
     padding-bottom: 1rem;
     box-shadow: 0px 5px 10px 1px rgba(0, 179, 159, 0.5);
-    img{
+    img {
       width: 100%;
     }
   }
-  .fig-right{
+  .fig-right {
     float: right;
     width: 40%;
     margin-left: 1rem;
   }
-  .fig-left{
+  .fig-left {
     float: left;
     width: 40%;
     margin-right: 1rem;
   }
   @media screen and (max-width: 699px) {
-    .fig-right, .fig-left{
+    .fig-right,
+    .fig-left {
       width: 100%;
       display: block;
       margin: 1rem auto;
     }
   }
-  
+
   figcaption p {
     text-align: center;
     font-size: 0.8rem;
     margin: -0.1rem 0 0.12rem;
-    color: ${props => props.theme.menuColor};
+    color: ${(props) => props.theme.menuColor};
   }
 
-
   /* ==============
 styles for meshmate-of-the-year-2020 
 =======================*/
@@ -349,102 +356,106 @@ styles for meshmate-of-the-year-2020
   styles for service-mesh-specifications 
   =======================*/
 
-  .slides{
+  .slides {
     width: 45%;
-    box-shadow: 0px 5px 10px 1px ${props => props.theme.green00D3A9ToGreen00B39FFive};     
+    box-shadow: 0px 5px 10px 1px
+      ${(props) => props.theme.green00D3A9ToGreen00B39FFive};
     margin-bottom: 1rem;
   }
-  .slides-right{
+  .slides-right {
     width: 45%;
     display: inline;
     position: relative;
     margin: 1rem 0 1rem 2rem;
     float: right;
-    box-shadow: 0px 5px 10px 1px ${props => props.theme.green00D3A9ToGreen00B39FFive};     
+    box-shadow: 0px 5px 10px 1px
+      ${(props) => props.theme.green00D3A9ToGreen00B39FFive};
   }
   .slides-left {
     width: 45%;
     display: inline;
     position: relative;
     float: left;
     margin: 1rem 2rem 1rem 0rem;
-    box-shadow: 0px 5px 10px 1px ${props => props.theme.green00D3A9ToGreen00B39FFive};     
+    box-shadow: 0px 5px 10px 1px
+      ${(props) => props.theme.green00D3A9ToGreen00B39FFive};
   }
   @media screen and (max-width: 768px) {
-    .slides-right, .slides-left, .slides{
+    .slides-right,
+    .slides-left,
+    .slides {
       width: 100%;
       display: block;
       margin: 1rem auto;
     }
   }
 
-  .slides-left:hover{
-    cursor:pointer;
+  .slides-left:hover {
+    cursor: pointer;
   }
-  .slides-right:hover{
-    cursor:pointer;
+  .slides-right:hover {
+    cursor: pointer;
   }
   div.note {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    color: ${props => props.theme.secondaryColor};
+    color: ${(props) => props.theme.secondaryColor};
     font-style: italic;
     font-size: 1.3rem;
     font-weight: 600;
     text-align: right;
-    border-right: 4px solid ${props => props.theme.secondaryColor};        
+    border-right: 4px solid ${(props) => props.theme.secondaryColor};
     padding-left: 2rem;
     padding-right: 2rem;
     padding-top: 1rem;
     padding-bottom: 1rem;
-}
-.status {
-  text-align: center;
-  padding-left: 2rem;
-}
-.iframe-container{
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  padding-top: 56.25%; 
-  iframe{
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    width: 80%;
-    height: 80%;
-    display: block;
-    margin-right: auto;
-    margin-left:auto;
   }
-}
-code {
-      padding: 5px;
-      font-style: normal;
-      font-weight: normal;
-      white-space: pre-wrap;
-      border-radius: 3px;
-      background-color: ${props => props.theme.tertiaryColor};
-      color: ${props => props.theme.textRevert};
-      &.short {
-        line-height: 16px;
-      }
-      &.navy {
-        color: var(--vagrant-l1);
-      }
-      &.gray {
-        color: var(--gray-5);
-      }
-      &.white {
-        color: var(--white);
-      }
-      @media (min-width: 768px){
-        font-size: .85rem;
-        line-height: .85rem;
-      } 
+  .status {
+    text-align: center;
+    padding-left: 2rem;
+  }
+  .iframe-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%;
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      width: 80%;
+      height: 80%;
+      display: block;
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+  code {
+    padding: 5px;
+    font-style: normal;
+    font-weight: normal;
+    white-space: pre-wrap;
+    border-radius: 3px;
+    background-color: ${(props) => props.theme.grey939393ToGrey4C4A4A};
+    color: ${(props) => props.theme.textRevert};
+    &.short {
+      line-height: 16px;
+    }
+    &.navy {
+      color: var(--vagrant-l1);
+    }
+    &.gray {
+      color: var(--gray-5);
+    }
+    &.white {
+      color: var(--white);
+    }
+    @media (min-width: 768px) {
+      font-size: 0.85rem;
+      line-height: 0.85rem;
+    }
   }
-    
 `;