From 78a19f65ba83cabb8effecb50d3a6819ad9ddec1 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Sun, 12 Aug 2018 02:10:10 -0300 Subject: [PATCH] feat: add github repository link --- packages/docz-core/src/Entries.ts | 8 +-- packages/docz-core/src/states/config.ts | 4 ++ packages/docz-core/src/utils/repo-info.ts | 48 +++++++++----- .../components/shared/GithubLink/index.tsx | 66 +++++++++++++++++++ .../src/components/shared/index.ts | 1 + .../src/components/ui/Page.tsx | 6 +- packages/docz/src/state.ts | 1 + 7 files changed, 113 insertions(+), 21 deletions(-) create mode 100644 packages/docz-theme-default/src/components/shared/GithubLink/index.tsx diff --git a/packages/docz-core/src/Entries.ts b/packages/docz-core/src/Entries.ts index c0c028216..a79c1ccda 100644 --- a/packages/docz-core/src/Entries.ts +++ b/packages/docz-core/src/Entries.ts @@ -9,7 +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' +import { getRepoEditUrl } from './utils/repo-info' const DEFAULT_IGNORE = [ '!**/node_modules/**', @@ -68,10 +68,10 @@ export class Entries { public all: Map public get: () => Promise - public repoUrl: string | null + public repoEditUrl: string | null constructor(config: Config) { - this.repoUrl = repoInfo(config.src) + this.repoEditUrl = getRepoEditUrl(config.src) this.all = new Map() this.get = async () => this.getMap(config) } @@ -93,7 +93,7 @@ export class Entries { const ast = await parseMdx(file) const entry = new Entry(ast, file, src) - if (this.repoUrl) entry.setLink(this.repoUrl) + if (this.repoEditUrl) entry.setLink(this.repoEditUrl) const { settings, ...rest } = entry return { diff --git a/packages/docz-core/src/states/config.ts b/packages/docz-core/src/states/config.ts index 5f2725a42..03b146a5d 100644 --- a/packages/docz-core/src/states/config.ts +++ b/packages/docz-core/src/states/config.ts @@ -6,6 +6,7 @@ import get from 'lodash.get' import { Params, State } from '../DataServer' import { Config, ThemeConfig } from '../commands/args' +import { getRepoUrl } from '../utils/repo-info' import * as paths from '../config/paths' interface Payload { @@ -14,10 +15,12 @@ interface Payload { ordering: string themeConfig: ThemeConfig version: string | null + repository: string | null } const getInitialConfig = (config: Config): Payload => { const pkg = fs.readJsonSync(paths.appPackageJson, { throws: false }) + const repoUrl = getRepoUrl() return { title: config.title, @@ -25,6 +28,7 @@ const getInitialConfig = (config: Config): Payload => { themeConfig: config.themeConfig, ordering: config.ordering, version: get(pkg, 'version'), + repository: repoUrl, } } diff --git a/packages/docz-core/src/utils/repo-info.ts b/packages/docz-core/src/utils/repo-info.ts index 2b5824725..35648936f 100644 --- a/packages/docz-core/src/utils/repo-info.ts +++ b/packages/docz-core/src/utils/repo-info.ts @@ -5,24 +5,42 @@ import findup from 'find-up' import * as paths from '../config/paths' -export const repoInfo = (src: string | './'): string | null => { +// TODO: type repo object returned from get-pkg-repo +export const parseRepo = (): any => { try { - const project = path.parse(findup.sync('.git')).dir - const root = path.join(paths.root, src) - const relative = path.relative(project, 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) - ) + return getPkgRepo(pkg) } catch (err) { return null } } + +export const getRepoUrl = () => { + const repo = parseRepo() + + return ( + repo && + repo.browsetemplate + .replace('{domain}', repo.domain) + .replace('{user}', repo.user) + .replace('{project}', repo.project) + .replace('{/tree/committish}', '') + ) +} + +export const getRepoEditUrl = (src: string): string | null => { + const project = path.parse(findup.sync('.git')).dir + const root = path.join(paths.root, src) + const relative = path.relative(project, root) + const tree = path.join('/edit/master', relative) + const repo = parseRepo() + + return ( + repo && + repo.browsetemplate + .replace('{domain}', repo.domain) + .replace('{user}', repo.user) + .replace('{project}', repo.project) + .replace('{/tree/committish}', tree) + ) +} diff --git a/packages/docz-theme-default/src/components/shared/GithubLink/index.tsx b/packages/docz-theme-default/src/components/shared/GithubLink/index.tsx new file mode 100644 index 000000000..8698c33ed --- /dev/null +++ b/packages/docz-theme-default/src/components/shared/GithubLink/index.tsx @@ -0,0 +1,66 @@ +import * as React from 'react' +import { SFC } from 'react' +import styled, { keyframes } from 'react-emotion' + +const octocatWave = keyframes` + 0%, 100% { + transform: rotate(0); + } + 20%, 60% { + transform: rotate(-25deg); + } + 40%, 80% { + transform: rotate(10deg); + } +` + +const Link = styled('a')` + &:hover .octo-arm { + animation: ${octocatWave} 560ms ease-in-out; + } + + & .octo-arm { + transform-origin: 130px 106px; + } + + @media screen and (max-width: 500px) { + &:hover .octo-arm { + animation: none; + } + & .octo-arm { + animation: ${octocatWave} 560ms ease-in-out; + } + } +` + +const Svg = styled('svg')` + z-index: 99; + fill: ${p => p.theme.docz.colors.primary}; + color: ${p => p.theme.docz.colors.background}; + position: absolute; + top: 0; + border: 0; + right: 0; +` + +interface GithubLinkProps { + repository: string +} + +export const GithubLink: SFC = ({ repository }) => ( + + + +) diff --git a/packages/docz-theme-default/src/components/shared/index.ts b/packages/docz-theme-default/src/components/shared/index.ts index 72ae36059..26b9ac204 100644 --- a/packages/docz-theme-default/src/components/shared/index.ts +++ b/packages/docz-theme-default/src/components/shared/index.ts @@ -1,2 +1,3 @@ +export { GithubLink } from './GithubLink' export { Sidebar } from './Sidebar' export { Main } from './Main' diff --git a/packages/docz-theme-default/src/components/ui/Page.tsx b/packages/docz-theme-default/src/components/ui/Page.tsx index 3ffb16f73..3693a81ac 100644 --- a/packages/docz-theme-default/src/components/ui/Page.tsx +++ b/packages/docz-theme-default/src/components/ui/Page.tsx @@ -6,7 +6,7 @@ import Edit from 'react-feather/dist/icons/edit-2' import styled from 'react-emotion' import { ButtonLink } from './Button' -import { Sidebar, Main } from '../shared' +import { GithubLink, Sidebar, Main } from '../shared' const Wrapper = styled('div')` flex: 1; @@ -46,6 +46,7 @@ const EditPage = styled(ButtonLink.withComponent('a'))` ${p => p.theme.docz.mq({ + visibility: ['hidden', 'hidden', 'visible'], top: [0, -60, 10], right: [0, 0, 32], })}; @@ -73,8 +74,9 @@ export const Page: SFC = ({ return ( - {config => ( + {({ repository, ...config }) => (
+ {repository && } {!fullpage && } {fullpage ? content : {content}} diff --git a/packages/docz/src/state.ts b/packages/docz/src/state.ts index 1f7e26040..ce8df65e6 100644 --- a/packages/docz/src/state.ts +++ b/packages/docz/src/state.ts @@ -40,6 +40,7 @@ export interface Config { ordering: string themeConfig: ThemeConfig version: string | null + repository: string | null } type Import = () => Promise