+ {/*TODO: Check styles.shoutTopic*/}
+
-
+
+
0 && props.article.layout !== 'image'}>
+
+
+
-
-
-
+
-
+
+
-
-
- {/* @@TODO implement image zoom */}
- {props.article.title}
-
-
+
- {/* @@TODO add album's year and genre
-
-
-
- {(a: Author, index) => (
- <>
- 0}>,
- {a.name}
-
- )}
-
-
+ {props.article.title}
+{capitalize(props.article.subtitle, false)}
+year
- genre
*/}
-
- })
-
-
+
+ {(a: Author, index) => (
+ <>
+ 0}>,
+ {a.name}
+
+ )}
+
-
-
-
+
+
+ {(m: MediaItem) => (
+
+
+
+
+
+
+ )}
+
+
+
-
- )}
-
- 
-
-
-
-
diff --git a/src/components/Discours/Subscribe.tsx b/src/components/Discours/Subscribe.tsx
index 0d794589..6357cedb 100644
--- a/src/components/Discours/Subscribe.tsx
+++ b/src/components/Discours/Subscribe.tsx
@@ -1,7 +1,7 @@
import { createSignal, JSX, Show } from 'solid-js'
import { useLocalize } from '../../context/localize'
-import { isValidEmail } from '../../utils/validators'
+import { validateEmail } from '../../utils/validateEmail'
import { Button } from '../_shared/Button'
import styles from './Subscribe.module.scss'
@@ -23,7 +23,7 @@ export default () => {
return false
}
- if (!isValidEmail(email())) {
+ if (!validateEmail(email())) {
setEmailError(t('Please check your email address'))
return false
}
diff --git a/src/components/Editor/VideoUploader/VideoUploader.tsx b/src/components/Editor/VideoUploader/VideoUploader.tsx
index 85725c6a..86bdab77 100644
--- a/src/components/Editor/VideoUploader/VideoUploader.tsx
+++ b/src/components/Editor/VideoUploader/VideoUploader.tsx
@@ -6,32 +6,27 @@ import { createEffect, createSignal, Show } from 'solid-js'
import { useSnackbar } from '../../../context/snackbar'
import { validateUrl } from '../../../utils/validateUrl'
import { VideoPlayer } from '../../_shared/VideoPlayer'
+import type { MediaItem } from '../../../pages/types'
// import { handleFileUpload } from '../../../utils/handleFileUpload'
-type VideoItem = {
- url: string
- title: string
- body: string
-}
-
type Props = {
class?: string
- data: (value: VideoItem) => void
+ data: (value: MediaItem[]) => void
}
export const VideoUploader = (props: Props) => {
const { t } = useLocalize()
const [dragActive, setDragActive] = createSignal(false)
- const [dragError, setDragError] = createSignal()
+ const [dragError, setDragError] = createSignal()
const [incorrectUrl, setIncorrectUrl] = createSignal(false)
- const [data, setData] = createSignal()
+ const [data, setData] = createSignal()
const updateData = (key, value) => {
setData((prev) => ({ ...prev, [key]: value }))
}
createEffect(() => {
- props.data(data())
+ props.data([data()])
})
const {
diff --git a/src/components/Editor/extensions/Article.ts b/src/components/Editor/extensions/Article.ts
index 15a91511..fc16dac0 100644
--- a/src/components/Editor/extensions/Article.ts
+++ b/src/components/Editor/extensions/Article.ts
@@ -48,6 +48,7 @@ export default Node.create({
return {
toggleArticle:
() =>
+ // eslint-disable-next-line unicorn/consistent-function-scoping
({ commands }) => {
return commands.toggleWrap('article')
},
diff --git a/src/components/Feed/ArticleCard.tsx b/src/components/Feed/ArticleCard.tsx
index 7ba125f3..b4b4e697 100644
--- a/src/components/Feed/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard.tsx
@@ -1,7 +1,6 @@
import { createMemo, createSignal, For, Show } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { capitalize, formatDate } from '../../utils'
-import { translit } from '../../utils/ru2en'
import { Icon } from '../_shared/Icon'
import styles from './ArticleCard.module.scss'
import { clsx } from 'clsx'
@@ -221,7 +220,10 @@ export const ArticleCard = (props: ArticleCardProps) => {
@@ -233,7 +235,10 @@ export const ArticleCard = (props: ArticleCardProps) => {
)}
@@ -244,7 +249,10 @@ export const ArticleCard = (props: ArticleCardProps) => {
)}
@@ -263,7 +271,10 @@ export const ArticleCard = (props: ArticleCardProps) => {
trigger={
}
/>
@@ -282,7 +293,10 @@ export const ArticleCard = (props: ArticleCardProps) => {
trigger={
}
/>
diff --git a/src/components/Nav/AuthModal/ForgotPasswordForm.tsx b/src/components/Nav/AuthModal/ForgotPasswordForm.tsx
index 04e76b3d..fb9268d0 100644
--- a/src/components/Nav/AuthModal/ForgotPasswordForm.tsx
+++ b/src/components/Nav/AuthModal/ForgotPasswordForm.tsx
@@ -7,7 +7,7 @@ import type { AuthModalSearchParams } from './types'
import { ApiError } from '../../../utils/apiClient'
import { signSendLink } from '../../../stores/auth'
import { useLocalize } from '../../../context/localize'
-import { isValidEmail } from '../../../utils/validators'
+import { validateEmail } from '../../../utils/validateEmail'
type FormFields = {
email: string
@@ -38,7 +38,7 @@ export const ForgotPasswordForm = () => {
if (!email()) {
newValidationErrors.email = t('Please enter email')
- } else if (!isValidEmail(email())) {
+ } else if (!validateEmail(email())) {
newValidationErrors.email = t('Invalid email')
}
diff --git a/src/components/Nav/AuthModal/LoginForm.tsx b/src/components/Nav/AuthModal/LoginForm.tsx
index f90c4dba..f62bb35f 100644
--- a/src/components/Nav/AuthModal/LoginForm.tsx
+++ b/src/components/Nav/AuthModal/LoginForm.tsx
@@ -9,7 +9,7 @@ import type { AuthModalSearchParams } from './types'
import { hideModal } from '../../../stores/ui'
import { useSession } from '../../../context/session'
import { signSendLink } from '../../../stores/auth'
-import { isValidEmail } from '../../../utils/validators'
+import { validateEmail } from '../../../utils/validateEmail'
import { generateModalTitleFromSource } from '../../../utils/custom-i18n'
import { useSnackbar } from '../../../context/snackbar'
@@ -76,7 +76,7 @@ export const LoginForm = () => {
if (!email()) {
newValidationErrors.email = t('Please enter email')
- } else if (!isValidEmail(email())) {
+ } else if (!validateEmail(email())) {
newValidationErrors.email = t('Invalid email')
}
diff --git a/src/components/Nav/AuthModal/RegisterForm.tsx b/src/components/Nav/AuthModal/RegisterForm.tsx
index e82ae40f..91775e3f 100644
--- a/src/components/Nav/AuthModal/RegisterForm.tsx
+++ b/src/components/Nav/AuthModal/RegisterForm.tsx
@@ -11,7 +11,7 @@ import { hideModal } from '../../../stores/ui'
import { checkEmail, useEmailChecks } from '../../../stores/emailChecks'
import { register } from '../../../stores/auth'
import { useLocalize } from '../../../context/localize'
-import { isValidEmail } from '../../../utils/validators'
+import { validateEmail } from '../../../utils/validateEmail'
import { generateModalTitleFromSource } from '../../../utils/custom-i18n'
type FormFields = {
@@ -40,7 +40,7 @@ export const RegisterForm = () => {
}
const handleEmailBlur = () => {
- if (isValidEmail(email())) {
+ if (validateEmail(email())) {
checkEmail(email())
}
}
@@ -93,7 +93,7 @@ export const RegisterForm = () => {
if (!cleanEmail) {
newValidationErrors.email = t('Please enter email')
- } else if (!isValidEmail(email())) {
+ } else if (!validateEmail(email())) {
newValidationErrors.email = t('Invalid email')
}
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index e1adb93c..d0db14da 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -195,7 +195,11 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
{/*FIXME: replace with route*/}
diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx
index 7b0c7637..6a5bcb78 100644
--- a/src/components/Views/Edit.tsx
+++ b/src/components/Views/Edit.tsx
@@ -1,4 +1,4 @@
-import { createSignal, For, onCleanup, onMount, Show } from 'solid-js'
+import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
import { useLocalize } from '../../context/localize'
import { clsx } from 'clsx'
import { Title } from '@solidjs/meta'
@@ -18,6 +18,7 @@ import { GrowingTextarea } from '../_shared/GrowingTextarea'
import { VideoUploader } from '../Editor/VideoUploader'
import { VideoPlayer } from '../_shared/VideoPlayer'
import { slugify } from '../../utils/slugify'
+import { SolidSwiper } from '../_shared/SolidSwiper'
type Props = {
shout: Shout
@@ -42,7 +43,7 @@ export const EditView = (props: Props) => {
const [isScrolled, setIsScrolled] = createSignal(false)
const [topics, setTopics] = createSignal
+
+
+
+
+
+ )
+}
diff --git a/src/components/_shared/DropArea/index.ts b/src/components/_shared/DropArea/index.ts
new file mode 100644
index 00000000..e88fc9d3
--- /dev/null
+++ b/src/components/_shared/DropArea/index.ts
@@ -0,0 +1 @@
+export { DropArea } from './DropArea'
diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
index 434753a9..7644e042 100644
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
+++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
@@ -11,11 +11,10 @@ type Props = {
}
export const GrowingTextarea = (props: Props) => {
- const [value, setValue] = createSignal('')
+ const [value, setValue] = createSignal
+
+ {loading() ? 'Loading...' : props.placeholder}
+ {dropAreaError()}
+ {props.description}
+
+
)
diff --git a/src/components/_shared/Slider.scss b/src/components/_shared/Slider/Slider.scss
similarity index 85%
rename from src/components/_shared/Slider.scss
rename to src/components/_shared/Slider/Slider.scss
index 7438b45e..1aa7d959 100644
--- a/src/components/_shared/Slider.scss
+++ b/src/components/_shared/Slider/Slider.scss
@@ -211,3 +211,43 @@
padding: 1rem;
width: auto;
}
+
+.uploadPreview {
+ background: unset;
+ position: relative;
+ padding: 0 40px;
+
+ .sliders-container {
+ position: relative;
+ }
+
+ .swiper {
+ background: unset;
+
+ .swiper-wrapper {
+ min-height: 400px;
+ }
+ }
+
+ .slider-arrow-next,
+ .slider-arrow-prev {
+ background: none;
+ filter: invert(1);
+ width: 40px;
+ max-height: 540px;
+
+ .icon {
+ margin: auto;
+ width: 12px;
+ height: 20px;
+ }
+ }
+
+ //
+ //.slider-arrow-prev {
+ // margin-left: -40px;
+ //}
+ //.slider-arrow-next {
+ // margin-right: -40px;
+ //}
+}
diff --git a/src/components/_shared/Slider.tsx b/src/components/_shared/Slider/Slider.tsx
similarity index 65%
rename from src/components/_shared/Slider.tsx
rename to src/components/_shared/Slider/Slider.tsx
index a4db0a32..d5744504 100644
--- a/src/components/_shared/Slider.tsx
+++ b/src/components/_shared/Slider/Slider.tsx
@@ -1,26 +1,28 @@
-import { Swiper, Navigation, Pagination, Lazy, Thumbs } from 'swiper'
+//TODO: Replace with SolidSwiper.tsx
+
+import { Swiper, Navigation, Pagination, Thumbs } from 'swiper'
import type { SwiperOptions } from 'swiper'
import 'swiper/scss'
import 'swiper/scss/navigation'
import 'swiper/scss/pagination'
-import 'swiper/scss/lazy'
import 'swiper/scss/thumbs'
import './Slider.scss'
import { createEffect, createSignal, JSX, Show } from 'solid-js'
-import { Icon } from './Icon'
+import { Icon } from '../Icon'
import { clsx } from 'clsx'
-interface SliderProps {
+interface Props {
title?: string
slidesPerView?: number
isCardsWithCover?: boolean
children?: JSX.Element
- class?: string
isPageGallery?: boolean
hasThumbs?: boolean
+ variant?: 'uploadPreview'
+ slideIndex?: (value: number) => void
}
-export default (props: SliderProps) => {
+export const Slider = (props: Props) => {
let el: HTMLDivElement | undefined
let thumbsEl: HTMLDivElement | undefined
let pagEl: HTMLDivElement | undefined
@@ -31,15 +33,20 @@ export default (props: SliderProps) => {
const [swiper, setSwiper] = createSignal()
const [swiperThumbs, setSwiperThumbs] = createSignal()
-
const opts: SwiperOptions = {
- lazy: true,
roundLengths: true,
loop: true,
centeredSlides: true,
slidesPerView: 1,
- modules: [Navigation, Pagination, Lazy, Thumbs],
+ modules: [Navigation, Pagination, Thumbs],
speed: 500,
+ on: {
+ slideChange: () => {
+ if (swiper()) {
+ props.slideIndex(swiper().realIndex || 0)
+ }
+ }
+ },
navigation: { nextEl, prevEl },
breakpoints: {
768: {
@@ -62,8 +69,7 @@ export default (props: SliderProps) => {
setSwiperThumbs(
new Swiper(thumbsEl, {
slidesPerView: 'auto',
- modules: [Lazy, Thumbs],
- lazy: true,
+ modules: [Thumbs],
roundLengths: true,
spaceBetween: 20,
freeMode: true,
@@ -98,14 +104,16 @@ export default (props: SliderProps) => {
})
return (
-
+
+
+
+
+
)
}
diff --git a/src/components/_shared/Slider/index.ts b/src/components/_shared/Slider/index.ts
new file mode 100644
index 00000000..6d43da3c
--- /dev/null
+++ b/src/components/_shared/Slider/index.ts
@@ -0,0 +1 @@
+export { Slider } from './Slider'
diff --git a/src/components/_shared/SolidSwiper/SolidSwiper.tsx b/src/components/_shared/SolidSwiper/SolidSwiper.tsx
new file mode 100644
index 00000000..e6802a3a
--- /dev/null
+++ b/src/components/_shared/SolidSwiper/SolidSwiper.tsx
@@ -0,0 +1,352 @@
+import { createEffect, createSignal, For, Match, Show, Switch, on } from 'solid-js'
+import { MediaItem } from '../../../pages/types'
+import { Icon } from '../Icon'
+import { Popover } from '../Popover'
+import { useLocalize } from '../../../context/localize'
+import { register } from 'swiper/element/bundle'
+import { DropArea } from '../DropArea'
+import { GrowingTextarea } from '../GrowingTextarea'
+import MD from '../../Article/MD'
+import { createFileUploader } from '@solid-primitives/upload'
+import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
+import { SwiperRef } from './swiper'
+import { validateFiles } from '../../../utils/validateFile'
+import { handleFileUpload } from '../../../utils/handleFileUpload'
+import { useSnackbar } from '../../../context/snackbar'
+import { Loading } from '../Loading'
+import { imageProxy } from '../../../utils/imageProxy'
+import { clsx } from 'clsx'
+import styles from './Swiper.module.scss'
+
+type Props = {
+ images: MediaItem[]
+ editorMode?: boolean
+ onImagesAdd?: (value: MediaItem[]) => void
+ onImagesSorted?: (value: MediaItem[]) => void
+ onImageDelete?: (mediaItemIndex: number) => void
+ onImageChange?: (index: number, value: MediaItem) => void
+}
+
+const composeMediaItem = (value) => {
+ return value.map((url) => {
+ return {
+ url: url,
+ source: '',
+ title: '',
+ body: ''
+ }
+ })
+}
+
+register()
+
+SwiperCore.use([Pagination, Navigation, Manipulation])
+
+export const SolidSwiper = (props: Props) => {
+ const { t } = useLocalize()
+ const [loading, setLoading] = createSignal(false)
+ const [slideIndex, setSlideIndex] = createSignal(0)
+
+ const dropAreaRef: { current: HTMLElement } = { current: null }
+ const mainSwipeRef: { current: SwiperRef } = { current: null }
+ const thumbSwipeRef: { current: SwiperRef } = { current: null }
+
+ const {
+ actions: { showSnackbar }
+ } = useSnackbar()
+
+ const handleSlideDescriptionChange = (index: number, field: string, value) => {
+ props.onImageChange(index, { ...props.images[index], [field]: value })
+ }
+ const swipeToUploaded = () => {
+ setTimeout(() => {
+ mainSwipeRef.current.swiper.slideTo(props.images.length - 1)
+ }, 0)
+ }
+ const handleSlideChange = () => {
+ thumbSwipeRef.current.swiper.slideTo(mainSwipeRef.current.swiper.activeIndex)
+ setSlideIndex(mainSwipeRef.current.swiper.activeIndex)
+ }
+
+ createEffect(
+ on(
+ () => props.images.length,
+ () => {
+ mainSwipeRef.current?.swiper.update()
+ thumbSwipeRef.current?.swiper.update()
+ }
+ )
+ )
+
+ const handleDropAreaUpload = (value: string[]) => {
+ props.onImagesAdd(composeMediaItem(value))
+ swipeToUploaded()
+ }
+
+ const handleDelete = (index: number) => {
+ props.onImageDelete(index)
+
+ if (index === 0) {
+ mainSwipeRef.current.swiper.update()
+ } else {
+ mainSwipeRef.current.swiper.slideTo(index - 1)
+ }
+ }
+
+ const { selectFiles } = createFileUploader({
+ multiple: true,
+ accept: `image/*`
+ })
+
+ const initUpload = async (selectedFiles) => {
+ const isValid = validateFiles('image', selectedFiles)
+ if (isValid) {
+ try {
+ setLoading(true)
+ const results: string[] = []
+ for (const file of selectedFiles) {
+ const result = await handleFileUpload(file)
+ results.push(result)
+ }
+ props.onImagesAdd(composeMediaItem(results))
+ setLoading(false)
+ swipeToUploaded()
+ } catch (error) {
+ await showSnackbar({ type: 'error', body: t('Error') })
+ console.error('[runUpload]', error)
+ }
+ } else {
+ await showSnackbar({ type: 'error', body: t('Invalid file type') })
+ return false
+ }
+ }
+ const handleUploadThumb = async () => {
+ selectFiles((selectedFiles) => {
+ initUpload(selectedFiles)
+ })
+ }
+
+ const handleChangeIndex = (direction: 'left' | 'right', index: number) => {
+ const images = [...props.images]
+ if (direction === 'left' && index > 0) {
+ const copy = images.splice(index, 1)[0]
+ images.splice(index - 1, 0, copy)
+ } else if (direction === 'right' && index < images.length - 1) {
+ const copy = images.splice(index, 1)[0]
+ images.splice(index + 1, 0, copy)
+ }
+ props.onImagesSorted(images)
+ setTimeout(() => {
+ mainSwipeRef.current.swiper.slideTo(direction === 'left' ? index - 1 : index + 1)
+ }, 0)
+ }
+
+ return (
+ = T extends `${infer F}${infer R}`
+ ? Kebab ? '' : '-'}${Lowercase}`>
+ : A
+
+/**
+ * Helper for converting object keys to kebab case because Swiper web components parameters are available as kebab-case attributes.
+ * @link https://swiperjs.com/element#parameters-as-attributes
+ */
+type KebabObjectKeys = {
+ // eslint-disable-next-line @typescript-eslint/ban-types
+ [key in keyof T as Kebab]: T[key] extends Object ? KebabObjectKeys : T[key]
+}
+
+/**
+ * Swiper 9 doesn't support Typescript yet, we are watching the following issue:
+ * @link https://github.com/nolimits4web/swiper/issues/6466
+ *
+ * All parameters can be found on the following page:
+ * @link https://swiperjs.com/swiper-api#parameters
+ */
+type SwiperRef = HTMLElement & { swiper: Swiper; initialize: () => void }
+
+declare module 'solid-js' {
+ namespace JSX {
+ interface IntrinsicElements {
+ 'swiper-container': SwiperContainerAttributes
+ 'swiper-slide': SwiperSlideAttributes
+ }
+
+ interface SwiperContainerAttributes extends KebabObjectKeys {
+ ref?: RefObject
+ children?: JSX.Element
+ onSlideChange?: () => void
+ class?: string
+ }
+ // eslint-disable-next-line @typescript-eslint/no-empty-interface
+ interface SwiperSlideAttributes extends KebabObjectKeys {
+ style?: unknown
+ }
+ }
+}
diff --git a/src/pages/create.page.tsx b/src/pages/create.page.tsx
index f48d0109..c6af1819 100644
--- a/src/pages/create.page.tsx
+++ b/src/pages/create.page.tsx
@@ -7,8 +7,9 @@ import styles from '../styles/Create.module.scss'
import { apiClient } from '../utils/apiClient'
import { redirectPage } from '@nanostores/router'
import { router } from '../stores/router'
+import { LayoutType } from './types'
-const handleCreate = async (layout: 'article' | 'video') => {
+const handleCreate = async (layout: LayoutType) => {
const shout = await apiClient.createArticle({ article: { layout: layout } })
redirectPage(router, 'edit', {
shoutId: shout.id.toString()
@@ -35,10 +36,10 @@ export const CreatePage = () => {
-
+
diff --git a/src/pages/layoutShouts.page.tsx b/src/pages/layoutShouts.page.tsx
index 581d1921..d7671f5e 100644
--- a/src/pages/layoutShouts.page.tsx
+++ b/src/pages/layoutShouts.page.tsx
@@ -12,7 +12,7 @@ import { clsx } from 'clsx'
import { Row3 } from '../components/Feed/Row3'
import { Row2 } from '../components/Feed/Row2'
import { Beside } from '../components/Feed/Beside'
-import Slider from '../components/_shared/Slider'
+import { Slider } from '../components/_shared/Slider'
import { Row1 } from '../components/Feed/Row1'
import styles from '../styles/Topic.module.scss'
import { ArticleCard } from '../components/Feed/ArticleCard'
diff --git a/src/pages/types.ts b/src/pages/types.ts
index 3297c9c0..e76de3c1 100644
--- a/src/pages/types.ts
+++ b/src/pages/types.ts
@@ -14,7 +14,7 @@ export type PageProps = {
topic?: Topic
allTopics?: Topic[]
searchQuery?: string
- layout?: string // LayoutType
+ layout?: LayoutType
// other types?
searchResults?: Shout[]
chats?: Chat[]
@@ -33,3 +33,12 @@ export type UploadFile = {
}
export type LayoutType = 'article' | 'audio' | 'video' | 'image' | 'literature'
+
+export type FileTypeToUpload = 'image' | 'video' | 'doc'
+
+export type MediaItem = {
+ url: string
+ title: string
+ body: string
+ source?: string
+}
diff --git a/src/stores/zine/layouts.ts b/src/stores/zine/layouts.ts
new file mode 100644
index 00000000..b96ea96c
--- /dev/null
+++ b/src/stores/zine/layouts.ts
@@ -0,0 +1,48 @@
+import type { Shout, LoadShoutsOptions } from '../../graphql/types.gen'
+import { apiClient } from '../../utils/apiClient'
+import { createSignal } from 'solid-js'
+
+export type LayoutType = 'article' | 'audio' | 'video' | 'image' | 'literature'
+
+const [sortedLayoutShouts, setSortedLayoutShouts] = createSignal>(new Map())
+
+const addLayoutShouts = (layout: LayoutType, shouts: Shout[]) => {
+ setSortedLayoutShouts((prevSorted: Map) => {
+ const siblings = prevSorted.get(layout)
+ if (siblings) {
+ const uniqued = [...new Set([...siblings, ...shouts])]
+ prevSorted.set(layout, uniqued)
+ }
+ return prevSorted
+ })
+}
+
+export const resetSortedLayoutShouts = () => {
+ setSortedLayoutShouts(new Map())
+}
+
+export const loadLayoutShoutsBy = async (options: LoadShoutsOptions): Promise<{ hasMore: boolean }> => {
+ const newLayoutShouts = await apiClient.getShouts({
+ ...options,
+ limit: options.limit + 1
+ })
+
+ const hasMore = newLayoutShouts.length === options.limit + 1
+
+ if (hasMore) {
+ newLayoutShouts.splice(-1)
+ }
+ addLayoutShouts(options.filters.layout as LayoutType, newLayoutShouts)
+
+ return { hasMore }
+}
+
+export const useLayoutsStore = (layout: LayoutType, initialData: Shout[]) => {
+ addLayoutShouts(layout, initialData || [])
+
+ return {
+ addLayoutShouts,
+ sortedLayoutShouts,
+ loadLayoutShoutsBy
+ }
+}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 2fb367ed..1c72112e 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -10,10 +10,14 @@
:root {
--background-color: #fff;
--default-color: #121416;
+ --background-color-invert: #000;
+ --default-color-invert: #fff;
--link-color: #000;
--link-hover-color: #fff;
--link-hover-background: #000;
--secondary-color: #85878a;
+ --placeholder-color: #9fa1a7;
+ --placeholder-color-semi: rgba(159, 169, 167, 0.2);
--danger-color: #fc6847;
--lightgray-color: rgb(84 16 17 / 6%);
--font: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Open Sans',
@@ -28,6 +32,8 @@
[data-editor-dark-mode='true'] {
--background-color: #121416;
--default-color: #fff;
+ --background-color-invert: #fff;
+ --default-color-invert: #121416;
--link-color: #fff;
--link-hover-color: #000;
--link-hover-background: #fff;
diff --git a/src/utils/handleFileUpload.ts b/src/utils/handleFileUpload.ts
index 2094b5a7..2eecde03 100644
--- a/src/utils/handleFileUpload.ts
+++ b/src/utils/handleFileUpload.ts
@@ -2,6 +2,7 @@ import { UploadFile } from '@solid-primitives/upload'
import { isDev } from './config'
const api = isDev ? 'https://new.discours.io/api/upload' : '/api/upload'
+
export const handleFileUpload = async (uploadFile: UploadFile) => {
const formData = new FormData()
formData.append('file', uploadFile.file, uploadFile.name)
diff --git a/src/utils/validators.ts b/src/utils/validateEmail.ts
similarity index 66%
rename from src/utils/validators.ts
rename to src/utils/validateEmail.ts
index 564a964e..e3cd2913 100644
--- a/src/utils/validators.ts
+++ b/src/utils/validateEmail.ts
@@ -1,4 +1,4 @@
-export const isValidEmail = (email: string) => {
+export const validateEmail = (email: string) => {
if (!email) {
return false
}
diff --git a/src/utils/validateFile.ts b/src/utils/validateFile.ts
new file mode 100644
index 00000000..ea26df50
--- /dev/null
+++ b/src/utils/validateFile.ts
@@ -0,0 +1,37 @@
+import { UploadFile } from '@solid-primitives/upload'
+import { FileTypeToUpload } from '../pages/types'
+
+export const validateFiles = (fileType: FileTypeToUpload, files: UploadFile[]): boolean => {
+ const imageExtensions = new Set(['jpg', 'jpeg', 'png', 'gif', 'bmp'])
+ const docExtensions = new Set(['doc', 'docx', 'pdf', 'txt'])
+
+ for (const file of files) {
+ let isValid: boolean
+
+ switch (fileType) {
+ case 'image': {
+ const fileExtension = file.name.split('.').pop()?.toLowerCase()
+ isValid = fileExtension ? imageExtensions.has(fileExtension) : false
+ break
+ }
+ case 'video': {
+ isValid = file.file.type.startsWith('video/')
+ break
+ }
+ case 'doc': {
+ const docExtension = file.name.split('.').pop()?.toLowerCase()
+ isValid = docExtension ? docExtensions.has(docExtension) : false
+ break
+ }
+ default: {
+ isValid = false
+ }
+ }
+
+ if (!isValid) {
+ return false
+ }
+ }
+
+ return true
+}
-
+
{props.title}
+{props.title}
+
+
+ )
+}
diff --git a/src/components/_shared/SolidSwiper/Swiper.module.scss b/src/components/_shared/SolidSwiper/Swiper.module.scss
new file mode 100644
index 00000000..6b4d1534
--- /dev/null
+++ b/src/components/_shared/SolidSwiper/Swiper.module.scss
@@ -0,0 +1,323 @@
+$navigation-reserve: 32px;
+$slide-height: 500px;
+
+.Swiper {
+ display: block;
+ margin: 2rem 0;
+
+ &.articleMode {
+ background: var(--background-color-invert);
+ color: var(--default-color-invert);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .container {
+ margin: auto;
+ max-width: 800px;
+ position: relative;
+ padding: 24px 0;
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+
+ .holder {
+ width: 600px;
+ }
+
+ .thumbsHolder {
+ width: unset;
+ }
+
+ .thumbs {
+ padding: 52px 0;
+ width: 110px;
+ overflow: hidden;
+ height: $slide-height + 40px;
+ box-sizing: border-box;
+ margin: 0;
+ position: relative;
+
+ & > swiper-container {
+ position: absolute;
+ top: 52px;
+ bottom: 52px;
+ left: 0;
+ }
+
+ .thumbsNav {
+ height: 52px;
+ padding: 14px 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 110px;
+ left: 0;
+ right: 0;
+
+ .icon {
+ transform: rotate(45deg);
+ }
+
+ &.prev {
+ top: 0;
+ }
+
+ &.next {
+ top: unset;
+ bottom: 0;
+ }
+ }
+ }
+ }
+ }
+
+ &.editorMode {
+ color: #0d0d0d;
+ }
+
+ .action {
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ background: rgba(#000, 0.3);
+ cursor: pointer;
+ display: none;
+
+ .icon {
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ .holder {
+ position: relative;
+ box-sizing: border-box;
+ padding: 0 $navigation-reserve;
+ overflow: hidden;
+
+ .counter {
+ @include font-size(1.2rem);
+
+ position: absolute;
+ z-index: 2;
+ top: 476px;
+ right: $navigation-reserve;
+ font-weight: 600;
+ padding: 0.2rem 0.8rem;
+ color: var(--background-color);
+ background-color: var(--default-color);
+ }
+
+ .image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: $slide-height;
+ background: var(--placeholder-color-semi);
+ position: relative;
+
+ &:hover .action {
+ display: flex;
+ }
+
+ img {
+ max-height: 100%;
+ }
+ }
+ }
+
+ .navigation {
+ display: flex;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ justify-content: center;
+ align-items: center;
+ width: $navigation-reserve;
+ cursor: pointer;
+ height: $slide-height;
+
+ &.disabled {
+ opacity: 0.5;
+ cursor: inherit;
+ }
+
+ &.prev {
+ left: 0;
+ }
+
+ &.next {
+ right: 0;
+ }
+
+ .icon {
+ height: $navigation-reserve;
+ width: $navigation-reserve;
+ transition: 0.3s ease-in-out;
+ }
+
+ &:not(.disabled):hover .icon {
+ scale: 1.1;
+ }
+ }
+
+ &.articleMode .navigation {
+ filter: invert(1);
+ }
+
+ .slideDescription {
+ margin-top: 8px;
+ .articleTitle {
+ @include font-size(1.4rem);
+ }
+
+ .source {
+ @include font-size(1.2rem);
+
+ color: var(--secondary-color);
+ }
+ .body {
+ @include font-size(1.7rem);
+
+ margin-top: 24px;
+ }
+ }
+
+ .thumbs {
+ margin: 3rem 0;
+ max-height: 488px;
+ position: relative;
+
+ .navigation {
+ height: unset;
+
+ &.prev {
+ left: -$navigation-reserve;
+ }
+
+ &.next {
+ right: -$navigation-reserve;
+ }
+ }
+
+ .upload {
+ border: 1px solid #ccced3;
+ box-sizing: border-box;
+ cursor: pointer;
+
+ .inner {
+ position: relative;
+ z-index: 1000;
+ width: 110px;
+ height: 75px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ .imageThumb {
+ width: 110px;
+ height: 75px;
+ background-size: cover;
+ background-position: 50% 50%;
+ background-color: var(--placeholder-color-semi);
+ opacity: 0.5;
+ filter: grayscale(1);
+ transition: filter 0.3s ease-in-out, opacity 0.5s ease-in-out;
+
+ .thumbAction {
+ display: none;
+ position: absolute;
+ top: 6px;
+ right: 6px;
+ flex-direction: column;
+ gap: 5px;
+
+ .action {
+ position: static;
+ display: flex;
+ width: 18px;
+ height: 18px;
+
+ &.hidden {
+ display: none;
+ }
+
+ .icon {
+ width: 8px;
+ height: 8px;
+ }
+ }
+ }
+
+ &:hover {
+ opacity: 1;
+ cursor: pointer;
+ filter: unset;
+
+ .thumbAction {
+ display: flex;
+ }
+ }
+ }
+ }
+
+ .addSlides {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 2rem auto;
+ }
+
+ .description {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5em;
+ margin: 1em 0;
+
+ .descriptionText {
+ @include font-size(1.4rem);
+
+ line-height: 1.1;
+ }
+
+ .input {
+ @include font-size(1.4rem);
+
+ padding: 0;
+ margin: 0;
+ border: none;
+ height: 1.2em;
+
+ &:focus {
+ outline: none;
+ }
+
+ &::placeholder {
+ color: var(--placeholder-color);
+ }
+
+ &.title {
+ font-weight: 500;
+ }
+ }
+ }
+}
+
+:global(.swiper-slide-thumb-active) {
+ .imageThumb {
+ opacity: 1 !important;
+ filter: unset !important;
+
+ .thumbAction {
+ display: flex !important;
+ }
+ }
+}
diff --git a/src/components/_shared/SolidSwiper/index.ts b/src/components/_shared/SolidSwiper/index.ts
new file mode 100644
index 00000000..fbd847e0
--- /dev/null
+++ b/src/components/_shared/SolidSwiper/index.ts
@@ -0,0 +1 @@
+export { SolidSwiper } from './SolidSwiper'
diff --git a/src/components/_shared/SolidSwiper/swiper.d.ts b/src/components/_shared/SolidSwiper/swiper.d.ts
new file mode 100644
index 00000000..e7b06700
--- /dev/null
+++ b/src/components/_shared/SolidSwiper/swiper.d.ts
@@ -0,0 +1,45 @@
+import 'solid-js'
+import { SwiperOptions } from 'swiper'
+import { SwiperSlideProps } from 'swiper/react'
+
+type Kebab
+
+ (dropAreaRef.current = el)}
+ fileType="image"
+ isMultiply={true}
+ placeholder={t('Add images')}
+ onUpload={handleDropAreaUpload}
+ description={
+
+ 0}>
+
+
+
+ {t('You can upload up to 100 images in .jpg, .png format.')}
+
+ {t('Each image must be no larger than 5 MB.')} +
+ }
+ />
+ + {t('Each image must be no larger than 5 MB.')} +
+ (mainSwipeRef.current = el)}
+ slides-per-view={1}
+ thumbs-swiper={'.thumbSwiper'}
+ observer={true}
+ onSlideChange={handleSlideChange}
+ >
+
+ {(slide, index) => (
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ })
+
+
+ {(triggerRef: (el) => void) => (
+
+
+
+ handleDelete(index())}
+ class={styles.action}
+ >
+
+ )}
+
+
+ handleSlideDescriptionChange(index(), 'title', event.target.value)
+ }
+ />
+
+ handleSlideDescriptionChange(index(), 'source', event.target.value)
+ }
+ />
+ handleSlideDescriptionChange(index(), 'body', value)}
+ />
+
+
+ {slideIndex() + 1} / {props.images.length}
+
+
+
+
+ (thumbSwipeRef.current = el)}
+ slides-per-view={'auto'}
+ free-mode={true}
+ observer={true}
+ space-between={20}
+ auto-scroll-offset={1}
+ watch-overflow={true}
+ slide-to-clicked-slide={true}
+ watch-slides-visibility={true}
+ watch-slides-progress={true}
+ direction={props.editorMode ? 'horizontal' : 'vertical'}
+ slides-offset-after={props.editorMode && 140}
+ >
+
+ {(slide, index) => (
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ handleDelete(index())}>
+
+ handleChangeIndex('left', index())}
+ >
+
+ handleChangeIndex('right', index())}
+ >
+
+
+
+
+
+ handleCreate('image')}>
{t('images')}
-
+