Skip to content

Commit

Permalink
Update gatsby-source-hacker-news and the hn example to Gatsby v2 (#6214)
Browse files Browse the repository at this point in the history
  • Loading branch information
@m-allanson @pieh
m-allanson authored and pieh committed Jun 28, 2018
1 parent fd6cc1a commit eeef674
Show file tree
Hide file tree
Showing 10 changed files with 296 additions and 349 deletions.
4 changes: 0 additions & 4 deletions examples/hn/.babelrc
View file

This file was deleted.

8 changes: 4 additions & 4 deletions examples/hn/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"flat": "^2.0.1",
"gatsby": "canary",
"gatsby-plugin-manifest": "^2.1.0-alpha.76793cd8",
"gatsby-source-hacker-news": "canary",
"gatsby": "next",
"gatsby-plugin-manifest": "next",
"gatsby-source-hacker-news": "next",
"lodash": "^4.16.4",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"slash": "^1.0.0"
"slash": "^2.0.0"
},
"keywords": [
"gatsby"
Expand Down
127 changes: 127 additions & 0 deletions examples/hn/src/components/layout.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import React from "react"
import { Link } from "gatsby"

import "../css/news.css"
import y18Gif from "../images/y18.gif"
import sGif from "../images/s.gif"

class Layout extends React.Component {
render() {
return (
<center>
<table
id="hnmain"
border={0}
cellPadding={0}
cellSpacing={0}
style={{
borderWidth: 0,
backgroundColor: `#f6f6ef`,
}}
>
<tbody>
<tr>
<td style={{ backgroundColor: `#ff6600` }}>
<table
border={`0`}
cellPadding={`0`}
cellSpacing={0}
style={{
borderWidth: 0,
borderSpacing: 0,
width: `100%`,
padding: `2px`,
paddingBottom: 0,
marginBottom: -1, // Not sure where extra bottom padding is coming from.
}}
>
<tbody>
<tr>
<td style={{ width: `18px`, paddingRight: `4px` }}>
<a href="http://www.ycombinator.com">
<img
src={y18Gif}
width="18px"
height="18px"
style={{ border: `1px white solid` }}
/>
</a>
</td>
<td style={{ lineHeight: `12pt`, height: `10px` }}>
<span className="pagetop">
<b className="hnname">
<Link to="/">Hacker News </Link>
</b>
<a href="newest">new</a>
{` `}
|
{` `}
<a href="newcomments">comments</a>
{` `}
|
{` `}
<a href="show">show</a>
{` `}
|
{` `}
<a href="ask">ask</a>
{` `}
|
{` `}
<a href="jobs">jobs</a>
{` `}
|
{` `}
<a href="submit">submit</a>
{` `}
</span>
</td>
<td style={{ textAlign: `right`, paddingRight: `4px` }}>
<span className="pagetop">
<a href="login?goto=news">login</a>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style={{ height: `10px` }} />
<tr>
<td>{this.props.children}</td>
</tr>
<tr>
<td>
<img src={sGif} height="10" width="0" />
<table width="100%" cellSpacing="0" cellPadding="1">
<tbody>
<tr>
<td style={{ backgroundColor: `#ff6600` }} />
</tr>
</tbody>
</table>
<br />
<center>
<span className="yclinks">
<a href="newsguidelines.html">Guidelines</a>
| <a href="newsfaq.html">FAQ</a>
| <a href="mailto:hn@ycombinator.com">Support</a>
| <a href="https://github.com/HackerNews/API">API</a>
| <a href="security.html">Security</a>
| <a href="lists">Lists</a>
| <a href="bookmarklet.html">Bookmarklet</a>
| <a href="dmca.html">DMCA</a>
| <a href="http://www.ycombinator.com/apply/">Apply to YC</a>
| <a href="mailto:hn@ycombinator.com">Contact</a>
</span>
</center>
</td>
</tr>
</tbody>
</table>
</center>
)
}
}

export default Layout
75 changes: 38 additions & 37 deletions examples/hn/src/components/story-comment.js
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,50 @@
import React from "react"

import { graphql } from "gatsby"
import sGif from "../images/s.gif"

class StoryComment extends React.Component {
render() {
const comment = this.props.comment
// console.log(comment)
return (
<table border="0">
<tr>
<td className="ind">
<img
src={sGif}
height="1"
width={comment.depth * Math.min(40, this.props.width / 20) + 14}
/>
</td>
<td className="default">
<div style={{ marginTop: 2, marginBottom: -10 }}>
<span className="comhead">
<strong>{comment.by}</strong>
{` `}
<span className="age">{comment.timeISO}</span>
</span>
</div>
<br />
<div className="comment">
<span
className="c00"
dangerouslySetInnerHTML={{
__html: comment.text,
}}
<tbody>
<tr>
<td className="ind">
<img
src={sGif}
height="1"
width={comment.depth * Math.min(40, this.props.width / 20) + 14}
/>
</div>
<div className="reply">
<p>
<font size="1">
<u>
<a href="#noop">reply</a>
</u>
</font>
</p>
</div>
</td>
</tr>
</td>
<td className="default">
<div style={{ marginTop: 2, marginBottom: -10 }}>
<span className="comhead">
<strong>{comment.by}</strong>
{` `}
<span className="age">{comment.timeISO}</span>
</span>
</div>
<br />
<div className="comment">
<span
className="c00"
dangerouslySetInnerHTML={{
__html: comment.text,
}}
/>
</div>
<div className="reply">
<p>
<font size="1">
<u>
<a href="#noop">reply</a>
</u>
</font>
</p>
</div>
</td>
</tr>
</tbody>
</table>
)
}
Expand Down
112 changes: 57 additions & 55 deletions examples/hn/src/components/story-item.js
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,66 @@
import React from "react"
import { Link } from "gatsby"
import { Link, graphql } from "gatsby"

class StoryItem extends React.Component {
render() {
const story = this.props.story
return (
<div>
<tr className="athing" id={story.id}>
<td
style={{
textAlign: `right`,
verticalAlign: `top`,
width: 30,
paddingRight: 8,
paddingBottom: 2,
}}
className="title"
>
<span className="rank">{story.order}.</span>
</td>
<td className="title">
<a href={story.url} className="storylink">
{story.title}
</a>
<span className="sitebit comhead">
{` `}(
<span className="sitestr">{story.domain}</span>
)
</span>
</td>
</tr>
<tr>
<td />
<td className="subtext">
<span className="score" id={`score_${story.id}`}>
{story.score} points
</span>
{` `}
by
{` `}
<a href="" className="hnuser">
{story.by}
</a>
{` `}
<span className="age">
<Link to={`/item/${story.id}/`}>{story.timeISO}</Link>
</span>
{` `}
<span id={`unv_${story.id}`} />
{` `}
|
{` `}
<Link to={`/item/${story.id}/`}>
{story.descendants ? story.descendants : 0} comments
</Link>
{` `}
</td>
</tr>
<tr className="spacer" style={{ height: `5px` }} />
</div>
<table>
<tbody>
<tr className="athing" id={story.id}>
<td
style={{
textAlign: `right`,
verticalAlign: `top`,
width: 30,
paddingRight: 8,
paddingBottom: 2,
}}
className="title"
>
<span className="rank">{story.order}.</span>
</td>
<td className="title">
<a href={story.url} className="storylink">
{story.title}
</a>
<span className="sitebit comhead">
{` `}(
<span className="sitestr">{story.domain}</span>
)
</span>
</td>
</tr>
<tr>
<td />
<td className="subtext">
<span className="score" id={`score_${story.id}`}>
{story.score} points
</span>
{` `}
by
{` `}
<a href="" className="hnuser">
{story.by}
</a>
{` `}
<span className="age">
<Link to={`/item/${story.id}/`}>{story.timeISO}</Link>
</span>
{` `}
<span id={`unv_${story.id}`} />
{` `}
|
{` `}
<Link to={`/item/${story.id}/`}>
{story.descendants ? story.descendants : 0} comments
</Link>
{` `}
</td>
</tr>
<tr className="spacer" style={{ height: `5px` }} />
</tbody>
</table>
)
}
}
Expand Down
Loading

0 comments on commit eeef674

Please sign in to comment.