docs(plugins): add a plugin for collect sources of examples (#2986)

docs(plugins): add a plugin for collect sources of examples

.gitignore

@@ -9,6 +9,7 @@ coverage/
 dist/
 docs/src/componentInfo
 docs/src/componentMenu.json
+docs/src/exampleSources.json
 docs/src/exampleMenus
 docs/dist/
 dll/

.prettierignore

@@ -11,6 +11,7 @@ dist/
 dll/
 docs/src/componentInfo
 docs/src/componentMenu.json
+docs/src/exampleSources.json
 docs/src/exampleMenus
 docs/dist/
 

gulp/plugins/gulp-example-source.js

@@ -0,0 +1,52 @@
+import Vinyl from 'vinyl'
+import gutil from 'gulp-util'
+import _ from 'lodash'
+import path from 'path'
+import through from 'through2'
+
+const pluginName = 'gulp-example-source'
+
+export default () => {
+  const exampleSources = {}
+
+  function bufferContents(file, enc, cb) {
+    if (file.isNull()) {
+      cb(null, file)
+      return
+    }
+
+    if (file.isStream()) {
+      cb(new gutil.PluginError(pluginName, 'Streaming is not supported'))
+      return
+    }
+
+    try {
+      const sourceName = _
+        .split(file.path, path.sep)
+        .slice(-4)
+        .join('/')
+        .slice(0, -3)
+
+      exampleSources[sourceName] = file.contents.toString()
+      cb()
+    } catch (err) {
+      const pluginError = new gutil.PluginError(pluginName, err)
+      pluginError.message += `\nFile: ${file.path}.`
+      this.emit('error', pluginError)
+      // eslint-disable-next-line no-console
+      console.log(err)
+    }
+  }
+
+  function endStream(cb) {
+    const file = new Vinyl({
+      path: './exampleSources.json',
+      contents: Buffer.from(JSON.stringify(exampleSources, null, 2)),
+    })
+
+    this.push(file)
+    cb()
+  }
+
+  return through.obj(bufferContents, endStream)
+}

gulp/tasks/docs.js

@@ -12,6 +12,7 @@ import sh from '../sh'
 import config from '../../config'
 import gulpComponentMenu from '../plugins/gulp-component-menu'
 import gulpExampleMenu from '../plugins/gulp-example-menu'
+import gulpExampleSources from '../plugins/gulp-example-source'
 import gulpReactDocgen from '../plugins/gulp-react-docgen'
 
 const { paths } = config
@@ -40,13 +41,18 @@ task('clean:docs:example-menus', (cb) => {
   rimraf(paths.docsSrc('exampleMenus'), cb)
 })
 
+task('clean:docs:example-sources', (cb) => {
+  rimraf(paths.docsSrc('exampleSources.json'), cb)
+})
+
 task(
   'clean:docs',
   parallel(
     'clean:docs:component-info',
     'clean:docs:component-menu',
     'clean:docs:dist',
     'clean:docs:example-menus',
+    'clean:docs:example-sources',
   ),
 )
 
@@ -64,7 +70,8 @@ const componentsSrc = [
   '!**/index.js',
 ]
 
-const examplesSrc = `${paths.docsSrc()}/examples/*/*/*/index.js`
+const examplesSectionsSrc = `${paths.docsSrc()}/examples/*/*/*/index.js`
+const examplesSrc = `${paths.docsSrc()}/examples/*/*/*/!(*index).js`
 
 task('build:docs:cname', (cb) => {
   sh(`echo react.semantic-ui.com > ${paths.docsDist('CNAME')}`, cb)
@@ -83,14 +90,25 @@ task('build:docs:component-menu', () =>
 )
 
 task('build:docs:example-menu', () =>
-  src(examplesSrc, { since: lastRun('build:docs:example-menu') })
+  src(examplesSectionsSrc, { since: lastRun('build:docs:example-menu') })
     .pipe(gulpExampleMenu())
     .pipe(dest(paths.docsSrc('exampleMenus'))),
 )
 
+task('build:docs:example-sources', () =>
+  src(examplesSrc, { since: lastRun('build:docs:example-sources') })
+    .pipe(gulpExampleSources())
+    .pipe(dest(paths.docsSrc())),
+)
+
 task(
   'build:docs:json',
-  parallel('build:docs:docgen', 'build:docs:component-menu', 'build:docs:example-menu'),
+  parallel(
+    'build:docs:docgen',
+    'build:docs:component-menu',
+    'build:docs:example-menu',
+    'build:docs:example-sources',
+  ),
 )
 
 task('build:docs:html', () => src(paths.docsSrc('404.html')).pipe(dest(paths.docsDist())))
@@ -195,7 +213,10 @@ task('watch:docs', (cb) => {
   watch(componentsSrc, series('build:docs:docgen')).on('change', handleWatchChange)
 
   // rebuild example menus
-  watch(examplesSrc, series('build:docs:example-menu')).on('change', handleWatchChange)
+  watch(examplesSectionsSrc, series('build:docs:example-menu')).on('change', handleWatchChange)
+
+  // rebuild example sources
+  watch(examplesSrc, series('build:docs:example-sources')).on('change', handleWatchChange)
 
   // rebuild images
   watch(`${config.paths.docsPublic()}/**/*.{png,jpg,gif}`, series('build:docs:images')).on(