re: #524, slugify example titles so that they can have a permanent link

Author: catarak

client/modules/IDE/components/SketchList.jsx

@@ -7,6 +7,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
+import slugify from 'slugify';
 import * as ProjectActions from '../actions/project';
 import * as ProjectsActions from '../actions/projects';
 import * as ToastActions from '../actions/toast';
@@ -137,13 +138,17 @@ class SketchListRowBase extends React.Component {
     const { sketch, username } = this.props;
     const { renameOpen, optionsOpen, renameValue } = this.state;
     const userIsOwner = this.props.user.username === this.props.username;
+    let url = `/${username}/sketches/${sketch.id}`;
+    if (username === 'p5') {
+      url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
+    }
     return (
       <tr
         className="sketches-table__row"
         key={sketch.id}
       >
         <th scope="row">
-          <Link to={`/${username}/sketches/${sketch.id}`}>
+          <Link to={url}>
             {renameOpen ? '' : sketch.name}
           </Link>
           {renameOpen

server/scripts/examples.js

@@ -61,7 +61,7 @@ function getCategories() {
       for (let j = 1; j < metadata.name.split('_').length; j += 1) {
         category += `${metadata.name.split('_')[j]} `;
       }
-      categories.push({ url: metadata.url, name: category });
+      categories.push({ url: metadata.url, name: category.trim() });
     });
 
     return categories;
@@ -114,7 +114,7 @@ function getSketchContent(projectsInAllCategories) {
 
     return rp(options).then((res) => {
       const noNumberprojectName = project.projectName.replace(/(\d+)/g, '');
-      if (noNumberprojectName === 'Instance Mode : Instance Container ') {
+      if (noNumberprojectName === 'Instance Mode: Instance Container ') {
         for (let i = 0; i < 4; i += 1) {
           const splitedRes = `${res.split('*/')[1].split('</html>')[i]}</html>\n`;
           project.sketchContent = splitedRes.replace(
@@ -153,7 +153,7 @@ function createProjectsInP5user(projectsInAllCategories) {
           const c = objectID().toHexString();
           const r = objectID().toHexString();
           const noNumberprojectName = project.projectName.replace(/(\d+)/g, '');
-          if (noNumberprojectName === 'Instance Mode : Instance Container ') {
+          if (noNumberprojectName === 'Instance Mode: Instance Container ') {
             newProject = new Project({
               name: project.projectName,
               user: user._id,
@@ -167,7 +167,7 @@ function createProjectsInP5user(projectsInAllCategories) {
                 },
                 {
                   name: 'sketch.js',
-                  content: '// Instance Mode : Instance Container, please check its index.html file',
+                  content: '// Instance Mode: Instance Container, please check its index.html file',
                   id: a,
                   _id: a,
                   fileType: 'file',