From 44c2269edbd90d667e0364ac3d164b8def51df81 Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Tue, 10 Oct 2023 18:38:02 +0300 Subject: [PATCH 1/5] Feature/expo pages (#253) Expo pages --- public/locales/en/translation.json | 3 + public/locales/ru/translation.json | 3 + src/components/App.tsx | 5 +- src/components/Article/FullArticle.tsx | 4 +- src/components/Nav/Header/Header.tsx | 2 +- src/components/Nav/Topics.tsx | 52 ----- .../Topics.module.scss} | 36 +--- src/components/Nav/Topics/Topics.tsx | 57 ++++++ src/components/Nav/Topics/index.ts | 1 + .../Topic/TopicBadge/TopicBadge.tsx | 1 - src/components/Views/Edit.tsx | 18 +- src/components/Views/Expo/Expo.module.scss | 17 ++ src/components/Views/Expo/Expo.tsx | 174 ++++++++++++++++ src/components/Views/Expo/index.ts | 1 + src/components/Views/Home.tsx | 4 +- src/components/_shared/PageLayout.module.scss | 4 + src/components/_shared/PageLayout.tsx | 4 +- src/pages/create.page.tsx | 2 +- src/pages/expo/expo.page.route.ts | 4 + src/pages/expo/expo.page.server.ts | 17 ++ src/pages/expo/expo.page.tsx | 44 +++++ src/pages/expo/expoLayout.page.route.ts | 4 + src/pages/expo/expoLayout.page.server.ts | 20 ++ src/pages/layoutShouts.page.route.ts | 4 - src/pages/layoutShouts.page.server.ts | 18 -- src/pages/layoutShouts.page.tsx | 187 ------------------ src/pages/types.ts | 4 +- src/stores/router.ts | 3 +- src/styles/app.scss | 2 +- src/utils/apiClient.ts | 1 - 30 files changed, 383 insertions(+), 313 deletions(-) delete mode 100644 src/components/Nav/Topics.tsx rename src/components/Nav/{Topics.scss => Topics/Topics.module.scss} (59%) create mode 100644 src/components/Nav/Topics/Topics.tsx create mode 100644 src/components/Nav/Topics/index.ts create mode 100644 src/components/Views/Expo/Expo.module.scss create mode 100644 src/components/Views/Expo/Expo.tsx create mode 100644 src/components/Views/Expo/index.ts create mode 100644 src/pages/expo/expo.page.route.ts create mode 100644 src/pages/expo/expo.page.server.ts create mode 100644 src/pages/expo/expo.page.tsx create mode 100644 src/pages/expo/expoLayout.page.route.ts create mode 100644 src/pages/expo/expoLayout.page.server.ts delete mode 100644 src/pages/layoutShouts.page.route.ts delete mode 100644 src/pages/layoutShouts.page.server.ts delete mode 100644 src/pages/layoutShouts.page.tsx diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index fcdb8ea9..773d2921 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -29,6 +29,7 @@ "All topics": "All topics", "Almost done! Check your email.": "Almost done! Just checking your email.", "Are you sure you want to to proceed the action?": "Are you sure you want to to proceed the action?", + "Art": "Art", "Artist": "Artist", "Artworks": "Artworks", "Audio": "Audio", @@ -134,6 +135,7 @@ "Forgot password?": "Forgot your password?", "Forward": "Forward", "Full name": "First and last name", + "Gallery": "Gallery", "Gallery name": "Gallery name", "Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine": "Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine", "Go to main page": "Go to main page", @@ -199,6 +201,7 @@ "Most read": "Readable", "Move down": "Move down", "Move up": "Move up", + "Music": "Music", "My feed": "My feed", "My subscriptions": "Subscriptions", "Name": "Name", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 8f0adb92..ee6c1e12 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -32,6 +32,7 @@ "All topics": "Все темы", "Almost done! Check your email.": "Почти готово! Осталось подтвердить вашу почту.", "Are you sure you want to to proceed the action?": "Вы уверены, что хотите продолжить?", + "Art": "Искусство", "Artist": "Исполнитель", "Artist...": "Исполнитель...", "Artworks": "Артворки", @@ -139,6 +140,7 @@ "Forgot password?": "Забыли пароль?", "Forward": "Переслать", "Full name": "Имя и фамилия", + "Gallery": "Галерея", "Gallery name": "Название галереи", "Genre...": "Жанр...", "Get notifications": "Получать уведомления", @@ -209,6 +211,7 @@ "Most read": "Читаемое", "Move down": "Переместить вниз", "Move up": "Переместить вверх", + "Music": "Музыка", "My feed": "Моя лента", "My subscriptions": "Подписки", "Name": "Имя", diff --git a/src/components/App.tsx b/src/components/App.tsx index 0e352b16..eb5fbf02 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -30,7 +30,7 @@ import { CreatePage } from '../pages/create.page' import { EditPage } from '../pages/edit.page' import { ConnectPage } from '../pages/connect.page' import { InboxPage } from '../pages/inbox.page' -import { LayoutShoutsPage } from '../pages/layoutShouts.page' +import { ExpoPage } from '../pages/expo/expo.page' import { SessionProvider } from '../context/session' import { ProfileSettingsPage } from '../pages/profile/profileSettings.page' import { ProfileSecurityPage } from '../pages/profile/profileSecurity.page' @@ -51,7 +51,8 @@ const pagesMap: Record> = { authorFollowing: AuthorPage, authorFollowers: AuthorPage, inbox: InboxPage, - expo: LayoutShoutsPage, + expo: ExpoPage, + expoLayout: ExpoPage, connect: ConnectPage, create: CreatePage, edit: EditPage, diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 9dc14a94..dd9f22a4 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -218,7 +218,7 @@ export const FullArticle = (props: Props) => {
{/*TODO: Check styles.shoutTopic*/} - +
@@ -256,7 +256,7 @@ export const FullArticle = (props: Props) => {
- + { >
  • - Искусство + {t('Art')}
  • Подкасты 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/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 subtitle')}
    - +
    {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(() => + splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE) + ) + + onMount(() => { + if (isLoaded()) { + return + } + + loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE) + setIsLoaded(true) + }) + + onMount(() => { + if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) { + loadMore(LOAD_MORE_PAGE_SIZE) + } + }) + + createEffect( + on( + () => getLayout(), + () => { + resetSortedArticles() + loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE) + }, + { defer: true } + ) + ) + + onCleanup(() => { + resetSortedArticles() + }) + + const handleLoadMoreClick = () => { + loadMore(LOAD_MORE_PAGE_SIZE) + } + + return ( +
    + 0} fallback={}> +
    + +
    + + {(shout) => ( +
    + +
    + )} +     + + {(page) => ( + + {(shout) => ( +
    + +
    + )} +     + )} +     +
    + +
    +
    +     +
    +     +
    + ) +} 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}> - + 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')}>
    {t('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(() => 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 ( + + {title()} + + + + ) +} + +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(() => 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(() => - splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE) - ) - - onMount(() => { - if (isLoaded()) { - return - } - - loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE) - setIsLoaded(true) - }) - - onMount(() => { - if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) { - loadMore(LOAD_MORE_PAGE_SIZE) - } - }) - - createEffect((prevLayout) => { - if (prevLayout !== getLayout()) { - resetSortedArticles() - loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE) - } - - return getLayout() - }, getLayout()) - - onCleanup(() => { - resetSortedArticles() - }) - - const handleLoadMoreClick = () => { - loadMore(LOAD_MORE_PAGE_SIZE) - } - - return ( - - {title()} - }> -
    - -
    -

    {title()}

    -
    - -
    -
    -
    - -
    -
    -
    - - 0} fallback={}> - - - - - {(article) => ( - - )} - - - - 5}> - - - - - - - - - {(page) => ( - <> - - - - - )} - - - -

    - -

    -     -     -     -
    -     -     - ) -} - -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 346a75f9..fef9e7e5 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) } From c6633ae1ec05d5753bdb5890698b3e7b57e31b74 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Tue, 10 Oct 2023 22:44:24 +0300 Subject: [PATCH 2/5] Minor style fixes --- public/icons/close.svg | 4 +--- .../Author/AuthorCard/AuthorCard.module.scss | 10 ++++++++++ src/components/Nav/Modal/Modal.module.scss | 4 ++-- src/components/Views/Author/Author.module.scss | 2 +- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/public/icons/close.svg b/public/icons/close.svg index b779a490..6019f82e 100644 --- a/public/icons/close.svg +++ b/public/icons/close.svg @@ -1,3 +1 @@ - - - + diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss index 7804903f..db7139f4 100644 --- a/src/components/Author/AuthorCard/AuthorCard.module.scss +++ b/src/components/Author/AuthorCard/AuthorCard.module.scss @@ -473,6 +473,16 @@ .buttonWriteAuthorPage { background: #f6f6f6 !important; border-radius: 0.8rem; + + &:hover { + background: #e9e9ee !important; + border-color: #e9e9ee; + } + + &:active { + background: #ccc !important; + border-color: #ccc; + } } .authorPage { diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss index 5529592a..3f5d262a 100644 --- a/src/components/Nav/Modal/Modal.module.scss +++ b/src/components/Nav/Modal/Modal.module.scss @@ -27,8 +27,8 @@ 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/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 { From dcd5c591f0dbd9f2e21ea71b323da37204030f11 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Tue, 10 Oct 2023 22:45:35 +0300 Subject: [PATCH 3/5] Remove author in article cards on the author page --- src/components/Feed/Row1.tsx | 14 ++++++++++-- src/components/Feed/Row2.tsx | 4 +++- src/components/Feed/Row3.tsx | 7 +++++- src/components/Views/Author/Author.tsx | 30 +++++++++++++------------- 4 files changed, 36 insertions(+), 19 deletions(-) diff --git a/src/components/Feed/Row1.tsx b/src/components/Feed/Row1.tsx index b6b1f13c..fa184f4f 100644 --- a/src/components/Feed/Row1.tsx +++ b/src/components/Feed/Row1.tsx @@ -2,7 +2,12 @@ import { Show } from 'solid-js' import type { Shout } from '../../graphql/types.gen' import { ArticleCard } from './ArticleCard' -export const Row1 = (props: { article: Shout; nodate?: boolean; noAuthorLink?: boolean }) => ( +export const Row1 = (props: { + article: Shout + nodate?: boolean + noAuthorLink?: boolean + noauthor?: boolean +}) => (
    @@ -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 }} />
    diff --git a/src/components/Feed/Row3.tsx b/src/components/Feed/Row3.tsx index 22890d24..b5520a17 100644 --- a/src/components/Feed/Row3.tsx +++ b/src/components/Feed/Row3.tsx @@ -8,6 +8,7 @@ export const Row3 = (props: { header?: JSX.Element nodate?: boolean noAuthorLink?: boolean + noauthor?: boolean }) => { return ( 0}> @@ -20,7 +21,11 @@ export const Row3 = (props: {
    )} 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) => ( <> - - - - - - + + + + + + )} From f7a30d41eef951f50acbd9723b8fd7a1670f20c3 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Wed, 11 Oct 2023 00:01:25 +0300 Subject: [PATCH 4/5] Fixed modal width --- src/components/Nav/Modal/Modal.module.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss index 3f5d262a..ebc49a08 100644 --- a/src/components/Nav/Modal/Modal.module.scss +++ b/src/components/Nav/Modal/Modal.module.scss @@ -17,10 +17,13 @@ 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 { From af49b53a9b21f22732a36d2997e3380b732963c1 Mon Sep 17 00:00:00 2001 From: Kosta <47947996+dobrodob@users.noreply.github.com> Date: Wed, 11 Oct 2023 09:53:27 +0300 Subject: [PATCH 5/5] styles HMR fixed, https for local server (#254) Co-authored-by: Igor Lobanov --- package-lock.json | 439 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + vite.config.ts | 53 +++++- 3 files changed, 490 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index f7b9e8ad..06509ac4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -126,6 +126,7 @@ "typograf": "7.1.0", "uniqolor": "1.1.0", "vite": "4.3.9", + "vite-plugin-mkcert": "1.16.0", "vite-plugin-sass-dts": "1.3.11", "vite-plugin-solid": "2.7.0", "vite-plugin-ssr": "0.4.123", @@ -4000,6 +4001,215 @@ "node": ">= 8" } }, + "node_modules/@octokit/auth-token": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.4.tgz", + "integrity": "sha512-TWFX7cZF2LXoCvdmJWY7XVPi74aSY0+FfBZNSXEXFkMpjcqsQwDSYVv5FhRFaI0V1ECnwbz4j59T/G+rXNWaIQ==", + "dev": true, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/core": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.4.tgz", + "integrity": "sha512-rYKilwgzQ7/imScn3M9/pFfUf4I1AZEH3KhyJmtPdE2zfaXAn2mFfUy4FbKewzc2We5y/LlKLj36fWJLKC2SIQ==", + "dev": true, + "dependencies": { + "@octokit/auth-token": "^3.0.0", + "@octokit/graphql": "^5.0.0", + "@octokit/request": "^6.0.0", + "@octokit/request-error": "^3.0.0", + "@octokit/types": "^9.0.0", + "before-after-hook": "^2.2.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/endpoint": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.6.tgz", + "integrity": "sha512-5L4fseVRUsDFGR00tMWD/Trdeeihn999rTMGRMC1G/Ldi1uWlWJzI98H4Iak5DB/RVvQuyMYKqSK/R6mbSOQyg==", + "dev": true, + "dependencies": { + "@octokit/types": "^9.0.0", + "is-plain-object": "^5.0.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/endpoint/node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@octokit/graphql": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.6.tgz", + "integrity": "sha512-Fxyxdy/JH0MnIB5h+UQ3yCoh1FG4kWXfFKkpWqjZHw/p+Kc8Y44Hu/kCgNBT6nU1shNumEchmW/sUO1JuQnPcw==", + "dev": true, + "dependencies": { + "@octokit/request": "^6.0.0", + "@octokit/types": "^9.0.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/openapi-types": { + "version": "18.1.1", + "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-18.1.1.tgz", + "integrity": "sha512-VRaeH8nCDtF5aXWnjPuEMIYf1itK/s3JYyJcWFJT8X9pSNnBtriDf7wlEWsGuhPLl4QIH4xM8fqTXDwJ3Mu6sw==", + "dev": true + }, + "node_modules/@octokit/plugin-paginate-rest": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-6.1.2.tgz", + "integrity": "sha512-qhrmtQeHU/IivxucOV1bbI/xZyC/iOBhclokv7Sut5vnejAIAEXVcGQeRpQlU39E0WwK9lNvJHphHri/DB6lbQ==", + "dev": true, + "dependencies": { + "@octokit/tsconfig": "^1.0.2", + "@octokit/types": "^9.2.3" + }, + "engines": { + "node": ">= 14" + }, + "peerDependencies": { + "@octokit/core": ">=4" + } + }, + "node_modules/@octokit/plugin-request-log": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz", + "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==", + "dev": true, + "peerDependencies": { + "@octokit/core": ">=3" + } + }, + "node_modules/@octokit/plugin-rest-endpoint-methods": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-7.2.3.tgz", + "integrity": "sha512-I5Gml6kTAkzVlN7KCtjOM+Ruwe/rQppp0QU372K1GP7kNOYEKe8Xn5BW4sE62JAHdwpq95OQK/qGNyKQMUzVgA==", + "dev": true, + "dependencies": { + "@octokit/types": "^10.0.0" + }, + "engines": { + "node": ">= 14" + }, + "peerDependencies": { + "@octokit/core": ">=3" + } + }, + "node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/types": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-10.0.0.tgz", + "integrity": "sha512-Vm8IddVmhCgU1fxC1eyinpwqzXPEYu0NrYzD3YZjlGjyftdLBTeqNblRC0jmJmgxbJIsQlyogVeGnrNaaMVzIg==", + "dev": true, + "dependencies": { + "@octokit/openapi-types": "^18.0.0" + } + }, + "node_modules/@octokit/request": { + "version": "6.2.8", + "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.8.tgz", + "integrity": "sha512-ow4+pkVQ+6XVVsekSYBzJC0VTVvh/FCTUUgTsboGq+DTeWdyIFV8WSCdo0RIxk6wSkBTHqIK1mYuY7nOBXOchw==", + "dev": true, + "dependencies": { + "@octokit/endpoint": "^7.0.0", + "@octokit/request-error": "^3.0.0", + "@octokit/types": "^9.0.0", + "is-plain-object": "^5.0.0", + "node-fetch": "^2.6.7", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/request-error": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz", + "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==", + "dev": true, + "dependencies": { + "@octokit/types": "^9.0.0", + "deprecation": "^2.0.0", + "once": "^1.4.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/request/node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@octokit/request/node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dev": true, + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, + "node_modules/@octokit/rest": { + "version": "19.0.13", + "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.13.tgz", + "integrity": "sha512-/EzVox5V9gYGdbAI+ovYj3nXQT1TtTHRT+0eZPcuC05UFSWO3mdO9UY1C0i2eLF9Un1ONJkAk+IEtYGAC+TahA==", + "dev": true, + "dependencies": { + "@octokit/core": "^4.2.1", + "@octokit/plugin-paginate-rest": "^6.1.2", + "@octokit/plugin-request-log": "^1.0.4", + "@octokit/plugin-rest-endpoint-methods": "^7.1.2" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/tsconfig": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@octokit/tsconfig/-/tsconfig-1.0.2.tgz", + "integrity": "sha512-I0vDR0rdtP8p2lGMzvsJzbhdOWy405HcGovrspJ8RRibHnyRgggUSNO5AIox5LmqiwmatHKYsvj6VGFHkqS7lA==", + "dev": true + }, + "node_modules/@octokit/types": { + "version": "9.3.2", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.3.2.tgz", + "integrity": "sha512-D4iHGTdAnEEVsB8fl95m1hiz7D5YiRdQ9b/OEb3BYRVwbLsGHcRVPz+u+BgRLNk0Q0/4iZCBqDN96j2XNxfXrA==", + "dev": true, + "dependencies": { + "@octokit/openapi-types": "^18.0.0" + } + }, "node_modules/@parcel/watcher": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.3.0.tgz", @@ -6343,6 +6553,12 @@ } ] }, + "node_modules/before-after-hook": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz", + "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==", + "dev": true + }, "node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -7479,6 +7695,12 @@ "node": ">= 0.6.0" } }, + "node_modules/deprecation": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz", + "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==", + "dev": true + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -17749,6 +17971,12 @@ "integrity": "sha512-j2XyokF24fsj+L5u6fbu4rM3RQc6VWJuAngYM2k0ZdG3yiVxt0smLkps2GmQIYqK8VkELGdM9vFU/HfOkK/zoQ==", "dev": true }, + "node_modules/universal-user-agent": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz", + "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==", + "dev": true + }, "node_modules/universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", @@ -17952,6 +18180,24 @@ } } }, + "node_modules/vite-plugin-mkcert": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.16.0.tgz", + "integrity": "sha512-5r+g8SB9wZzLNUFekGwZo3e0P6QlS6rbxK5p9z/itxNAimsYohgjK/YfVPVxM9EuglP9hjridq0lUejo9v1nVg==", + "dev": true, + "dependencies": { + "@octokit/rest": "^19.0.5", + "axios": "^1.2.2", + "debug": "^4.3.4", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=v16.7.0" + }, + "peerDependencies": { + "vite": ">=3" + } + }, "node_modules/vite-plugin-sass-dts": { "version": "1.3.11", "resolved": "https://registry.npmjs.org/vite-plugin-sass-dts/-/vite-plugin-sass-dts-1.3.11.tgz", @@ -21216,6 +21462,169 @@ "fastq": "^1.6.0" } }, + "@octokit/auth-token": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.4.tgz", + "integrity": "sha512-TWFX7cZF2LXoCvdmJWY7XVPi74aSY0+FfBZNSXEXFkMpjcqsQwDSYVv5FhRFaI0V1ECnwbz4j59T/G+rXNWaIQ==", + "dev": true + }, + "@octokit/core": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.4.tgz", + "integrity": "sha512-rYKilwgzQ7/imScn3M9/pFfUf4I1AZEH3KhyJmtPdE2zfaXAn2mFfUy4FbKewzc2We5y/LlKLj36fWJLKC2SIQ==", + "dev": true, + "requires": { + "@octokit/auth-token": "^3.0.0", + "@octokit/graphql": "^5.0.0", + "@octokit/request": "^6.0.0", + "@octokit/request-error": "^3.0.0", + "@octokit/types": "^9.0.0", + "before-after-hook": "^2.2.0", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/endpoint": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.6.tgz", + "integrity": "sha512-5L4fseVRUsDFGR00tMWD/Trdeeihn999rTMGRMC1G/Ldi1uWlWJzI98H4Iak5DB/RVvQuyMYKqSK/R6mbSOQyg==", + "dev": true, + "requires": { + "@octokit/types": "^9.0.0", + "is-plain-object": "^5.0.0", + "universal-user-agent": "^6.0.0" + }, + "dependencies": { + "is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true + } + } + }, + "@octokit/graphql": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.6.tgz", + "integrity": "sha512-Fxyxdy/JH0MnIB5h+UQ3yCoh1FG4kWXfFKkpWqjZHw/p+Kc8Y44Hu/kCgNBT6nU1shNumEchmW/sUO1JuQnPcw==", + "dev": true, + "requires": { + "@octokit/request": "^6.0.0", + "@octokit/types": "^9.0.0", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/openapi-types": { + "version": "18.1.1", + "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-18.1.1.tgz", + "integrity": "sha512-VRaeH8nCDtF5aXWnjPuEMIYf1itK/s3JYyJcWFJT8X9pSNnBtriDf7wlEWsGuhPLl4QIH4xM8fqTXDwJ3Mu6sw==", + "dev": true + }, + "@octokit/plugin-paginate-rest": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-6.1.2.tgz", + "integrity": "sha512-qhrmtQeHU/IivxucOV1bbI/xZyC/iOBhclokv7Sut5vnejAIAEXVcGQeRpQlU39E0WwK9lNvJHphHri/DB6lbQ==", + "dev": true, + "requires": { + "@octokit/tsconfig": "^1.0.2", + "@octokit/types": "^9.2.3" + } + }, + "@octokit/plugin-request-log": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz", + "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==", + "dev": true, + "requires": {} + }, + "@octokit/plugin-rest-endpoint-methods": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-7.2.3.tgz", + "integrity": "sha512-I5Gml6kTAkzVlN7KCtjOM+Ruwe/rQppp0QU372K1GP7kNOYEKe8Xn5BW4sE62JAHdwpq95OQK/qGNyKQMUzVgA==", + "dev": true, + "requires": { + "@octokit/types": "^10.0.0" + }, + "dependencies": { + "@octokit/types": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-10.0.0.tgz", + "integrity": "sha512-Vm8IddVmhCgU1fxC1eyinpwqzXPEYu0NrYzD3YZjlGjyftdLBTeqNblRC0jmJmgxbJIsQlyogVeGnrNaaMVzIg==", + "dev": true, + "requires": { + "@octokit/openapi-types": "^18.0.0" + } + } + } + }, + "@octokit/request": { + "version": "6.2.8", + "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.8.tgz", + "integrity": "sha512-ow4+pkVQ+6XVVsekSYBzJC0VTVvh/FCTUUgTsboGq+DTeWdyIFV8WSCdo0RIxk6wSkBTHqIK1mYuY7nOBXOchw==", + "dev": true, + "requires": { + "@octokit/endpoint": "^7.0.0", + "@octokit/request-error": "^3.0.0", + "@octokit/types": "^9.0.0", + "is-plain-object": "^5.0.0", + "node-fetch": "^2.6.7", + "universal-user-agent": "^6.0.0" + }, + "dependencies": { + "is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true + }, + "node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dev": true, + "requires": { + "whatwg-url": "^5.0.0" + } + } + } + }, + "@octokit/request-error": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz", + "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==", + "dev": true, + "requires": { + "@octokit/types": "^9.0.0", + "deprecation": "^2.0.0", + "once": "^1.4.0" + } + }, + "@octokit/rest": { + "version": "19.0.13", + "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.13.tgz", + "integrity": "sha512-/EzVox5V9gYGdbAI+ovYj3nXQT1TtTHRT+0eZPcuC05UFSWO3mdO9UY1C0i2eLF9Un1ONJkAk+IEtYGAC+TahA==", + "dev": true, + "requires": { + "@octokit/core": "^4.2.1", + "@octokit/plugin-paginate-rest": "^6.1.2", + "@octokit/plugin-request-log": "^1.0.4", + "@octokit/plugin-rest-endpoint-methods": "^7.1.2" + } + }, + "@octokit/tsconfig": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@octokit/tsconfig/-/tsconfig-1.0.2.tgz", + "integrity": "sha512-I0vDR0rdtP8p2lGMzvsJzbhdOWy405HcGovrspJ8RRibHnyRgggUSNO5AIox5LmqiwmatHKYsvj6VGFHkqS7lA==", + "dev": true + }, + "@octokit/types": { + "version": "9.3.2", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.3.2.tgz", + "integrity": "sha512-D4iHGTdAnEEVsB8fl95m1hiz7D5YiRdQ9b/OEb3BYRVwbLsGHcRVPz+u+BgRLNk0Q0/4iZCBqDN96j2XNxfXrA==", + "dev": true, + "requires": { + "@octokit/openapi-types": "^18.0.0" + } + }, "@parcel/watcher": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.3.0.tgz", @@ -22857,6 +23266,12 @@ "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", "dev": true }, + "before-after-hook": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz", + "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==", + "dev": true + }, "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -23663,6 +24078,12 @@ "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", "dev": true }, + "deprecation": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz", + "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==", + "dev": true + }, "dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -31183,6 +31604,12 @@ "integrity": "sha512-j2XyokF24fsj+L5u6fbu4rM3RQc6VWJuAngYM2k0ZdG3yiVxt0smLkps2GmQIYqK8VkELGdM9vFU/HfOkK/zoQ==", "dev": true }, + "universal-user-agent": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz", + "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==", + "dev": true + }, "universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", @@ -31316,6 +31743,18 @@ "rollup": "^3.21.0" } }, + "vite-plugin-mkcert": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.16.0.tgz", + "integrity": "sha512-5r+g8SB9wZzLNUFekGwZo3e0P6QlS6rbxK5p9z/itxNAimsYohgjK/YfVPVxM9EuglP9hjridq0lUejo9v1nVg==", + "dev": true, + "requires": { + "@octokit/rest": "^19.0.5", + "axios": "^1.2.2", + "debug": "^4.3.4", + "picocolors": "^1.0.0" + } + }, "vite-plugin-sass-dts": { "version": "1.3.11", "resolved": "https://registry.npmjs.org/vite-plugin-sass-dts/-/vite-plugin-sass-dts-1.3.11.tgz", diff --git a/package.json b/package.json index 561a99ee..e6d3f2bb 100644 --- a/package.json +++ b/package.json @@ -146,6 +146,7 @@ "typograf": "7.1.0", "uniqolor": "1.1.0", "vite": "4.3.9", + "vite-plugin-mkcert": "1.16.0", "vite-plugin-sass-dts": "1.3.11", "vite-plugin-solid": "2.7.0", "vite-plugin-ssr": "0.4.123", 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: {