Add basic navigation structure

docusaurus.config.js

@@ -1,14 +1,16 @@
 // @ts-check
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
+const lightCodeTheme = require('prism-react-renderer/themes/vsDark');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Arrow website',
   tagline: "Functional companion to Kotlin's Standard Library",
-  favicon: 'img/favicon.ico',
-  url: 'https://your-docusaurus-test-site.com',
+  favicon: 'img/arrow-brand-icon.svg',
+  url: 'https://arrow-kt.io',
   baseUrl: '/',
   trailingSlash: true,
   // GitHub pages deployment config.
@@ -33,8 +35,8 @@ const config = {
           path: 'content/learn',
           routeBasePath: 'learn',
           sidebarPath: require.resolve('./sidebars.js'),
-          editUrl:
-            'https://github.com/arrow-kt/arrow-website/tree/main/packages/create-docusaurus/templates/shared/',
+          editUrl: 'https://github.com/arrow-kt/arrow-website/edit/main/',
+          breadcrumbs: false,
         },
         pages: {
           path: 'src/pages',
@@ -43,8 +45,7 @@ const config = {
           path: 'content/blog',
           routeBasePath: 'community/blog',
           showReadingTime: true,
-          editUrl:
-            'https://github.com/arrow-kt/arrow-website/tree/main/packages/create-docusaurus/templates/shared/',
+          editUrl: 'https://github.com/arrow-kt/arrow-website/edit/main/',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
@@ -56,79 +57,188 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',
+      colorMode: {
+        defaultMode: 'light',
+        disableSwitch: true,
+        respectPrefersColorScheme: false,
+      },
       navbar: {
-        title: 'Arrow website',
         logo: {
           alt: 'Arrow Logo',
-          src: 'img/logo.svg',
+          src: 'img/arrow-brand.svg',
         },
         items: [
           {
-            type: 'doc',
-            docId: 'overview',
-            position: 'left',
+            to: '/',
+            position: 'right',
+            label: 'Home',
+            activeBaseRegex: '^/+$',
+          },
+          {
+            to: 'about/what-is-arrow',
+            position: 'right',
+            label: 'About',
+          },
+          {
+            type: 'dropdown',
+            position: 'right',
             label: 'Learn',
+            items: [
+              {
+                label: 'Overview',
+                to: 'learn/overview',
+              },
+              {
+                label: 'Quickstart',
+                to: 'learn/quickstart',
+              },
+              {
+                label: 'Docs',
+                to: 'learn/category/docs',
+                activeBaseRegex: '^(/learn/category/docs)|^(/learn/docs)',
+              },
+            ],
+          },
+          {
+            to: 'projects',
+            position: 'right',
+            label: 'Projects',
           },
-          {to: '/community/blog', label: 'Blog', position: 'left'},
           {
-            href: 'https://github.com/arrow-kt/arrow-website',
-            label: 'GitHub',
+            to: 'training',
             position: 'right',
+            label: 'Training',
+          },
+          {
+            type: 'dropdown',
+            position: 'right',
+            label: 'Community',
+            items: [
+              { to: 'community/support', label: 'Support' },
+              { to: 'community/blog', label: 'Blog' },
+              { to: 'community/events', label: 'Events' },
+            ],
           },
         ],
       },
       footer: {
-        style: 'dark',
         links: [
           {
-            title: 'Docs',
+            title: 'Menu',
             items: [
+              {
+                label: 'About',
+                to: 'about/what-is-arrow',
+              },
               {
                 label: 'Learn',
-                to: '/learn/overview',
+                to: 'learn/quickstart',
+              },
+              {
+                label: 'Projects',
+                to: 'projects',
+              },
+              {
+                label: 'Training',
+                to: 'training',
+              },
+              {
+                label: 'Community',
+                to: 'community/support',
               },
             ],
           },
           {
-            title: 'Community',
+            title: 'Learn',
             items: [
               {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/arrow-kt',
+                label: 'Quickstart',
+                to: 'learn/quickstart',
               },
               {
-                label: 'Discord',
-                href: 'https://discordapp.com/invite/docusaurus',
+                label: 'Overview',
+                to: 'learn/overview',
               },
               {
-                label: 'Twitter',
-                href: 'https://twitter.com/arrow-kt',
+                label: 'Docs',
+                to: 'learn/category/docs',
               },
             ],
           },
           {
-            title: 'More',
+            title: 'Community',
             items: [
+              {
+                label: 'Support',
+                to: 'community/support',
+              },
+              {
+                label: 'Events',
+                to: 'community/events',
+              },
               {
                 label: 'Blog',
-                to: '/community/blog',
+                to: 'community/blog',
+              },
+            ],
+          },
+          {
+            title: 'Links',
+            items: [
+              {
+                label: 'Twitter',
+                href: 'https://twitter.com/arrow-kt',
               },
               {
                 label: 'GitHub',
-                href: 'https://github.com/arrow-kt/',
+                href: 'https://github.com/arrow-kt',
+              },
+              {
+                label: 'YouTube',
+                href: 'https://www.youtube.com/@xebiafunctional',
+              },
+              {
+                label: 'Stack Overflow',
+                href: 'https://stackoverflow.com/questions/tagged/arrow-kt',
               },
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} Arrow. Built with Docusaurus.`,
+        logo: {
+          alt: 'Arrow Logo',
+          src: 'img/arrow-brand.svg',
+          href: 'https://arrow-kt.io',
+          width: 128,
+          height: 42,
+        },
+        copyright: `Arrow is designed and developed by ARROW with support from Xebia Functional`,
       },
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
+        additionalLanguages: ['kotlin'],
+        defaultLanguage: 'kotlin',
       },
     }),
+
+  plugins: [
+    () => ({
+      name: 'yaml-loader-plugin',
+      configureWebpack() {
+        return {
+          module: {
+            rules: [
+              {
+                test: /\.ya?ml$/,
+                use: 'yaml-loader',
+              },
+            ],
+          },
+        };
+      },
+    }),
+  ],
 };
 
 module.exports = config;

package.json

@@ -37,7 +37,8 @@
     "husky": "8.0.3",
     "prettier": "2.8.4",
     "typescript": "4.9.5",
-    "typescript-plugin-css-modules": "4.2.2"
+    "typescript-plugin-css-modules": "4.2.2",
+    "yaml-loader": "0.8.0"
   },
   "husky": {
     "hooks": {

src/components/Placeholder/Placeholder.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 
+import Layout from '@theme/Layout';
+
 import styles from './Placeholder.module.css';
 
 export function Placeholder({ title }: { title: string }): JSX.Element {
-  return <div className={styles.title}>{title}</div>;
+  return (
+    <Layout title={title} description={title}>
+      <div className={styles.title}>{title}</div>
+    </Layout>
+  );
 }