Integrate blog

.gitmodules

@@ -13,3 +13,6 @@
 [submodule "content/sources/30react"]
 	path = content/sources/30react
 	url = https://github.com/30-seconds/30-seconds-of-react
+[submodule "content/sources/30blog"]
+	path = content/sources/30blog
+	url = https://github.com/30-seconds/30-seconds-blog

config.js

@@ -57,12 +57,12 @@ module.exports = {
   ],
   // Snippet ranking engine parameters
   rankingEngine: {
-    tagScorelimit: 12,
+    tagScoreLimit: 12,
     expertiseScoreLimit: 8,
     timeScoreLimitMultiplier: 0.6,
-    beginnerExpertiseScore: 6,
+    beginnerExpertiseScore: 3,
     intermediateExpertiseScore: 8,
-    advancedExpertiseScore: 2,
+    advancedExpertiseScore: 5,
     firstSeenScorePercentage: 0.47,
     lastUpdateScorePercentage: 0.36,
     updateCountScorePercentage: 0.17,

content/configs/30blog.js

@@ -0,0 +1,36 @@
+export default {
+  name: '30 seconds Blog',
+  dirName: '30blog',
+  repoUrl: 'https://github.com/30-seconds/30-seconds-blog',
+  snippetPath: 'blog_posts',
+  requirables: [
+    'blog_data/snippets.json',
+    // 'blog_data/blog_authors.json',
+  ],
+  slug: 'blog',
+  reducer: 'blogReducer',
+  resolver: 'blogResolver',
+  isBlog: true,
+  theme: {
+    backColor: '#1f253d',
+    foreColor: '#edf0fc',
+  },
+  biasPenaltyMultiplier: 1.01,
+  images: {
+    name: 'blog_images',
+    path: 'blog_images',
+  },
+  tagScores: {
+    'javascript': 5,
+    'react': 4,
+    'css': 4,
+    'array': 4,
+    'list': 4,
+    'object': 4,
+    'python': 3,
+    'webdev': 3,
+    'devtools': 2,
+    'csharp': 2,
+    'php': 1,
+  },
+};

content/reducers/blogReducer.js

@@ -0,0 +1,48 @@
+import {
+  rankingEngine as rankSnippet,
+  searchIndexingEngine as tokenizeSnippet
+} from 'engines';
+import { convertToSeoSlug, uniqueElements } from 'functions/utils';
+import { determineExpertiseFromTags } from 'functions/transformers';
+// TODO: Consider parsing this via a new parser or similar
+// The argument against is that it's a single case and might not extend to other repos in the future
+import authors from '../sources/30blog/blog_data/blog_authors';
+
+export default (id, snippetNode, markdownNode) => {
+  const shortSliceIndex = snippetNode.attributes.text.indexOf('\n\n') <= 180 ? snippetNode.attributes.text.indexOf('\n\n') : snippetNode.attributes.text.indexOf(' ', 160);
+  return {
+    id,
+    tags: {
+      all: snippetNode.attributes.tags,
+      primary: snippetNode.attributes.tags[0],
+    },
+    blogType: snippetNode.type,
+    cover: snippetNode.attributes.cover,
+    authors: snippetNode.attributes.authors.map(a => authors[a]),
+    blog: true,
+    expertise: '',
+    title: snippetNode.title,
+    code: { },
+    slug: `/${snippetNode.slugPrefix}${convertToSeoSlug(markdownNode.fields.slug)}`,
+    url: `${snippetNode.repoUrlPrefix}${markdownNode.fields.slug.slice(0, -1)}.md`,
+    path: markdownNode.fileAbsolutePath,
+    text: {
+      full: snippetNode.attributes.text,
+      short: snippetNode.attributes.excerpt && snippetNode.attributes.excerpt.trim().length !== 0
+        ? snippetNode.attributes.excerpt
+        : `${ snippetNode.attributes.text.slice(0, shortSliceIndex)}...`,
+    },
+    archived: snippetNode.archived,
+    language: {},
+    ranking: rankSnippet(snippetNode, { timeSensitive: true }),
+    recommendationRanking: snippetNode.recommendationRanking,
+    firstSeen: new Date(+`${snippetNode.meta.firstSeen}000`),
+    lastUpdated: new Date(+`${snippetNode.meta.lastUpdated}000`),
+    searchTokens: uniqueElements([
+      ...snippetNode.attributes.tags.filter(tag => tag !== 'beginner' && tag !== 'intermediate' && tag !== 'advanced'),
+      ...tokenizeSnippet(
+        `${snippetNode.attributes.excerpt} ${snippetNode.title}`
+      ),
+    ]).join(' ').toLowerCase(),
+  };
+};

content/reducers/cssReducer.js

@@ -2,7 +2,8 @@ import {
   rankingEngine as rankSnippet,
   searchIndexingEngine as tokenizeSnippet
 } from 'engines';
-import { determineExpertiseFromTags, convertToSeoSlug, uniqueElements } from 'functions/utils';
+import { convertToSeoSlug, uniqueElements } from 'functions/utils';
+import { determineExpertiseFromTags } from 'functions/transformers';
 
 export default (id, snippetNode, markdownNode) => {
   return {

content/reducers/es6Reducer.js

@@ -2,7 +2,8 @@ import {
   rankingEngine as rankSnippet,
   searchIndexingEngine as tokenizeSnippet
 } from 'engines';
-import { determineExpertiseFromTags, convertToSeoSlug, uniqueElements } from 'functions/utils';
+import { convertToSeoSlug, uniqueElements } from 'functions/utils';
+import { determineExpertiseFromTags } from 'functions/transformers';
 
 export default (id, snippetNode, markdownNode) => {
   return {

content/reducers/jsxReducer.js

@@ -2,7 +2,8 @@ import {
   rankingEngine as rankSnippet,
   searchIndexingEngine as tokenizeSnippet
 } from 'engines';
-import { determineExpertiseFromTags, convertToSeoSlug, uniqueElements } from 'functions/utils';
+import { convertToSeoSlug, uniqueElements } from 'functions/utils';
+import { determineExpertiseFromTags } from 'functions/transformers';
 
 export default (id, snippetNode, markdownNode) => {
   return {

content/reducers/stdReducer.js

@@ -2,7 +2,8 @@ import {
   rankingEngine as rankSnippet,
   searchIndexingEngine as tokenizeSnippet
 } from 'engines';
-import { determineExpertiseFromTags, convertToSeoSlug, uniqueElements } from 'functions/utils';
+import { convertToSeoSlug, uniqueElements } from 'functions/utils';
+import { determineExpertiseFromTags } from 'functions/transformers';
 
 export default (id, snippetNode, markdownNode) => {
   return {

content/resolvers/blogResolver.js

@@ -0,0 +1,64 @@
+/** Gets the short description for a blog post */
+const getShortDescription = str => {
+  return `<p>${str}</p>`;
+};
+
+/** Get the textual content for a blog post */
+const getTextualContent = (str, blogType) => {
+  let _str = str;
+  const transformers = [
+    // Inject class into blog lists' <ol> elements
+    {
+      blogType: 'blog.list',
+      matcher: /<ol>/g,
+      replacer: '<ol class="blog-list">',
+    },
+    // Inject paragraphs and class into blog lists' <li> elements
+    {
+      blogType: 'blog.list',
+      matcher: /<li>(.+?)\n(.+?)<\/li>/g,
+      replacer: '<li class="blog-list-item"><p>$1</p><p>$2</p></li>',
+    },
+    // Add 'rel' and 'target' to external links
+    {
+      blogType: 'any',
+      matcher: /(href="https?:\/\/)/g,
+      replacer: 'target="_blank" rel="nofollow noopener noreferrer" $1',
+    },
+    // Convert blog post code to the appropriate elements
+    {
+      blogType: 'any',
+      matcher: /<pre class="language-[^"]+"><code class="language-([^"]+)">([\s\S]*?)<\/code><\/pre>/g,
+      replacer: '<pre class="blog-code language-$1">$2</pre>',
+    },
+    // Convert blog blockquotes to the appropriate elements
+    {
+      blogType: 'any',
+      matcher: /<blockquote>\s*\n*\s*<p>([\s\S]*?)<\/p>\s*\n*\s<\/blockquote>/g,
+      replacer: '<blockquote class="blog-quote">$1</blockquote>',
+    },
+    // Convert image credit to the appropriate element
+    {
+      blogType: 'any',
+      matcher: /<p>\s*\n*\s*<strong>Image credit:<\/strong>([\s\S]*?)<\/p>/g,
+      replacer: '<p class="blog-image-credit">Image credit: $1</p>',
+    },
+  ];
+
+  transformers.forEach(t => {
+    if (t.blogType === 'any' || t.blogType === blogType)
+      _str = _str.replace(t.matcher, t.replacer);
+  });
+  return _str;
+};
+
+export default (str, source) => {
+  const description = getShortDescription(source.text.short);
+  const fullDescription = getTextualContent(str, source.blogType);
+  return {
+    description,
+    fullDescription,
+    code: '',
+    example: '',
+  };
+};

gatsby-config.js

@@ -51,6 +51,7 @@ module.exports = {
         icon: `assets/30s-icon.png`, // This path is relative to the root of the site.
       },
     },
+    `gatsby-plugin-catch-links`,
     `gatsby-plugin-offline`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-netlify`,

gatsby-node.js

@@ -10,6 +10,7 @@ const {
 const {
   createPagesQuery,
   getLogoSrc,
+  getImages,
   getSearchIndex,
 } = require(`./src/queries`);
 const {
@@ -33,7 +34,7 @@ console.log(`${green('success')} parse resolvers`);
 const templates = parseTemplates(config.templates, config.templatesPath);
 console.log(`${green('success')} parse templates`);
 
-const pagesQuery = parseQueries(getLogoSrc, createPagesQuery, getSearchIndex);
+const pagesQuery = parseQueries(getLogoSrc, createPagesQuery, getSearchIndex, getImages);
 console.log(`${green('success')} parse queries`);
 
 exports.createPages = createPages(pagesQuery, templates, requirables);

package.json

@@ -35,6 +35,7 @@
     "front-matter": "^3.0.2",
     "fs-extra": "^8.1.0",
     "gatsby": "^2.12.0",
+    "gatsby-plugin-catch-links": "^2.1.24",
     "gatsby-plugin-manifest": "^2.2.3",
     "gatsby-plugin-netlify": "^2.1.3",
     "gatsby-plugin-offline": "^2.2.4",
@@ -127,7 +128,9 @@
     "setupFiles": [
       "./.jest/loadershim.js"
     ],
-    "testMatch": [ "**/?(*.)+(test).[jt]s?(x)" ]
+    "testMatch": [
+      "**/?(*.)+(test).[jt]s?(x)"
+    ]
   },
   "browserslist": [
     "defaults and last 4 versions and not dead and not ie>0 and not ie_mob>0 and not op_mini all and not baidu>0 and not kaios>0 and not and_uc>0 and not and_qq>0 and not <0.2%"

src/atoms/anchor/regularAnchor/anchor.test.jsx

@@ -37,8 +37,8 @@ describe('<Anchor />', () => {
       anchor = wrapper.find('a');
     });
 
-    it('should link the appropriate internal URl', () => {
-      expect(anchor.prop('href')).toBe(`/${internalLink.url}`);
+    it('should link the appropriate internal URL', () => {
+      expect(anchor.prop('href')).toBe(`/${internalLink.url}/`);
     });
   });
 

src/atoms/anchor/regularAnchor/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import { Link as LinkPropType } from 'typedefs';
+import { addTrailingSlashToSlug } from 'functions/utils';
 
 const Anchor = ({
   children,
@@ -11,7 +12,7 @@ const Anchor = ({
   return link.internal ?
     (
       <Link
-        to={ link.url }
+        to={ addTrailingSlashToSlug(link.url) }
         rel={ link.rel }
         target={ link.target }
         { ...rest }

src/atoms/card/_index.scss

@@ -58,6 +58,7 @@
 
     li {
       line-height: 2;
+      margin: 0.75rem 0 0.5rem;
     }
   }
 }

src/atoms/card/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin card-full-width-section {
+  position: relative;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  margin: 1.375rem -1rem 0;
+}

src/atoms/expertise/expertise.test.jsx

@@ -26,7 +26,7 @@ describe('<Expertise />', () => {
   });
 
   it('should get the appropriate class from expertise level', () => {
-    expect(wrapper).toContainMatchingElement(`.expertise.${level}`);
+    expect(wrapper).toContainMatchingElement(`.expertise.${level.toLowerCase()}`);
   });
 
 });

src/atoms/expertise/index.jsx

@@ -6,9 +6,9 @@ import _ from 'lang';
 const _l = _('en');
 
 const Expertise = ({
-  level = 'intermediate',
+  level = 'Intermediate',
 }) => (
-  <span className={ trimWhiteSpace`expertise ${level}` }>
+  <span className={ trimWhiteSpace`expertise ${level.toLowerCase()}` }>
     { _l`Expertise${level}` }
   </span>
 );

src/atoms/tag/index.jsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { capitalize } from 'functions/utils';
 
 const Tag = ({
   name,
-}) => (
-  <span className="tag">
-    { capitalize(name) }
-  </span>
-);
+}) =>
+  name ?
+    (
+      <span className="tag">
+        { name }
+      </span>
+    )
+    : null
+;
 
 Tag.propTypes = {
   /** Tag string literal */
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
 };
 
 export default Tag;