rushilwiz/tj-sga-website-react
1
0
Fork 0
mirror of https://github.com/tjsga/tj-sga-website-react.git synced 2025-04-21 12:00:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Made articles look nicer

Browse Source
This commit is contained in:
Michael Fatemi 2020-11-29 01:02:20 -05:00
parent b5a52bfd75
commit a21cf6cd80
6 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintcache
View File

File diff suppressed because one or more lines are too long

9
src/App.css
View File

@ -27,6 +27,10 @@
text-align: center; text-align: center;
} }
.text-sm {
font-size: 0.75rem;
}
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -56,3 +60,8 @@
color: #38A3BD; color: #38A3BD;
display: inline-block; display: inline-block;
} }
.clickable-link {
text-decoration: underline;
color: #38A3BD;
}

4
src/App.tsx
View File

@ -9,7 +9,7 @@ import initiatives from './pages/initiatives';
import involved from './pages/involved'; import involved from './pages/involved';
import mission from './pages/mission'; import mission from './pages/mission';
import news from './pages/news'; import news from './pages/news';
import newsArticle from './pages/newsArticle'; import newsarticle from './pages/newsarticle';
import notFound from './pages/404'; import notFound from './pages/404';
import officers from './pages/officers'; import officers from './pages/officers';
import committee from './pages/committee'; import committee from './pages/committee';
@ -22,7 +22,7 @@ export default function App() {
<Switch> <Switch>
<Route path='/initiatives' exact component={initiatives} /> <Route path='/initiatives' exact component={initiatives} />
<Route path='/involved' exact component={involved} /> <Route path='/involved' exact component={involved} />
<Route path='/news/:articleId' component={newsArticle} /> <Route path='/news/:articleId' component={newsarticle} />
<Route path='/news' exact component={news} /> <Route path='/news' exact component={news} />
<Route path='/mission' exact component={mission} /> <Route path='/mission' exact component={mission} />
<Route path='/officers' exact component={officers} /> <Route path='/officers' exact component={officers} />

2
src/components/ArticleRow.tsx
View File

@ -25,7 +25,7 @@ export default function ArticleRow({
) : null} ) : null}
</div> </div>
<div className='article-row-content'> <div className='article-row-content'>
<Link to={'/news/' + article._id + '/' + slug(article.title)}> <Link to={'/news/' + article._id + '/' + slug(article.title)} className="clickable-link">
<h3>{article.title}</h3> <h3>{article.title}</h3>
</Link> </Link>
<i className='text-sm'> <i className='text-sm'>

6
src/css/article.css
View File

@ -22,3 +22,9 @@
flex: 3; flex: 3;
padding: 10px; padding: 10px;
} }
.article-paragraphs {
font-size: 22px;
line-height: 33px;
font-weight: 400;
}

41
src/pages/newsArticle.tsx
View File

@ -4,34 +4,45 @@ import Hero from '../components/Hero';
import useQuery from '../hooks/useQuery'; import useQuery from '../hooks/useQuery';
import imageUrl from '../imageUrl'; import imageUrl from '../imageUrl';
import BlockContent from '@sanity/block-content-to-react'; import BlockContent from '@sanity/block-content-to-react';
import '../css/article.css';
export default function NewsArticle() { export default function NewsArticle() {
let { articleId } = useParams<{ articleId: string }>(); let { articleId } = useParams<{ articleId: string }>();
let article = useQuery<SGA.ArticleDocument>('*[_id == $articleId] [0]', { let article = useQuery<SGA.ArticleDocument>('*[_id == $articleId] [0]', {
articleId, articleId,
}); });
if (!article) {
return null;
}
let thumbUrl: string | undefined = undefined; let thumbUrl: string | undefined = undefined;
if (article.thumbnail) { if (article?.thumbnail) {
thumbUrl = imageUrl(article.thumbnail).url() || undefined; thumbUrl = imageUrl(article.thumbnail).url() || undefined;
} else {
thumbUrl = '/images/hero.png';
} }
return ( return (
<> <>
<Hero heading={article.title} imageURL={thumbUrl} /> <Hero heading='News' imageURL={thumbUrl} />
<div style={{ maxWidth: '640px' }} className='mx-auto mt-4 mb-8'> <Link to='/news' className='clickable-link'>
<i className='text-sm'> Go to all news articles
{article.publish_date} - {article.author || 'No author'} </Link>
</i> <br />
<br /> {article ? (
<Link to='/news'>Go to all news articles</Link> <div style={{ maxWidth: '640px', margin: '2rem auto' }}>
<br /> <h1>{article.title}</h1>
<BlockContent blocks={article.content}></BlockContent> <i className='text-sm'>{article.publish_date}</i>
<br /> <br />
</div> <i>{article.author || 'No author'}</i>
<br />
{/* Wrap the BlockContent in a div because it expands to <></> */}
<div className='article-paragraphs'>
<BlockContent blocks={article.content} />
</div>
<br />
<Link to='/news' className='clickable-link'>
Go to all news articles
</Link>
</div>
) : null}
</> </>
); );
} }