Add link on blog articles

packages/strapi-admin/admin/src/components/Sub/index.js

@@ -12,7 +12,7 @@ import cn from 'classnames';
 
 import styles from './styles.scss';
 
-function Sub({ bordered, content, name, style, title, underline }) {
+function Sub({ bordered, content, link, name, style, title, underline }) {
   if (isObject(title)) {
     return (
       <div className={cn(styles.subWrapper, bordered && styles.subBordered)}>
@@ -25,18 +25,19 @@ function Sub({ bordered, content, name, style, title, underline }) {
   }
 
   return (
-    <div className={cn(styles.subWrapper, bordered && styles.subBordered)}>
+    <a className={cn(styles.subWrapper, bordered && styles.subBordered, styles.link)} href={`https://blog.strapi.io/${link}`} target="_blank">
       <span>{title}</span>
       <p style={style}>
         {isFunction(content) ? content() : content}
       </p>
-    </div>
+    </a>
   );
 }
 
 Sub.defaultProps = {
   bordered: false,
   content: () => '',
+  link: '',
   name: '',
   style: {},
   title: {
@@ -53,6 +54,7 @@ Sub.propTypes = {
     PropTypes.func,
     PropTypes.string,
   ]),
+  link: PropTypes.string,
   name: PropTypes.string,
   style: PropTypes.object,
   title: PropTypes.oneOfType([

packages/strapi-admin/admin/src/components/Sub/styles.scss

@@ -6,19 +6,25 @@
 .subWrapper {
   position: relative;
   line-height: 18px;
+  text-decoration: none;
+
   > span {
+    text-decoration: none;
     font-family: Lato-Bold;
     font-size: 20px;
     color: #333740;
     letter-spacing: 0;
+    transition: color .2s ease;
   }
 
   p {
+    text-decoration: none;
     display: block;
-    max-width: 550px;
+    max-width: calc(100% - 150px);
     margin-top: 18px;
     color: #333740;
     font-size: 14px;
+    transition: color .2s ease;
   }
 }
 
@@ -26,3 +32,15 @@
 .underlinedTitle {
   border-bottom: 3px solid #F0B41E;
 }
+
+.link{
+  &:hover, &:focus, &:active{
+    text-decoration: none;
+  }
+
+  &:hover{
+    > span, p {
+      color: lighten(#333740, 20%);
+    }
+  }
+}

packages/strapi-admin/admin/src/containers/HomePage/saga.js

@@ -1,5 +1,5 @@
 import 'whatwg-fetch';
-import { padEnd, take } from 'lodash';
+import { dropRight, take } from 'lodash';
 import removeMd from 'remove-markdown';
 import {
   call,
@@ -19,11 +19,14 @@ function* getArticles() {
   try {
     const articles = yield call(fetchArticles);
     const posts = articles.posts.reduce((acc, curr) => {
-      const post = {
+      // Limit to 200 characters and remove last word.
+      const content = dropRight(take(removeMd(curr.markdown), 250).join('').split(' ')).join(' ');
+
+      acc.push({
         title: curr.title,
-        content: padEnd(take(removeMd(curr.markdown), 200).join(''), 203, '...'),
-      };
-      acc.push(post);
+        link: curr.slug,
+        content: `${content} [...]`,
+      });
 
       return acc;
     }, []);

packages/strapi-admin/admin/src/containers/HomePage/styles.scss

@@ -263,6 +263,6 @@
 
 .welcomeContentP {
   display: block;
-  max-width: 49rem !important;
+  max-width: 55rem !important;
   margin-bottom: 31px;
 }