discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

cover_caption

Browse Source
This commit is contained in:
Untone 2023-12-08 14:49:37 +03:00
parent 1ea72651cf
commit 9b0fa22a1c
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Article/FullArticle.tsx
View File

@ -33,6 +33,7 @@ import { ShoutRatingControl } from './ShoutRatingControl'
import styles from './Article.module.scss' import styles from './Article.module.scss'
import stylesHeader from '../Nav/Header/Header.module.scss' import stylesHeader from '../Nav/Header/Header.module.scss'
import { capitalize } from '../../utils/capitalize'
type Props = { type Props = {
article: Shout article: Shout
@ -59,7 +60,7 @@ const imgSrcRegExp = /<img[^>]+src\s*=\s*["']([^"']+)["']/gi
export const FullArticle = (props: Props) => { export const FullArticle = (props: Props) => {
const [selectedImage, setSelectedImage] = createSignal('') const [selectedImage, setSelectedImage] = createSignal('')
const { t, formatDate } = useLocalize() const { t, formatDate, lang } = useLocalize()
const { const {
author, author,
isAuthenticated, isAuthenticated,
@ -70,9 +71,11 @@ export const FullArticle = (props: Props) => {
const formattedDate = createMemo(() => formatDate(new Date(props.article.created_at * 1000))) const formattedDate = createMemo(() => formatDate(new Date(props.article.created_at * 1000)))
const mainTopic = createMemo(() => const mainTopic = createMemo(() => {
props.article.topics.length > 0 ? props.article.topics.reverse()[0] : null, const mt = props.article.topics.length > 0 ? props.article.topics[0] : null
) mt.title = lang() == 'en' ? capitalize(mt.slug.replace('-', ' ')) : mt.title
return mt
})
const canEdit = () => props.article.authors?.some((a) => a.slug === author()?.slug) const canEdit = () => props.article.authors?.some((a) => a.slug === author()?.slug)
@ -319,7 +322,10 @@ export const FullArticle = (props: Props) => {
props.article.layout !== 'image' props.article.layout !== 'image'
} }
> >
<Image width={800} alt={props.article.cover_caption} src={props.article.cover} /> <figure class="img-align-column">
<Image width={800} alt={props.article.cover_caption} src={props.article.cover} />
<figcaption>{props.article.cover_caption}</figcaption>
</figure>
</Show> </Show>
</div> </div>
</Show> </Show>
@ -501,7 +507,9 @@ export const FullArticle = (props: Props) => {
<For each={props.article.topics}> <For each={props.article.topics}>
{(topic) => ( {(topic) => (
<div class={styles.shoutTopic}> <div class={styles.shoutTopic}>
<a href={getPagePath(router, 'topic', { slug: topic.slug })}>{topic.title}</a> <a href={getPagePath(router, 'topic', { slug: topic.slug })}>
{lang() == 'en' ? capitalize(topic.slug) : topic.title}
</a>
</div> </div>
)} )}
</For> </For>