feature(documentation-website): make social links into icons (#479)

documentation-website/src/components/header.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import IAB from '../assets/iab.svg';
+import {
+  NavLink,
+} from 'react-router-dom';
+import pkg from '../../package.json' with {
+  type: 'json'
+};
+import {
+  Lang,
+} from './lang.tsx';
+import DarkModeButton from './dark-mode-button.tsx';
+import SocialLink from './social-link.tsx';
+
+const Header = ({
+  window,
+}: {window: Window},) => <header>
+  <div>
+    <img src={IAB} alt="@idrinth/api-bench" />
+    <strong>@idrinth/api-bench</strong>
+    <em>v{pkg.version}</em>
+  </div>
+  <nav>
+    <ul>
+      <SocialLink
+        to="https://www.npmjs.com/package/@idrinth/api-bench"
+        label={'npm'}
+      />
+      <SocialLink
+        to="https://github.com/Idrinth/api-bench"
+        label={'github'}
+      />
+      <SocialLink
+        to="https://www.linkedin.com/groups/9588634/"
+        label={'linkedin'}
+      />
+      <SocialLink
+        to={
+          'https://idrinth-api-bench.slack.com/' +
+          'join/shared_invite/' +
+          'zt-2f4zmw2sz-c3etHzCFq3LtZpkR15xXMA' +
+          '#/shared-invite/email'
+        }
+        label={'slack'}
+      />
+    </ul>
+  </nav>
+  <nav>
+    <ul>
+      <li>
+        <NavLink to="/"><Lang lnkey='home.nav' /></NavLink>
+      </li>
+      <li>
+        <NavLink to="/quick-start/">
+          <Lang lnkey='quick-start.nav' />
+        </NavLink>
+      </li>
+      <li>
+        <NavLink to="/contributing/">
+          <Lang lnkey='contributing.nav' />
+        </NavLink>
+        <ul>
+          <li>
+            <NavLink to="/contributing/contributors/">
+              <Lang lnkey='contributors.nav' />
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/contributing/sponsors/">
+              <Lang lnkey='sponsors.nav' />
+            </NavLink>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <NavLink to="/usage/">
+          <Lang lnkey='usage.nav' />
+        </NavLink>
+        <ul>
+          <li>
+            <NavLink to="/usage/autowiring/">
+              <Lang lnkey='autowiring.nav' />
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/usage/results/">
+              <Lang lnkey='results.nav' />
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/usage/logging/">
+              <Lang lnkey='logging.nav' />
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/usage/middlewares/">
+              <Lang lnkey='middlewares.nav' />
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/usage/storage/">
+              <Lang lnkey='storage.nav' />
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/usage/routes/">
+              <Lang lnkey='routes.nav' />
+            </NavLink>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+  <DarkModeButton window={window} />
+</header>;
+export default Header;

documentation-website/src/components/layout.tsx

@@ -1,5 +1,5 @@
 import DefaultMeta from './default-meta.tsx';
-import Navbar from './navbar.tsx';
+import Header from './header.tsx';
 import Footer from './footer.tsx';
 import React from 'react';
 import Breadcrumbs from './breadcrumbs.tsx';
@@ -22,7 +22,7 @@ const Layout = ({
     : '';
   return <>
     {meta}
-    <Navbar window={window || {}}/>
+    <Header window={window || {}}/>
     <Breadcrumbs path={path}/>
     <article>
       {Outlet}

documentation-website/src/components/social-link.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface SocialLinkType {
+  to: string;
+  label: string;
+}
+const SocialLink = ({
+  to,
+  label,
+}: SocialLinkType,) => <li id={label}>
+  <a
+    href={to}
+    target='_blank'
+    rel='noreferrer'
+    title={label}
+  >
+    <img alt={label} src={'../../public/assets/' + label + '.svg'}/>
+  </a>
+</li>;
+export default SocialLink;

documentation-website/src/index.css

@@ -106,6 +106,11 @@ nav a {
   padding: 5px 10px;
 }
 
+header nav img {
+  max-height: 1em;
+  padding: 0;
+}
+
 header nav a.active {
   background-color: var(--dark-green);
   color: var(--white);
@@ -330,6 +335,13 @@ nav.breadcrumbs li:last-of-type::after {
 
   header nav {
     grid-column: 2;
+    grid-row: 1;
+  }
+
+  header #github img {
+    border: 1px solid #fff;
+    background: #fff;
+    border-radius: 50%;
   }
 
   header nav > ul {
@@ -377,7 +389,12 @@ nav.breadcrumbs li:last-of-type::after {
 
   header button {
     padding-right: 1em;
-    grid-column: 3;
+    grid-column: 4;
+  }
+
+  header nav:first-of-type {
+    grid-column: 2;
+    grid-row: 2;
   }
 
   .title-card {
@@ -399,6 +416,15 @@ nav.breadcrumbs li:last-of-type::after {
   header div {
     max-width: initial;
   }
+
+  header nav:first-of-type {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  header {
+    grid-template-columns: 30% auto auto 5%;
+  }
 }
 
 @media screen {

documentation-website/test/components/navbar.ts → documentation-website/test/components/header.ts

@@ -1,4 +1,4 @@
-import Navbar from '../../src/components/navbar.jsx';
+import Header from '../../src/components/header.tsx';
 import {
   expect,
 } from 'chai';
@@ -8,10 +8,10 @@ const window = new Window();
 
 describe('components/navbar', () => {
   it('should be a function', () => {
-    expect(Navbar,).to.be.a('function',);
+    expect(Header,).to.be.a('function',);
   },);
   it('() should be an object', () => {
-    const result = Navbar(window,);
+    const result = Header(window,);
     expect(result,).to.be.an('object',);
   },);
 },);

documentation-website/test/components/social-link.ts

@@ -0,0 +1,17 @@
+import SL from '../../src/components/social-link.tsx';
+import {
+  expect,
+} from 'chai';
+
+describe('components/breadcrumbs', () => {
+  it('should be a function', () => {
+    expect(SL,).to.be.a('function',);
+  },);
+  it('() should be an object', () => {
+    const result = SL({
+      to: '/',
+      label: '',
+    },);
+    expect(result,).to.be.a('object',);
+  },);
+},);