Resolve merge conflicts

components/about-header/index.js

@@ -7,7 +7,7 @@ const AboutHeader = () => (
       <div className="author-info">
         <img className='author-img d-none d-sm-none d-md-block d-lg-block d-xl-block' src="/kamran.jpeg" />
         <div className="author-msg">
-          <h2>Hello, I'm Kamran Ahmed.</h2>
+          <h1>Hello, I'm Kamran Ahmed.</h1>
           <p>I created <span className='flow-black'>roadmap.sh</span> to help developers find their path if they are confused and help them grow in their career.</p>
           <div className="author-links">
             <a href={`https://twitter.com/${siteConfig.twitter}`} target="_blank">@kamranahmedse</a>

components/about-header/style.js

@@ -11,7 +11,7 @@ export const AboutHeaderWrap = styled.div`
     flex-direction: row;
   }
   
-  h2 {
+  h1 {
     font-weight: 700;
   }
   

components/detailed-roadmap/index.js

@@ -32,18 +32,24 @@ const DetailedRoadmap = ({ roadmap }) => {
     author = {}
   } = roadmap;
 
-  const roadmapPages = Object.keys(sidebar || {}).map(groupTitle => {
+  const roadmapPages = Object.keys(sidebar || {}).map((groupTitle, groupCounter) => {
     if (groupTitle.startsWith('_')) {
       return;
     }
 
+    // @todo remove it after completing the frontend roadmap
+    const isInProgress = groupCounter !== 0;
+
     return (
-      <div className='links-group' key={groupTitle}>
-        <h3>{ groupTitle }</h3>
+      <div className={`links-group ${isInProgress ? 'in-progress' : ''}`} key={groupTitle}>
+        <h3>
+          { groupTitle }
+          { isInProgress && <span className='badge badge-warning progress-badge'>In Progress</span> }
+        </h3>
         <ul>
           { sidebar[groupTitle].map(page => {
             const isActivePage = page.url === currentPage.url;
-            // e.g. /frontend should mark `/frontend/summary` as active
+            // e.g. /frontend should mark `/frontend/landscape` as active
             const isSummaryPage = page.url === `${currentPage.url}/summary`;
 
             return (
@@ -71,7 +77,8 @@ const DetailedRoadmap = ({ roadmap }) => {
             <h3>{ roadmap.title }</h3>
             <p>
               Roadmap contributed by <a href={ author.url } target="_blank">{ author.name }</a>
-              { roadmap.contributorsCount > 1 && ` and <a href="${roadmap.contributorsUrl}">${roadmap.contributorsCount} others</a>`}</p>
+              { roadmap.contributorsCount > 1 && ` and <a href="${roadmap.contributorsUrl}">${roadmap.contributorsCount} others</a>`}
+            </p>
           </RoadmapMeta>
           <ShareRoadmap className="mt-2 mt-md-0">
             <ShareIcon href={ siteConfig.url.repo } target="_blank">

components/detailed-roadmap/style.js

@@ -113,6 +113,16 @@ export const Sidebar = styled.div`
     }
   }
   
+  .progress-badge {
+    position: relative;
+    top: -2px;
+    margin-left: 5px;
+  }
+  
+  .links-group.in-progress {
+    opacity: 0.3;  
+  }
+
   .links-group li {
     list-style: none;
     margin: 7px 0;
@@ -180,4 +190,10 @@ export const MobileSidebar = styled(Sidebar)`
   .links-group {
     width: auto;  
   }
+  
+  .progress-badge {
+    position: relative;
+    top: -2px;
+    margin-left: 5px;
+  }
 `;

components/helmet/index.js

@@ -2,8 +2,7 @@ import NextHead from 'next/head';
 import siteConfig from 'content/site';
 
 const prepareTitle = (givenTitle) => {
-  givenTitle = givenTitle || siteConfig.title;
-  return `${givenTitle} - ${siteConfig.name}`;
+  return givenTitle || siteConfig.title;
 };
 
 const prepareDescription = (givenDescription) => {
@@ -19,7 +18,7 @@ const Helmet = (props) => (
     <meta name='description' content={ prepareDescription(props.description) } />
 
     <meta name="author" content={ siteConfig.author } />
-    <meta name="keywords" content={ siteConfig.keywords.join(',') } />
+    <meta name="keywords" content={ props.keywords ? props.keywords.join(',') : siteConfig.keywords.join(',') } />
 
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0" />
     { props.canonical && <link rel="canonical" href={ props.canonical } /> }