- -
-
+
-
+
{t('Publications')}
{author().stat.shouts}
- -
-
+
-
+
{t('Comments')}
{author().stat.comments}
- -
+
-
checkBioHeight()}
- href={getPagePath(router, 'authorAbout', { slug: props.authorSlug })}
+ href={getPagePath(router, 'authorAbout', {
+ slug: props.authorSlug,
+ })}
>
{t('Profile')}
diff --git a/src/components/Views/Expo/Expo.tsx b/src/components/Views/Expo/Expo.tsx
index eddd12a4..82e43dfe 100644
--- a/src/components/Views/Expo/Expo.tsx
+++ b/src/components/Views/Expo/Expo.tsx
@@ -24,34 +24,31 @@ type Props = {
layout: LayoutType
}
-export const PRERENDERED_ARTICLES_COUNT = 37
-const LOAD_MORE_PAGE_SIZE = 11
+export const PRERENDERED_ARTICLES_COUNT = 36
+const LOAD_MORE_PAGE_SIZE = 12
export const Expo = (props: Props) => {
const [isLoaded, setIsLoaded] = createSignal(Boolean(props.shouts))
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
- const [randomTopArticles, setRandomTopArticles] = createSignal([])
- const [randomTopMonthArticles, setRandomTopMonthArticles] = createSignal([])
+ const [favoriteTopArticles, setFavoriteTopArticles] = createSignal([])
+ const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal([])
const { t } = useLocalize()
- // const { sortedArticles } = useArticlesStore({
- // shouts: isLoaded() ? props.shouts : [],
- // })
const { sortedArticles } = useArticlesStore({
- shouts: props.shouts || [],
+ shouts: isLoaded() ? props.shouts : [],
layout: props.layout,
})
const getLoadShoutsFilters = (additionalFilters: LoadShoutsFilters = {}): LoadShoutsFilters => {
- const filters = { featured: true, ...additionalFilters }
+ const filters = { ...additionalFilters }
if (!filters.layouts) filters.layouts = []
if (props.layout) {
filters.layouts.push(props.layout)
} else {
- filters.layouts.push('article')
+ filters.layouts.push('audio', 'video', 'image', 'literature')
}
return filters
@@ -80,13 +77,12 @@ export const Expo = (props: Props) => {
const loadRandomTopArticles = async () => {
const options: LoadShoutsOptions = {
- filters: getLoadShoutsFilters(),
+ filters: { ...getLoadShoutsFilters(), featured: true },
limit: 10,
random_limit: 100,
}
-
const result = await apiClient.getRandomTopShouts({ options })
- setRandomTopArticles(result)
+ setFavoriteTopArticles(result)
}
const loadRandomTopMonthArticles = async () => {
@@ -94,19 +90,15 @@ export const Expo = (props: Props) => {
const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
const options: LoadShoutsOptions = {
- filters: getLoadShoutsFilters({ after }),
+ filters: { ...getLoadShoutsFilters({ after }), reacted: true },
limit: 10,
random_limit: 10,
}
const result = await apiClient.getRandomTopShouts({ options })
- setRandomTopMonthArticles(result)
+ setReactedTopMonthArticles(result)
}
- const pages = createMemo(() =>
- splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
- )
-
onMount(() => {
if (isLoaded()) {
return
@@ -130,8 +122,8 @@ export const Expo = (props: Props) => {
() => props.layout,
() => {
resetSortedArticles()
- setRandomTopArticles([])
- setRandomTopMonthArticles([])
+ setFavoriteTopArticles([])
+ setReactedTopMonthArticles([])
loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
loadRandomTopArticles()
loadRandomTopMonthArticles()
@@ -202,7 +194,7 @@ export const Expo = (props: Props) => {
-
+
{(shout) => (
)}
- 0} keyed={true}>
-
+ 0} keyed={true}>
+
-
+
{(shout) => (
)}
- 0} keyed={true}>
-
+ 0} keyed={true}>
+
-
- {(page) => (
-
- {(shout) => (
-
- )}
-
+
+ {(shout) => (
+
)}
diff --git a/src/components/Views/Feed/Feed.tsx b/src/components/Views/Feed/Feed.tsx
index aeee25b9..e457cafc 100644
--- a/src/components/Views/Feed/Feed.tsx
+++ b/src/components/Views/Feed/Feed.tsx
@@ -54,6 +54,13 @@ type FeedSearchParams = {
visibility: VisibilityMode
}
+type Props = {
+ loadShouts: (options: LoadShoutsOptions) => Promise<{
+ hasMore: boolean
+ newShouts: Shout[]
+ }>
+}
+
const getFromDate = (period: FeedPeriod): number => {
const now = new Date()
let d: Date = now
@@ -74,18 +81,10 @@ const getFromDate = (period: FeedPeriod): number => {
return Math.floor(d.getTime() / 1000)
}
-type Props = {
- loadShouts: (options: LoadShoutsOptions) => Promise<{
- hasMore: boolean
- newShouts: Shout[]
- }>
-}
-
export const FeedView = (props: Props) => {
const { t } = useLocalize()
const monthPeriod: PeriodItem = { value: 'month', title: t('This month') }
- const visibilityAll = { value: 'featured', title: t('All') }
const periods: PeriodItem[] = [
{ value: 'week', title: t('This week') },
@@ -121,7 +120,7 @@ export const FeedView = (props: Props) => {
const currentVisibility = createMemo(() => {
const visibility = visibilities.find((v) => v.value === searchParams().visibility)
if (!visibility) {
- return visibilityAll
+ return visibilities[0]
}
return visibility
})
@@ -172,6 +171,7 @@ export const FeedView = (props: Props) => {
}
const visibilityMode = searchParams().visibility
+
if (visibilityMode === 'all') {
options.filters = { ...options.filters }
} else if (visibilityMode) {
@@ -185,6 +185,7 @@ export const FeedView = (props: Props) => {
const period = searchParams().period || 'month'
options.filters = { after: getFromDate(period) }
}
+
return props.loadShouts(options)
}
diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
index 6e1b4d8d..51f27325 100644
--- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
+++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
@@ -1,6 +1,7 @@
import { clsx } from 'clsx'
import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
+import { useFollowing } from '../../../context/following'
import { useLocalize } from '../../../context/localize'
import { useSession } from '../../../context/session'
import { apiClient } from '../../../graphql/client/core'
@@ -20,41 +21,32 @@ import stylesSettings from '../../../styles/FeedSettings.module.scss'
export const ProfileSubscriptions = () => {
const { t, lang } = useLocalize()
- const { author } = useSession()
+ const { author, session } = useSession()
+ const { subscriptions } = useFollowing()
const [following, setFollowing] = createSignal
>([])
const [filtered, setFiltered] = createSignal>([])
const [subscriptionFilter, setSubscriptionFilter] = createSignal('all')
const [searchQuery, setSearchQuery] = createSignal('')
- const fetchSubscriptions = async () => {
- try {
- const slug = author()?.slug
- const authorFollows = await apiClient.getAuthorFollows({ slug })
- setFollowing([...authorFollows['authors']])
- setFiltered([...authorFollows['authors'], ...authorFollows['topics']])
- } catch (error) {
- console.error('[fetchSubscriptions] :', error)
- throw error
- }
- }
-
createEffect(() => {
- if (following()) {
+ const { authors, topics } = subscriptions
+ if (authors || topics) {
+ const fdata = [...(authors || []), ...(topics || [])]
+ setFollowing(fdata)
if (subscriptionFilter() === 'authors') {
- setFiltered(following().filter((s) => 'name' in s))
+ setFiltered(fdata.filter((s) => 'name' in s))
} else if (subscriptionFilter() === 'topics') {
- setFiltered(following().filter((s) => 'title' in s))
+ setFiltered(fdata.filter((s) => 'title' in s))
} else {
- setFiltered(following())
+ setFiltered(fdata)
}
}
- if (searchQuery()) {
- setFiltered(dummyFilter(following(), searchQuery(), lang()))
- }
})
- onMount(async () => {
- await fetchSubscriptions()
+ createEffect(() => {
+ if (searchQuery()) {
+ setFiltered(dummyFilter(following(), searchQuery(), lang()))
+ }
})
return (
@@ -73,17 +65,29 @@ export const ProfileSubscriptions = () => {
{t('Here you can manage all your Discours subscriptions')}
}>
- -
+
-
- -
+
-
- -
+
-
diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx
index 34d2683b..97a107dd 100644
--- a/src/components/Views/Topic.tsx
+++ b/src/components/Views/Topic.tsx
@@ -1,8 +1,8 @@
-import type { Shout, Topic } from '../../graphql/schema/core.gen'
+import { LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen'
import { Meta } from '@solidjs/meta'
import { clsx } from 'clsx'
-import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js'
+import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
import { useLocalize } from '../../context/localize'
import { useRouter } from '../../stores/router'
@@ -21,7 +21,9 @@ import { Row3 } from '../Feed/Row3'
import { FullTopic } from '../Topic/Full'
import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
+import { apiClient } from '../../graphql/client/core'
import styles from '../../styles/Topic.module.scss'
+import { getUnixtime } from '../../utils/getServerDate'
type TopicsPageSearchParams = {
by: 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'commented'
@@ -43,14 +45,56 @@ export const TopicView = (props: Props) => {
const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
const { topicEntities } = useTopicsStore({ topics: [props.topic] })
const { authorsByTopic } = useAuthorsStore()
+ const [favoriteTopArticles, setFavoriteTopArticles] = createSignal([])
+ const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal([])
const [topic, setTopic] = createSignal()
+
createEffect(() => {
const topics = topicEntities()
if (props.topicSlug && !topic() && topics) {
setTopic(topics[props.topicSlug])
}
})
+
+ const loadFavoriteTopArticles = async (topic: string) => {
+ const options: LoadShoutsOptions = {
+ filters: { featured: true, topic: topic },
+ limit: 10,
+ random_limit: 100,
+ }
+ const result = await apiClient.getRandomTopShouts({ options })
+ setFavoriteTopArticles(result)
+ }
+
+ const loadReactedTopMonthArticles = async (topic: string) => {
+ const now = new Date()
+ const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
+
+ const options: LoadShoutsOptions = {
+ filters: { after: after, featured: true, topic: topic },
+ limit: 10,
+ random_limit: 10,
+ }
+
+ const result = await apiClient.getRandomTopShouts({ options })
+
+ setReactedTopMonthArticles(result)
+ }
+
+ const loadRandom = () => {
+ loadFavoriteTopArticles(topic()?.slug)
+ loadReactedTopMonthArticles(topic()?.slug)
+ }
+
+ createEffect(
+ on(
+ () => topic(),
+ () => loadRandom(),
+ { defer: true },
+ ),
+ )
+
const title = createMemo(
() =>
`#${capitalize(
@@ -75,6 +119,7 @@ export const TopicView = (props: Props) => {
}
onMount(() => {
+ loadRandom()
if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
loadMore()
}
@@ -170,9 +215,9 @@ export const TopicView = (props: Props) => {
beside={sortedArticles()[4]}
wrapper={'author'}
/>
-
-
-
+ 0} keyed={true}>
+
+
{
+ 0} keyed={true}>
+
+
15}>
-
diff --git a/src/components/_shared/Icon/Icon.module.scss b/src/components/_shared/Icon/Icon.module.scss
index 6618efa9..4cafd050 100644
--- a/src/components/_shared/Icon/Icon.module.scss
+++ b/src/components/_shared/Icon/Icon.module.scss
@@ -10,18 +10,23 @@
}
.notificationsCounter {
- background-color: #d00820;
- border: 2px solid #fff;
- border-radius: 2em;
+ align-items: center;
+ background-color: #E84500;
+ border-radius: 0.8rem;
color: #fff;
- font-size: 1rem;
+ display: flex;
+ font-size: 1.2rem;
font-weight: 700;
- height: 1.6em;
- left: 1.1em;
- line-height: 1.25em;
+ height: 2.2rem;
+ justify-content: center;
+ left: 1.6rem;
+ min-width: 2.2rem;
padding: 0 0.25em;
position: absolute;
text-align: center;
top: -0.5rem;
- min-width: 1.5em;
+
+ @include media-breakpoint-up(md) {
+ left: 1.8rem;
+ }
}
diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
index 1de1fe65..674ac701 100644
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@@ -1,7 +1,7 @@
import { clsx } from 'clsx'
import { For, Show, createEffect, createSignal, on, onCleanup, onMount } from 'solid-js'
import SwiperCore from 'swiper'
-import { Manipulation, Navigation, Pagination } from 'swiper/modules'
+import { HashNavigation, Manipulation, Navigation, Pagination } from 'swiper/modules'
import { throttle } from 'throttle-debounce'
import { MediaItem } from '../../../pages/types'
@@ -12,6 +12,8 @@ import { Lightbox } from '../Lightbox'
import { SwiperRef } from './swiper'
+import { useRouter } from '../../../stores/router'
+import { ArticlePageSearchParams } from '../../Article/FullArticle'
import styles from './Swiper.module.scss'
type Props = {
@@ -31,10 +33,13 @@ export const ImageSwiper = (props: Props) => {
const [slideIndex, setSlideIndex] = createSignal(0)
const [isMobileView, setIsMobileView] = createSignal(false)
const [selectedImage, setSelectedImage] = createSignal('')
+ const { searchParams, changeSearchParams } = useRouter()
const handleSlideChange = () => {
- thumbSwipeRef.current.swiper.slideTo(mainSwipeRef.current.swiper.activeIndex)
- setSlideIndex(mainSwipeRef.current.swiper.activeIndex)
+ const activeIndex = mainSwipeRef.current.swiper.activeIndex
+ thumbSwipeRef.current.swiper.slideTo(activeIndex)
+ setSlideIndex(activeIndex)
+ changeSearchParams({ slide: `${activeIndex + 1}` })
}
createEffect(
@@ -51,8 +56,19 @@ export const ImageSwiper = (props: Props) => {
onMount(async () => {
const { register } = await import('swiper/element/bundle')
register()
- SwiperCore.use([Pagination, Navigation, Manipulation])
- mainSwipeRef.current?.swiper?.on('slideChange', handleSlideChange)
+ SwiperCore.use([Pagination, Navigation, Manipulation, HashNavigation])
+ while (!mainSwipeRef.current || !mainSwipeRef.current.swiper) {
+ await new Promise((resolve) => setTimeout(resolve, 10)) // wait 10 ms
+ }
+ mainSwipeRef.current.swiper.on('slideChange', handleSlideChange)
+ const initialSlide = parseInt(searchParams().slide) - 1
+ if (initialSlide && !Number.isNaN(initialSlide) && initialSlide < props.images.length) {
+ mainSwipeRef.current.swiper.slideTo(initialSlide, 0)
+ } else {
+ changeSearchParams({ slide: '1' })
+ }
+
+ mainSwipeRef.current.swiper.init()
})
onMount(() => {
@@ -103,6 +119,9 @@ export const ImageSwiper = (props: Props) => {
watch-slides-visibility={true}
direction={'horizontal'}
slides-per-group-auto={true}
+ hash-navigation={{
+ watchState: true,
+ }}
>
{(slide, index) => (
@@ -149,7 +168,7 @@ export const ImageSwiper = (props: Props) => {
{(slide, index) => (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
-
+
diff --git a/src/components/_shared/SolidSwiper/Swiper.module.scss b/src/components/_shared/SolidSwiper/Swiper.module.scss
index b8e5b990..f3f182e8 100644
--- a/src/components/_shared/SolidSwiper/Swiper.module.scss
+++ b/src/components/_shared/SolidSwiper/Swiper.module.scss
@@ -135,9 +135,13 @@
.counter {
@include font-size(1.2rem);
+ @include media-breakpoint-up(sm) {
+ top: 477px;
+ }
+
position: absolute;
z-index: 2;
- top: 477px;
+ top: 276px;
right: 0;
font-weight: 600;
padding: 0.2rem 0.8rem;
diff --git a/src/context/following.tsx b/src/context/following.tsx
index 2e2d1a44..a6b07a03 100644
--- a/src/context/following.tsx
+++ b/src/context/following.tsx
@@ -2,7 +2,7 @@ import { Accessor, JSX, createContext, createEffect, createMemo, createSignal, u
import { createStore } from 'solid-js/store'
import { apiClient } from '../graphql/client/core'
-import { Author, AuthorFollows, Community, FollowingEntity, Topic } from '../graphql/schema/core.gen'
+import { Author, AuthorFollowsResult, FollowingEntity } from '../graphql/schema/core.gen'
import { useSession } from './session'
@@ -16,8 +16,9 @@ type SubscribeAction = { slug: string; type: 'subscribe' | 'unsubscribe' }
interface FollowingContextType {
loading: Accessor
- subscriptions: AuthorFollows
- setSubscriptions: (subscriptions: AuthorFollows) => void
+ followers: Accessor>
+ subscriptions: AuthorFollowsResult
+ setSubscriptions: (subscriptions: AuthorFollowsResult) => void
setFollowing: (what: FollowingEntity, slug: string, value: boolean) => void
loadSubscriptions: () => void
follow: (what: FollowingEntity, slug: string) => Promise
@@ -32,7 +33,7 @@ export function useFollowing() {
return useContext(FollowingContext)
}
-const EMPTY_SUBSCRIPTIONS: AuthorFollows = {
+const EMPTY_SUBSCRIPTIONS: AuthorFollowsResult = {
topics: [],
authors: [],
communities: [],
@@ -40,9 +41,9 @@ const EMPTY_SUBSCRIPTIONS: AuthorFollows = {
export const FollowingProvider = (props: { children: JSX.Element }) => {
const [loading, setLoading] = createSignal(false)
- const [subscriptions, setSubscriptions] = createStore(EMPTY_SUBSCRIPTIONS)
- const { session, author } = useSession()
- const [subscribeInAction, setSubscribeInAction] = createSignal()
+ const [followers, setFollowers] = createSignal>([])
+ const [subscriptions, setSubscriptions] = createStore(EMPTY_SUBSCRIPTIONS)
+ const { author, session } = useSession()
const fetchData = async () => {
setLoading(true)
@@ -94,8 +95,17 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
createEffect(() => {
if (author()) {
- console.debug('[context.following] author update detect')
- fetchData()
+ try {
+ const appdata = session()?.user.app_data
+ if (appdata) {
+ const { authors, followers, topics } = appdata
+ setSubscriptions({ authors, topics })
+ setFollowers(followers)
+ if (!authors) fetchData()
+ }
+ } catch (e) {
+ console.error(e)
+ }
}
})
@@ -125,6 +135,7 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
subscriptions,
setSubscriptions,
setFollowing,
+ followers,
loadSubscriptions: fetchData,
follow,
unfollow,
diff --git a/src/context/session.tsx b/src/context/session.tsx
index 73659a6c..3a189cc1 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -1,5 +1,5 @@
import type { Accessor, JSX, Resource } from 'solid-js'
-import type { AuthModalSource } from '../components/Nav/AuthModal/types'
+import type { AuthModalSearchParams, AuthModalSource } from '../components/Nav/AuthModal/types'
import type { Author } from '../graphql/schema/core.gen'
import {
@@ -29,7 +29,6 @@ import {
import { inboxClient } from '../graphql/client/chat'
import { apiClient } from '../graphql/client/core'
-import { notifierClient } from '../graphql/client/notifier'
import { useRouter } from '../stores/router'
import { showModal } from '../stores/ui'
import { addAuthors } from '../stores/zine/authors'
@@ -136,6 +135,7 @@ export const SessionProvider = (props: {
const [isSessionLoaded, setIsSessionLoaded] = createSignal(false)
const [authError, setAuthError] = createSignal('')
+ const { clearSearchParams } = useRouter()
// Function to load session data
const sessionData = async () => {
@@ -143,7 +143,7 @@ export const SessionProvider = (props: {
const s: ApiResponse = await authorizer().getSession()
if (s?.data) {
console.info('[context.session] loading session', s)
-
+ clearSearchParams()
// Set session expiration time in local storage
const expires_at = new Date(Date.now() + s.data.expires_in * 1000)
localStorage.setItem('expires_at', `${expires_at.getTime()}`)
@@ -199,6 +199,7 @@ export const SessionProvider = (props: {
}
onCleanup(() => clearTimeout(minuteLater))
+
const authorData = async () => {
const u = session()?.user
return u ? (await apiClient.getAuthorId({ user: u.id.trim() })) || null : null
@@ -217,7 +218,18 @@ export const SessionProvider = (props: {
apiClient.connect(token)
inboxClient.connect(token)
}
- if (!author()) loadAuthor()
+
+ try {
+ const appdata = session()?.user.app_data
+ if (appdata) {
+ const { profile } = appdata
+ setAuthor(profile)
+ addAuthors([profile])
+ if (!profile) loadAuthor()
+ }
+ } catch (e) {
+ console.error(e)
+ }
setIsSessionLoaded(true)
}
@@ -263,7 +275,6 @@ export const SessionProvider = (props: {
() => {
props.onStateChangeCallback(session())
},
- { defer: true },
),
)
@@ -368,6 +379,7 @@ export const SessionProvider = (props: {
}
const isAuthenticated = createMemo(() => Boolean(author()))
+
const actions = {
loadSession,
requireAuthentication,
diff --git a/src/graphql/client/core.ts b/src/graphql/client/core.ts
index e7d8708e..e80f2e6d 100644
--- a/src/graphql/client/core.ts
+++ b/src/graphql/client/core.ts
@@ -1,6 +1,6 @@
import type {
Author,
- AuthorFollows,
+ AuthorFollowsResult,
CommonResult,
FollowingEntity,
LoadShoutsOptions,
@@ -134,7 +134,7 @@ export const apiClient = {
slug?: string
author_id?: number
user?: string
- }): Promise => {
+ }): Promise => {
const response = await publicGraphQLClient.query(authorFollows, params).toPromise()
return response.data.get_author_follows
},
diff --git a/src/pages/author.page.tsx b/src/pages/author.page.tsx
index 39c4dc28..e23f92d3 100644
--- a/src/pages/author.page.tsx
+++ b/src/pages/author.page.tsx
@@ -56,17 +56,11 @@ export const AuthorPage = (props: PageProps) => {
onCleanup(() => resetSortedArticles())
- const usePrerenderedData = props.author?.slug === slug()
-
return (
}>
-
+
diff --git a/src/pages/profile/Settings.module.scss b/src/pages/profile/Settings.module.scss
index 898b2496..9bd4906c 100644
--- a/src/pages/profile/Settings.module.scss
+++ b/src/pages/profile/Settings.module.scss
@@ -320,3 +320,14 @@ h5 {
margin-bottom: 0;
}
}
+
+// disable last pass extention
+
+div[data-lastpass-icon-root="true"] {
+ opacity: 0 !important;
+}
+
+div[data-lastpass-infield="true"] {
+ opacity: 0 !important;
+}
+
diff --git a/src/stores/router.ts b/src/stores/router.ts
index be197bd1..8be3b78c 100644
--- a/src/stores/router.ts
+++ b/src/stores/router.ts
@@ -114,8 +114,8 @@ const handleClientRouteLinkClick = async (event) => {
}
if (url.hash) {
- scrollToHash(url.hash)
- return
+ // scrollToHash(url.hash)
+ // return
}
window.scrollTo({
diff --git a/src/stores/zine/authors.ts b/src/stores/zine/authors.ts
index 131b70c6..2253b84e 100644
--- a/src/stores/zine/authors.ts
+++ b/src/stores/zine/authors.ts
@@ -1,5 +1,5 @@
import { createLazyMemo } from '@solid-primitives/memo'
-import { createSignal } from 'solid-js'
+import { createEffect, createSignal } from 'solid-js'
import { apiClient } from '../../graphql/client/core'
import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen'
diff --git a/src/styles/app.scss b/src/styles/app.scss
index db3a68bc..0bb124a4 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -588,6 +588,7 @@ figure {
display: block;
max-height: 90vh;
margin: auto;
+ width: 100%;
}
}
@@ -622,6 +623,10 @@ figure {
margin-bottom: 0.6em;
white-space: nowrap;
+ @include media-breakpoint-up(md) {
+ margin-right: 2.4rem;
+ }
+
.link {
border-bottom: none;
}
diff --git a/src/utils/getImageUrl.ts b/src/utils/getImageUrl.ts
index 7d88cd51..e13872cc 100644
--- a/src/utils/getImageUrl.ts
+++ b/src/utils/getImageUrl.ts
@@ -1,26 +1,41 @@
import { cdnUrl, thumborUrl } from './config'
-const getSizeUrlPart = (options: { width?: number; height?: number; noSizeUrlPart?: boolean } = {}) => {
- const widthString = options.width ? options.width.toString() : ''
- const heightString = options.height ? options.height.toString() : ''
+const URL_CONFIG = {
+ cdnUrl: cdnUrl,
+ thumborUrl: `${thumborUrl}/unsafe/`,
+ audioSubfolder: 'audio',
+ imageSubfolder: 'image',
+ productionFolder: 'production/',
+}
- if (!(widthString || heightString) || options.noSizeUrlPart) {
- return ''
- }
+const AUDIO_EXTENSIONS = new Set(['wav', 'mp3', 'ogg', 'aif', 'flac'])
- return `${widthString}x${heightString}/`
+const isAudioFile = (filename: string): boolean => {
+ const extension = filename.split('.').pop()?.toLowerCase()
+ return AUDIO_EXTENSIONS.has(extension ?? '')
+}
+const getLastSegment = (url: string): string => url.toLowerCase().split('/').pop() || ''
+
+const buildSizePart = (width?: number, height?: number, includeSize = true): string => {
+ if (!includeSize) return ''
+ const widthPart = width ? width.toString() : ''
+ const heightPart = height ? height.toString() : ''
+ return widthPart || heightPart ? `${widthPart}x${heightPart}/` : ''
}
export const getImageUrl = (
src: string,
options: { width?: number; height?: number; noSizeUrlPart?: boolean } = {},
-) => {
- const filename = src?.split('/').pop()
- const isAudio = src.toLowerCase().split('.').pop() in ['wav', 'mp3', 'ogg', 'aif', 'flac']
- const base = isAudio ? cdnUrl : `${thumborUrl}/unsafe/`
- const sizeUrlPart = isAudio ? '' : getSizeUrlPart(options)
+): string => {
+ if (!src.includes('discours.io') && src.includes('http')) {
+ return src
+ }
+ const filename = getLastSegment(src)
+ const base = isAudioFile(filename) ? URL_CONFIG.cdnUrl : URL_CONFIG.thumborUrl
+ const suffix = options.noSizeUrlPart ? '' : buildSizePart(options.width, options.height)
+ const subfolder = isAudioFile(filename) ? URL_CONFIG.audioSubfolder : URL_CONFIG.imageSubfolder
- return `${base}${sizeUrlPart}production/${isAudio ? 'audio' : 'image'}/${filename}`
+ return `${base}${suffix}${URL_CONFIG.productionFolder}${subfolder}/${filename}`
}
export const getOpenGraphImageUrl = (
@@ -32,17 +47,16 @@ export const getOpenGraphImageUrl = (
width?: number
height?: number
},
-) => {
- const sizeUrlPart = getSizeUrlPart(options)
-
+): string => {
+ const sizeUrlPart = buildSizePart(options.width, options.height)
const filtersPart = `filters:discourstext('${encodeURIComponent(options.topic)}','${encodeURIComponent(
options.author,
)}','${encodeURIComponent(options.title)}')/`
- if (src.startsWith(thumborUrl)) {
- const thumborKey = src.replace(`${thumborUrl}/unsafe`, '')
- return `${thumborUrl}/unsafe/${sizeUrlPart}${filtersPart}${thumborKey}`
+ if (src.startsWith(URL_CONFIG.thumborUrl)) {
+ const thumborKey = src.replace(URL_CONFIG.thumborUrl, '')
+ return `${URL_CONFIG.thumborUrl}${sizeUrlPart}${filtersPart}${thumborKey}`
}
- return `${thumborUrl}/unsafe/${sizeUrlPart}${filtersPart}${src}`
+ return `${URL_CONFIG.thumborUrl}${sizeUrlPart}${filtersPart}${src}`
}