Skip to content

Commit

Permalink
about and articles page finalized
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryaanahmed
ryaanahmed committed Sep 14, 2023
1 parent 208ecaf commit d0b8a2c
Show file tree
Hide file tree
Showing 11 changed files with 148 additions and 269 deletions.
2 changes: 1 addition & 1 deletion backend/blog/serializers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class BlogPostSerializer(serializers.ModelSerializer):

@staticmethod
def get_absolute_url(instance):
return f"/{settings.BLOG_ROOT_URL}/{instance.slug}"
return f"/blog/{instance.slug}"

@staticmethod
def get_author(instance):
Expand Down
2 changes: 1 addition & 1 deletion backend/config/settings/base.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
# as well, but we no longer do this: all image display is via the S3 bucket.
LOCAL_PHOTOS_DIR = None

BLOG_ROOT_URL = "blog"
BLOG_ROOT_URL = "articles"


# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/
Expand Down
2 changes: 1 addition & 1 deletion backend/templates/includes/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<a class="nav-link" href="/explore/">Explore</a>
</li>
<li>
<a class="nav-link" href="/blog/">Articles</a>
<a class="nav-link" href="/articles/">Articles</a>
</li>
<li>
<a class="nav-link" href="/about/">About</a>
Expand Down
24 changes: 3 additions & 21 deletions frontend/components/BlogSidebar.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React from "react";
import * as PropTypes from "prop-types";
import {Container} from "react-bootstrap";
import {truncateText} from "../common";

export class BlogSidebar extends React.Component {
constructor(props) {
Expand All @@ -17,22 +15,6 @@ export class BlogSidebar extends React.Component {
render() {
return (
<div className="blog-sidebar">
<div className="card mb-4 border-0">
<div className="card-body">
<div className="card-title mb-1 fw-bold">Tags</div>
<Container>
{this.state.tags.map((tag) => {
return(
//outputs a list of tag buttons
// FIXME: each tag should take you to blogs tagged with same
<a key={tag} className="btn-secondary tag-button btn-sm blog-sidebar-tag-button"
href={`/tag/${tag}`}
role="button">{tag}</a>);
})}
</Container>
</div>
</div>

<div className="card mb-4 border-0">
<div className="card-body">
<div className="title mb-1 fw-bold">Posts</div>
Expand All @@ -41,9 +23,9 @@ export class BlogSidebar extends React.Component {
if(post.published) {
return (
//outputs a list of post links
<li key={post.slug} id="blog-sidebar-post-list">
<a className="post-link" href={"/blog/" + post.slug}>
{truncateText(post.title,4)}
<li key={post.slug} className="blog-sidebar-post-list">
<a className="post-link" href={"/articles/" + post.slug}>
{post.title}
</a>
</li>);
}
Expand Down
10 changes: 5 additions & 5 deletions frontend/components/TitleDecoratorContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,18 @@ export class TitleDecoratorContainer extends React.Component {
marginBottom: 30,
paddingTop: 22,
paddingLeft: 20

};

return (
<Container className="p-0 title-decorator-container">
<Container className="p-0 mt-4 title-decorator-container">
<Row className="p-0">
<Col className="p-0">
{/* <TitleDecorator
{/* <TitleDecorator
id="site-decorator"
top={22} left={-1.5} width={221} height={55}
top={22} left={-1.5} width={221} height={55}
decorator_type={"title-decorator"}/> */}

{/* <img src={} /> */}
<h2 style={headerStyle}> {this.props.title}</h2>
</Col>
Expand Down
137 changes: 37 additions & 100 deletions frontend/pages/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import * as PropTypes from "prop-types";
import { Container, Row, Col, Image, Figure, Card } from 'react-bootstrap';

import Footer from "../components/Footer";
import TitleDecoratorContainer from "../components/TitleDecoratorContainer";
import about_page_right_citylist from "../images/about_page_right_citylist.svg?url";
Expand Down Expand Up @@ -230,113 +231,49 @@ const studentMembers = [
}
];



function TeamMember(props) {
return (
<div className="urop-view">
<img className="urop-image" src={props.photoSrc} />
<div className="urop-image-overlay">
<div className="urop-text">
<h4>{props.name}</h4>
<p>Here is a paragraph about this person!</p>
</div>
</div>
</div>
<Card className="mb-3" style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>{props.name}</Card.Title>
<Card.Text>Here is a paragraph about this person!</Card.Text>
</Card.Body>
</Card>
);
}

class About extends React.Component {
render() {
return (<>
<div className="page">
<TitleDecoratorContainer title={"About"}/>
<div className="about-text">
{/*<ul>{this.props.text.map((section, key) => {*/}
{/* return <li key={key}>*/}
{/* {section.section === "intro"*/}
{/* ? <><TitleDecoratorContainer title={section.title}/> hello we're here</>*/}
{/* : <h2>{section.title}</h2>}*/}
{/* </li>;*/}
{/*})}</ul>*/}
<p className="project-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio
eu feugiat pretium nibh ipsum consequat nisl vel pretium. Malesuada
nunc vel risus commodo viverra maecenas accumsan lacus vel. Cras
pulvinar mattis nunc sed blandit libero volutpat. Aliquam faucibus
purus in massa tempor nec feugiat nisl pretium. Quam nulla porttitor
massa id neque aliquam. Quam quisque id diam vel quam elementum
pulvinar etiam non. Etiam dignissim diam quis enim lobortis scelerisque
fermentum. Fringilla urna porttitor rhoncus dolor purus non. Vel
fringilla est ullamcorper eget nulla facilisi etiam. Tristique et
egestas quis ipsum suspendisse ultrices gravida. Vehicula ipsum a arcu
cursus vitae. Donec et odio pellentesque diam. Morbi tincidunt ornare
massa eget egestas purus viverra accumsan. Neque vitae tempus quam
pellentesque nec nam aliquam sem. Vitae congue mauris rhoncus aenean.
</p>
<img className="cropped_map" src={about_page_right_cropped_map} width="130" height="881"/>
<img className="city_list" src={about_page_right_citylist} width="700" height="700"/>
<img className="right_image" src={about_page_right_image} width="700" height="700"/>
<TitleDecoratorContainer title={"Project Director"}/>
return (
<>
<Container id="aboutPage">

<div className="prof-img-div text-wrap col-xs-2 col-sm-5 col-md-5 col-lg-3">
<figure className="figure">
<img
className="prof-img"
src={Clark_Catherine}
alt="Catherine Clark"
/>
<div className="prof-titles">
<div className="staff-name">Catherine Clark</div>
<figcaption className="figure-caption">
Faculty Director & Associate Professor of History and French Studies
</figcaption>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio
eu feugiat pretium nibh ipsum consequat nisl vel pretium. Malesuada
nunc vel risus commodo viverra maecenas accumsan lacus vel. Cras
pulvinar mattis nunc sed blandit libero volutpat. Aliquam faucibus
purus in massa tempor nec feugiat nisl pretium. Quam nulla porttitor
massa id neque aliquam. Quam quisque id diam vel quam elementum
pulvinar etiam non. Etiam dignissim diam quis enim lobortis scelerisque
fermentum. Fringilla urna porttitor rhoncus dolor purus non. Vel
fringilla est ullamcorper eget nulla facilisi etiam. Tristique et
egestas quis ipsum suspendisse ultrices gravida. Vehicula ipsum a arcu
cursus vitae. Donec et odio pellentesque diam. Morbi tincidunt ornare
massa eget egestas purus viverra accumsan. Neque vitae tempus quam
pellentesque nec nam aliquam sem. Vitae congue mauris rhoncus aenean.
</p>
</div>
</figure>
</div>
</div>
<div className="team">
{/* <div className="about-title">Staff Members</div> */}
<TitleDecoratorContainer title={"Staff Members"}/>
<div className="row justify-content-center">
{staffMembers.map((member, k) => (
<TeamMember
key={k}
name={member.name}
photoSrc={member.photoSrc}
/>
))}
</div>
{/* <div className="about-title">UROP Members</div> */}
<TitleDecoratorContainer title={"UROP Members"}/>
<div className="row justify-content-center">
{studentMembers.map((member, k) => (
<TeamMember
key={k}
name={member.name}
photoSrc={member.photoSrc}
/>
))}
</div>
</div>
</div>
<Footer/>
</>);
<Row>
<TitleDecoratorContainer title="About" />
<Col>
<p>
In May 1970, thousands of amateur photographers spread out across Paris to take pictures. They were participants in a photo contest, “This was Paris in 1970,” organized by the cooperative electronics store the Fnac. Each contestant had been assigned to document a 250m square of the city. By the end of the month, this army of photographers had produced an unprecedented collection of 100,000 photographs: 70,000 black-and-white prints and 30,000 colors slides. This website currently hosts 5,000 color slides from the 13th and 19th arrondissements, areas of the city which were undergoing significant change in 1960s and 1970s.
</p>
<p>
The project This was Paris in 1970 provides tools to explore the rich archive: a <a href="/map">map</a> to see the photos square by square; an <a href="/explore">object detector</a> to search for photos of many objects from people to cats, cars to strollers; a similar photo viewer to identify photos by composition rather than subject; and <a href="/articles">articles</a> providing context and analysis.
</p>
</Col>
</Row>
<Row>
<TitleDecoratorContainer title="The Team" />
<p>
This is Paris in 1970 was created in MIT’s Digital Humanities Lab as a collaboration between DH Fellow <a href="https://history.mit.edu/people/catherine-clark/">Prof. Catherine Clark</a>, <a href="https://digitalhumanities.mit.edu/people/alumni">four dozen undergraduate research associates</a>, and <a href="https://digitalhumanities.mit.edu/people">the instructional staff</a> of the DH Lab. Justice Vidal built out the first version of the site, and Nina Li spearheaded the design work.
</p>
<p>
The <a href="https://www.paris.fr/lieux/bibliotheque-historique-de-la-ville-de-paris-bhvp-16">Bibliothèque historique de la Ville de Paris</a> holds the contest photographs. Its photo department made this project possible.
</p>
</Row>
</Container>
<Footer />
</>
);
}
}

Expand Down
12 changes: 8 additions & 4 deletions frontend/pages/Blog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ function Posts(props) {
<div className="blog-post-short card-body">
<h1 className="blog-title">
<a href={post.absolute_url}>
{truncateText(post.title, 4)}
{post.title}
</a>
</h1>
<h5 className="blog-author">{post.author + " "}
<h5 className="blog-author">
{post.subtitle}<br/>
<small className="text-muted">
{post.published ? "Published" : "Preview"} {post.date}
</small>
Expand All @@ -32,7 +33,7 @@ function Posts(props) {
}}
/>
<a className="stretched-link text-decoration-none text-uppercase post-link"
href={"/blog/" + post.slug}> Read more
href={"/articles/" + post.slug}> Read more
</a>
<div className="list-inline mb-4 mt-3">
{
Expand Down Expand Up @@ -66,7 +67,10 @@ class Blog extends React.Component {
return (<Container className="blog-home" id="app_root">
<Row>
<Col lg={8}>
<h2 className="blog-list-title">Blog</h2>
<h2 className="blog-list-title">Articles</h2>
<p>
Here you will find work exploring Paris, the contest photos, and this project’s tools. Some of this is student work; some is by more established researchers. If you use the photos and would like your work to be included here, please email <a href="https://history.mit.edu/people/catherine-clark/" target="_blank" rel="noreferrer">Catherine Clark</a>.
</p>
<Posts
posts={this.props.posts}
tags={this.props.tags}
Expand Down
4 changes: 0 additions & 4 deletions frontend/pages/BlogPostView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@ export class BlogPost extends React.Component {
<Container className="mt-3">
<Row>
<Col className={"blog-post"} lg={8}>
{
//May need to change this statement. Can pose security risks and
//may also be outdated method of rendering raw HTML
}
<h1 className="blog-title">
<a href={this.props.post.absolute_url}>
{this.props.post.title}
Expand Down
14 changes: 5 additions & 9 deletions frontend/pages/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const WorkInProgressModal = ({showModal, handleClose}) => {

export class HomePage extends React.Component {
state = {
showModal: false
showModal: true
};

handleClose = () => this.setState({showModal: false});
Expand All @@ -71,8 +71,7 @@ export class HomePage extends React.Component {
<a href="/explore/">
<Row className="section-row photo-archive gx-0">
<Col sm={4} className="home-section-text">
<h2 className="h4">Photography Archive: Explore Photos</h2>
<p>Capture a time of change in the city</p>
<h2 className="h4">Explore Photos by Subject</h2>
<span className="large-arrow right">⟶</span>
</Col>
<Col sm={8} className="home-section-photo" style={{ backgroundImage: `url(${Walking_Man})` }} />
Expand All @@ -87,18 +86,16 @@ export class HomePage extends React.Component {
}}
/>
<Col sm={4} className="home-section-text">
<h2 className="h4">Map Squares</h2>
<p>Capture a time of change in the city</p>
<h2 className="h4">View Photos by Location</h2>
<span className="large-arrow left">⟵</span>
</Col>
</Row>
</a>

<a href="/blog/">
<a href="/articles/">
<Row className="section-row context gx-0">
<Col xs={8} sm={4} className="home-section-text">
<h2 className="h4">Context: Paris 1970 photo contest</h2>
<p>Capture a time of change in the city</p>
<h2 className="h4">Context and Research</h2>
<span className="large-arrow right">⟶</span>
</Col>
<Col xs={4} sm={8} className="home-section-photo"
Expand All @@ -118,7 +115,6 @@ export class HomePage extends React.Component {
/>
<Col sm={4} className="home-section-text">
<h2 className="h4">About the Project</h2>
<p>Learn about MIT Prof. Catherine Clark and the Digital Humanities Lab</p>
<span className="large-arrow left">⟵</span>
</Col>
</Row>
Expand Down
Loading

0 comments on commit d0b8a2c

Please sign in to comment.