twreporter / twreporter-react Goto Github PK

View Code? Open in Web Editor NEW

324.0 18.0 100.0 169.72 MB

twreporter site with nodejs

Home Page: https://www.twreporter.org

License: GNU Affero General Public License v3.0

JavaScript 99.41% Makefile 0.52% Dockerfile 0.07%

react redux server-side-rendering bolierplate webpack babel nodejs express hot-module-replacement code-splitting

twreporter-react's Introduction

TW Reporter

New Media foundation in Taiwan.

Contains

Environment

Install node(https://nodejs.org/en/) @7.9.0 above.

Installation

yarn install

Production start

make start

Development start

make dev

Build docker image

// install dependencies first
yarn install

// build the webpack bundles and transpile es6 to es5
make build

// build docker image
docker build -t twreporter-react:latest .

Testing

Run unit tests

make test

Run ui-test (It will take some time to compare screenshots)

// start dev servers for ui-test
make dev
// run ui-test
make ui-test

License

Copyright (C) 2015 - 2018 The Reporter 報導者. All rights reserved.
Distributed under the GNU AGPL v3.0

twreporter-react's People

Contributors

Stargazers

Watchers

twreporter-react's Issues

Footer style is inconsistent

首頁

專欄

infographic

hamburger menu bar in mobile device

add the hamburger menu bar in mobile device

Wrong paging indicators of Members section in about-us page

Problem Description

In Members(02) section of about-us page, the paging indicators will be wrong after resizing the window. It causes the empty paging results.

Add full-text search to homepage

Google CSE is an easy (maybe a bit expensive) choice. Or maybe in-browser search based on a simple .indexOf ?

Source: https://www.facebook.com/portnoyzheng/posts/10153190268136555?comment_id=10153190304146555&comment_tracking=%7B%22tn%22%3A%22R%22%7D

Fetch `mini reporter` tag but get empty content

Problem Description

Click mini reporter tag at the bottom of the article
Redirect to the tag page https://www.twreporter.org/tag/5cda3ec344ebf71700c960b1
There are no articles in listing

Combine `ThemeManager` and `LayoutManager`

Problem Description

We have a class ThemeManager in src/managers/theme-manager.js.
It provides src/containers/app-shell.js a way to choose the layout according to the route path.
However, the class name ThemeManager is kind of ambiguous since it does not decide the styles at all.

TO DO

Merge the functionality of class ThemeManager into class LayoutManager.

duplicate lint entries in package.json

There are two lint entries in package.json, line 15 & 18. Line 15 was added via c5ff682. So I think line 18 is the one to be removed.

Article revamp requirements for Desktop

Features (DESKTOP)(PENDING, wait for spec)

Features (Mobile)

Performance Tuning

remove properties we don't need in the api repsonse
add browser cache

React-router `context.location` is deprecated

./src/Components/Footer.js

with [email protected]

Warning: [react-router] context.location is deprecated, please use a route component's props.location instead.

Duplicate text on website

GTM installation

請將以下程式碼複製並貼入您網站的每個網頁中。

請將這段程式碼放在網頁最上方的 <head> 中：

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PRMXBBN');</script>
<!-- End Google Tag Manager -->

此外，請將這段程式碼複製到 <body> 開頭代碼正後方：

 <body> 
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PRMXBBN"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

node version?

希望能在 package.json 補上 node version的資訊.
Thanks.

https://docs.npmjs.com/files/package.json#engines

Change git pre-commit hook to pre-push

Hello there 👋

I was trying to improve the README.md today. And have noticed that this project has a pre-commit hook setup. While this is generally a good practice to run linting and testing before adding any new commits. This also slows down the pace of working on this project. The linting part is not that bad/slow but the testing part took me about 4 minutes to finish.

I think it would be great if we can change the git hook from pre-commit to pre-push. That way, we can still check these things before pushing onto GitHub, but also, make the overall dev experience a bit better and faster since we're not blocking them when creating new commits.

just my two cents :)
Joshua

add the author archive pages

use the category page, adding the author intro module.

Consider adding a contributing guide

Hi there,

Can you add a contribute guide for people who want to contribute to this repo?

Thanks :)

rss2.xml 格式不標準

我想將目前的 rss https://www.twreporter.org/a/rss2.xml 加入 http://gwene.org/ ，但因為格式不符標準而被拒絕：

用 W3C Validator 檢查之後也的確找出兩處錯誤。請參考 http://validator.w3.org/feed/check.cgi?url=https%3A%2F%2Fwww.twreporter.org%2Fa%2Frss2.xml

apply eslint and editorconfig

@nickhsine

Maybe we could start from presets like

Editorconfig is a very useful tool to make the code style consistent
https://github.com/rackt/redux/blob/master/.editorconfig

# EditorConfig helps developers define and maintain
# consistent coding styles between different editors and IDEs.

root = true

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2

update article pages with the patched footer.js

https://www.facebook.com/hsinchan.chien/posts/10207539139051970?comment_id=10207540540046994&reply_comment_id=10207540552047294&notif_t=feed_comment_reply

請問 revamp 中的 api/config.js 的內容應為?

我想試跑出(或貢獻代碼) revamp 新版畫面。
npm run dev 後，遇到 Timeout issue 如下 --- 黃方框是我 debug 的 string :

[my dev env]

Windows OS
node v6.2.1
npm 3.9.3

個人猜測我本地 api/config.js 有誤，目前它是：

export default {
  API_PROTOCOL: 'http',
  API_HOST: 'localhost',
  API_PORT: '8080'
}

可提示 api/config.js 應為何?
Thanks!

Google SEO

that title should is "報導者The Reporter"
description

ref.

Service worker client side error

讀者回報的情形如下：

點開報導者文章後，大約五秒左右後自動跳轉到 500 error page
在此之後，從 500 error page 點選左上角 logo，跳轉回首頁，同樣發生 500 error page 的問題
接著從 facebook 上點選任何報導者文章，皆會跳轉到 500 error page
請讀者使用無痕開網頁，沒有相同問題。
過一陣子後，讀者再次打開報導者網頁，問題也不復存在。

rss2.xml 404 not found

https://www.twreporter.org/a/rss2.xml

Header 2.0 implementation.

After header 2.0 mockup releases,
there are several pages need to change.

topic page, such as (https://www.twreporter.org/topics/national-pension)
index page (https://www.twreporter.org/)
particular article page (https://www.twreporter.org/a/high-risk-youth-left-in-relic)

enlarge the arrow size of the carousel

It's too small for now.

Desktop sidebar overlaps on the footer

Bug report

Browsing website and found sidebar layout issue.

Description

Found desktop sidebar overlaps on the footer.

Steps to reproduce

Using screen width wider than 768px, and scroll page to bottom.

Actual behavior

Sidebar overlays on the footer.

Expected behavior

Sidebar doesn't overlay on the footer.

Screenshots

Possible solution

Update sidebar style.
If the behavior I referred above is accepted, I'm happy to make PR to update it.

nodemon won't run the webpack

every time when I modify the code, the nodemon will restart the node server. but it doesn't run the webpack to run the latest code changes.

Add donate per month page

根據昨天台北場的講座，定期定額的捐款頁面已經出來

不過頁面跟單次贊助是分開的，可能需要切成兩個連結。

https://twreporter.backme.tw/cashflow/checkout?locale=zh-TW&project_id=175&reward_id=1305

enable the category page

add fb share quote

ref: https://developers.facebook.com/docs/plugins/quote

the photography channel shows the blank page

the server side rendering doesn't get the data?

npm install is failed, because react-router want [email protected]

npm ERR! node v4.2.2
npm ERR! npm  v2.14.7
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]

Use relative links

Use relative links for www.twreporter.org pages

Author Component

Data Structure

// Because we have different roles,
// I put type property in each element of array.
// type will be 'writter', 'photographer', 'designer' and 'engineer'
[{
  name: '何榮幸',
  email: '[email protected]',
  bio: {
    md: '25年資歷，50歲記者的逆襲。期待記者生涯另一次探險。',
    html: '<p>25年資歷，50歲記者的逆襲。期待記者生涯另一次探險。</p>'
  },
  id: '571de7b7dae62379576d7f38',
  type: 'writter'
}, {
  name: '余志偉',
  email: '[email protected]',
  bio: {
    md: '學習攝影、新聞、藝術與新媒體，喜歡天馬行空、嘗試與創新。自由、參與、共享，努力讓台灣攝影環境及發展更多元。',
    html: '<p>學習攝影、新聞、藝術與新媒體，喜歡天馬行空、嘗試與創新。自由、參與、共享，努力讓台灣攝影環境及發展更多元。</p>'
  },
  id: '571de7bbdae62379576d7f42',
  type: 'photographer'
}, {
  name: '殷子衿',
  email: '[email protected]',
  bio: {
    md: '子衿的簡介。',
    html: '<p>子衿的簡介。</p>'
  },
  id: '571de7bbdae6237957677722',
  type: 'designer'
}, {
  name: '簡信昌',
  email: '[email protected]',
  bio: {
    md: 'HC的簡介。',
    html: '<p>HC的簡介。</p>'
  },
  id: '571de7bbdae62379576222222',
  type: 'engineer'
}]

React Component

We may need two Author components,
one is for the beginning of the article, like '文/何榮幸攝/余志偉設計/殷子衿工程師/簡信昌';
another is the block, including personal biography, for the end of the article.

// authors will be the object defined above.

// HeadingAuthor component is the beginning one. 
<HeadingAuthor // component name could be changed if this one is not proper.
  authors={authors}
/>

<Author
  authors={authors}
/>

twitter sharing with content not title

For example,
This article
https://www.twreporter.org/a/hualien-wumingyi

When I click twitter share button, I see the text is article content but not title.
Like this:
http://twitter.com/share?url=https://www.twreporter.org/a/hualien-wumingyi&text=%E4%B8%83%E6%98%9F%E6%BD%AD%E7%95%B6%E7%84%B6%E6%98%AF%E6%95%B4%E5%80%8B%E8%8A%B1%E8%93%AE%E5%B1%85%E6%B0%91%E3%80%81%E5%8F%B0%E7%81%A3%E6%B0%91%E7%9C%BE%E7%9A%84%E9%87%8D%E8%A6%81%E5%85%AC%E5%85%B1%E8%B2%A1%EF%BC%8C%E5%AE%83%E4%B8%8D%E8%A9%B2%E8%A2%AB%E7%9F%AD%E6%9A%AB%E7%9A%84%E8%A7%80%E5%85%89%E5%88%A9%E7%9B%8A%E5%89%9D%E5%89%8A%E3%80%82...

I think using title as text is more reasonable.
Please consider to change it. Thanks.

react CSS Modules

css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader
or
css-loader?modules&importLoaders=1&localIdentName=[name]__[local]!postcss-loader

webpack

module: {
  loaders: [
    {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader',
      'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]!postcss-loader')
    }
  ]
}

ref.

Expand carousel left-and-right navigation to entire vertical column

「首頁上方輪播的左右按鈕太小」

https://www.facebook.com/portnoyzheng/posts/10153190268136555?comment_id=10153190304146555&reply_comment_id=10153190330351555&comment_tracking={%22tn%22%3A%22R1%22}

Production: TypeError: "e[n] is undefined" (2019/12/30 22:45)

Problem

website broke when visit https://www.twreporter.org/a/online-gambling-industry-taiwan-role

Screen shot

Environment

OS: win7
Browser: Firefox 71.0 (64bit), both normal and private tab
- chrome is fine

A real purpose about this issue

I just want to say GOOD JOB to the dev Team. Bcuz twreporter is

well performance
good design
PWA installable (I never saw any News/CMS website with PWA installable)

feel FREE to close this issue WITHOUT reason！

👍 👍 👍 👍 👍

Remove mobile-detect

mobile-detect pkg makes the bundle size too large.
We should use other way to replace it, since we are not really using it so much.

Use travis-ci for code quality

Travis-ci can check every commit and PR to make sure code quality.(Run lint and test)

It is free for open source project.

news speker for visual impairment

var msg = new SpeechSynthesisUtterance('你好!! 地球人');
speechSynthesis.speak(msg);

Please let me know if you have any problem after upgrade.

Top-level navigation does not work in Firefox

On homepage, clicking any of the top-level categories results in:

TypeError: CSS2Properties doesn't have an indexed property setter for '0'
x.setValueForStyles()
 main.js:76
r.measure/a()
 main.js:1
b.Mixin._updateDOMProperties()
 main.js:78

Chrome and Safari works just fine.

Sitemap

https://support.google.com/webmasters/answer/183668

Bookmark page is not auto-refreshed

Reproduce steps

A user performs login.
Bookmark an arbitrary page.
Directly click the bookmark page.
The bookmark page did not contain the newly booked one.
The new one will emerge after the page is refreshed.

Article with `fullscreen` layout should have placeholder according to its style

When client side rendering an article with fullscreen layout, it will show the placeholder as ordinary layout.

Maybe better box shadow

before

box-shadow: rgba(0, 0, 0, 0.0901961) 0px 0px 15px;

after

box-shadow: box-shadow: rgba(0, 0, 0, 0.0901961) 0px 30px 20px -20px, rgba(0, 0, 0, 0.0901961) 0px 0px 3px;

TopNews carousel does not work on older iOS device.

@kidwm
could you help to see this problem?

npm start leads to 500 and readme instruction issue

$ npm -v
2.14.7

$ node -v
v4.2.3

$ npm install
...

$ npm start

> [email protected] start /Users/muan/oss/twreporter-react
> webpack --progress && nodemon server

Hash: e548a46de06cae666cba  
Version: webpack 1.12.9
Time: 6269ms
   Asset     Size  Chunks             Chunk Names
 main.js  2.35 MB       0  [emitted]  main
main.css  20.7 kB       0  [emitted]  main
    + 611 hidden modules

WARNING in ./~/react-burger-menu/lib/menuFactory.js
Module not found: Error: Cannot resolve module 'imports' in /Users/muan/oss/twreporter-react/node_modules/react-burger-menu/lib
 @ ./~/react-burger-menu/lib/menuFactory.js 164:19-97
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
[nodemon] 1.8.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server`
Server is listening to port: 3000

WARNING in ./~/react-burger-menu/lib/menuFactory.js
Module not found: Error: Cannot resolve module 'imports' in /Users/muan/oss/twreporter-react/node_modules/react-burger-menu/lib
 @ ./~/react-burger-menu/lib/menuFactory.js 164:19-97

☝️ This is not related to the 500 and can be fixed by adding imports-loader, ref: negomi/react-burger-menu#13 (comment).

And I'm not sure how 549fe41#diff-04c6e90faac2675aa89e2176d2eec7d8R6 makes sense, doesn't that mean installing dev dependencies only? which I tried, but the dependencies couldn't resolve. cc @c9s

error peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!

twreporter / twreporter-react Goto Github PK

twreporter-react's Introduction

TW Reporter

Contains

Environment

Installation

Production start

Development start

Build docker image

Testing

License

twreporter-react's People

Contributors

Stargazers

Watchers

Forkers

twreporter-react's Issues

Problem Description

Problem Description

Problem Description

TO DO

Features (DESKTOP)(PENDING, wait for spec)

Features (Mobile)

Performance Tuning

Bug report

Description

Steps to reproduce

Actual behavior

Expected behavior

Screenshots

Possible solution

Data Structure

React Component

Problem

Screen shot

Environment

A real purpose about this issue

before

after

Recommend Projects

Recommend Topics

Recommend Org