docs(website): created new sections, improved website navigation

website/docs/dataguide/0-intro.md

@@ -0,0 +1,6 @@
+---
+title: Guidelines
+hide_table_of_contents: true
+---
+
+## TODO

website/docs/dataguide/_category_.yml

@@ -0,0 +1,10 @@
+position: 5 # float position is supported
+label: 'Maps and charts'
+collapsible: true # make the category collapsible
+collapsed: true # keep the category open by default
+className: red
+link:
+  type: generated-index
+  title: Maps and charts
+#customProps:
+#  description: This description can be used in the swizzled DocCard

website/docs/pubguide/0-intro.md

@@ -0,0 +1,7 @@
+---
+title: Guidelines
+hide_table_of_contents: true
+---
+
+## TODO
+

website/docs/pubguide/_category_.yml

@@ -0,0 +1,10 @@
+position: 4 # float position is supported
+label: 'Publications'
+collapsible: true # make the category collapsible
+collapsed: true # keep the category open by default
+className: red
+link:
+  type: generated-index
+  title: Publications
+#customProps:
+#  description: This description can be used in the swizzled DocCard

website/docs/webcontent/0-intro.md

@@ -0,0 +1,6 @@
+---
+title: Guidelines
+hide_table_of_contents: true
+---
+
+## TODO

website/docs/webcontent/_category_.yml

@@ -0,0 +1,10 @@
+position: 3 # float position is supported
+label: 'Web content'
+collapsible: true # make the category collapsible
+collapsed: true # keep the category open by default
+className: red
+link:
+  type: generated-index
+  title: Web content
+#customProps:
+#  description: This description can be used in the swizzled DocCard

website/docs/webdev/0-intro.md

@@ -0,0 +1,21 @@
+---
+title: Introduction
+hide_table_of_contents: true
+---
+
+
+We created the EEA Design System (EEA-DS) to standardize the visual language and user experience of the EEA’s online applications. 
+
+This also allows us to be more effecient when creating online applications instead of reinventing the wheel over and over.
+
+EEA-DS was built by a multi-disciplinary team of developers, designers, UX researchers, writers and data scientists. Combining the expertise of all of these roles allowed us to create a design system with a wide range of elements and for various target users (Web Designer, Web Writer/Content manager, Web Developer and Data scientist).
+
+## What is a design system?
+
+A design system is a catalogue of everything that makes up your digital product including user interface elements, writing style, guiding principles, coding standards, visual design, etc. using reusable components for easy development.
+
+All library elements are accompanied by:
+
+- documentation explaining what a component is and how it should be used
+- a visual demonstration
+- HTML/CSS code for implementation

website/docs/webdev/5-Components/_category_.yml

@@ -0,0 +1,10 @@
+position: 5 # float position is supported
+label: 'Components'
+collapsible: true # make the category collapsible
+collapsed: true # keep the category open by default
+className: red
+link:
+  type: generated-index
+  title: Components
+#customProps:
+#  description: This description can be used in the swizzled DocCard

website/docs/webdev/_category_.yml

@@ -0,0 +1,10 @@
+position: 2.5 # float position is supported
+label: 'Web development'
+collapsible: true # make the category collapsible
+collapsed: true # keep the category open by default
+className: red
+link:
+  type: generated-index
+  title: Web development
+#customProps:
+#  description: This description can be used in the swizzled DocCard

website/docusaurus.config.js

@@ -19,7 +19,7 @@ module.exports = {
   themeConfig: {
     colorMode: {
       defaultMode: 'light',
-      disableSwitch: true,
+      disableSwitch: false,
     },
     navbar: {
       title: 'EEA Design System',
@@ -28,12 +28,30 @@ module.exports = {
         src: 'img/eea_icon.png',
       },
       items: [
-        // {
-        //   type: 'doc',
-        //   docId: 'intro',
-        //   position: 'left',
-        //   label: 'EEA Component Library',
-        // },
+        {
+          to: 'docs/category/components',
+          label: 'Components',
+          activeBaseRegex: 'docs/(webdev|category)/(Components|components)',
+          position: 'left',
+        },
+        {
+          to: 'docs/webcontent/intro',
+          label: 'Web content',
+          activeBaseRegex: 'docs/(category/web-content|webcontent)',
+          position: 'left',
+        },
+        {
+          to: 'docs/pubguide/intro',
+          label: 'Publications',
+          activeBaseRegex: 'docs/(category/publications|pubguide)',
+          position: 'left',
+        },
+        {
+          to: 'docs/dataguide/intro',
+          label: 'Maps and charts',
+          activeBaseRegex: 'docs/(dataguide|category/maps-and-charts)',
+          position: 'left',
+        },
         {
           href: 'https://github.com/eea/volto-eea-design-system',
           label: 'GitHub',

website/src/components/HomepageFeatures.js

@@ -5,23 +5,25 @@ import styles from './HomepageFeatures.module.css';
 const FeatureList = [
   {
     title: 'Web developer',
-    link: '/volto-eea-design-system/docs/intro',
+    link: '/volto-eea-design-system/docs/category/web-development',
     Svg: require('../../static/img/undraw_proud_coder_re_exuy.svg').default,
     description: <>Design system for web developers</>,
   },
   {
     title: 'Web designer',
-    link: '/volto-eea-design-system/docs/intro',
+    link: '/volto-eea-design-system/docs/category/web-development',
     Svg: require('../../static/img/undraw_static_website_re_x70h.svg').default,
     description: <>Design system for web designers</>,
   },
   {
     title: 'Web content creator',
+    link: '/volto-eea-design-system/docs/category/web-content',
     Svg: require('../../static/img/undraw_add_post_re_174w.svg').default,
     description: <>Tips and tricks for writing for the web</>,
   },
   {
     title: 'Publication writer',
+    link: '/volto-eea-design-system/docs/category/publications',
     Svg: require('../../static/img/undraw_education_f8ru.svg').default,
     description: <>Writing manual for publications</>,
   },

website/src/pages/index.js

@@ -31,8 +31,8 @@ export default function Home() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      title={`Welcome to ${siteConfig.title} Homepage`}
+      description="${siteConfig.tagline}">
       <HomepageHeader />
       <main>
         <HomepageFeatures />