feat(docz-theme-default): add edit button for document (#180)

* feat(docz-core): add link property on Entry
* fix(docz-core): adjust default arguments
* feat(docz-theme-default): add edit page button on Page
* chore(docz-theme-default): some css adjustments

packages/docz-core/package.json

@@ -47,8 +47,10 @@
     "express": "^4.16.3",
     "fast-glob": "^2.2.2",
     "file-loader": "^1.1.11",
+    "find-up": "^3.0.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "fs-extra": "^7.0.0",
+    "get-pkg-repo": "^2.0.0",
     "happypack": "^5.0.0",
     "html-webpack-plugin": "^3.2.0",
     "humanize-string": "^1.0.2",

packages/docz-core/src/Entries.tsx

@@ -1,6 +1,6 @@
+import * as path from 'path'
 import * as fs from 'fs-extra'
 import * as glob from 'fast-glob'
-import * as path from 'path'
 
 import * as paths from './config/paths'
 import { touch, compiled } from './utils/fs'
@@ -9,6 +9,7 @@ import { mapToObj } from './utils/helpers'
 import { Entry, EntryObj, parseMdx } from './Entry'
 import { Plugin } from './Plugin'
 import { Config } from './commands/args'
+import { repoInfo } from './utils/repo-info'
 
 const fromTemplates = (file: string) => path.join(paths.templates, file)
 
@@ -92,8 +93,10 @@ export class Entries {
 
   public all: Map<string, EntryObj>
   public get: () => Promise<EntryMap>
+  public repoUrl: string | null
 
   constructor(config: Config) {
+    this.repoUrl = repoInfo()
     this.all = new Map()
     this.get = async () => this.getMap(config)
   }
@@ -108,11 +111,14 @@ export class Entries {
 
     const createEntry = async (file: string) => {
       const ast = await parseMdx(file)
-      const { settings, ...entry } = new Entry(ast, file, src)
+      const entry = new Entry(ast, file, src)
+
+      if (this.repoUrl) entry.setLink(this.repoUrl)
+      const { settings, ...rest } = entry
 
       return {
         ...settings,
-        ...entry,
+        ...rest,
       }
     }
 

packages/docz-core/src/Entry.ts

@@ -61,6 +61,7 @@ const getHeadings = (ast: any): Heading[] => {
 export interface EntryObj {
   id: string
   filepath: string
+  link: string | null
   slug: string
   name: string
   route: string
@@ -75,6 +76,7 @@ export class Entry {
 
   public id: string
   public filepath: string
+  public link: string | null
   public slug: string
   public route: string
   public name: string
@@ -92,6 +94,7 @@ export class Entry {
 
     this.id = ulid()
     this.filepath = filepath
+    this.link = null
     this.slug = this.slugify(filepath)
     this.route = this.getRoute(parsed)
     this.name = name
@@ -101,15 +104,19 @@ export class Entry {
     this.settings = parsed
   }
 
+  public setLink(url: string): void {
+    this.link = `${url}/${this.filepath}`
+  }
+
   private getFilepath(file: string, src: string): string {
     const srcPath = path.resolve(paths.root, src)
-    const relativePath = path.relative(srcPath, file)
+    const filepath = path.relative(srcPath, file)
 
     if (process.platform === 'win32') {
-      return relativePath.split('\\').join('/')
+      return filepath.split('\\').join('/')
     }
 
-    return relativePath
+    return filepath
   }
 
   private getName(filepath: string, parsed: ParsedData): string {

packages/docz-core/src/commands/args.ts

@@ -72,7 +72,7 @@ export const args = (env: Env) => (yargs: any) => {
   yargs.positional('source', {
     alias: 'src',
     type: 'string',
-    default: getEnv('docz.source', '/'),
+    default: getEnv('docz.source', './'),
   })
   yargs.positional('files', {
     type: 'string',
@@ -139,14 +139,14 @@ export const args = (env: Env) => (yargs: any) => {
   })
   yargs.positional('hotPort', {
     type: 'number',
-    default: getEnv('docz.hot.port', 8089),
+    default: getEnv('docz.hot.port', 8088),
   })
   yargs.positional('websocketHost', {
     type: 'string',
     default: getEnv('docz.websocket.host', '127.0.0.1'),
   })
   yargs.positional('websocketPort', {
     type: 'number',
-    default: getEnv('docz.websocket.port', 8090),
+    default: getEnv('docz.websocket.port', 8089),
   })
 }

packages/docz-core/src/commands/dev.ts

@@ -14,8 +14,8 @@ export const dev = async (args: Config) => {
   const env = envDotProp.get('node.env')
   const config = loadConfig(args)
   const port = await detectPort(config.port)
-  const websocketPort = await detectPort(config.websocketPort)
   const hotPort = await detectPort(config.hotPort)
+  const websocketPort = await detectPort(config.websocketPort)
   const entries = new Entries(config)
 
   envDotProp.set(

packages/docz-core/src/config/paths.ts

@@ -28,6 +28,7 @@ export interface Paths {
   app: string
   appPublic: string
   appNodeModules: string
+  appPackageJson: string
   ownNodeModules: string
 
   getDist: (dest: string) => string
@@ -50,6 +51,7 @@ export const docz = resolveApp('.docz')
 export const app = path.resolve(docz, 'app/')
 export const appPublic = path.resolve(docz, 'public/')
 export const appNodeModules = resolveApp('node_modules')
+export const appPackageJson = resolveApp('package.json')
 export const ownNodeModules = resolveOwn('node_modules')
 
 export const getDist = (dest: string) => path.join(root, dest)

packages/docz-core/src/types.d.ts

@@ -5,7 +5,9 @@ declare module 'babylon'
 declare module 'babel-traverse'
 declare module 'env-dot-prop'
 declare module 'chokidar'
+declare module 'find-up'
 declare module 'humanize-string'
+declare module 'get-pkg-repo'
 declare module 'titleize'
 declare module 'unified'
 declare module 'strip-indent'

packages/docz-core/src/utils/repo-info.ts

@@ -0,0 +1,27 @@
+import * as path from 'path'
+import * as fs from 'fs-extra'
+import getPkgRepo from 'get-pkg-repo'
+import findup from 'find-up'
+
+import * as paths from '../config/paths'
+
+export const repoInfo = (): string | null => {
+  try {
+    const project = path.parse(findup.sync('.git')).dir
+    const relative = path.relative(project, paths.root)
+    const tree = path.join('/tree/master', relative)
+    const pkg = fs.readJsonSync(paths.appPackageJson)
+    const repo = getPkgRepo(pkg)
+
+    return (
+      repo &&
+      repo.browsetemplate
+        .replace('{domain}', repo.domain)
+        .replace('{user}', repo.user)
+        .replace('{project}', repo.project)
+        .replace('{/tree/committish}', tree)
+    )
+  } catch (err) {
+    return null
+  }
+}

packages/docz-theme-default/librc.js

@@ -8,6 +8,7 @@ const external = Object.keys(pkg.dependencies).concat([
   'polished/lib/color/darken',
   'react-syntax-highlighter/prism',
   'react-syntax-highlighter/prism-light',
+  'react-feather/dist/icons/edit-2',
   'react-feather/dist/icons/chevron-down',
   'react-feather/dist/icons/search',
   'react-feather/dist/icons/clipboard',

packages/docz-theme-default/src/components/ui/Button.tsx

@@ -1,13 +1,24 @@
+import * as React from 'react'
+import { SFC, ComponentType } from 'react'
 import styled from 'react-emotion'
 
-export const Button = styled('button')`
+const BaseButton = styled('button')`
   cursor: pointer;
   display: flex;
   align-items: center;
   outline: none;
   border: none;
 `
 
+interface ButtonProps {
+  as?: ComponentType | string
+}
+
+export const Button: SFC<ButtonProps> = ({
+  as: Component = BaseButton,
+  ...props
+}) => <Component {...props} />
+
 export const ButtonLink = styled(Button)`
   background: transparent;
 `

packages/docz-theme-default/src/components/ui/Page.tsx

@@ -1,33 +1,78 @@
 import * as React from 'react'
+import { SFC, Fragment } from 'react'
 import { PageProps, ThemeConfig } from 'docz'
-import { SFC } from 'react'
+import Edit from 'react-feather/dist/icons/edit-2'
 import styled from 'react-emotion'
 
+import { ButtonLink } from './Button'
 import { Sidebar, Main } from '../shared'
 
+const Wrapper = styled('div')`
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+  color: ${p => p.theme.colors.text};
+  background: ${p => p.theme.colors.background};
+`
+
 export const Container = styled('div')`
+  position: relative;
   margin: 0 auto;
   width: 960px;
   max-width: 100%;
   ${p => p.theme.mq(p.theme.styles.container)};
 `
 
-const Wrapper = styled('div')`
-  flex: 1;
-  height: 100%;
-  overflow-y: auto;
+const EditPage = styled(ButtonLink.withComponent('a'))`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  padding: 2px 8px;
+  margin: 8px;
+  border-radius: 3px;
+  border: 1px solid ${p => p.theme.colors.border};
+  opacity: 0.7;
+  transition: opacity 0.4s;
+  font-size: 13px;
   color: ${p => p.theme.colors.text};
-  background: ${p => p.theme.colors.background};
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  ${p =>
+    p.theme.mq({
+      top: [0, 10],
+      right: [0, 42],
+    })};
 `
 
-export const Page: SFC<PageProps> = ({ children, doc: { fullpage } }) => {
+const EditIcon = styled(Edit)`
+  margin-right: 5px;
+`
+
+export const Page: SFC<PageProps> = ({ children, doc: { link, fullpage } }) => {
+  const content = (
+    <Fragment>
+      {link && (
+        <EditPage href={link} target="_blank">
+          <EditIcon width={14} /> Edit page
+        </EditPage>
+      )}
+      {children}
+    </Fragment>
+  )
+
   return (
     <ThemeConfig>
       {config => (
         <Main config={config}>
           {!fullpage && <Sidebar />}
           <Wrapper>
-            {fullpage ? children : <Container>{children}</Container>}
+            {fullpage ? content : <Container>{content}</Container>}
           </Wrapper>
         </Main>
       )}

packages/docz-theme-default/src/components/ui/Pre.tsx

@@ -13,7 +13,7 @@ import copy from 'copy-text-to-clipboard'
 import { ButtonSwap } from './ButtonSwap'
 import { ButtonLink } from './Button'
 
-const TOP_PADDING = '25px'
+const TOP_PADDING = '15px'
 
 const PrismTheme = styled('pre')`
   ${p => p.theme.prismTheme};

packages/docz-theme-default/src/styles/index.ts

@@ -13,13 +13,13 @@ export const styles = {
     fontWeight: 600,
   },
   h2: {
-    margin: ['30px 0 20px', '50px 0 20px'],
+    margin: ['20px 0 20px', '35px 0 20px'],
     lineHeight: ['1.2em', '1.5em'],
     fontSize: [28, 32],
     fontWeight: 400,
   },
   h3: {
-    margin: '30px 0 20px',
+    margin: '25px 0 10px',
     fontSize: [22, 24],
     fontWeight: 400,
   },

packages/docz-theme-default/src/types.d.ts

@@ -1,6 +1,7 @@
 declare module 'copy-text-to-clipboard'
 declare module 'hotkeys-js'
 declare module 'react-breakpoints'
+declare module 'react-feather/dist/icons/edit-2'
 declare module 'react-feather/dist/icons/chevron-down'
 declare module 'react-feather/dist/icons/search'
 declare module 'react-feather/dist/icons/clipboard'

yarn.lock

@@ -6145,6 +6145,16 @@ get-pkg-repo@^1.0.0:
     parse-github-repo-url "^1.3.0"
     through2 "^2.0.0"
 
+get-pkg-repo@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-2.0.0.tgz#afe80c3370b2576bbe69aa78aedbfb96d2d025f1"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    meow "^3.3.0"
+    normalize-package-data "^2.3.0"
+    parse-github-repo-url "^1.3.0"
+    through2 "^2.0.0"
+
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"