[WIP] init

public/locales/en/translation.json

@@ -3,6 +3,7 @@
   "About myself": "About myself",
   "About the project": "About the project",
   "Add comment": "Comment",
+  "Add image": "Add image",
   "Address on Discourse": "Address on Discourse",
   "All": "All",
   "All authors": "All authors",
@@ -32,6 +33,7 @@
   "By views": "By views",
   "Characters": "Знаков",
   "Chat Title": "Chat Title",
+  "Choose a title image for the article. You can immediately see how the publication card will look like.": "Choose a title image for the article. You can immediately see how the publication card will look like.",
   "Choose who you want to write to": "Choose who you want to write to",
   "Collaborate": "Help Edit",
   "Comments": "Comments",
@@ -119,6 +121,7 @@
   "Logout": "Logout",
   "Manifest": "Manifest",
   "Many files, choose only one": "Many files, choose only one",
+  "Material card": "Material card",
   "More": "More",
   "Most commented": "Commented",
   "Most read": "Readable",
@@ -162,6 +165,7 @@
   "Recent": "Fresh",
   "Reply": "Reply",
   "Report": "Complain",
+  "Required": "Required",
   "Resend code": "Send confirmation",
   "Restore password": "Restore password",
   "Save draft": "Save draft",
@@ -272,5 +276,5 @@
   "user already exist": "user already exists",
   "view": "view",
   "zine": "zine",
-  "Required": "Required"
+  "Publish Settings": "Publish Settings"
 }

public/locales/ru/translation.json

@@ -4,6 +4,7 @@
   "About myself": "О себе",
   "About the project": "О проекте",
   "Add comment": "Комментировать",
+  "Add image": "Добавить изображение",
   "Add to bookmarks": "Добавить в закладки",
   "Address on Discourse": "Адрес на Дискурсе",
   "All": "Все",
@@ -34,6 +35,7 @@
   "By views": "По просмотрам",
   "Characters": "Знаков",
   "Chat Title": "Тема дискурса",
+  "Choose a title image for the article. You can immediately see how the publication card will look like.": "Выберите заглавное изображение для статьи. Тут же сразу можно увидеть как будет выглядеть карточка публикации.",
   "Choose who you want to write to": "Выберите кому хотите написать",
   "Collaborate": "Помочь редактировать",
   "Comments": "Комментарии",
@@ -126,6 +128,7 @@
   "Logout": "Выход",
   "Manifest": "Манифест",
   "Many files, choose only one": "Много файлов, выберете один",
+  "Material card": "Карточка материала",
   "More": "Ещё",
   "Most commented": "Комментируемое",
   "Most read": "Читаемое",
@@ -173,11 +176,13 @@
   "Recent": "Свежее",
   "Reply": "Ответить",
   "Report": "Пожаловаться",
+  "Required": "Поле обязательно для заполнения",
   "Resend code": "Выслать подтверждение",
   "Restore password": "Восстановить пароль",
   "Save": "Сохранить",
   "Save draft": "Сохранить черновик",
   "Save settings": "Сохранить настройки",
+  "Scroll up": "Наверх",
   "Search": "Поиск",
   "Search author": "Поиск автора",
   "Search topic": "Поиск темы",
@@ -187,7 +192,6 @@
   "Send": "Отправить",
   "Send link again": "Прислать ссылку ещё раз",
   "Settings": "Настройки",
-  "Scroll up": "Наверх",
   "Share": "Поделиться",
   "Short opening": "Небольшое вступление, чтобы заинтересовать читателя",
   "Show": "Показать",
@@ -293,5 +297,5 @@
   "user already exist": "пользователь уже существует",
   "view": "просмотр",
   "zine": "журнал",
-  "Required": "Поле обязательно для заполнения"
+  "Publish Settings": "Настройки публикации"
 }

src/components/Editor/TopicSelect/index.ts

@@ -0,0 +1 @@
+export { TopicSelect } from './TopicSelect'

src/components/Editor/index.ts

@@ -0,0 +1,3 @@
+export { Editor } from './Editor'
+export { Panel } from './Panel'
+export { TopicSelect } from './TopicSelect'

src/components/Views/Edit.module.scss

@@ -4,8 +4,37 @@
 
 .articlePreview {
   border: 2px solid #e8e8e8;
-  min-height: 10em;
   padding: 1rem 1.2rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 300px;
+  align-items: flex-start;
+  box-sizing: border-box;
+
+  .shoutCardTitle {
+    @include font-size(2.2rem);
+
+    font-weight: 700;
+    line-height: 1.25;
+    margin: auto 0 0.8rem;
+  }
+
+  .shoutCardSubtitle {
+    @include font-size(1.7rem);
+
+    color: #696969;
+    font-weight: 400;
+    line-height: 1.3;
+    margin-bottom: 0.8rem;
+    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+  }
+
+  .shoutAuthor {
+    @include font-size(1.2rem);
+
+    margin-right: 1.6rem;
+    color: rgb(0 0 0 / 70%);
+  }
 }
 
 .formHolder {

src/components/Views/Edit.tsx

@@ -1,16 +1,16 @@
 import { createSignal, onCleanup, onMount, Show } from 'solid-js'
 import { useLocalize } from '../../context/localize'
 import { clsx } from 'clsx'
-import styles from './Edit.module.scss'
 import { Title } from '@solidjs/meta'
 import type { Shout, Topic } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
-import { TopicSelect } from '../Editor/TopicSelect/TopicSelect'
 import { useRouter } from '../../stores/router'
-import { Editor } from '../Editor/Editor'
-import { Panel } from '../Editor/Panel'
 import { useEditorContext } from '../../context/editor'
+import { Editor, Panel, TopicSelect } from '../Editor'
 import { Icon } from '../_shared/Icon'
+import { Button } from '../_shared/Button'
+import styles from './Edit.module.scss'
+import { useSession } from '../../context/session'
 
 type EditViewProps = {
   shout: Shout
@@ -18,6 +18,7 @@ type EditViewProps = {
 
 export const EditView = (props: EditViewProps) => {
   const { t } = useLocalize()
+  const { user } = useSession()
 
   const [isScrolled, setIsScrolled] = createSignal(false)
   const [topics, setTopics] = createSignal<Topic[]>(null)
@@ -87,7 +88,7 @@ export const EditView = (props: EditViewProps) => {
       behavior: 'smooth'
     })
   }
-
+  console.log('!!! :')
   return (
     <>
       <button
@@ -101,6 +102,7 @@ export const EditView = (props: EditViewProps) => {
       </button>
 
       <div class={styles.container}>
+        <h1>ЙФЙФЙФЙФЙЫЙ &nbsp;</h1>
         <Title>{t('Write an article')}</Title>
         <form>
           <div class="wide-container">
@@ -117,7 +119,7 @@ export const EditView = (props: EditViewProps) => {
                       type="text"
                       name="title"
                       id="title"
-                      placeholder="Заголовок"
+                      placeholder={t('Header')}
                       autocomplete="off"
                       value={form.title}
                       onInput={handleTitleInputChange}
@@ -133,7 +135,7 @@ export const EditView = (props: EditViewProps) => {
                     name="subtitle"
                     id="subtitle"
                     autocomplete="off"
-                    placeholder="Подзаголовок"
+                    placeholder={t('Subheader')}
                     value={form.subtitle}
                     onChange={(e) => setForm('subtitle', e.currentTarget.value)}
                   />
@@ -148,7 +150,7 @@ export const EditView = (props: EditViewProps) => {
                     [styles.visible]: page().route === 'editSettings'
                   })}
                 >
-                  <h1>Настройки публикации</h1>
+                  <h1>{t('Publish Settings')}</h1>
 
                   <h4>Slug</h4>
                   <div class="pretty-form__item">
@@ -214,12 +216,19 @@ export const EditView = (props: EditViewProps) => {
                   {/*  </div>*/}
                   {/*</div>*/}
 
-                  <h4>Карточка материала на&nbsp;главной</h4>
+                  <h4>{t('Material card')}</h4>
                   <p class="description">
-                    Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
-                    выглядеть на&nbsp;главной странице
+                    {t(
+                      'Choose a title image for the article. You can immediately see how the publication card will look like.'
+                    )}
                   </p>
-                  <div class={styles.articlePreview} />
+                  <div class={styles.articlePreview}>
+                    <Button variant="primary" onClick={() => ''} value={t('Add image')} />
+
+                    <div class={styles.shoutCardTitle}>{form.title}</div>
+                    <div class={styles.shoutCardSubtitle}>{form.subtitle}</div>
+                    <div class={styles.shoutAuthor}>{user().name}</div>
+                  </div>
                 </div>
               </div>
             </div>