Skip to content

Get gist from url #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Get gist from url #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e240d35
get file from url
hipstersmoothie Jun 11, 2018
8897e04
update readme
hipstersmoothie Jun 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,32 @@ React.render(
);
```

Gist from URL:

***NOTE: File cannot be parse from the URL. Supply as separate property.***
Copy link
Owner

@tleunen tleunen Jun 22, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason to this?
I'd say it would be best to get the filename from the url as well.

From a use case perspective, would a user know the url without the file, or everything at once? Like the following url: https://gist.github.com/ringods/5995ea726914f280afb3#file-chef-dockerfile

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @tleunen,

I think it's because you can’t extract the filename from the URL as he said.

As example, by parsing the filename from the url https://gist.github.com/ringods/5995ea726914f280afb3#file-chef-dockerfile, we would get file-chef-dockerfile or maybe chef-dockerfile instead of the real filename which is Chef-Dockerfile.

So, if someone needs to get the real filename on the iframe#id, I think this developer would have to use the Gist#file property.

What do you think?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @tleunen, any news? :/


```js
var React = require('react');
var Gist = require('react-gist');

React.render(
<Gist url='https://gist.github.com/ringods/5995ea726914f280afb3' file='Chef-Dockerfile' />,
document.body
);
```

## Usage

### `<Gist id={string} file={string} />`

- `id` {string} Id of the gist
- `file` {string} Name of a specific file in a multi-file gist

### `<Gist url={string} file={string} />`

- `url` {string} URL of the gist
- `file` {string} Name of a specific file in a multi-file gist

## License

MIT, see [LICENSE.md](http://github.com/tleunen/react-gist/blob/master/LICENSE.md) for details.
4 changes: 4 additions & 0 deletions demo/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ class Demo extends Component {
setTimeout(() => {
this.setState({id: '5995ea726914f280afb3', file: 'Chef-Dockerfile'});
}, 5000);

setTimeout(() => {
this.setState({id: null, file: null, url: 'https://gist.github.com/ringods/5995ea726914f280afb3'});
}, 10000);
}

render() {
Expand Down
10 changes: 8 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import url from 'url';
import React from 'react';
import PropTypes from 'prop-types';

Expand All @@ -11,7 +12,12 @@ class Gist extends React.PureComponent {
}

_defineUrl() {
const { id, file } = this.props;
let { id, file, url } = this.props;

if (url) {
const gistUrl = new URL(url);
id = gistUrl.pathname.split('/')[2];
}

const fileArg = file ? `?file=${file}` : '';

Expand All @@ -27,7 +33,7 @@ class Gist extends React.PureComponent {
if (iframe.contentDocument) doc = iframe.contentDocument;
else if (iframe.contentWindow) doc = iframe.contentWindow.document;

const gistLink = this._defineUrl()
const gistLink = this._defineUrl();
const gistScript = `<script type="text/javascript" src="${gistLink}"></script>`;
const styles = '<style>*{font-size:12px;}</style>';
const elementId = file ? `gist-${id}-${file}` : `gist-${id}`;
Expand Down