Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/configinlink #1146

Merged
merged 17 commits into from
Apr 10, 2018
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,15 @@

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/cms.css"/>
<!--
Netlify CMS will automatically look for a "config.yml" file in the same directory
as this "index.html", but you can override this by providing a link tag like this
one:

<link href="path/to/config.yml" type="text/yaml" rel="cms-config-url">
-->


<script>
window.repoFiles = {
_posts: {
Expand Down
13 changes: 11 additions & 2 deletions src/actions/config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import yaml from "js-yaml";
import { Map, List, fromJS } from "immutable";
import { trimStart, flow, isBoolean } from "lodash";
import { trimStart, flow, isBoolean, get } from "lodash";
import { authenticateUser } from "Actions/auth";
import * as publishModes from "Constants/publishModes";

Expand All @@ -9,6 +9,13 @@ export const CONFIG_SUCCESS = "CONFIG_SUCCESS";
export const CONFIG_FAILURE = "CONFIG_FAILURE";
export const CONFIG_MERGE = "CONFIG_MERGE";

const getConfigUrl = () => {
const validTypes = { 'text/yaml': 'yaml', 'application/x-yaml': 'yaml' };
const configLink = document.querySelector('link[rel="cms-config-url"]');
const isValidType = link => link && validTypes[link.type];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we're going to crash if there's no matching link element by attempting to access property "type" of null.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@erquhart doesn't link && validTypes[link.type] short circuit to false when link is null?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤦‍♂️🤦‍♂️🤦‍♂️

Disregard!

return isValidType(configLink) ? get(configLink, 'href') : 'config.yml';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This returns an empty path for the default if the user supplies a link without an href. It really should return 'config.yml' on any invalid form of the link.

Copy link
Collaborator

@talves talves Apr 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Proposed:

const getConfigUrl = () => {
  const validTypes = { 'text/yaml': 'yaml', 'application/x-yaml': 'yaml' };
  const configLinkEl = document.querySelector('link[rel="cms-config-url"]');
  const isValidLink = configLinkEl && validTypes[configLinkEl.type] && get(configLinkEl, 'href');
  if (isValidLink) {
    console.log(`Using config file path: "${configUrl}"`);
    return get(configLinkEl, 'href');
  }
  return 'config.yml';
}

}

const defaults = {
publish_mode: publishModes.SIMPLE,
};
Expand Down Expand Up @@ -130,7 +137,9 @@ export function loadConfig() {

try {
const preloadedConfig = getState().config;
const loadedConfig = await getConfig('config.yml', preloadedConfig && preloadedConfig.size > 1);
const configUrl = getConfigUrl();
console.log(`Netlify CMS using config file: "${configUrl}"`);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should clarify this a little further. Also, maybe only show it if the link exists since the default behavior is already known. So, this console.log would move into the getConfigUrl function. That way when debugging we know the link was used rather than default. Not detrimental though, just a thought.

Using config file path: "${configUrl}"

Probably don't need to specify Netilify CMS since we already print a version on page load showing Netlify CMS

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@talves Awesome! Made the changes!

const loadedConfig = await getConfig(configUrl, preloadedConfig && preloadedConfig.size > 1);

/**
* Merge any existing configuration so the result can be validated.
Expand Down
8 changes: 8 additions & 0 deletions website/site/content/docs/configuration-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@ position: 23

All configuration options for Netlify CMS are specified in the `config.yml` file, in the folder where you access the editor UI (usually in the `/admin` folder).

Alternatively, you can specify a custom config file using a link tag:

```html
<!-- Note the "type" and "rel" attribute values, which are required. -->

<link href="path/to/config.yml" type="text/yaml" rel="cms-config-url">
```

To see working configuration examples, you can [start from a template](https://www.netlifycms.org/docs/start-with-a-template) or check out the [CMS demo site](https://cms-demo.netlify.com). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/netlify/netlify-cms/blob/master/example/config.yml) to see how each option was configured.

You can find details about all configuration options below. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.
Expand Down