mirror of
https://github.com/gurnec/removeddit.git
synced 2026-03-11 08:54:27 +00:00
Moved menu and about page to react
This commit is contained in:
Jesper Wrang
parent
6a2e07aba8
commit
e7efb16bea
8 changed files with 158 additions and 11 deletions
|
|
@ -7,7 +7,7 @@
|
|||
<meta type="author" content="Jesper Wrang">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link href="images/favicon.ico" rel="shotcut icon">
|
||||
<link href="/images/favicon.ico" rel="shotcut icon">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
29
src/js/App.js
Normal file
29
src/js/App.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
BrowserRouter,
|
||||
Switch,
|
||||
Route
|
||||
} from 'react-router-dom'
|
||||
|
||||
import Menu from 'components/Menu'
|
||||
import About from 'components/About'
|
||||
import Thread from 'components/Thread'
|
||||
|
||||
export default class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<BrowserRouter basename={__dirname}>
|
||||
<>
|
||||
<Menu />
|
||||
<Switch>
|
||||
<IndexRoute component={Thread} />
|
||||
<Route path='/about' component={About}/>
|
||||
{/* <Route path='/:board/:pageNr' component={Board} />
|
||||
<Route path='/:board/thread/:thread' component={Thread}/>
|
||||
<Route component={Home} /> */}
|
||||
</Switch>
|
||||
</>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
}
|
||||
42
src/js/components/About.js
Normal file
42
src/js/components/About.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import React from 'react'
|
||||
|
||||
export default class About extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div id='main'>
|
||||
<div id='main-box'>
|
||||
<h2 className='about'>About</h2>
|
||||
<p>Display <b className='removed' title='Removed by mods'>removed</b> (by mods) and <b className='deleted' title='Deleted by users'>deleted</b> (by users) comments/threads from Reddit.</p>
|
||||
<p>
|
||||
<b>Usage</b>: Drag this bookmarklet
|
||||
<a className='bookmarklet' href="javascript: document.location = document.URL.replace('reddit.com','removeddit.com');">Removeddit</a>
|
||||
to your bookmark bar and use it to get from reddit to removeddit.
|
||||
<br/><br/>
|
||||
Alternatively you can manually replace the <i>reddit</i> in the URL to <i>removeddit</i>.
|
||||
<br/>
|
||||
E.g. <a href='/r/TwoXChromosomes/comments/6z1hch/'>https://www.removeddit.com/r/TwoXChromosomes/comments/6z1hch/</a>
|
||||
</p>
|
||||
<p>
|
||||
Created by <a href='https://github.com/JubbeArt/'>Jesper Wrang</a> and uses <a href='https://pushshift.io/'>Jason Baumgartner</a> service for getting removed comments.
|
||||
</p>
|
||||
<h2 className='todo'>TODO</h2>
|
||||
<ul>
|
||||
<li>Collapsing comments</li>
|
||||
<li>Get removed selftext of thread</li>
|
||||
<li>Subreddits!</li>
|
||||
<li>Maybe for specific users </li>
|
||||
</ul>
|
||||
<h2 className='contact'>Links/Contact</h2>
|
||||
<p style={{marginBottom:'8px'}}>For feedback and bug reports:</p>
|
||||
<ul>
|
||||
<li>email: removeddit (at) gmail.com</li>
|
||||
<li>reddit: <a href='https://www.reddit.com/user/Jubbeart/'>/u/JubbeArt</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
<a href='https://github.com/JubbeArt/removeddit'>Code on Github.</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,25 @@
|
|||
{/* <header>
|
||||
<div id="header">
|
||||
<h1><a href="/">Removeddit</a></h1>
|
||||
<nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
|
||||
</div>
|
||||
<div id="status">
|
||||
<p id="status-text"></p><img id="status-image" src="/static/images/loading.gif">
|
||||
</div>
|
||||
</header> */}
|
||||
import React from 'react'
|
||||
|
||||
export default class Menu extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<header>
|
||||
<div id="header">
|
||||
<h1>
|
||||
<a href="/">Removeddit</a>
|
||||
</h1>
|
||||
<nav>
|
||||
<a href="/r/all">subreddit</a>
|
||||
<a href="/r/bestof/comments/7c8jof/">thread</a>
|
||||
<a href="/about/">about</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="status">
|
||||
<p id="status-text"></p>
|
||||
<img id="status-image" src="/images/loading.gif"/>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
52
src/js/components/Thread.js
Normal file
52
src/js/components/Thread.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react'
|
||||
|
||||
export default class About extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div class="thread">
|
||||
{this.props.threadPosition &&
|
||||
<span class="post-rank">{this.props.threadPosition}</span>
|
||||
}
|
||||
<div class="thread-score-box">
|
||||
<div class="vote upvote"></div>
|
||||
<div class="thread-score"><%= Format.prettyScore(thread.score) %></div>
|
||||
<div class="vote downvote"></div>
|
||||
</div>
|
||||
<% var url = _.replace(thread.url, "https://www.reddit.com", "https://www.removeddit.com");
|
||||
|
||||
if(_.includes(["self", "default", "image", "nsfw"], thread.thumbnail)) { %>
|
||||
<a href="<%= url %>" class="thumbnail thumbnail-<%= thread.thumbnail%>"></a>
|
||||
<% } else {
|
||||
var thumbnailWidth = _.defaultTo(thread.thumbnail_width, 140) * 0.5;
|
||||
var thumbnailHeight = _.defaultTo(thread.thumbnail_height, 140) * 0.5;
|
||||
%> <a href="<%= url %>">
|
||||
<img class="thumbnail" src="<%= thread.thumbnail %>" width="<%= thumbnailWidth %>" height="<%= thumbnailHeight %>">
|
||||
</a>
|
||||
<% } %>
|
||||
<div class="thread-content">
|
||||
|
||||
<a class="thread-title" href="<%= url %>"><%= thread.title %></a>
|
||||
<% if(!_.isNil(thread.link_flair_text)){ %>
|
||||
<span class="link-flair"><%= thread.link_flair_text %></span>
|
||||
<% } %>
|
||||
<span class="domain">(<%= thread.domain %>)</span>
|
||||
<div class="thread-info">
|
||||
submitted <span class="thread-time"><%= Format.prettyDate(thread.created_utc) %></span> by
|
||||
<a class="thread-author author" href="https://www.reddit.com/user/<%= thread.author %>"><%= thread.author %></a>
|
||||
<% if(Reddit.isAll){ %>
|
||||
to <a class="subreddit-link author" href="/r/<%= thread.subreddit %>">/r/<%= thread.subreddit %></a>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="total-comments">
|
||||
<a class="grey-link" href="<%= thread.permalink %>">
|
||||
<b><%= thread.num_comments %> comments</b>
|
||||
</a>
|
||||
<a class="grey-link" href="https://www.reddit.com<%= thread.permalink %>">
|
||||
<b>reddit</b>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,10 @@
|
|||
import '../sass/main.sass'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
import App from './App'
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById("app")
|
||||
)
|
||||
|
|
|
|||
|
|
@ -36,3 +36,4 @@
|
|||
font-weight: bold
|
||||
display: inline-block
|
||||
border-radius: 5px
|
||||
margin: 0 7px
|
||||
|
|
@ -18,7 +18,7 @@ module.exports = {
|
|||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'bundle.[chunkhash].js',
|
||||
publicPath: './'
|
||||
publicPath: '/'
|
||||
},
|
||||
resolve: {
|
||||
modules: [
|
||||
|
|
|
|||
Loading…
Reference in a new issue