From ef2c265575c3ef7a835e0e75715a684a1a05c70e Mon Sep 17 00:00:00 2001 From: timothyis Date: Tue, 24 Apr 2018 16:18:58 +0100 Subject: [PATCH 1/9] Fix content not displaying if npms.io is down --- components/Layout.js | 6 --- components/PluginInfo.js | 89 ++++++++++++++++++++++++++++++++-------- lib/get-plugin.js | 12 +++++- lib/gtag.js | 1 - pages/plugin.js | 7 +--- pages/source.js | 2 +- 6 files changed, 84 insertions(+), 33 deletions(-) diff --git a/components/Layout.js b/components/Layout.js index 407c8e57..b8e767fd 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -23,7 +23,6 @@ class Layout extends React.Component { componentWillReceiveProps(nextProps) { const { router } = nextProps - console.log(router.asPath) if (!/^\/search/.exec(router.asPath)) { this.setState({ searchQuery: null, @@ -64,11 +63,6 @@ class Layout extends React.Component { } render() { - console.log( - this.state && this.state.searchQuery, - this.props.query, - this.props.router - ) return (
diff --git a/components/PluginInfo.js b/components/PluginInfo.js index 27c4b5eb..444802b3 100644 --- a/components/PluginInfo.js +++ b/components/PluginInfo.js @@ -4,7 +4,30 @@ import InstallModal from './InstallModal' import GithubIcon from '../static/github-icon.svg' import * as gtag from '../lib/gtag' -export default class extends React.Component { +export const PluginInfoBar = ({ children }) => ( +
+ {children} + + +
+) + +export default class PluginInfo extends React.Component { constructor() { super() @@ -38,6 +61,51 @@ export default class extends React.Component { render() { const { plugin } = this.props + if (plugin && !plugin.collected) { + return ( + + + + + + We can't currently find information for this extension 😰 + +   + + View source code + + + Install + + + + + + ) + } + return ( -
+
-
+ ) } diff --git a/lib/get-plugin.js b/lib/get-plugin.js index 76b505aa..6c528984 100644 --- a/lib/get-plugin.js +++ b/lib/get-plugin.js @@ -1,9 +1,17 @@ import cachedFetch from './cached-json-fetch' import plugins from '../plugins.json' -export default async name => { - const result = await cachedFetch(`https://api.npms.io/v2/package/${name}`) +export default async (name, { meta = false } = { meta }) => { const plugin = plugins.find(plugin => plugin.name === name) + let result = {} + + if (!meta) { + try { + result = await cachedFetch(`https://api.npms.io/v2/package/${name}`) + } catch (err) { + console.error('Failed to recieve package information from npms.io', err) + } + } return { ...result, diff --git a/lib/gtag.js b/lib/gtag.js index ab22eb7d..a0180d11 100644 --- a/lib/gtag.js +++ b/lib/gtag.js @@ -7,7 +7,6 @@ export const pageview = url => { } export const event = ({ action, category, label, value }) => { - console.log(action, category, label, value) window.gtag('event', action, { event_category: category, event_label: label, diff --git a/pages/plugin.js b/pages/plugin.js index 4aeae809..1ad1e949 100644 --- a/pages/plugin.js +++ b/pages/plugin.js @@ -62,11 +62,8 @@ export default class extends React.Component { {typeof window === 'object' ? ( ) : null} - - + +
diff --git a/pages/source.js b/pages/source.js index cf8f9144..50309464 100644 --- a/pages/source.js +++ b/pages/source.js @@ -15,7 +15,7 @@ export default class extends React.Component { let plugin, pluginContents try { - plugin = await getPackageInfo(id) + plugin = await getPackageInfo(id, { meta: true }) pluginContents = await cachedFetch( `https://unpkg.com/${id}@latest/?meta`, {}, From 4c8e8e0390d8bd9a0d050cada5db71c9118a36cf Mon Sep 17 00:00:00 2001 From: timothyis Date: Tue, 24 Apr 2018 16:51:07 +0100 Subject: [PATCH 2/9] Only try to load plugin data from npms where needed --- components/PluginInfo.js | 56 ++++++++++++++++++++++++++++------------ pages/plugin.js | 15 +++-------- 2 files changed, 43 insertions(+), 28 deletions(-) diff --git a/components/PluginInfo.js b/components/PluginInfo.js index 444802b3..a5d88f4d 100644 --- a/components/PluginInfo.js +++ b/components/PluginInfo.js @@ -2,6 +2,7 @@ import Gravatar from 'react-gravatar' import Link from 'next/link' import InstallModal from './InstallModal' import GithubIcon from '../static/github-icon.svg' +import getPluginInfo from '../lib/get-plugin.js' import * as gtag from '../lib/gtag' export const PluginInfoBar = ({ children }) => ( @@ -32,13 +33,28 @@ export default class PluginInfo extends React.Component { super() this.state = { - isModalOpen: false + isModalOpen: false, + isPluginLoading: true } this.openInstallModal = this.openInstallModal.bind(this) this.closeInstallModal = this.closeInstallModal.bind(this) } + async componentDidMount() { + const plugin = await getPluginInfo(this.props.plugin.name) + + if (plugin !== undefined) { + await this.setState({ + plugin + }) + } + + this.setState({ + isPluginLoading: false + }) + } + openInstallModal() { gtag.event({ action: 'Opened install modal', @@ -61,23 +77,27 @@ export default class PluginInfo extends React.Component { render() { const { plugin } = this.props - if (plugin && !plugin.collected) { + if (this.state && (!this.state.plugin || !this.state.plugin.collected)) { return ( - - We can't currently find information for this extension 😰 - + {this.state.isPluginLoading ? ( + Loading plugin information... + ) : ( + + We can't currently find information for this extension 😰 + + )}   View source code @@ -118,35 +138,37 @@ export default class PluginInfo extends React.Component {
- {plugin.collected.metadata.publisher.username} + + {this.props.plugin.collected.metadata.publisher.username} +
- {plugin.collected.npm.downloads[2].count.toLocaleString()} downloads - in the last month + {this.props.plugin.collected.npm.downloads[2].count.toLocaleString()}{' '} + downloads in the last month - {plugin.collected.metadata.links.repository && ( + {this.props.plugin.collected.metadata.links.repository && ( )} View source code
- Version {plugin.collected.metadata.version} + Version {this.props.plugin.collected.metadata.version}
diff --git a/pages/plugin.js b/pages/plugin.js index 1ad1e949..f60029f4 100644 --- a/pages/plugin.js +++ b/pages/plugin.js @@ -10,17 +10,13 @@ export default class extends React.Component { static async getInitialProps({ query: { id } }) { let plugin - try { - plugin = await getPluginInfo(id) - } catch (err) { - console.error(err) - } + plugin = await getPluginInfo(id, { meta: true }) - if (!plugin.meta || (plugin.code && plugin.code === 'NOT_FOUND')) { + if (!plugin.meta) { return {} } - return { plugin } + return { plugin: plugin.meta } } render() { @@ -45,10 +41,7 @@ export default class extends React.Component { ) } - const pluginInfo = - this.props.plugin && this.props.plugin.meta - ? this.props.plugin.meta - : null + const pluginInfo = this.props.plugin return ( From 4056c0f7a7c478d1b688f5c02959acce7f203eea Mon Sep 17 00:00:00 2001 From: timothyis Date: Tue, 24 Apr 2018 20:29:04 +0100 Subject: [PATCH 3/9] Fix install modal --- components/PluginInfo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/PluginInfo.js b/components/PluginInfo.js index a5d88f4d..1e862560 100644 --- a/components/PluginInfo.js +++ b/components/PluginInfo.js @@ -60,7 +60,7 @@ export default class PluginInfo extends React.Component { action: 'Opened install modal', category: 'plugin', label: 'open_install_modal', - value: this.props.plugin.meta.name + value: this.props.plugin.name }) this.setState({ @@ -129,7 +129,7 @@ export default class PluginInfo extends React.Component { return ( From 3672992f4752f0077aa83c0050d3644362ec8c4e Mon Sep 17 00:00:00 2001 From: timothyis Date: Tue, 24 Apr 2018 20:42:11 +0100 Subject: [PATCH 4/9] 1.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bd8081f4..2650cf52 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "hyper-site", "private": true, - "version": "1.1.2", + "version": "1.2.0", "description": "The official website for the Hyper terminal", "repository": "zeit/hyper-site", "license": "MIT", From de872415c6bae21d7016d6db0646b6eca3d8ff36 Mon Sep 17 00:00:00 2001 From: Nikola Ristic Date: Tue, 24 Apr 2018 23:26:39 +0200 Subject: [PATCH 5/9] Auto select install code iwhen InstallModal opens (#38) --- components/InstallModal.js | 11 ++++++++++- lib/select-text.js | 18 ++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 lib/select-text.js diff --git a/components/InstallModal.js b/components/InstallModal.js index cc2f9369..58834f5f 100644 --- a/components/InstallModal.js +++ b/components/InstallModal.js @@ -1,3 +1,5 @@ +import selectText from '../lib/select-text' + export default class extends React.Component { componentDidUpdate(prevProps) { if (prevProps.isOpen === this.props.isOpen) { @@ -8,6 +10,7 @@ export default class extends React.Component { if (this.props.isOpen === true) { body.classList.add('has-modal-open') + selectText(this.installCode) } else { body.classList.remove('has-modal-open') } @@ -26,7 +29,13 @@ export default class extends React.Component { Use the hyper command, bundled with your Hyper app, to install {this.props.name} by entering the following into Hyper:

- 
hyper i {this.props.name}
+ 
 {
+              this.installCode = pre
+            }}
+          >
+            hyper i {this.props.name}
+
Date: Tue, 24 Apr 2018 22:35:23 +0100 Subject: [PATCH 6/9] Add hyper-oceanic-next theme (#44) --- plugins.json | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/plugins.json b/plugins.json index e6005dd4..6fd36027 100644 --- a/plugins.json +++ b/plugins.json @@ -266,5 +266,20 @@ "#b3b0d6" ], "dateAdded": "1524007869655" + }, + { + "name": "hyper-oceanic-next", + "description": "Oceanic Next theme for Hyper", + "type": "theme", + "preview": "https://user-images.githubusercontent.com/2156395/39155663-d2a2c972-474a-11e8-9dc4-59e52ab0365f.png", + "colors": [ + "#ec5f67", + "#99c794", + "#fac863", + "#6699cc", + "#c594c5", + "#5fb3b3" + ], + "dateAdded": "1524521526149" } ] From ccbb86d52f6bedc0a4f7892994d7918c842fe8da Mon Sep 17 00:00:00 2001 From: timothyis Date: Wed, 25 Apr 2018 05:42:10 +0100 Subject: [PATCH 7/9] Fix bug when trying to access props instead of state --- components/PluginInfo.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/PluginInfo.js b/components/PluginInfo.js index 1e862560..70e8623d 100644 --- a/components/PluginInfo.js +++ b/components/PluginInfo.js @@ -138,37 +138,37 @@ export default class PluginInfo extends React.Component {
- {this.props.plugin.collected.metadata.publisher.username} + {this.state.plugin.collected.metadata.publisher.username}
- {this.props.plugin.collected.npm.downloads[2].count.toLocaleString()}{' '} + {this.state.plugin.collected.npm.downloads[2].count.toLocaleString()}{' '} downloads in the last month - {this.props.plugin.collected.metadata.links.repository && ( + {this.state.plugin.collected.metadata.links.repository && ( )} View source code
- Version {this.props.plugin.collected.metadata.version} + Version {this.state.plugin.collected.metadata.version}
From 4a91a8b9c9ec181bb788b3e1b60c7fdcc870fc87 Mon Sep 17 00:00:00 2001 From: timothyis Date: Wed, 25 Apr 2018 09:21:55 +0100 Subject: [PATCH 8/9] Update readme --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index 2e0ee82a..e4a4ed01 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,22 @@ [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/hyper) The official website for the Hyper terminal + +## Contribution + +Want to submit a plugin or theme to the Hyper Store? Follow [this wiki guide](https://github.com/zeit/hyper-site/wiki/Submitting-a-new-plugin-or-theme-to-Hyper-Store). + +To submit a feature, bug fix, or enhancement to the Hyper website proceed as follows: + +1. Clone this repo +2. Within your terminal, run `yarn` to install the dependencies +3. Once the dependencies are installed, run `yarn dev` to start the dev server on `localhost:3000` + +We really appreciate any contribution + +## Related Repositories + +- [Hyper](https://github.com/zeit/hyper) +- [Sample Plugin](https://github.com/zeit/hyperpower) +- [Sample Theme](https://github.com/zeit/hyperyellow) + From 318c5b2892fc74124eca896fa3acefb250cf1d58 Mon Sep 17 00:00:00 2001 From: Neil Orans Date: Wed, 25 Apr 2018 04:24:35 -0400 Subject: [PATCH 9/9] Add hyper-savetext to Hyper store (#29) * Add hyperterm-savetext to Hyper store This updated pull request has a preview image with 1200x800 dimensions * Update background image and plugin name --- plugins.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/plugins.json b/plugins.json index 6fd36027..404aaac9 100644 --- a/plugins.json +++ b/plugins.json @@ -281,5 +281,12 @@ "#5fb3b3" ], "dateAdded": "1524521526149" + }, + { + "name": "hyper-savetext", + "description": "Save text from your Hyper terminal to a file", + "type": "plugin", + "preview": "https://raw.githubusercontent.com/neil-orans/hyper-savetext/master/screenshots/hyperstore-bg-image.png", + "dateAdded": "1524611024916" } ]