Navy.gif/owncast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Collapse news content in the admin home page (#236)

Browse Source 
* use Collapse for news feed

* set url as the Panel key
This commit is contained in:
Meisam 2021-07-01 21:09:06 +02:00 committed by GitHub
parent bfb1faee21
commit f64d06279d
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/components/news-feed.tsx
View File

@ -1,11 +1,12 @@
/* eslint-disable camelcase */ /* eslint-disable camelcase */
/* eslint-disable react/no-danger */ /* eslint-disable react/no-danger */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Typography, Skeleton } from 'antd'; import { Collapse, Typography, Skeleton } from 'antd';
import format from 'date-fns/format'; import format from 'date-fns/format';
import { fetchExternalData } from '../utils/apis'; import { fetchExternalData } from '../utils/apis';
const { Panel } = Collapse;
const { Title, Link } = Typography; const { Title, Link } = Typography;
const OWNCAST_FEED_URL = 'https://owncast.online/news/index.json'; const OWNCAST_FEED_URL = 'https://owncast.online/news/index.json';
@ -23,13 +24,12 @@ function ArticleItem({ title, url, content_html: content, date_published: date }
const dateString = format(dateObject, 'MMM dd, yyyy, HH:mm'); const dateString = format(dateObject, 'MMM dd, yyyy, HH:mm');
return ( return (
<article> <article>
<p className="timestamp">{dateString}</p> <Collapse>
<Title level={3}> <Panel header={title} key={url}>
<Link href={`${OWNCAST_BASE_URL}${url}`} target="_blank" rel="noopener noreferrer"> <p className="timestamp">{dateString} (<Link href={`${OWNCAST_BASE_URL}${url}`} target="_blank" rel="noopener noreferrer">Link</Link>)</p>
{title} <div dangerouslySetInnerHTML={{ __html: content }} />
</Link> </Panel>
</Title> </Collapse>
<div dangerouslySetInnerHTML={{ __html: content }} />
</article> </article>
); );
} }