Widget permalink

Author: mrkaluzny

.npmignore

@@ -0,0 +1 @@
+assets/

assets/ezgif-5-f5c945ae99.gif

@@ -0,0 +1,161 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export class Control extends React.Component {
+  constructor(props) {
+    super(props);
+    let decoded = this.decodeSlug(this.props.value);
+    this.state = {
+      showEdit: false,
+      inputVal: decoded,
+    };
+
+    this.toggleEdit = this.toggleEdit.bind(this);
+    this.saveEdit = this.saveEdit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  slugify(str) {
+    return str
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+      .trim()
+      .replace(/[^\w^/\s-]/g, '')
+      .replace(/[\s_-]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+
+  isValid = () => {
+    const { value } = this.state.inputVal;
+    if (!value) return true;
+    const parser = document.createElement('a');
+    parser.href = `http://example.com${this.prepareUrl(value)}/`;
+    return parser.pathname !== value
+      ? { error: { message: 'Invalid pathname.' } }
+      : true;
+  };
+
+  decodeSlug(val) {
+    let prefix = this.props.field.get('prefix', '');
+
+    if (prefix) {
+      val.replace(`/${prefix}/`, '');
+    }
+
+    if (val == '/') {
+      return '';
+    }
+
+    return val
+      .split('/')
+      .filter((n) => n && n !== prefix)
+      .join('/');
+  }
+
+  toggleEdit() {
+    this.setState((prev) => {
+      return {
+        showEdit: !prev.showEdit,
+      };
+    });
+  }
+
+  handleChange = (e) => {
+    this.setState({ inputVal: e.target.value });
+  };
+
+  prepareUrl(val) {
+    console.log(val);
+    let result = val;
+    let prefix = this.props.field.get('prefix', '');
+
+    if (val === '') {
+      return '/';
+    }
+
+    if (result.charAt(0) !== '/') {
+      result = `/${result}/`;
+    }
+
+    if (prefix) {
+      result = `/${prefix}${result}`;
+    }
+
+    return result;
+  }
+
+  saveEdit() {
+    let slug = this.slugify(this.state.inputVal);
+    this.setState({
+      showEdit: false,
+      inputVal: slug,
+    });
+
+    this.prepareUrl(slug);
+
+    this.props.onChange(this.prepareUrl(slug));
+  }
+
+  render() {
+    const { field, forID, value, classNameWrapper } = this.props;
+    const url = field.get('url', '');
+    const prefix = field.get('prefix', '');
+
+    return (
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+          <span style={{ fontSize: 14 }}>Permalink:</span>
+          {this.state.showEdit && (
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <div
+                style={{ fontSize: 14, display: 'flex', alignItems: 'center' }}>
+                {url}/ {prefix && <span>{prefix}/</span>}
+              </div>
+              <input
+                id={forID}
+                className={classNameWrapper}
+                style={{ height: 20, padding: 5 }}
+                value={this.state.inputVal}
+                onChange={this.handleChange}
+              />
+              <span>/</span>
+              <button onClick={this.saveEdit}>OK</button>
+              <button onClick={this.toggleEdit}>Cancel</button>
+            </div>
+          )}
+          {!this.state.showEdit && (
+            <a
+              style={{ color: 'blue', textDecoration: 'underline' }}
+              href={`${url}${value}`}
+              target='_blank'
+              rel='noopener noreferrer'>
+              {url}
+              {value}
+            </a>
+          )}
+          {!this.state.showEdit && (
+            <button onClick={this.toggleEdit}>Edit</button>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+Control.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  forID: PropTypes.string,
+  value: PropTypes.node,
+  classNameWrapper: PropTypes.string.isRequired,
+};
+
+Control.defaultProps = {
+  value: '',
+};
+
+export const Widget = {
+  // name that will be used in config.yml
+  name: 'cc-permalink',
+  controlComponent: Control,
+};

index.js

@@ -0,0 +1,20 @@
+{
+  "name": "netlify-cms-widget-permalink",
+  "version": "0.9.0",
+  "description": "Permalink widget for Netlify CMS",
+  "main": "./index.js",
+  "keywords": [],
+  "author": "Wojciech Kaluzny <wk@cleancommit.io>",
+  "license": "MIT",
+  "repository": "https://github.com/clean-commit/netlify-cms-widget-permalink",
+  "peerDependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^16.8.23"
+  }
+}

package.json

@@ -0,0 +1,69 @@
+# Netlify CMS Permalink Widget
+
+Netlify CMS Widget that allows you to create customizable permalinks easily.
+
+Widgets are inputs for the Netlify CMS editor interface. It's a React component that receives user input and outputs a serialized value.
+
+This widget allows you to create custom permalinks that can be used to generate pathnames for Netlify CMS based websites. The widget mimics the behaviour of WordPress permalink input field automatically outputting correct slugs.
+
+![Permalink widget](ezgif-5-f5c945ae99.gif)
+
+## Installation
+
+1. Install the widget
+
+```
+npm install netlify-cms-widget-permalink
+```
+
+2. Import the Permalink widget to your Netlify CMS setup file
+
+```
+import {PermalinkControl, PermalinkPreview} from 'netlify-cms-widget-permalink';
+```
+
+3. Register the widget for use
+
+```
+CMS.registerWidget('permalink', PermalinkControl, PermalinkPreview)
+```
+
+## Usage details
+
+Inside the YML collecitons file you can use `permalink` as new widget
+
+```
+collections:
+  - name: "example"
+    label: "Example"
+    folder: "/path/to/your/folder"
+    create: true
+    slug: "{{slug}}"
+    fields:
+      - {label: "ID", name: "id", widget: "permalink", prefix: 'blog', url: 'http://example.com'}
+```
+
+You can also use it as a JS object using Netlify CMS [Manual Initialization](https://www.netlifycms.org/docs/beta-features/#manual-initialization)
+
+Example:
+
+```
+{
+  label: 'Permalink',
+  name: 'permalink',
+  widget: 'permalink',
+  required: true,
+  url: 'http://localhost:8000',
+  hint: 'The post URL (do not include folder or file extension)',
+},
+```
+
+This widget is using 2 custom items:
+`url` -> is used to visualize and link to the page
+`prefix` -> is used when you want to prefix some pages (i.e. `blog` will output -> `/blog/your-slug/`)
+
+### Additional guides
+
+- [Efficient Netlify CMS config with Manual Initialization](https://mrkaluzny.com/blog/dry-netlify-cms-config-with-manual-initialization?utm_source=GitHub&utm_medium=henlo-gatsby)
+- [How to optimize SEO with Gatsby & Netlify CMS](https://mrkaluzny.com/blog/how-to-optimize-seo-with-gatsby-netlify?utm_source=GitHub&utm_medium=henlo-gatsby)
+- [Full text search with Gatsby & Netlify CMS](https://mrkaluzny.com/blog/full-text-search-with-gatsby-and-netlify-cms?utm_source=GitHub&utm_medium=henlo-gatsby)