WIP

src/components/Views/Create.module.scss

@@ -23,3 +23,31 @@
     margin: 0 divide($container-padding-x, 2);
   }
 }
+
+.container {
+  .titleInput,
+  .subtitleInput {
+    border: 0;
+    outline: 0;
+    padding: 0;
+    font-size: 36px;
+
+    &::placeholder {
+      opacity: 0.3;
+      color: #000;
+    }
+  }
+
+  .titleInput {
+    font-weight: 700;
+  }
+}
+
+.createSettings,
+.create {
+  display: none;
+
+  &.visible {
+    display: block;
+  }
+}

src/components/Views/Create.tsx

@@ -5,9 +5,12 @@ import { clsx } from 'clsx'
 import styles from './Create.module.scss'
 import { Title } from '@solidjs/meta'
 import { createStore } from 'solid-js/store'
-import type { ShoutInput, Topic } from '../../graphql/types.gen'
+import type { Topic } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
 import { TopicSelect } from '../Editor/TopicSelect/TopicSelect'
+import { router, useRouter } from '../../stores/router'
+import { getPagePath } from '@nanostores/router'
+import { translit } from '../../utils/ru2en'
 
 const Editor = lazy(() => import('../Editor/Editor'))
 
@@ -25,6 +28,9 @@ export const CreateView = () => {
   const { t } = useLocalize()
 
   const [topics, setTopics] = createSignal<Topic[]>(null)
+  const { page } = useRouter()
+
+  const [isSlugChanged, setIsSlugChanged] = createSignal(false)
 
   const [form, setForm] = createStore<ShoutForm>({
     slug: '',
@@ -45,8 +51,27 @@ export const CreateView = () => {
     e.preventDefault()
   }
 
+  const handleTitleInputChange = (e) => {
+    const title = e.currentTarget.value
+    setForm('title', title)
+
+    if (!isSlugChanged()) {
+      const slug = translit(title).replaceAll(' ', '-')
+      setForm('slug', slug)
+    }
+  }
+
+  const handleSlugInputChange = (e) => {
+    const slug = e.currentTarget.value
+
+    if (slug !== form.slug) {
+      setIsSlugChanged(true)
+    }
+    setForm('slug', slug)
+  }
+
   return (
-    <>
+    <div class={styles.container}>
       <Title>{t('Write an article')}</Title>
       <Suspense fallback={<Loading />}>
         <form onSubmit={handleFormSubmit}>
@@ -54,34 +79,23 @@ export const CreateView = () => {
             <div class="shift-content">
               <div class="row">
                 <div class="col-md-20 col-lg-18 col-xl-16">
-                  <h4>Slug</h4>
+                  <div
-                  <div class="pretty-form__item">
+                    class={clsx(styles.create, {
-                    <input
+                      [styles.visible]: page().route === 'create'
-                      type="text"
+                    })}
-                      name="slug"
+                  >
-                      id="slug"
-                      value={form.slug}
-                      onChange={(e) => setForm('slug', e.currentTarget.value)}
-                    />
-                    <label for="slug">Slug</label>
-                  </div>
-
-                  <h4>Заголовок</h4>
-                  <div class="pretty-form__item">
                     <input
+                      class={styles.titleInput}
                       type="text"
                       name="title"
                       id="title"
-                      placeholder="Придумайте заголовок вашей истории"
+                      placeholder="Заголовок"
                       value={form.title}
-                      onChange={(e) => setForm('title', e.currentTarget.value)}
+                      onChange={handleTitleInputChange}
                     />
-                    <label for="title">Придумайте заголовок вашей истории</label>
-                  </div>
 
-                  <h4>Подзаголовок</h4>
-                  <div class="pretty-form__item">
                     <input
+                      class={styles.subtitleInput}
                       type="text"
                       name="subtitle"
                       id="subtitle"
@@ -89,80 +103,103 @@ export const CreateView = () => {
                       value={form.subtitle}
                       onChange={(e) => setForm('subtitle', e.currentTarget.value)}
                     />
-                    <label for="subtitle">Подзаголовок</label>
+
+                    <Editor onChange={(body) => setForm('body', body)} />
+
+                    <div class={styles.saveBlock}>
+                      {/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
+                      <a href={getPagePath(router, 'createSettings')}>Настройки</a>
+                    </div>
                   </div>
+                  <div
+                    class={clsx(styles.createSettings, {
+                      [styles.visible]: page().route === 'createSettings'
+                    })}
+                  >
+                    <h1>Настройки публикации</h1>
 
-                  <Editor onChange={(body) => setForm('body', body)} />
+                    <h4>Slug</h4>
-
+                    <div class="pretty-form__item">
-                  <h1>Настройки публикации</h1>
+                      <input
-                  {/*<h4>Лид</h4>*/}
+                        type="text"
-                  {/*<div class="pretty-form__item">*/}
+                        name="slug"
-                  {/*  <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
+                        id="slug"
-                  {/*  <label for="lead">Лид</label>*/}
+                        value={form.slug}
-                  {/*</div>*/}
+                        onChange={handleSlugInputChange}
-
-                  {/*<h4>Выбор сообщества</h4>*/}
-                  {/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
-                  {/*<div class="pretty-form__item">*/}
-                  {/*  <input*/}
-                  {/*    type="text"*/}
-                  {/*    name="community"*/}
-                  {/*    id="community"*/}
-                  {/*    placeholder="Сообщества"*/}
-                  {/*    class="nolabel"*/}
-                  {/*  />*/}
-                  {/*</div>*/}
-
-                  <h4>Темы</h4>
-                  {/*<p class="description">*/}
-                  {/*  Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти*/}
-                  {/*  его на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема*/}
-                  {/*  становится заглавной*/}
-                  {/*</p>*/}
-                  <div class="pretty-form__item">
-                    <Show when={topics()}>
-                      <TopicSelect
-                        topics={topics()}
-                        onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
-                        selectedTopics={form.selectedTopics}
                       />
-                    </Show>
+                      <label for="slug">Slug</label>
-                    {/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
+                    </div>
-                  </div>
 
-                  {/*<h4>Соавторы</h4>*/}
+                    {/*<h4>Лид</h4>*/}
-                  {/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
+                    {/*<div class="pretty-form__item">*/}
-                  {/*<div class="pretty-form__item--with-button">*/}
+                    {/*  <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
-                  {/*  <div class="pretty-form__item">*/}
+                    {/*  <label for="lead">Лид</label>*/}
-                  {/*    <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />*/}
+                    {/*</div>*/}
-                  {/*    <label for="authors">Введите имя или e-mail</label>*/}
-                  {/*  </div>*/}
-                  {/*  <button class="button button--submit">Добавить</button>*/}
-                  {/*</div>*/}
 
-                  {/*<div class="row">*/}
+                    {/*<h4>Выбор сообщества</h4>*/}
-                  {/*  <div class="col-md-6">Михаил Драбкин</div>*/}
+                    {/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
-                  {/*  <div class="col-md-6">*/}
+                    {/*<div class="pretty-form__item">*/}
-                  {/*    <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
+                    {/*  <input*/}
-                  {/*  </div>*/}
+                    {/*    type="text"*/}
-                  {/*</div>*/}
+                    {/*    name="community"*/}
+                    {/*    id="community"*/}
+                    {/*    placeholder="Сообщества"*/}
+                    {/*    class="nolabel"*/}
+                    {/*  />*/}
+                    {/*</div>*/}
 
-                  <h4>Карточка материала на&nbsp;главной</h4>
+                    <h4>Темы</h4>
-                  <p class="description">
+                    {/*<p class="description">*/}
-                    Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
+                    {/*  Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти*/}
-                    выглядеть на&nbsp;главной странице
+                    {/*  его на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема*/}
-                  </p>
+                    {/*  становится заглавной*/}
-                  <div class={styles.articlePreview} />
+                    {/*</p>*/}
+                    <div class="pretty-form__item">
+                      <Show when={topics()}>
+                        <TopicSelect
+                          topics={topics()}
+                          onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
+                          selectedTopics={form.selectedTopics}
+                        />
+                      </Show>
+                      {/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
+                    </div>
 
-                  <div class={styles.saveBlock}>
+                    {/*<h4>Соавторы</h4>*/}
-                    <p>
+                    {/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
-                      Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
+                    {/*<div class="pretty-form__item--with-button">*/}
-                      опубликовать ваш текст
+                    {/*  <div class="pretty-form__item">*/}
+                    {/*    <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />*/}
+                    {/*    <label for="authors">Введите имя или e-mail</label>*/}
+                    {/*  </div>*/}
+                    {/*  <button class="button button--submit">Добавить</button>*/}
+                    {/*</div>*/}
+
+                    {/*<div class="row">*/}
+                    {/*  <div class="col-md-6">Михаил Драбкин</div>*/}
+                    {/*  <div class="col-md-6">*/}
+                    {/*    <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
+                    {/*  </div>*/}
+                    {/*</div>*/}
+
+                    <h4>Карточка материала на&nbsp;главной</h4>
+                    <p class="description">
+                      Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
+                      выглядеть на&nbsp;главной странице
                     </p>
-                    {/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
+                    <div class={styles.articlePreview} />
-                    <button type="submit" class={clsx('button button--submit', styles.button)}>
+
-                      Опубликовать
+                    <div class={styles.saveBlock}>
-                    </button>
+                      <p>
+                        Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
+                        опубликовать ваш текст
+                      </p>
+                      {/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
+                      <a href={getPagePath(router, 'create')}>Назад</a>
+                      <button type="submit" class={clsx('button button--submit', styles.button)}>
+                        Опубликовать
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -170,7 +207,7 @@ export const CreateView = () => {
           </div>
         </form>
       </Suspense>
-    </>
+    </div>
   )
 }