Skip to content

Commit

Permalink
Home Page (#52)
Browse files Browse the repository at this point in the history
Add a dedicated landing page, with big nav buttons.
  • Loading branch information
s2t2 authored Feb 13, 2021
1 parent 2caa2c0 commit 14b066c
Show file tree
Hide file tree
Showing 9 changed files with 177 additions and 25 deletions.
13 changes: 13 additions & 0 deletions REFERENCES.md
Original file line number Diff line number Diff line change
Expand Up @@ -294,9 +294,22 @@ npm install jquery @popperjs/core --save
## Icons
### Octicons
```sh
npm install @primer/octicons-react --save
```
+ https://primer.style/octicons/question-16
+ https://primer.style/octicons/packages/react
### React-Icons
Actually let's use all the icons
```sh
npm install react-icons --save
```
+ https://www.npmjs.com/package/react-icons
5 changes: 5 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"react-force-graph": "^1.37.1",
"react-ga": "^3.1.2",
"react-gauge-chart": "^0.2.5",
"react-icons": "^4.1.0",
"react-plotly.js": "^2.5.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
Expand Down
8 changes: 3 additions & 5 deletions src/_App/About.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,9 @@ export default function About() {
<Card.Title><h3>Source Code</h3></Card.Title>

<ul>
<li><a href="https://github.com/zaman-lab/tweet-analyzer-py/blob/master/start">Tweet Collection and Analysis Notebooks (Python)</a></li>
<li><a href="https://github.com/zaman-lab/tweet-analyzer-py">Tweet Collection and Analysis Scripts (Python)</a></li>

<li><a href="https://github.com/zaman-lab/tweet-analyzer-py/blob/master/api">Impeachment Tweet Analysis API (Python / Flask)</a> -- powers parts of this website </li>
<li><a href="https://github.com/zaman-lab/impeachment-web-react">Impeachment Tweet Analysis Website (JavaScript / React.js)</a> -- this website!</li>
<li><a href="https://github.com/zaman-lab/tweet-analyzer-py">Tweet Collection and Analysis (Python / Notebooks)</a></li>
<li><a href="https://github.com/zaman-lab/tweet-analyzer-py/blob/master/api">Impeachment Tweet Analysis API (Python / Flask)</a> - powers parts of this website </li>
<li><a href="https://github.com/zaman-lab/impeachment-web-react">Impeachment Tweet Analysis Website (JavaScript / React.js)</a> - this website</li>
</ul>

</Card.Body>
Expand Down
10 changes: 5 additions & 5 deletions src/_App/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
//import 'react-bootstrap-typeahead/css/Typeahead.css';
import './App.css'

//import Home from './Home.js'
import Home from './Home.js'
import About from './About.js'
import sidebar from './sidebar.js'

Expand Down Expand Up @@ -94,7 +94,7 @@ export default function App() {

<div className="d-none d-lg-block d-md-block d-xl-block">
<Navbar fixed="top" bg="light">
<Navbar.Brand href="/" style={{fontSize:22}}>Impeachment Tweet Analysis</Navbar.Brand>
<Navbar.Brand href="/" style={{fontSize:22}}>Impeachment Tweet Analysis (2020)</Navbar.Brand>

<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
Expand All @@ -107,7 +107,7 @@ export default function App() {

<div className="sidebarMobile d-sm-block d-md-none">
<Navbar bg="light" collapseOnSelect expand="lg">
<Navbar.Brand href="/">Impeachment Tweet Analysis</Navbar.Brand>
<Navbar.Brand href="/">Impeachment Tweet Analysis (2020)</Navbar.Brand>

<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
Expand Down Expand Up @@ -140,11 +140,11 @@ export default function App() {

<Col md={10} className="page">
<Switch>
{/* <Route path="/" exact component={Home} /> */}
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
{sidebarRoutes}

<Route exact path="/"><Redirect to="/bot-impact" /></Route>
{/* <Route exact path="/"><Redirect to="/bot-impact" /></Route> */}
<Route exact path="/bot-classification"><Redirect to="/bot-detection" /></Route>
<Route exact path="/bot-communities"><Redirect to="/bot-clustering" /></Route>
<Route exact path="/bot-networks"><Redirect to="/bot-clustering" /></Route>
Expand Down
2 changes: 1 addition & 1 deletion src/_App/BotAnalysis/Language/Section.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default function BotLanguageSection() {
<Card.Text>
It is interesting to observe pro-Trump bots using hashtags like <i>'#QANON'</i>, <i>'#WWG1WGA'</i>, and <i>'#GREATAWAKENING'</i>,
{" "} which are <a href="https://wt.social/post/fighting-misinformation/nvrqyhu5325591624484">related</a>
{" "} to the debunked <a href="https://www.cbsnews.com/news/what-is-the-qanon-conspiracy-theory/">"Q-Anon" conspiracy theory</a>.
{" "} to the baseless <a href="https://www.cbsnews.com/news/what-is-the-qanon-conspiracy-theory/">"Q-Anon" conspiracy theory</a>.
</Card.Text>

</Card.Body>
Expand Down
62 changes: 62 additions & 0 deletions src/_App/Home.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@



/* https://getbootstrap.com/docs/4.0/layout/overview/ */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
}
*/

/* Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
}
*/

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

.my-center-block-button {
width: 205px;
display: inline-block;
margin: 0 10px !important;
}

}


/* Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}
*/














/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

.my-center-block-button {
width: 205px;
display: inline-block;
margin: 0 10px !important;
}

}
99 changes: 86 additions & 13 deletions src/_App/Home.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,97 @@


import React from 'react'
//import Container from 'react-bootstrap/Container'
//import Row from 'react-bootstrap/Row'
//import Col from 'react-bootstrap/Col'
//import Card from 'react-bootstrap/Card'
import { useHistory } from 'react-router-dom'
import { Container, Row, Col, Jumbotron, Card, Button } from 'react-bootstrap'
//import AboutCard from './About/Card'

//import HomePage from './OpinionAnalysis/Page'
//import HomePage from './BotAnalysis/Impact/Page'
import { GoHubot as RobotIcon } from 'react-icons/go'
import { AiOutlineDashboard as DashboardIcon} from 'react-icons/ai'
import { VscTwitter as TwitterIcon } from 'react-icons/vsc'

//import AboutCard from './About/Card'
import HomePage from './BotAnalysis/Impact/Section'
import './Home.css'

export default function Home() {
const history = useHistory()

function redirectTweetCollection(event) {
event.preventDefault()
history.push("/tweet-collection")
}

function redirectOpinionAnalysis(event) {
event.preventDefault()
history.push("/opinion-analysis")
}

function redirectBotAnalysis(event) {
event.preventDefault()
history.push("/bot-analysis")
}

return (
<HomePage/>
<Container fluid>

<Card>
<Card.Body>
<Card.Title><h2>Bots and Disinformation in Social Networks: The Impeachment of Donald Trump</h2></Card.Title>

<Card.Text class="lead">
A research project by Michael J Rossetti and Tauhid Zaman.
</Card.Text>

<Card.Text>
Disinformation is
{/*
<a href="https://www.merriam-webster.com/dictionary/disinformation">defined as</a>
*/}

{" "} "false information deliberately and often covertly spread (as by the planting of rumors) in order to influence public opinion or obscure the truth."

</Card.Text>

<Card.Text>
Disinformation can lead to dangerous and violent events, most notably exemplified by the Trump Capitol Insurrection of 2021, in which armed supporters of Donald Trump stormed the US Capitol building with intentions of harming members of congress.
{" "}But what precipitated these events?
</Card.Text>

<Card.Text>
{" "}In our paper, we analyze the spread of disinformation on Twitter about the 2020 Impeachment of Donald Trump, and the role of automated accounts known as "bots" in amplifying this content across the social network.
</Card.Text>


<Card.Text>
For more information, click the links below...
</Card.Text>


<div className="my-btn-group text-center">
<Button size="lg" variant="outline-primary" className="my-center-block-button" onClick={redirectTweetCollection} block>
<span style={{marginRight:"8px"}}><TwitterIcon verticalAlign="middle"/></span>
Tweet Collection
</Button>

<Button size="lg" variant="outline-primary" className="my-center-block-button" onClick={redirectOpinionAnalysis} block>
<span style={{marginRight:"8px"}}><DashboardIcon /></span>
Opinion Analysis
</Button>

<Button size="lg" variant="outline-primary" className="my-center-block-button" onClick={redirectBotAnalysis} block>
<span style={{marginRight:"8px"}}><RobotIcon verticalAlign="middle"/></span>
Bot Analysis
</Button>
</div>







</Card.Body>
</Card>

</Container>

//<Container fluid>
// <AboutCard/>
// <Section/>
//</Container>
)
}
2 changes: 1 addition & 1 deletion src/_App/OpinionAnalysis/TopUsers/VBarChart.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default class MyBarChart extends Component {
opinionMetric: "avg_score_lr",
opinionRange: [0, 100],
followerMin: 200_000, //0, //412_000,
tweetMin: 5 //3, //30,
tweetMin: 20 //3, //30,
}

this.selectUserCategories = this.selectUserCategories.bind(this)
Expand Down

0 comments on commit 14b066c

Please sign in to comment.