Merge pull request #48 from tmshv/fix/css-modules

CSS modules

modules/sync/config.yaml

@@ -2,7 +2,6 @@
 database_uri: 'mongodb://localhost:27017/hudozka'
 
 env: 'production'
-origin: 'Yandex.Disk'
 yandex_disk_access_token: '<YANDEX_DISK_TOKEN>'
 interval: 0
 

modules/sync/settings.py

@@ -59,8 +59,6 @@ date_formats = [
     '%d.%m.%Y %H:%M:%S'
 ]
 
-origin = value('origin')
-
 collection_images = 'images'
 collection_documents = 'documents'
 collection_pages = 'pages'

modules/sync/sync/__init__.py

@@ -79,6 +79,7 @@ async def create_post(provider: Provider, folder: str, md: str, sizes):
         title = data['caption']
         if title:
             document.set_title(title)
+            await document.save()
 
         if not document:
             raise Exception(f'Failed to build Document {filepath}')

modules/sync/sync/core/__init__.py

@@ -8,7 +8,6 @@ class Sync:
         super().__init__()
 
         self.validate_urls = True
-        self.strict_origin = False
         self.__default_build_args = {
             'sizes': settings.image_sizes,
         }
@@ -53,14 +52,6 @@ class Sync:
             'id': {'$nin': [doc.id for doc in items]},
         }
 
-        if self.strict_origin:
-            items_origin = list(set([doc.origin for doc in items]))
-
-            query = {
-                **query,
-                'origin': {'$in': items_origin},
-            }
-
         return query
 
     async def run(self):

modules/sync/sync/models/Document.py

@@ -28,16 +28,14 @@ class Document(Model):
     @staticmethod
     def read_path(provider, path):
         name = os.path.basename(path)
-
-        document = {
-            'category': os.path.dirname(path),
+        params = {
             'title': os.path.splitext(name)[0]
         }
 
         return Document(
             provider,
             path,
-            document
+            params
         )
 
     @staticmethod
@@ -45,7 +43,6 @@ class Document(Model):
         document = Document.read_path(provider, file)
         changed = await document.is_changed()
         if changed:
-            document.hide()
             await document.build(sizes=sizes)
             await document.upload()
             await document.save()
@@ -70,16 +67,12 @@ class Document(Model):
         self.file_size = None
         self.preview = None
 
-        self.type = 'document'  # 'award'
-        self.hidden = False
-
         super().__init__(provider, store, file, params=params)
 
     def init(self):
         self.__set_id()
         self.__set_url()
         self.__set_hash()
-        self._set_origin()
 
         filename = os.path.basename(self.file)
         self.file_name = filename
@@ -88,9 +81,6 @@ class Document(Model):
         if self.has_param('title'):
             self.title = self.get_param('title')
 
-        if self.has_param('hidden'):
-            self.hidden = self.get_param('hidden')
-    
     def set_title(self, value: str):
         self.title = value
 
@@ -130,10 +120,7 @@ class Document(Model):
             'file': self.file,
             'hash': self.hash,
             'url': self.url,
-            'type': self.type,
             'title': self.title,
-            'origin': self.origin,
-            'hidden': self.hidden,
             'preview': self.preview.ref,
             'fileInfo': {
                 'name': self.file_name,
@@ -165,10 +152,6 @@ class Document(Model):
     async def create_preview(self, sizes):
         self.preview = await DocumentPreviewImage.new(self.provider, self.file, sizes)
 
-    def hide(self):
-        self.hidden = True
-        return self
-
     def __str__(self):
         return f'<Document file={self.file} id={self.id}>'
 

modules/sync/sync/models/Image.py

@@ -66,8 +66,6 @@ class Image(Model):
     def __init__(self, provider, file, data, url_factory):
         self.__hash_salt = settings.hash_salt_images
 
-        self.origin = None
-
         self.data = data
         self.url_factory = url_factory
 
@@ -77,8 +75,6 @@ class Image(Model):
         self.id = self.__get_id()
         self.hash = self.__get_hash()
 
-        self.origin = f"{settings.origin}:{os.path.dirname(self.file)}"
-
     async def is_changed(self):
         i = await Image.find_one({'file': self.file})
         return self._is_changed_hash(i)
@@ -119,7 +115,6 @@ class Image(Model):
         return {
             'id': self.id,
             'file': self.file,
-            'origin': self.origin,
             'hash': self.hash,
             'data': self.data,
         }

modules/sync/sync/models/__init__.py

@@ -20,7 +20,6 @@ class Model:
         self.store = store
         self.file = file
 
-        self.origin = None
         self.id = None
         self.url = None
         self.hash = None
@@ -57,9 +56,6 @@ class Model:
             return default_value
         return self.params[name]
 
-    def _set_origin(self):
-        self.origin = f'{settings.origin}:{os.path.dirname(self.file)}'
-
     def _is_changed_hash(self, item):
         if not item:
             return True

next.config.js

@@ -1,6 +1,4 @@
-const withCss = require('@zeit/next-css')
-
-module.exports = withCss({
+module.exports = {
     exportTrailingSlash: true,
     env: {
         APP_ARTICLES_PAGE_SIZE: 24,
@@ -10,4 +8,4 @@ module.exports = withCss({
         config.resolve.modules.push(__dirname)
         return config;
     },
-})
+}

package.json

@@ -24,7 +24,7 @@
         "date-fns": "^2.11.0",
         "lodash": "^4.17.15",
         "markdown-it": "^10.0.0",
-        "next": "^9.3.1",
+        "next": "^9.3.2",
         "react": "^16.13.0",
         "react-dom": "^16.13.0",
         "sitemap": "^1.5.0",
@@ -36,7 +36,6 @@
         "@types/lodash": "^4.14.149",
         "@types/node": "^12.12.30",
         "@types/react": "^16.9.23",
-        "@zeit/next-css": "^1.0.1",
         "feed": "^4.1.0",
         "should": "^8.2.2",
         "typescript": "^3.8.3"

pages/collective.tsx

@@ -49,7 +49,7 @@ type Props = {
 
 const Index: NextPage<Props> = props => {
     if (!props.data) {
-        console.log('kek error')
+        console.log('collective kek error')
         return
     }
 

pages/document/[slug].tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const Index: NextPage<Props> = props => {
     if (!props.data) {
-        console.log('kek error', props)
+        console.log('document kek error', props)
 
         return null
     }
@@ -28,7 +28,12 @@ const Index: NextPage<Props> = props => {
                 <title>{props.data.name}</title>
                 <Meta meta={props.meta} />
             </Head>
-            <File {...props.data} />
+            <File
+                {...props.data}
+                style={{
+                    marginTop: 'var(--size-l)',
+                }}
+            />
             <Share />
         </App>
     )

src/components/Block/index.tsx

@@ -1,4 +1,4 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import cx from 'classnames'
 import { createElement } from 'react'
@@ -10,7 +10,13 @@ export type BlockProps = {
 }
 
 export const Block: React.FC<BlockProps> = ({ as = 'div', style, direction, ...props }) => {
-    const newProps = { className: cx('block', direction), style }
+    const directionClass = direction === 'horizontal'
+        ? s.horizontal
+        : s.vertical
+    const newProps = {
+        className: cx(s.block, directionClass),
+        style,
+    }
 
     return createElement(as, newProps, props.children)
 }

src/components/Block/styles.module.css

@@ -5,10 +5,10 @@
     justify-content: flex-start;
 }
 
-.block.horizontal {
+.horizontal {
     flex-direction: row;
 }
 
-.block.vertical {
+.vertical {
     flex-direction: column;
 }

src/components/Breadcrumbs/index.tsx

@@ -1,4 +1,4 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import { IBreadcumbsPart } from 'src/types'
 import { Button } from '../Button'
@@ -14,7 +14,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = props => {
     const items = insertBetween(props.items, () => '/')
 
     return (
-        <nav className={'breadcrumbs'} style={props.style}>
+        <nav className={s.breadcrumbs} style={props.style}>
             {items.map((x, i) => {
                 if (typeof x === 'string') {
                     return (

src/components/Breadcrumbs/styles.module.css

@@ -11,9 +11,3 @@
 .breadcrumbs li {
     margin-bottom: var(--size-xs);
 }
-
-.breadcrumbCurrent {
-    color: var(--color-text-second);
-    font-size: var(--font-size-second);
-    text-overflow: ellipsis;
-}

src/components/Button/index.tsx

@@ -1,9 +1,20 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import Link from 'next/link'
 import cx from 'classnames'
 import { useCallback } from 'react'
 
+const sizeClass = {
+    default: s.sizeDefault,
+    small: s.sizeSmall,
+}
+
+const themeClass = {
+    default: '',
+    icon: s.themeIcon,
+    ghost: s.themeGhost,
+}
+
 export type ButtonProps = {
     value?: any
     style?: React.CSSProperties
@@ -15,8 +26,8 @@ export type ButtonProps = {
 }
 
 export const Button: React.FC<ButtonProps> = ({ size = 'default', theme = 'default', disabled = false, ...props }) => {
-    const className = cx('button', `size_${size}`, `theme_${theme}`, {
-        disabled
+    const className = cx(s.button, sizeClass[size], themeClass[theme], {
+        [s.disabled]: disabled,
     })
     const onClick = useCallback(event => {
         if (props.onClick) {

src/components/Button/styles.module.css

@@ -27,28 +27,28 @@
 
 /* MODIFICATORS */
 
-.button.disabled {
+.disabled {
     pointer-events: none;
     color: var(--color-text-second);
 }
 
 /* SIZE */
 
-.button.size_default {
+.sizeDefault {
     padding: var(--size-s) var(--size-m);
 }
 
-.button.size_small {
+.sizeSmall {
     padding: var(--size-xs) var(--size-s);
     font-size: var(--font-size-second);
 }
 
 /* THEME */
 
-.button.theme_ghost {
+.themeGhost {
     border-color: rgba(0, 0, 0, 0);
 }
 
-.button.theme_icon {
+.themeIcon {
     padding: var(--size-xs) var(--size-xs);
 }

src/components/Card/index.tsx

@@ -1,8 +1,14 @@
-import './styles.css'
+import s from './styles.module.css'
+
 import cx from 'classnames'
 import Link from 'next/link'
 import { Image } from '../Image'
 
+const layoutClass = {
+    simple: s.simple,
+    featured: s.featured,
+}
+
 export type CardLayout = 'simple' | 'featured'
 export type CardProps = {
     style?: React.CSSProperties
@@ -16,10 +22,10 @@ export type CardProps = {
 }
 
 export const Card: React.FC<CardProps> = props => (
-    <div className={cx('card', props.layout)} style={props.style}>
+    <div className={cx(s.card, layoutClass[props.layout])} style={props.style}>
         <Link href={props.href}>
             <a>
-                <div className={'card-image'}>
+                <div className={s.image}>
                     <Image
                         alt={props.img.alt}
                         src={props.img.src}
@@ -27,7 +33,7 @@ export const Card: React.FC<CardProps> = props => (
                     />
                 </div>
 
-                <div className={'card-body'}>
+                <div className={s.body}>
                     {props.children}
                 </div>
             </a>

src/components/Card/styles.module.css

@@ -1,3 +1,5 @@
+/* CARD */
+
 .card {
     border-radius: var(--radius);
     box-shadow: var(--shadow);
@@ -23,13 +25,13 @@
     position: relative;
 }
 
-.card-image {
+.image {
     position: relative;
     width: 100%;
     height: 100%;
 }
 
-.card-image img {
+.image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -41,19 +43,19 @@
     left: 0;
 }
 
-.card-body {
+.body {
     background-color: var(--color-back);
     padding: var(--size-m);
 }
 
 /* SIMPLE */
 
-.card.simple .card-body {
+.simple .body {
     position: relative;
     padding-top: 0; 
 }
 
-.card.simple .card-body:before {
+.simple .body:before {
     position: absolute;
     content: '';
     background-color: var(--color-back);
@@ -65,14 +67,14 @@
     left: 0;
 }
 
-.card.simple > a {
+.simple > a {
     display: flex;
     flex-direction: column;
 }
 
 /* FEATURED */
 
-.card.featured .card-body {
+.featured .body {
     position: absolute;
 
     --offset: var(--size-m);

src/components/CardGrid/index.tsx

@@ -1,4 +1,4 @@
-import './styles.css'
+import s from './styles.module.css'
 
 export type CardGridProps = {
     style?: React.CSSProperties
@@ -6,7 +6,7 @@ export type CardGridProps = {
 
 export const CardGrid: React.FC<CardGridProps> = props => {
     return (
-        <section className={'card-grid'} style={props.style}>
+        <section className={s.grid} style={props.style}>
             {props.children}
         </section>
     )

src/components/CardGrid/styles.module.css

@@ -1,4 +1,4 @@
-.card-grid {
+.grid {
     --min-cell-size: 240px;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr));
@@ -8,7 +8,7 @@
 }
 
 @media screen and (max-width: 31.25em) {
-    .card-grid {
+    .grid {
         grid-template-columns: 1fr;
         /* grid-template-columns: auto; */
         grid-gap: var(--size-l) 0;

src/components/File/index.tsx

@@ -1,27 +1,27 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import { FileDefinition } from 'src/types'
 import { ext, size } from 'src/lib/file'
-import { titleCase } from 'src/lib/string'
 
-export const File: React.SFC<FileDefinition> = props => (
-    <div className={'file'}>
-        <h1>{titleCase(props.name)}</h1>
+export type FileProps = FileDefinition & {
+    style?: React.CSSProperties
+}
 
+export const File: React.SFC<FileProps> = props => (
+    <div className={s.file} style={props.style}>
         {!props.cover?.src ? null : (
-            <div className={'file__image'}>
+            <div className={s.image}>
                 <a href={props.file.src} target="_blank" className="invisible">
                     <img src={props.cover.src} alt={props.name} />
                 </a>
             </div>
         )}
 
-        <div className={'file__file'}>
-            <span>{titleCase(props.name)}</span>
-        </div>
-
-        <div className={'file__file-info'}>
-            <a href={props.file.src} target="_blank">{ext(props.file.name)} ({size(props.file.size)})</a>
+        <div className={s.info}>
+            <span>{props.name}</span>
+            <a href={props.file.src} target="_blank">
+                {ext(props.file.type)} ({size(props.file.size)})
+            </a>
         </div>
     </div>
 )

src/components/File/styles.module.css

@@ -6,20 +6,24 @@
     margin-bottom: var(--size-xl);
 }
 
-.file__image {
+.image {
     margin-bottom: var(--size-m);
 }
 
-.file__image img {
+.image img {
     max-width: 100%;
     max-height: 100%;
     box-shadow: var(--shadow);
 }
 
-.file__image--big {
-    max-width: 20em;
-}
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-.file__file-info {
     font-size: var(--font-size-second);
 }
+
+.info span {
+    padding-bottom: var(--size-m);
+}

src/components/Image/index.tsx

@@ -1,4 +1,5 @@
-import './styles.css'
+import s from './styles.module.css'
+
 import { memo, useRef, useEffect, useCallback } from 'react'
 
 export type ImageProps = {
@@ -25,7 +26,7 @@ export const Image: React.FC<ImageProps> = memo(props => {
         <img
             ref={ref}
             onLoad={onLoad}
-            className={'image'}
+            className={s.image}
             style={props.style}
             alt={props.alt}
             src={props.src}

src/components/Menu/MenuItem.tsx

@@ -1,3 +1,4 @@
+import s from './styles.module.css'
 import cx from 'classnames'
 import { useRouter } from 'next/router'
 import { ActiveLink } from './ActiveLink'
@@ -5,7 +6,6 @@ import { isPartOfPath } from 'src/lib/url'
 
 export type MenuItemProps = {
     href: string
-    layout: 'desktop' | 'mobile'
 }
 
 export const MenuItem: React.FC<MenuItemProps> = props => {
@@ -17,8 +17,8 @@ export const MenuItem: React.FC<MenuItemProps> = props => {
 
     return (
         <li
-            className={cx('menuItem', props.layout, {
-                selected,
+            className={cx({
+                [s.selected]: selected,
             })}
         >
             <ActiveLink

src/components/Menu/index.tsx

@@ -1,20 +1,24 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import cx from 'classnames'
 import { MenuItem } from './MenuItem'
 import { IMenu } from 'src/types'
 
+const layoutClass = {
+    desktop: s.desktop,
+    mobile: s.mobile,
+}
+
 export type MenuProps = {
     layout: 'desktop' | 'mobile'
     items: IMenu[]
 }
 
 export const Menu: React.FC<MenuProps> = props => (
-    <menu className={cx('menu', props.layout)}>
+    <menu className={cx(s.menu, layoutClass[props.layout])}>
         {props.items.map((item, index) => (
             <MenuItem key={index}
                 href={item.href}
-                layout={props.layout}
             >
                 {item.name}
             </MenuItem>

src/components/Menu/styles.module.css

@@ -7,42 +7,46 @@
     list-style: none;
 }
 
-.menu.desktop {
+/* MENU LAYOUT */
+
+.desktop {
     flex-direction: row;
 }
 
-.menu.mobile {
+.mobile {
     flex-direction: column;
 }
 
-.menuItem {
+/* MENU ITEM */
+
+.menu li {
     position: relative;
     border-top: var(--menu-mark-thickness) solid rgba(0, 0, 0, 0);
 }
 
-/* MOBILE */
+/* MENU ITEM MOBILE */
 
-.menuItem.mobile {
+.mobile li {
     font-size: var(--font-size-default);
 
     padding: var(--size-xs) var(--size-s);
 }
 
-.menuItem.mobile.selected {
+.mobile li.selected {
     background-color: var(--color-back-opposite);
     color: var(--color-text-opposite)
 }
 
-.menuItem.mobile.selected a {
-    color: var(--color-text-opposite)
+.mobile li.selected a {
+     color: var(--color-text-opposite)
 }
+ 
+/* MENU ITEM DESKTOP */
 
-/* DESKTOP */
-
-.menuItem.desktop {
+.desktop li {
     padding: var(--size-xs) var(--size-s);
 }
 
-.menuItem.desktop.selected {
+.desktop li.selected {
     border-top-color: var(--color-back-opposite);
 }

src/components/MenuToggle/index.tsx

@@ -1,4 +1,4 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import cx from 'classnames'
 import { Button } from '../Button'
@@ -17,9 +17,9 @@ export const MenuToggle: React.FC<IMenuToggleProps> = props => {
             theme={'icon'}
         >
             <div
-                className={cx('toggle', {
-                    open: props.open,
-                    close: !props.open,
+                className={cx(s.toggle, {
+                    [s.open]: props.open,
+                    [s.close]: !props.open,
                 })}
             />
         </Button>

src/components/Overlay/index.tsx

@@ -1,4 +1,4 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import { Transition } from './Transition'
 import { useReducedMotion } from '../../hooks/useReducedMotion'
@@ -34,7 +34,7 @@ export const Overlay: React.FC<IOverlayProps> = props => {
         >
             <div
                 onClick={onClick}
-                className={'overlay'}
+                className={s.overlay}
                 style={props.style}
             >
                 {props.children}

src/components/Page/index.tsx

@@ -1,7 +1,6 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import { Share } from '../Share'
-import { Html } from '../Html'
 import { PageMeta } from '../PageMeta'
 import { ITag } from 'src/types'
 
@@ -12,7 +11,7 @@ export type PageProps = {
 }
 
 export const Page: React.FC<PageProps> = props => (
-    <div className={'page'} style={props.style}>
+    <div className={s.page} style={props.style}>
         {props.children}
         <hr />
         <Share />

src/components/PageMeta/index.tsx

@@ -1,4 +1,4 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import cx from 'classnames'
 import { dateFormat } from 'src/lib/date'
@@ -18,7 +18,9 @@ export const PageMeta: React.FC<PageMetaProps> = props => {
     const direction: Direction = mobile ? 'vertical' : 'horizontal'
 
     return (
-        <div className={cx('pageMeta', center)} style={props.style}>
+        <div className={cx(s.pageMeta, {
+            [s.center]: center,
+        })} style={props.style}>
             {!props.date ? null : (
                 <p className={'date'}>Опубликовано {dateFormat(props.date)}</p>
             )}

src/components/TagList/index.tsx

@@ -1,9 +1,14 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import cx from 'classnames'
 import { ITag } from 'src/types'
 import { Button } from '../Button'
 
+const directionClass = {
+    horizontal: '',
+    vertical: s.vertical,
+}
+
 export type Direction = 'horizontal' | 'vertical'
 
 export type TagProps = {
@@ -12,7 +17,7 @@ export type TagProps = {
 }
 
 export const Tag: React.FC<TagProps> = props => (
-    <li className={cx('tagsItem', props.direction)}>
+    <li>
         <Button
             href={props.href}
             size={'small'}
@@ -29,7 +34,7 @@ export type TagListProps = {
 }
 
 export const TagList: React.FC<TagListProps> = props => (
-    <ul className={cx('tags', props.direction)}>
+    <ul className={cx(s.tags, directionClass[props.direction])}>
         {props.items.map(x => (
             <Tag
                 key={x.slug}

src/components/TagList/styles.module.css

@@ -8,23 +8,27 @@
     list-style: none;
 }
 
-.tags.vertical {
+/* LAYOUT */
+
+.vertical {
     flex-direction: column;
 }
 
-.tagsItem {
+/* ITEM */
+
+.tags li {
     margin-right: var(--size-s);
     margin-bottom: var(--size-s);
 }
 
-.tagsItem:last-child {
+.tags li:last-child {
     margin-right: 0;
 }
 
-.tagsItem.vertical {
+.tags.vertical li {
     margin-bottom: var(--size-s);
 }
 
-.tagsItem.tags.vertical:last-child {
+.tags.vertical li:last-child {
     margin-bottom: 0;
 }