Add an intro page for Storybook

.storybook/main.js

 module.exports = {
-    stories: ['../src/client/components/**/*.stories.js'],
     addons: [
         '@storybook/addon-docs',
     ],

.storybook/preview.js

-import { addDecorator } from '@storybook/react'
+import { configure, addDecorator } from '@storybook/react'
 import React from 'react'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
@@ -11,9 +11,17 @@ import localeEN from '../src/client/translations/sampo/localeEN'
 import localeFI from '../src/client/translations/sampo/localeFI'
 import localeSV from '../src/client/translations/sampo/localeSV'
 import reducer from '../src/client/reducers'
-
 import '../src/client/index.css'
 
+const loaderFn = () => {
+  const allExports = [require('./welcome.stories.js')];
+  const req = require.context('../src/client/components', true, /\.stories\.js$/);
+  req.keys().forEach(fname => allExports.push(req(fname)));
+  return allExports;
+};
+
+configure(loaderFn, module);
+
 const store = createStore(reducer)
 
 intl.init({

.storybook/welcome.stories.js

+import React from 'react';
+import TextPage from '../src/client/components/main_layout/TextPage'
+import Typography from '@material-ui/core/Typography'
+
+export default {
+    title: 'Sampo-UI/introduction'
+  }
+
+export const welcome = () => 
+    <TextPage>
+        <Typography component='h1' variant='h2'>Welcome to Sampo-UI</Typography>
+        <Typography paragraph>
+            This Storybook is used for documenting the reusable component library of 
+            the Sampo-UI framework. These components are designed for building user interfaces for semantic portals.
+        </Typography>
+        <Typography paragraph>
+            The source code of Sampo-UI is published on <a target='_blank' href='https://github.com/SemanticComputing/sampo-ui'>GitHub</a>. 
+            The folders in this Storybook reflect the <a target='_blank' href='https://github.com/SemanticComputing/sampo-ui/tree/master/src/client/components'>folders</a> in 
+            the GitHub repository, where the components are split into three categories:
+        </Typography>
+        <ul>
+            <li><Typography>main_layout</Typography></li>
+            <li><Typography>facet_results</Typography></li>
+            <li><Typography>perspectives</Typography></li>
+        </ul>
+    </TextPage>
\ No newline at end of file

README.md

@@ -11,9 +11,11 @@ A framework for building user interfaces for semantic portals. The following por
 * [HistorySampo](https://github.com/SemanticComputing/historysampo-web-app) 
 * [ParliamentSampo?]
 
-Sampo-UI framework is being developed by the [Semantic Computing Research Group (SeCo)](https://seco.cs.aalto.fi) at the Aalto University, Finland.
+Sampo-UI framework is being developed by the [Semantic Computing Research Group (SeCo)](https://seco.cs.aalto.fi) at the Aalto University, Finland. See the [research page](https://seco.cs.aalto.fi/tools/sampo-ui) for more information. 
 
-See the [research page](https://seco.cs.aalto.fi/tools/sampo-ui) for more information. 
+## Documentation
+
+Sampo-UI's React components are documented [here](https://semanticcomputing.github.io/sampo-ui)
 
 ## Requirements
 

src/client/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="" />
   <meta name="robots" content="noindex">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   <title>Sampo Semantic Portal</title>
 </head>