@@ -10,7 +15,12 @@ export const Row1 = (props: { article: Shout; nodate?: boolean; noAuthorLink?: b
diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx
index 6a6d52cb..207e9f70 100644
--- a/src/components/Feed/Row2.tsx
+++ b/src/components/Feed/Row2.tsx
@@ -13,6 +13,7 @@ export const Row2 = (props: {
isEqual?: boolean
nodate?: boolean
noAuthorLink?: boolean
+ noauthor?: boolean
}) => {
const [y, setY] = createSignal(0)
@@ -33,7 +34,8 @@ export const Row2 = (props: {
settings={{
isWithCover: props.isEqual || x[y()][i()] === '16',
nodate: props.isEqual || props.nodate,
- noAuthorLink: props.noAuthorLink
+ noAuthorLink: props.noAuthorLink,
+ noauthor: props.noauthor
}}
/>
- - Искусство + {t('Art')}
-
Подкасты
diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss
index 5529592a..ebc49a08 100644
--- a/src/components/Nav/Modal/Modal.module.scss
+++ b/src/components/Nav/Modal/Modal.module.scss
@@ -17,18 +17,21 @@
background: #fff;
max-width: 1000px;
position: relative;
- width: 100%;
- @include media-breakpoint-up(sm) {
- width: 80%;
+ &:not([class*='col-']) {
+ width: 100%;
+
+ @include media-breakpoint-up(sm) {
+ width: 80%;
+ }
}
.close {
position: absolute;
top: 2rem;
cursor: pointer;
- height: 18px;
- width: 16px;
+ height: 1.6rem;
+ width: 1.6rem;
opacity: 1;
padding: 0;
right: 2.4rem;
diff --git a/src/components/Nav/Topics.tsx b/src/components/Nav/Topics.tsx
deleted file mode 100644
index a0447071..00000000
--- a/src/components/Nav/Topics.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Icon } from '../_shared/Icon'
-import { useLocalize } from '../../context/localize'
-import './Topics.scss'
-
-export const NavTopics = () => {
- const { t } = useLocalize()
-
- return (
-
- )
-}
diff --git a/src/components/Nav/Topics.scss b/src/components/Nav/Topics/Topics.module.scss
similarity index 59%
rename from src/components/Nav/Topics.scss
rename to src/components/Nav/Topics/Topics.module.scss
index f67e5499..b83c0570 100644
--- a/src/components/Nav/Topics.scss
+++ b/src/components/Nav/Topics/Topics.module.scss
@@ -1,8 +1,9 @@
-.subnavigation {
+.Topics {
@include font-size(1.4rem);
+
height: 6rem;
line-height: 6rem;
- margin-bottom: 5rem !important;
+ margin-bottom: 3rem;
overflow: hidden;
position: relative;
transform: translateY(-2px);
@@ -11,7 +12,7 @@
padding: 0 divide($container-padding-x, 2);
}
- .topics {
+ .list {
display: flex;
flex-wrap: wrap;
font-weight: 500;
@@ -32,32 +33,11 @@
}
a {
- border-bottom: 0;
-
- &:hover {
- .icon {
- filter: invert(1);
- }
+ border-bottom: unset;
+ &.selected {
+ font-weight: 500;
+ border-bottom: 2px solid var(--default-color);
}
}
-
- .icon {
- display: inline-block;
- margin-left: 0.3em;
- position: relative;
- top: 0.15em;
- }
- }
-
- .selected {
- color: black;
- }
-
- a {
- color: #141414;
- }
-
- a:hover {
- color: white;
}
}
diff --git a/src/components/Nav/Topics/Topics.tsx b/src/components/Nav/Topics/Topics.tsx
new file mode 100644
index 00000000..84ba7fa1
--- /dev/null
+++ b/src/components/Nav/Topics/Topics.tsx
@@ -0,0 +1,57 @@
+import { Icon } from '../../_shared/Icon'
+import { useLocalize } from '../../../context/localize'
+import styles from './Topics.module.scss'
+import { clsx } from 'clsx'
+import { router, useRouter } from '../../../stores/router'
+import { getPagePath } from '@nanostores/router'
+
+export const Topics = () => {
+ const { t } = useLocalize()
+ const { page } = useRouter()
+ return (
+
+ )
+}
diff --git a/src/components/Nav/Topics/index.ts b/src/components/Nav/Topics/index.ts
new file mode 100644
index 00000000..c6ce8d87
--- /dev/null
+++ b/src/components/Nav/Topics/index.ts
@@ -0,0 +1 @@
+export { Topics } from './Topics'
diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx
index 958c433b..45c603de 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.tsx
+++ b/src/components/Topic/TopicBadge/TopicBadge.tsx
@@ -3,7 +3,6 @@ import styles from './TopicBadge.module.scss'
import { FollowingEntity, Topic } from '../../../graphql/types.gen'
import { createMemo, createSignal, Show } from 'solid-js'
import { imageProxy } from '../../../utils/imageProxy'
-import { capitalize } from '../../../utils'
import { Button } from '../../_shared/Button'
import { useSession } from '../../../context/session'
import { useLocalize } from '../../../context/localize'
diff --git a/src/components/Views/Author/Author.module.scss b/src/components/Views/Author/Author.module.scss
index 1db3b777..45f849a3 100644
--- a/src/components/Views/Author/Author.module.scss
+++ b/src/components/Views/Author/Author.module.scss
@@ -16,8 +16,8 @@
.authorHeader {
border-bottom: 2px solid #000;
margin-bottom: 2.4rem;
+ margin-top: -3.2rem;
padding-bottom: 4rem;
- padding-top: 2.6rem;
}
.ratingContainer {
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index d74f68e4..b0e5e161 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -207,34 +207,34 @@ export const AuthorView = (props: Props) => {
- + - + - + 3}> - - - - - - + + + + + + {(shout) => ( <> - diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index abc7a64c..5a1eafe3 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -158,7 +158,7 @@ export const EditView = (props: Props) => { const articleTitle = () => { switch (props.shout.layout as LayoutType) { - case 'audio': { + case 'music': { return t('Album name') } case 'image': { @@ -172,7 +172,7 @@ export const EditView = (props: Props) => { const pageTitle = () => { switch (props.shout.layout as LayoutType) { - case 'audio': { + case 'music': { return t('Publish Album') } case 'image': { @@ -259,19 +259,19 @@ export const EditView = (props: Props) => {- - - - - + + + + + + )} -<> -+ + {t('Add intro')}+-{ {formErrors.title}-+ + { @@ -340,7 +340,7 @@ export const EditView = (props: Props) => { + { /> -+ { + const [isLoaded, setIsLoaded] = createSignal (Boolean(props.shouts)) + const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) + + const { t } = useLocalize() + const { page: getPage } = useRouter() + const getLayout = createMemo (() => getPage().params['layout'] as LayoutType) + const { sortedArticles } = useArticlesStore({ + shouts: isLoaded() ? props.shouts : [] + }) + + const loadMore = async (count) => { + saveScrollPosition() + const options: LoadShoutsOptions = { + limit: count, + offset: sortedArticles().length + } + + options.filters = getLayout() ? { layout: getLayout() } : { excludeLayout: 'article' } + + const { hasMore } = await loadShouts(options) + setIsLoadMoreButtonVisible(hasMore) + restoreScrollPosition() + } + + const pages = createMemo ++ ) +} diff --git a/src/components/Views/Expo/index.ts b/src/components/Views/Expo/index.ts new file mode 100644 index 00000000..23e3111c --- /dev/null +++ b/src/components/Views/Expo/index.ts @@ -0,0 +1 @@ +export { Expo } from './Expo' diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx index f6708dc7..3c326c40 100644 --- a/src/components/Views/Home.tsx +++ b/src/components/Views/Home.tsx @@ -1,6 +1,6 @@ import { createMemo, createSignal, For, onMount, Show } from 'solid-js' import Banner from '../Discours/Banner' -import { NavTopics } from '../Nav/Topics' +import { Topics } from '../Nav/Topics' import { Row5 } from '../Feed/Row5' import { Row3 } from '../Feed/Row3' import { Row2 } from '../Feed/Row2' @@ -104,7 +104,7 @@ export const HomeView = (props: Props) => { return (0} fallback={ +}> + ++-
+
-
+
{children}} + > + {t('All')} + +
+ -
+
( + {children} + )} + > + {t('Literature')} + +
+ -
+
( + {children} + )} + > + {t('Music')} + +
+ -
+
( + {children} + )} + > + {t('Gallery')} + +
+ -
+
( + {children} + )} + > + {t('Video')} + +
+
+++ {(shout) => ( + +++ )} ++ + {(page) => ( + ++ {(shout) => ( + + )} +++ )} ++ + ++ ++0}> - + diff --git a/src/components/_shared/PageLayout.module.scss b/src/components/_shared/PageLayout.module.scss index eaa29501..e3fb1682 100644 --- a/src/components/_shared/PageLayout.module.scss +++ b/src/components/_shared/PageLayout.module.scss @@ -1,3 +1,7 @@ .withPadding { padding-top: 58px; } + +.zeroBottomPadding { + padding-bottom: 0; +} diff --git a/src/components/_shared/PageLayout.tsx b/src/components/_shared/PageLayout.tsx index 43086141..be4e29f6 100644 --- a/src/components/_shared/PageLayout.tsx +++ b/src/components/_shared/PageLayout.tsx @@ -18,6 +18,7 @@ type Props = { hideFooter?: boolean class?: string withPadding?: boolean + zeroBottomPadding?: boolean scrollToComments?: (value: boolean) => void } @@ -44,7 +45,8 @@ export const PageLayout = (props: Props) => { /> diff --git a/src/pages/create.page.tsx b/src/pages/create.page.tsx index 1b9d115f..e1eb7a95 100644 --- a/src/pages/create.page.tsx +++ b/src/pages/create.page.tsx @@ -44,7 +44,7 @@ export const CreatePage = () => { - -
handleCreate('audio')}> +handleCreate('music')}>diff --git a/src/pages/expo/expo.page.route.ts b/src/pages/expo/expo.page.route.ts new file mode 100644 index 00000000..8270f299 --- /dev/null +++ b/src/pages/expo/expo.page.route.ts @@ -0,0 +1,4 @@ +import { ROUTES } from '../../stores/router' +import { getServerRoute } from '../../utils/getServerRoute' + +export default getServerRoute(ROUTES.expo) diff --git a/src/pages/expo/expo.page.server.ts b/src/pages/expo/expo.page.server.ts new file mode 100644 index 00000000..0d360c5a --- /dev/null +++ b/src/pages/expo/expo.page.server.ts @@ -0,0 +1,17 @@ +import type { PageContext } from '../../renderer/types' +import { apiClient } from '../../utils/apiClient' +import type { PageProps } from '../types' +import { PRERENDERED_ARTICLES_COUNT } from '../../components/Views/Expo/Expo' + +export const onBeforeRender = async (_pageContext: PageContext) => { + const expoShouts = await apiClient.getShouts({ + filters: { excludeLayout: 'article' }, + limit: PRERENDERED_ARTICLES_COUNT + }) + const pageProps: PageProps = { expoShouts } + return { + pageContext: { + pageProps + } + } +} diff --git a/src/pages/expo/expo.page.tsx b/src/pages/expo/expo.page.tsx new file mode 100644 index 00000000..8e972885 --- /dev/null +++ b/src/pages/expo/expo.page.tsx @@ -0,0 +1,44 @@ +import { PageLayout } from '../../components/_shared/PageLayout' +import type { PageProps } from '../types' +import { Topics } from '../../components/Nav/Topics' +import { Expo } from '../../components/Views/Expo' +import { useLocalize } from '../../context/localize' +import { createMemo } from 'solid-js' +import { LayoutType } from '../types' +import { useRouter } from '../../stores/router' +import { Title } from '@solidjs/meta' + +export const ExpoPage = (props: PageProps) => { + const { t } = useLocalize() + const { page: getPage } = useRouter() + const getLayout = createMemo{t('music')}(() => getPage().params['layout'] as LayoutType) + const title = createMemo(() => { + switch (getLayout()) { + case 'music': { + return t('Audio') + } + case 'video': { + return t('Video') + } + case 'image': { + return t('Artworks') + } + case 'literature': { + return t('Literature') + } + default: { + return t('Art') + } + } + }) + + return ( + + + ) +} + +export const Page = ExpoPage diff --git a/src/pages/expo/expoLayout.page.route.ts b/src/pages/expo/expoLayout.page.route.ts new file mode 100644 index 00000000..afdbd8b6 --- /dev/null +++ b/src/pages/expo/expoLayout.page.route.ts @@ -0,0 +1,4 @@ +import { ROUTES } from '../../stores/router' +import { getServerRoute } from '../../utils/getServerRoute' + +export default getServerRoute(ROUTES.expoLayout) diff --git a/src/pages/expo/expoLayout.page.server.ts b/src/pages/expo/expoLayout.page.server.ts new file mode 100644 index 00000000..fda7fab1 --- /dev/null +++ b/src/pages/expo/expoLayout.page.server.ts @@ -0,0 +1,20 @@ +import type { PageContext } from '../../renderer/types' +import { apiClient } from '../../utils/apiClient' +import type { PageProps } from '../types' +import { PRERENDERED_ARTICLES_COUNT } from '../../components/Views/Expo/Expo' + +export const onBeforeRender = async (pageContext: PageContext) => { + const { layout } = pageContext.routeParams + const expoShouts = await apiClient.getShouts({ + filters: { layout: layout }, + limit: PRERENDERED_ARTICLES_COUNT + }) + + const pageProps: PageProps = { expoShouts } + + return { + pageContext: { + pageProps + } + } +} diff --git a/src/pages/layoutShouts.page.route.ts b/src/pages/layoutShouts.page.route.ts deleted file mode 100644 index 6a6a2cba..00000000 --- a/src/pages/layoutShouts.page.route.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { ROUTES } from '../stores/router' -import { getServerRoute } from '../utils/getServerRoute' - -export default getServerRoute(ROUTES.expo) diff --git a/src/pages/layoutShouts.page.server.ts b/src/pages/layoutShouts.page.server.ts deleted file mode 100644 index 12f7ade3..00000000 --- a/src/pages/layoutShouts.page.server.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { PageContext } from '../renderer/types' -import { apiClient } from '../utils/apiClient' -import type { PageProps } from './types' -import { PRERENDERED_ARTICLES_COUNT } from './layoutShouts.page' - -export const onBeforeRender = async (pageContext: PageContext) => { - const { layout } = pageContext.routeParams - - const layoutShouts = await apiClient.getShouts({ filters: { layout }, limit: PRERENDERED_ARTICLES_COUNT }) - - const pageProps: PageProps = { layoutShouts } - - return { - pageContext: { - pageProps - } - } -} diff --git a/src/pages/layoutShouts.page.tsx b/src/pages/layoutShouts.page.tsx deleted file mode 100644 index 0d7983d3..00000000 --- a/src/pages/layoutShouts.page.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import { PageLayout } from '../components/_shared/PageLayout' -import type { LayoutType, PageProps } from './types' -import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js' -import { loadShouts, resetSortedArticles, useArticlesStore } from '../stores/zine/articles' -import { router, useRouter } from '../stores/router' -import { Loading } from '../components/_shared/Loading' -import { restoreScrollPosition, saveScrollPosition } from '../utils/scroll' -import type { Shout } from '../graphql/types.gen' -import { splitToPages } from '../utils/splitToPages' -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 { Row1 } from '../components/Feed/Row1' -import styles from '../styles/Topic.module.scss' -import { ArticleCard } from '../components/Feed/ArticleCard' -import { useLocalize } from '../context/localize' -import { getPagePath } from '@nanostores/router' -import { Title } from '@solidjs/meta' - -export const PRERENDERED_ARTICLES_COUNT = 27 -const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3 - -export const LayoutShoutsPage = (props: PageProps) => { - const { t } = useLocalize() - const { page: getPage } = useRouter() - - const getLayout = createMemo{title()} ++ + (() => getPage().params['layout'] as LayoutType) - - const [isLoaded, setIsLoaded] = createSignal( - Boolean(props.layoutShouts) && - props.layoutShouts.length > 0 && - props.layoutShouts[0].layout === getLayout() - ) - - const { sortedArticles } = useArticlesStore({ - shouts: isLoaded() ? props.layoutShouts : [] - }) - - const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) - - const loadMore = async (count) => { - saveScrollPosition() - const { hasMore } = await loadShouts({ - filters: { layout: getLayout() }, - limit: count, - offset: sortedArticles().length - }) - setIsLoadMoreButtonVisible(hasMore) - restoreScrollPosition() - } - - const title = createMemo(() => { - const l = getLayout() - if (l === 'audio') return t('Audio') - if (l === 'video') return t('Video') - if (l === 'image') return t('Artworks') - return t('Literature') - }) - - const pages = createMemo - - ) -} - -export const Page = LayoutShoutsPage diff --git a/src/pages/types.ts b/src/pages/types.ts index c66bc7f3..6fe70b2c 100644 --- a/src/pages/types.ts +++ b/src/pages/types.ts @@ -4,7 +4,7 @@ import type { Author, Chat, Shout, Topic } from '../graphql/types.gen' // all the things (she said) that could be passed from the server export type PageProps = { article?: Shout - layoutShouts?: Shout[] + expoShouts?: Shout[] authorShouts?: Shout[] topicShouts?: Shout[] homeShouts?: Shout[] @@ -24,7 +24,7 @@ export type RootSearchParams = { lang: string } -export type LayoutType = 'article' | 'audio' | 'video' | 'image' | 'literature' +export type LayoutType = 'article' | 'music' | 'video' | 'image' | 'literature' export type FileTypeToUpload = 'image' | 'video' | 'doc' | 'audio' diff --git a/src/stores/router.ts b/src/stores/router.ts index f94204fe..316c4f1c 100644 --- a/src/stores/router.ts +++ b/src/stores/router.ts @@ -37,7 +37,8 @@ export const ROUTES = { projects: '/about/projects', termsOfUse: '/about/terms-of-use', thanks: '/about/thanks', - expo: '/expo/:layout', + expo: '/expo', + expoLayout: '/expo/:layout', profileSettings: '/profile/settings', profileSecurity: '/profile/security', profileSubscriptions: '/profile/subscriptions', diff --git a/src/styles/app.scss b/src/styles/app.scss index b873a9f1..9c360100 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -623,7 +623,7 @@ figure { a, .linkReplacement, button { - border-bottom: 2px solid #fff; + border-bottom: 2px solid transparent; color: var(--link-color); cursor: pointer; font-weight: inherit; diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index b2849a6f..3e16ad58 100644 --- a/src/utils/apiClient.ts +++ b/src/utils/apiClient.ts @@ -325,7 +325,6 @@ export const apiClient = { getShouts: async (options: LoadShoutsOptions) => { const resp = await publicGraphQLClient.query(shoutsLoadBy, { options }).toPromise() - if (resp.error) { console.error(resp) } diff --git a/vite.config.ts b/vite.config.ts index dab5027a..2c70ade4 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,18 +2,65 @@ import { defineConfig } from 'vite' import solidPlugin from 'vite-plugin-solid' import ssrPlugin from 'vite-plugin-ssr/plugin' import sassDts from 'vite-plugin-sass-dts' +import mkcert from 'vite-plugin-mkcert' + +const cssModuleHMR = () => { + return { + enforce: 'post', + name: 'css-module-hmr', + apply: 'serve', + handleHotUpdate(context) { + const { modules } = context + + modules.forEach((module) => { + if (module.id.includes('.module.scss')) { + module.isSelfAccepting = true + } + }) + } + } +} + +const PATH_PREFIX = '/src/' + +const getDevCssClassPrefix = (filename: string): string => { + return filename + .slice(filename.indexOf(PATH_PREFIX) + PATH_PREFIX.length) + .replace('.module.scss', '') + .replaceAll(/[/?\\]/g, '-') +} + +const devGenerateScopedName = (name: string, filename: string, _css: string) => + getDevCssClassPrefix(filename) + '__' + name + +export default defineConfig(({ mode, command }) => { + const plugins = [ + solidPlugin({ ssr: true }), + ssrPlugin({ includeAssetsImportedByServer: true }), + sassDts(), + cssModuleHMR() + ] + + if (command === 'serve') { + plugins.push(mkcert()) + } + + const isDev = mode === 'development' -export default defineConfig(() => { return { envPrefix: 'PUBLIC_', - plugins: [solidPlugin({ ssr: true }), ssrPlugin({ includeAssetsImportedByServer: true }), sassDts()], + plugins, server: { + https: true, port: 3000 }, css: { - devSourcemap: true, + devSourcemap: isDev, preprocessorOptions: { scss: { additionalData: '@import "src/styles/imports";\n' } + }, + modules: { + generateScopedName: isDev ? devGenerateScopedName : '[hash:base64:5]' } }, build: {{title()} -}> - -- -- --- -{title()}
--- ------
-
- - {t('Audio')} - -
- - {t('Video')} - -
- - {t('Artworks')} - -
- - {t('Literature')} - -
0} fallback={ -}> - - - - -- {(article) => ( - -- )} - - 5}> - - -- - - - - - {(page) => ( - <> - - -- - - - )} - - -- -
- -
+