Better document URLs

frontend/index.js

@@ -87,6 +87,9 @@ const KeyboardShortcuts = () => (
 const Api = () => <Flatpage title="API" content={flatpages.api} />;
 const DocumentNew = () => <Document newDocument />;
 const DocumentNewChild = () => <Document newChildDocument />;
+const RedirectDocument = ({ match }: { match: Object }) => (
+  <Redirect to={`/${match.params.documentSlug}`} />
+);
 
 render(
   <div style={{ display: 'flex', flex: 1, height: '100%' }}>
@@ -106,9 +109,22 @@ render(
                   <Route exact path="/dashboard" component={Dashboard} />
                   <Route exact path="/starred" component={Starred} />
                   <Route exact path="/collections/:id" component={Collection} />
-                  <Route exact path="/d/:id" component={Document} />
+                  <Route
+                    exact
+                    path="/d/:documentSlug([0-9a-zA-Z-]*-[a-zA-z]{10,15})"
+                    component={RedirectDocument}
+                  />
+                  <Route
+                    exact
+                    path="/:documentSlug([0-9a-zA-Z-]*-[a-zA-z]{10,15})"
+                    component={Document}
+                  />
 
-                  <Route exact path="/d/:id/:edit" component={Document} />
+                  <Route
+                    exact
+                    path="/:documentSlug([0-9a-zA-Z-]*-[a-zA-z]{10,15})/:edit"
+                    component={Document}
+                  />
                   <Route
                     exact
                     path="/collections/:id/new"

frontend/scenes/Document/Document.js

@@ -44,7 +44,10 @@ type Props = {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.match.params.id !== this.props.match.params.id) {
+    if (
+      nextProps.match.params.documentSlug !==
+      this.props.match.params.documentSlug
+    ) {
       this.loadDocument(nextProps);
     }
   }
@@ -59,7 +62,7 @@ type Props = {
       this.props.ui.setActiveDocument(document);
     }
 
-    await this.props.documents.fetch(props.match.params.id);
+    await this.props.documents.fetch(props.match.params.documentSlug);
     document = this.document;
 
     if (document) {
@@ -75,7 +78,9 @@ type Props = {
   };
 
   get document() {
-    return this.props.documents.getByUrl(`/d/${this.props.match.params.id}`);
+    return this.props.documents.getByUrl(
+      `/${this.props.match.params.documentSlug}`
+    );
   }
 
   onClickEdit = () => {

server/models/Document.js

@@ -9,7 +9,7 @@ import { convertToMarkdown } from '../../frontend/utils/markdown';
 import { truncateMarkdown } from '../utils/truncate';
 import Revision from './Revision';
 
-const URL_REGEX = /^[a-zA-Z0-9-]*-([a-zA-Z0-9]{10,15})$/;
+const URL_REGEX = /^[a-zA-Z0-9-]*-([a-zA-Z]{10,15})$/;
 
 slug.defaults.mode = 'rfc3986';
 const slugify = text =>
@@ -100,7 +100,7 @@ const Document = sequelize.define(
     instanceMethods: {
       getUrl() {
         const slugifiedTitle = slugify(this.title);
-        return `/d/${slugifiedTitle}-${this.urlId}`;
+        return `/${slugifiedTitle}-${this.urlId}`;
       },
       toJSON() {
         // Warning: only use for new documents as order of children is