From 58d64aade1320ec86915a2628517d98e3baee4df Mon Sep 17 00:00:00 2001 From: jeswr740 Date: Sun, 20 May 2018 10:59:57 +0200 Subject: [PATCH] Subreddits can now be displayed with lit --- .gitignore | 6 +-- {public => dist}/404.html | 0 {public => dist}/images/error.png | Bin {public => dist}/images/favicon.ico | Bin {public => dist}/images/loading.gif | Bin {public => dist}/images/success.png | Bin {public => dist}/index.html | 0 {production => hosting}/letsencrypt.conf | 0 {production => hosting}/nginx-basic | 0 {production => hosting}/nginx-ssl | 0 package.json | 6 +-- public/main.css | 1 - src/api/reddit/auth.js | 47 ++++++++++++++++---- src/api/reddit/clientID.js | 5 --- src/api/reddit/comment.js | 4 +- src/api/reddit/thread.js | 6 +-- src/api/reddit/token.js | 30 ------------- src/api/removeddit/index.js | 4 +- src/core/subreddit.js | 16 +++++++ src/{App.js => core/thread.js} | 0 src/index.js | 54 +++++++++-------------- src/pages/Subreddit.js | 4 +- src/state/index.js | 7 ++- src/state/store.js | 9 +--- src/templates/about/index.js | 2 +- src/templates/subreddit/index.js | 20 +++++++++ src/templates/thread/index.js | 3 ++ src/templates/thread/post.js | 8 ++-- src/utils/index.js | 5 ++- webpack.config.js | 5 +-- 30 files changed, 123 insertions(+), 119 deletions(-) rename {public => dist}/404.html (100%) rename {public => dist}/images/error.png (100%) rename {public => dist}/images/favicon.ico (100%) rename {public => dist}/images/loading.gif (100%) rename {public => dist}/images/success.png (100%) rename {public => dist}/index.html (100%) rename {production => hosting}/letsencrypt.conf (100%) rename {production => hosting}/nginx-basic (100%) rename {production => hosting}/nginx-ssl (100%) delete mode 100644 public/main.css delete mode 100644 src/api/reddit/clientID.js delete mode 100644 src/api/reddit/token.js create mode 100644 src/core/subreddit.js rename src/{App.js => core/thread.js} (100%) create mode 100644 src/templates/subreddit/index.js create mode 100644 src/templates/thread/index.js diff --git a/.gitignore b/.gitignore index 4563a15..0cf9b30 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,5 @@ .vscode/ - node_modules/ - -public/main.js - +dist/main.js +dist/main.css *.log \ No newline at end of file diff --git a/public/404.html b/dist/404.html similarity index 100% rename from public/404.html rename to dist/404.html diff --git a/public/images/error.png b/dist/images/error.png similarity index 100% rename from public/images/error.png rename to dist/images/error.png diff --git a/public/images/favicon.ico b/dist/images/favicon.ico similarity index 100% rename from public/images/favicon.ico rename to dist/images/favicon.ico diff --git a/public/images/loading.gif b/dist/images/loading.gif similarity index 100% rename from public/images/loading.gif rename to dist/images/loading.gif diff --git a/public/images/success.png b/dist/images/success.png similarity index 100% rename from public/images/success.png rename to dist/images/success.png diff --git a/public/index.html b/dist/index.html similarity index 100% rename from public/index.html rename to dist/index.html diff --git a/production/letsencrypt.conf b/hosting/letsencrypt.conf similarity index 100% rename from production/letsencrypt.conf rename to hosting/letsencrypt.conf diff --git a/production/nginx-basic b/hosting/nginx-basic similarity index 100% rename from production/nginx-basic rename to hosting/nginx-basic diff --git a/production/nginx-ssl b/hosting/nginx-ssl similarity index 100% rename from production/nginx-ssl rename to hosting/nginx-ssl diff --git a/package.json b/package.json index 42d8eb1..08579c5 100644 --- a/package.json +++ b/package.json @@ -19,14 +19,14 @@ "url": "https://github.com/JubbeArt/removeddit/issues" }, "homepage": "https://github.com/JubbeArt/removeddit#readme", + "standard": { + "globals": ["localStorage", "fetch"] + }, "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production", "build-sass": "sass --style compressed public/sass/index.sass public/main.css" }, - "standard": { - "globals": ["localStorage", "fetch"] - }, "dependencies": { "lit-html": "^0.9.0", "navigo": "^7.1.1", diff --git a/public/main.css b/public/main.css deleted file mode 100644 index 7aefa09..0000000 --- a/public/main.css +++ /dev/null @@ -1 +0,0 @@ -html,body{margin:0;padding:0;background-color:#262626;font-family:verdana,arial,helvetica,sans-serif}#main{margin:15px}.removed{background-color:#840c09}.deleted{background-color:#00007d}.removed-text{color:#c70300}.deleted-text{color:#00007d}a{color:#8cb3d9}a:link,a:visited,a:active{text-decoration:none}a:hover{text-decoration:underline}.author{color:#6a98af}.author:not([href]){color:inherit;text-decoration:none}.space{margin-left:5px}select{background:transparent;border:0;color:#828282}header{background-color:#c70300;display:flex;justify-content:space-between;align-items:center;padding:10px}header #header a{color:#fff}header #header h1{margin:7px 0;text-align:center}header #header h1 a{transition:color .3s}header #header h1 a:hover{text-decoration:none;color:#ff8b88}header #header nav a{margin:0 7px;font-size:20px}header #status{display:flex;justify-content:space-between;align-items:center}header #status #status-text{color:#fff;margin:0 20px 0 0}header #status #status-image{height:64px;width:64px;border-radius:32px}#main-box{margin:0 auto;padding:20px;border-radius:5px;color:#fff;word-wrap:break-word;max-width:800px;background-color:#161616}#main-box h2{margin:20px 0 12px}#main-box h2.about{margin:0;color:#c70300}#main-box h2.todo{color:#239f2b}#main-box h2.contact{color:#1b767a}#main-box ul{padding-left:30px;margin:0}#main-box .bookmarklet{background:#c70300;color:#fff;padding:9px;font-size:large;font-weight:bold;display:inline-block;border-radius:5px;margin:0 7px}.comment{margin:0 0 8px 0;padding:5px 8px 5px 30px;border:1px solid #333;border-radius:3px;color:#ddd;font-size:14px}.comment .comment-head{font-size:10px}.comment .comment-author{font-weight:bold}.comment .comment-author:not([href]){color:#828282}.comment .comment-score{color:#b4b4b4;font-weight:bold}.comment .comment-time{color:#828282}.comment .comment-body{max-width:840px;line-height:20px}.comment .comment-body p{margin:5px 0;line-height:20px}.comment .comment-body a:hover{text-decoration:none}.comment .comment-links{margin-bottom:6px}.comment .comment-links a{color:#828282;font-weight:bold;font-size:10px;margin-right:4px}.comment-odd{background-color:#121212}.comment-even{background-color:#161616}#comment-info{margin-top:13px;font-weight:bold;padding-bottom:5px;border-bottom:1px dotted gray;font-size:16px}#sort-by{color:#828282;font-size:12px;margin:5px 0 10px}#comment-info{color:#ca302c;margin-top:10px;font-weight:bold;padding-bottom:5px;border-bottom:1px dotted gray;font-size:16px}#comment-sort{color:gray;font-size:12px;margin:5px 0 10px}.thread{display:flex;flex-grow:1;margin-bottom:7px;border-radius:1px;padding-top:6px}.thread .thumbnail{width:70px;margin-right:3px;margin-top:-2px}.thread .thumbnail img{border-radius:1px}.thread .thumbnail-default{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0 -1099px;background-repeat:no-repeat;height:50px}.thread .thumbnail-self{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0 -1267px;background-repeat:no-repeat;height:50px}.thread .thumbnail-image{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0 -1043px;background-repeat:no-repeat;height:50px}.thread .thumbnail-nsfw{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0 -1155px;background-repeat:no-repeat;height:50px}.thread .thread-score-box{margin:0 7px;width:43px}.thread .vote{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==);background-repeat:no-repeat;margin-left:auto;margin-right:auto;width:15px;height:14px;cursor:pointer}.thread .upvote{background-position:-15px 0;margin-top:2px}.thread .downvote{background-position:-15px -14px;margin-top:2px}.thread .thread-score{color:#646464;font-size:13px;font-weight:bold;text-align:center}.thread .thread-content{flex:1;float:left;margin-left:3px}.thread .link-flair{display:inline-block;color:#c8c8c8;background-color:#404040;margin-right:5px;border:1px solid #4d4d4d;border-radius:2px;padding:0 2px;font-size:10px}.thread .thread-title{color:#a6a6a6;margin-right:5px}.thread .thread-title:hover{text-decoration:none}.thread .domain{color:#888;font-size:10px}.thread .thread-selftext{border:1px solid #666;border-radius:7px;margin:5px 0 7px;padding:5px 10px;max-width:840px;color:#ddd;font-size:14px}.thread .thread-selftext p{margin:5px 0;line-height:20px}.thread .thread-selftext a:hover{text-decoration:none}.thread .thread-selftext p:first-child{margin-top:0}.thread .thread-selftext p:last-child{margin-bottom:0}.thread .thread-image{max-width:768px;max-height:768px}.thread .thread-info{color:#828282;font-size:10px;margin-top:2px}.thread .total-comments{color:#828282;font-size:10px;margin:4px 0}.thread .grey-link,.thread .grey-link:link,.thread .grey-link:visited,.thread .grey-link:hover,.thread .grey-link:focus,.thread .grey-link:active{color:#828282;margin-right:4px}.post-rank{min-width:20px;color:#505050;font-size:16px;text-align:right;margin:14px 4px 0 0}.subreddit-info{border-bottom:1px dotted gray;padding:5px 10px;color:#ccc;font-size:14px;margin-bottom:5px}.subreddit-info select{background:#262626;color:gray;font-size:14px;font-weight:bold;text-decoration:underline;border:0}#pagination{border-top:1px dotted gray;padding:5px 10px;color:#ccc;font-size:16px}#pagination span,#pagination a{margin:5px}.subreddit-box{margin-bottom:15px}.subreddit-title{margin-left:5px;font-size:22px;font-weight:bold;color:#fff}.subreddit-title-link{margin-bottom:15px;margin-left:5px;font-size:14px;color:#fff}.search-box{font-size:16px}.search-box .search-row{padding:10px 6px 11px;border-bottom:1px dotted #ccc;min-height:26px}.search-box .search-left{font-weight:bold;display:inline-block;width:190px;vertical-align:middle}.search-box input[type=text]{font-size:17px;width:400px;border-radius:2px;padding-left:3px}.search-box .radioButton{background:#8a8888;color:#000;border-radius:3px;display:inline-block;margin-right:9px;transition:all .3s}.search-box .radioButton label{padding:7px 10px 7px 3px;display:inline-block}.search-box .radioButton input{margin:0 0 0 5px;height:35px;display:inline-block;vertical-align:top}.search-box select{padding:3px;font-size:15px;border-radius:2px}.search-box input[type=submit]{margin:16px auto 0;display:block;padding:9px 16px;font-size:18px;background:#239f2b;border:0;border-radius:2px;color:#fff} diff --git a/src/api/reddit/auth.js b/src/api/reddit/auth.js index ab825c2..780a8dc 100644 --- a/src/api/reddit/auth.js +++ b/src/api/reddit/auth.js @@ -1,11 +1,40 @@ -import { getToken } from './token' +// Change this to your own client ID: https://www.reddit.com/prefs/apps +// The app NEEDS TO BE an installed app and NOT a web apps + +// Current using dummy ID from throwaway +const clientID = '33W8M1OOxPv80A' + +// Token for reddit API +let token // Header for general api calls -export const getAuth = () => ( - getToken() - .then(token => ({ - headers: { - Authorization: `bearer ${token}`, - }, - })) -) +export const getAuth = () => { + // We have already gotten a token + if (token !== undefined) { + return Promise.resolve(token) + } + + // Headers for getting reddit api token + const tokenInit = { + headers: { + Authorization: `Basic ${btoa(`${clientID}:`)}`, + 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8' + }, + method: 'POST', + body: `grant_type=${encodeURIComponent('https://oauth.reddit.com/grants/installed_client')}&device_id=DO_NOT_TRACK_THIS_DEVICE` + } + + return ( + fetch('https://www.reddit.com/api/v1/access_token', tokenInit) + .then(response => response.json()) + .then(responseBody => { + // Save token for later + token = responseBody.access_token + return { + headers: { + Authorization: `bearer ${token}` + } + } + }) + ) +} diff --git a/src/api/reddit/clientID.js b/src/api/reddit/clientID.js deleted file mode 100644 index 2f8a3f1..0000000 --- a/src/api/reddit/clientID.js +++ /dev/null @@ -1,5 +0,0 @@ -// Change this to your own client ID: https://www.reddit.com/prefs/apps -// The app NEEDS TO BE an installed app and NOT a web apps - -// Current using dummy ID from throwaway -export default '33W8M1OOxPv80A' diff --git a/src/api/reddit/comment.js b/src/api/reddit/comment.js index f1e4dbc..9414434 100644 --- a/src/api/reddit/comment.js +++ b/src/api/reddit/comment.js @@ -1,4 +1,4 @@ -import { chunk, flatten, json } from 'utils' +import { chunk, flatten } from '../../utils' import { getAuth } from './auth' export const getComments = commentIDs => ( @@ -10,7 +10,7 @@ export const getComments = commentIDs => ( export const fetchComments = (commentIDs, auth) => ( fetch(`https://oauth.reddit.com/api/info?id=${commentIDs.map(id => `t1_${id}`).join()}`, auth) - .then(json) + .then(response => response.json()) .then(results => results.data.children) .then(commentsData => commentsData.map(commentData => commentData.data)) ) diff --git a/src/api/reddit/thread.js b/src/api/reddit/thread.js index 45a057c..072ceef 100644 --- a/src/api/reddit/thread.js +++ b/src/api/reddit/thread.js @@ -1,4 +1,3 @@ -import { json } from 'utils' import { getAuth } from './auth' const cachedThreads = {} @@ -23,7 +22,7 @@ export const getThread = (subreddit, threadID, commentID = '') => { return ( getAuth() .then(auth => fetch(url, auth)) - .then(json) + .then(response => response.json()) .then(thread => { // Create cache object for thread if it doesn't exists if (!cachedThreads.hasOwnProperty(threadID)) { @@ -39,14 +38,13 @@ export const getThread = (subreddit, threadID, commentID = '') => { ) } - export const getThreads = threadIDs => { const threadString = threadIDs.map(id => `t3_${id}`).join() return ( getAuth() .then(auth => fetch(`https://oauth.reddit.com/api/info?id=${threadString}`, auth)) - .then(json) + .then(response => response.json()) .then(response => { const threads = response.data.children return threads.map(threadData => threadData.data) diff --git a/src/api/reddit/token.js b/src/api/reddit/token.js deleted file mode 100644 index 86385bd..0000000 --- a/src/api/reddit/token.js +++ /dev/null @@ -1,30 +0,0 @@ -import { json } from 'utils' -import clientID from './clientID' - -// Token for reddit API -let token = null - -// Headers for getting reddit api token -const tokenInit = { - headers: { - Authorization: `Basic ${btoa(`${clientID}:`)}`, - 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8', - }, - method: 'POST', - body: `grant_type=${encodeURIComponent('https://oauth.reddit.com/grants/installed_client')}&device_id=DO_NOT_TRACK_THIS_DEVICE`, -} - -export const getToken = () => { - if (token !== null) { - return Promise.resolve(token) - } - - return ( - fetch('https://www.reddit.com/api/v1/access_token', tokenInit) - .then(json) - .then(response => { - token = response.access_token - return token - }) - ) -} diff --git a/src/api/removeddit/index.js b/src/api/removeddit/index.js index 94d5ffc..4215685 100644 --- a/src/api/removeddit/index.js +++ b/src/api/removeddit/index.js @@ -1,8 +1,6 @@ -import { json } from 'utils' - const baseURL = 'https://removeddit.com/api' export const getRemovedThreadIDs = (subreddit = '', page = 1) => ( fetch(`${baseURL}/threads?subreddit=${subreddit}&page=${page - 1}`) - .then(json) + .then(response => response.json()) ) diff --git a/src/core/subreddit.js b/src/core/subreddit.js new file mode 100644 index 0000000..a79d3ac --- /dev/null +++ b/src/core/subreddit.js @@ -0,0 +1,16 @@ +import { getRemovedThreadIDs } from '../api/removeddit' +import { getThreads } from '../api/reddit' + +export default (subreddit = 'all', setState) => { + subreddit = subreddit.toLowerCase() === 'all' ? '' : subreddit.toLowerCase() + + getRemovedThreadIDs(subreddit) + .then(threadIDs => getThreads(threadIDs)) + .then(threads => { + threads.forEach(thread => { + thread.removed = true + thread.selftext = '' + }) + setState({ threads }) + }) +} diff --git a/src/App.js b/src/core/thread.js similarity index 100% rename from src/App.js rename to src/core/thread.js diff --git a/src/index.js b/src/index.js index 08f6f1b..62b9854 100644 --- a/src/index.js +++ b/src/index.js @@ -1,52 +1,40 @@ -import { html, render } from 'lit-html' +import { render } from 'lit-html/lib/lit-extended' import Navigo from 'navigo' import aboutTemplate from './templates/about' import threadTemplate from './templates/thread' import subredditTemplate from './templates/subreddit' -import {store} from 'state' -// import p from 'snudown-js' +import {store} from './state' +import getThreads from './core/subreddit' const router = new Navigo(window.location.origin) -// router.updatePageLinks() -let currentTemplate = html`` const main = document.getElementById('main') -const renderMain = () => render(currentTemplate(store.getState(), store.setState), main) -store.subscribe(() => renderMain()) +// Causes a rerender of the currently selected template +const renderPage = () => { + const template = store.getState().template(store.getState(), store.setState) + render(template, main) +} + +// Re-render page whenever state is changed +store.subscribe(() => renderPage()) router.on({ '/about': () => { - currentTemplate = aboutTemplate - renderMain() + store.setState({template: aboutTemplate}) }, - '/r/:subreddit/comments/:threadID/:junk/:commentID': params => { - const {subreddit, threadID, commentID} = params - store.setState({subreddit, threadID, commentID}) - currentTemplate = threadTemplate - renderMain() + '/r/:subreddit/comments/:threadID/:junk/:commentID': ({subreddit, threadID, commentID}) => { + store.setState({template: threadTemplate, subreddit, threadID, commentID}) }, - '/r/:subreddit/comments/:threadID/:junk': params => { - const {subreddit, threadID} = params - store.setState({subreddit, threadID, commentID: undefined}) - currentTemplate = threadTemplate - renderMain() + '/r/:subreddit/comments/:threadID*': ({subreddit, threadID}) => { + store.setState({template: threadTemplate, subreddit, threadID, commentID: undefined}) }, - '/r/:subreddit/comments/:threadID': params => { - const {subreddit, threadID} = params - store.setState({subreddit, threadID, commentID: undefined}) - currentTemplate = threadTemplate - renderMain() - }, - '/r/:subreddit': params => { - const {subreddit} = params - store.setState({subreddit, threadID: undefined, commentID: undefined}) - currentTemplate = subredditTemplate - renderMain() + '/r/:subreddit': ({subreddit}) => { + store.setState({template: subredditTemplate, threads: [], subreddit, threadID: undefined, commentID: undefined}) + getThreads(subreddit, store.setState) }, '*': () => { - store.setState({subreddit: 'all', threadID: undefined, commentID: undefined}) - currentTemplate = subredditTemplate - renderMain() + store.setState({template: subredditTemplate, threads: [], subreddit: 'all', threadID: undefined, commentID: undefined}) + getThreads('all', store.setState) } }).resolve() diff --git a/src/pages/Subreddit.js b/src/pages/Subreddit.js index e886091..2bbe50b 100644 --- a/src/pages/Subreddit.js +++ b/src/pages/Subreddit.js @@ -1,7 +1,7 @@ import React from 'react' import { Link } from 'react-router-dom' -import { getRemovedThreadIDs } from 'api/removeddit' -import { getThreads } from 'api/reddit' +import { getRemovedThreadIDs } from '../api/removeddit' +import { getThreads } from '../api/reddit' import Post from 'components/Post' const getSubredditForAPI = props => { diff --git a/src/state/index.js b/src/state/index.js index 1bcde42..f71b765 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -1,6 +1,6 @@ import {createStore} from './store' -import {get, showFunctions, sortFunctions} from 'utils' -import {html} from 'lit-html' +import {get, showFunctions, sortFunctions} from '../utils' +import {html} from 'lit-html/lib/lit-extended' export const commentSort = { top: 'top', @@ -33,8 +33,7 @@ export const store = createStore({ .filter(showFunctions[store.getState().currentShow]) .sort(sortFunctions[store.getState().currentSort]) } - -}) +}, ['commentSort', 'commentShow']) export const stateImages = { loading: '/images/loading.gif', diff --git a/src/state/store.js b/src/state/store.js index 50515e0..f30e440 100644 --- a/src/state/store.js +++ b/src/state/store.js @@ -1,4 +1,4 @@ -import {put} from 'utils' +import {put} from '../utils' export const createStore = (initState = {}, persistentKeys = []) => { let state = initState @@ -31,10 +31,3 @@ export const createStore = (initState = {}, persistentKeys = []) => { } } } - -// export - -// const saveState = { -// commentSort: true, -// commentShow: true -// } diff --git a/src/templates/about/index.js b/src/templates/about/index.js index 96754f7..feada18 100644 --- a/src/templates/about/index.js +++ b/src/templates/about/index.js @@ -1,4 +1,4 @@ -import {html} from 'lit-html' +import {html} from 'lit-html/lib/lit-extended' export default () => html`
diff --git a/src/templates/subreddit/index.js b/src/templates/subreddit/index.js new file mode 100644 index 0000000..94a8ba2 --- /dev/null +++ b/src/templates/subreddit/index.js @@ -0,0 +1,20 @@ +import { html } from 'lit-html/lib/lit-extended' +import post from '../thread/post' + +export default (state, setState) => { + const { subreddit, threads } = state + const subredditLink = `/r/${subreddit}` + + return ( + html` +
+ ${subredditLink} + + reddit + + ceddit +
+ ${threads.map(thread => post(thread))} + ` + ) +} diff --git a/src/templates/thread/index.js b/src/templates/thread/index.js new file mode 100644 index 0000000..19cdede --- /dev/null +++ b/src/templates/thread/index.js @@ -0,0 +1,3 @@ +import { html } from 'lit-html/lib/lit-extended' + +export default () => html`

thread

` diff --git a/src/templates/thread/post.js b/src/templates/thread/post.js index 1a5fe95..1a1bf97 100644 --- a/src/templates/thread/post.js +++ b/src/templates/thread/post.js @@ -1,6 +1,6 @@ -import {html} from 'lit-html' +import {html} from 'lit-html/lib/lit-extended' -import { prettyScore, prettyDate, parse, redditThumbnails, isDeleted } from 'utils' +import { prettyScore, prettyDate, parse, redditThumbnails, isDeleted } from '../../utils' export default (props) => { if (!props.title) { @@ -15,7 +15,7 @@ export default (props) => { let thumbnail if (redditThumbnails.includes(props.thumbnail)) { - thumbnail = html`` + thumbnail = html`` } else if (props.thumbnail !== '') { thumbnail = html` @@ -25,7 +25,7 @@ export default (props) => { } return html` -
+
${props.position && html`${props.position}`}
diff --git a/src/utils/index.js b/src/utils/index.js index 70320a1..7453377 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,6 +1,6 @@ -import SnuOwnd from 'snuownd' +// const SnuOwnd = require('snudown-js') -const markdown = SnuOwnd.getParser() +// const markdown = SnuOwnd.getParser() // Flatten arrays one level export const flatten = arr => arr.reduce( @@ -121,4 +121,5 @@ export const sortFunctions = { if (commentA.created_utc > commentB.created_utc) return 1 return 0 } + } diff --git a/webpack.config.js b/webpack.config.js index d01047d..7f1bccb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,11 +1,8 @@ const path = require('path') module.exports = { - output: { - path: path.resolve(__dirname, 'public') - }, devServer: { - contentBase: path.resolve(__dirname, 'public'), + contentBase: path.resolve(__dirname, 'dist'), historyApiFallback: true } }