Repository: styleguidist/react-styleguidist
Pull request #580 (2017-08-16 18:30:33)

More explicit detail and grammar
Just trying to figure out styling and figured it might help...

codecov-io: # [Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/pull/580?src=pr&el=h1) Report
> Merging [#580](https://codecov.io/gh/styleguidist/react-styleguidist/pull/580?src=pr&el=desc) into [master](https://codecov.io/gh/styleguidist/react-styleguidist/commit/3ed8d351dc33b907d95045433a455aee8eac95b9?src=pr&el=desc) will **not change** coverage.
> The diff coverage is `n/a`.

[![Impacted file tree graph](https://codecov.io/gh/styleguidist/react-styleguidist/pull/580/graphs/tree.svg?height=150&width=650&src=pr&token=Z1XExpSVLu)](https://codecov.io/gh/styleguidist/react-styleguidist/pull/580?src=pr&el=tree)

```diff
@@           Coverage Diff           @@
##           master     #580   +/-   ##
=======================================
  Coverage   96.19%   96.19%           
=======================================
  Files          99       99           
  Lines        1315     1315           
  Branches      271      271           
=======================================
  Hits         1265     1265           
  Misses         49       49           
  Partials        1        1
```



------

[Continue to review full report at Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/pull/580?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/pull/580?src=pr&el=footer). Last update [3ed8d35...821b64e](https://codecov.io/gh/styleguidist/react-styleguidist/pull/580?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/docs/Configuration.md b/docs/Configuration.md
index f6e26348..000c80ef 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -383,10 +383,10 @@ Function that modifies code example (Markdown fenced code block). For example yo
 
 ```javascript
 module.exports = {
-  updateExample: function(props) {
+  updateExample: function(props, exampleFilePath) {
     const { settings, lang } = props;
     if (typeof settings.file === 'string') {
-      const filepath = settings.file;
+      const filepath = path.resolve(exampleFilePath, settings.file);
       delete settings.file;
       return {
         content: fs.readFileSync(filepath),
diff --git a/docs/Cookbook.md b/docs/Cookbook.md
index af4c544a..85b405b1 100644
--- a/docs/Cookbook.md
+++ b/docs/Cookbook.md
@@ -75,7 +75,13 @@ See the [Preact example style guide](https://github.com/styleguidist/react-style
 
 ## How to change styles of a style guide?
 
-Use config option [theme](Configuration.md#theme) to change fonts, colors, etc. and option [styles](Configuration.md#styles) to tweak style of particular Styleguidist’s components:
+There are two config options to change your style guide UI: [theme](Configuration.md#theme) and [styles](Configuration.md#styles).
+
+Use [theme](Configuration.md#theme) to change fonts, colors, etc.
+
+Use [styles](Configuration.md#styles) to tweak the style of any particular Styleguidist component.
+
+As an example:
 
 ```javascript
 module.exports = {
diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md
index 28a26cf4..c3d2558a 100644
--- a/docs/GettingStarted.md
+++ b/docs/GettingStarted.md
@@ -2,7 +2,13 @@
 
 ## 1. Install Styleguidist
 
-Install Styleguidist from npm:
+Install webpack if you don’t have it already and not using Create React App:
+
+```bash
+npm install --save-dev webpack
+```
+
+Install Styleguidist:
 
 ```bash
 npm install --save-dev react-styleguidist
diff --git a/loaders/examples-loader.js b/loaders/examples-loader.js
index 0c0783c5..6f29db3d 100644
--- a/loaders/examples-loader.js
+++ b/loaders/examples-loader.js
@@ -27,8 +27,11 @@ function examplesLoader(source) {
 		source = expandDefaultComponent(source, query.componentName);
 	}
 
+	const updateExample = config.updateExample
+		? props => config.updateExample(props, this.resourcePath)
+		: undefined;
 	// Load examples
-	const examples = chunkify(source, config.updateExample);
+	const examples = chunkify(source, updateExample);
 
 	// We're analysing the examples' source code to figure out the require statements. We do it manually with regexes,
 	// because webpack unfortunately doesn't expose its smart logic for rewriting requires


Test patch:
diff --git a/loaders/__tests__/examples-loader.spec.js b/loaders/__tests__/examples-loader.spec.js
index d170e6b1..0b1e9ad0 100644
--- a/loaders/__tests__/examples-loader.spec.js
+++ b/loaders/__tests__/examples-loader.spec.js
@@ -63,15 +63,19 @@ it('should pass updateExample function from config to chunkify', () => {
 	examplesLoader.call(
 		{
 			query: '?componentName=FooComponent',
+			resourcePath: '/path/to/foo/examples/file',
 			_styleguidist: {
 				updateExample,
 			},
 		},
 		exampleMarkdown
 	);
-	expect(updateExample).toBeCalledWith({
-		content: '<h1>Hello world!</h2>',
-		settings: { static: true },
-		lang: 'jsx',
-	});
+	expect(updateExample).toBeCalledWith(
+		{
+			content: '<h1>Hello world!</h2>',
+			settings: { static: true },
+			lang: 'jsx',
+		},
+		'/path/to/foo/examples/file'
+	);
 });