discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Merge remote-tracking branch 'origin/dev' into prepare-inbox

Browse Source
This commit is contained in:
tonyrewin 2022-11-03 08:06:51 +03:00
commit 3af9f5d7e4
57 changed files with 1081 additions and 614 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Author/Card.module.scss
View File

@ -124,7 +124,6 @@
.buttonSubscribe {
align-items: center;
aspect-ratio: 1/1;
background: #f6f6f6;
border-radius: 100%;
display: inline-flex;
float: right;
@ -139,7 +138,6 @@
}
.buttonWrite {
background: #f7f7f7;
color: #000;
display: inline-flex;
transition: background-color 0.3s, color 0.3s;
@ -193,7 +191,8 @@
.buttonSubscribe {
aspect-ratio: auto;
background-color: #000;
border-radius: 2px;
border-color: #000;
border-radius: 0.8rem;
float: none;
padding-bottom: 0.6rem;
padding-top: 0.6rem;

2
src/components/Author/Card.tsx
View File

@ -79,7 +79,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
</Show>
<Show when={!props.compact}>
<button class={clsx(style.buttonWrite, style.button, 'button')}>
<button class={clsx(style.buttonWrite, style.button, 'button button--subscribe-topic')}>
<Icon name="edit" class={style.icon} />
{t('Write')}
</button>

2
src/components/Author/Full.tsx
View File

@ -6,7 +6,7 @@ export const AuthorFull = (props: { author: Author }) => {
return (
<div class="container">
<div class="row">
<div class="user-details">
<div class="col-md-8 offset-md-2 user-details">
<AuthorCard author={props.author} compact={false} isAuthorPage={true} />
</div>
</div>

8
src/components/Discours/Footer.module.scss
View File

@ -54,6 +54,14 @@
@include font-size(1.5rem);
padding-top: 1.6rem;
a {
color: rgba(255, 255, 255, 0.7);
&:hover {
color: #fff;
}
}
}
.footerCopyrightSocial {

4
src/components/Discours/Footer.tsx
View File

@ -26,8 +26,8 @@ export const Footer = () => {
slug: '/about/dogma'
},
{
title: 'Terms of use',
slug: '/about/terms-of-use'
title: 'Principles',
slug: '/about/principles'
},
{
title: 'How to write an article',

9
src/components/Discours/Subscribe.module.scss
View File

@ -14,6 +14,9 @@
font-family: inherit;
@include font-size(2rem);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.2em 0.5em 0.3em 0;
width: 100%;
@ -33,8 +36,8 @@
padding: 0 0.5em;
}
button {
margin-top: 0;
padding-bottom: 0.8rem;
.button {
border-radius: 0;
margin: 0;
}
}

6
src/components/Discours/Subscribe.tsx
View File

@ -1,6 +1,7 @@
import { createSignal, onMount } from 'solid-js'
import styles from './Subscribe.module.scss'
import { t } from '../../utils/intl'
import { clsx } from 'clsx'
export default () => {
let emailElement: HTMLInputElement | undefined
@ -14,7 +15,10 @@ export default () => {
return (
<div class={styles.subscribeForm}>
<input type="email" name="email" ref={emailElement} placeholder={t('Fill email')} value={title()} />
<button class="button--light" onClick={() => emailElement?.value && subscribe()}>
<button
class={clsx(styles.button, 'button--light')}
onClick={() => emailElement?.value && subscribe()}
>
{t('Subscribe')}
</button>
</div>

66
src/components/Editor/components/Editor.module.scss
View File

@ -1,3 +1,61 @@
.editor {
flex: 1;
padding-top: 1em;
a {
color: rgb(0 100 200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0 80 160);
}
label {
display: block;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
-webkit-padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:disabled {
color: #999;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
}
.error {
display: none;
}
@ -5,3 +63,11 @@
.markdown {
white-space: pre-wrap;
}
.tooltip {
background: #fff;
box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
color: #000;
display: flex;
position: absolute;
}

3
src/components/Editor/components/Editor.tsx
View File

@ -2,7 +2,6 @@ import type { EditorView } from 'prosemirror-view'
import type { EditorState } from 'prosemirror-state'
import { useState } from '../store/context'
import { ProseMirror } from './ProseMirror'
import '../styles/Editor.scss'
import styles from './Editor.module.scss'
import { clsx } from 'clsx'
@ -14,7 +13,7 @@ export const Editor = () => {
return (
<ProseMirror
cssClass={clsx('editor', 'col-md-6', 'shift-content', {
cssClass={clsx(styles.editor, 'col-md-6', 'shift-content', {
[styles.error]: store.error,
[styles.markdown]: store.markdown
})}

52
src/components/Editor/components/Error.module.scss Normal file
View File

@ -0,0 +1,52 @@
.error {
width: 100%;
overflow: auto;
padding: 50px;
display: flex;
justify-content: center;
::-webkit-scrollbar {
display: none;
}
button {
height: 50px;
padding: 0 20px;
font-size: 18px;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
outline: none;
text-decoration: none;
background: none;
font-family: inherit;
color: var(--foreground);
border: 1px solid var(--foreground);
&.primary {
color: var(--primary-foreground);
border: 0;
background: var(--primary-background);
}
&:hover {
opacity: 0.8;
}
}
.container {
max-width: 800px;
width: 100%;
height: fit-content;
}
pre {
background: var(--foreground);
border: 1px solid var(--foreground);
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 2px;
padding: 10px;
}
}

14
src/components/Editor/components/Error.tsx
View File

@ -1,6 +1,6 @@
import { Switch, Match } from 'solid-js'
import { useState } from '../store/context'
import '../styles/Button.scss'
import styles from './Error.module.scss'
export default () => {
const [store] = useState()
@ -24,8 +24,8 @@ const InvalidState = (props: { title: string }) => {
const onClick = () => ctrl.clean()
return (
<div class="error">
<div class="container">
<div class={styles.error}>
<div class={styles.container}>
<h1>{props.title}</h1>
<p>
There is an error with the editor state. This is probably due to an old version in which the data
@ -35,7 +35,7 @@ const InvalidState = (props: { title: string }) => {
<pre>
<code>{JSON.stringify(store.error.props)}</code>
</pre>
<button class="primary" onClick={onClick}>
<button class={styles.primary} onClick={onClick}>
Clean
</button>
</div>
@ -53,13 +53,13 @@ const Other = () => {
}
return (
<div class="error">
<div class="container">
<div class={styles.error}>
<div class={styles.container}>
<h1>An error occurred.</h1>
<pre>
<code>{getMessage()}</code>
</pre>
<button class="primary" onClick={onClick}>
<button class={styles.primary} onClick={onClick}>
Close
</button>
</div>

2
src/components/Editor/styles/Layout.scss → src/components/Editor/components/Layout.module.scss
View File

@ -6,7 +6,7 @@
border-color: var(--background);
min-height: 100vh;
&.dark {
.dark & {
background: var(--foreground);
color: var(--background);
border-color: var(--foreground);

9
src/components/Editor/components/Layout.tsx
View File

@ -1,6 +1,7 @@
import type { JSX } from 'solid-js/jsx-runtime'
import type { Config } from '../store/context'
import '../styles/Layout.scss'
import { clsx } from 'clsx'
import styles from './Layout.module.scss'
export type Styled = {
children: JSX.Element
@ -12,7 +13,11 @@ export type Styled = {
export const Layout = (props: Styled) => {
return (
<div onMouseEnter={props.onMouseEnter} class="layout container" data-testid={props['data-testid']}>
<div
onMouseEnter={props.onMouseEnter}
class={clsx(styles.layout, 'container')}
data-testid={props['data-testid']}
>
{props.children}
</div>
)

1
src/components/Editor/components/ProseMirror.tsx
View File

@ -4,6 +4,7 @@ import { EditorState, EditorStateConfig, Transaction } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { Schema } from 'prosemirror-model'
import type { NodeViewFn, ProseMirrorExtension, ProseMirrorState } from '../prosemirror/helpers'
import '../styles/ProseMirror.scss'
interface ProseMirrorProps {
cssClass?: string

222
src/components/Editor/components/Sidebar.module.scss
View File

@ -1,3 +1,221 @@
.withMargin {
margin-bottom: 10px;
.sidebarContainer {
color: rgb(255 255 255 / 50%);
@include font-size(1.6rem);
overflow: hidden;
position: relative;
top: 0;
p {
color: var(--foreground);
}
h4 {
@include font-size(120%);
margin-left: 1rem;
}
button {
height: auto;
min-height: 50px;
padding: 0 1rem;
width: 100%;
}
}
.sidebarOff {
background: #1f1f1f;
height: 100%;
min-height: 100vh;
padding: 40px 20px 20px;
top: 0;
transform: translateX(0);
transition: transform 0.3s;
overflow-y: auto;
scrollbar-width: none;
width: 350px;
.sidebarContainerHidden & {
transform: translateX(100%);
}
::-webkit-scrollbar {
display: none;
}
}
.sidebarOpener {
color: #000;
cursor: pointer;
opacity: 1;
position: absolute;
top: 1em;
transition: opacity 0.3s;
&:hover {
opacity: 0.5;
}
&::after {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1090_23825' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='4' height='4'%3E%3Crect y='14.8237' width='3.17647' height='3.17647' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1090_23825)'%3E%3Cpath d='M16.0941 1.05908H0.847027C0.379194 1.05908 0 1.43828 0 1.90611V18.0003L3.38824 14.612H16.0942C16.562 14.612 16.9412 14.2328 16.9412 13.765V1.90614C16.9412 1.43831 16.562 1.05912 16.0942 1.05912L16.0941 1.05908ZM15.2471 12.9179H1.69412V2.7532H15.2471V12.9179Z' fill='black'/%3E%3C/g%3E%3Crect x='1' y='1' width='16' height='12.8235' stroke='black' stroke-width='2'/%3E%3Crect x='4.23535' y='3.17627' width='9.52941' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='9.5293' width='7.41176' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='6.35303' width='5.29412' height='2.11765' fill='black'/%3E%3C/svg%3E");
content: '';
height: 18px;
left: 100%;
margin-left: 0.3em;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 18px;
}
}
.sidebarCloser {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1517 0.423857L0.42375 13.1518L2.84812 15.5761L15.576 2.84822L13.1517 0.423857Z M15.576 13.1518L2.84812 0.423855L0.423751 2.84822L13.1517 15.5761L15.576 13.1518Z' fill='white'/%3E%3C/svg%3E%0A");
cursor: pointer;
height: 16px;
opacity: 1;
position: absolute;
transition: opacity 0.3s;
top: 20px;
width: 16px;
&:hover {
opacity: 0.5;
}
}
.sidebarLabel {
color: var(--foreground);
> i {
text-transform: none;
}
}
.sidebarContainer button,
.sidebarContainer a,
.sidebarItem {
margin: 0;
outline: none;
display: flex;
align-items: center;
line-height: 24px;
text-align: left;
}
.sidebarContainer a,
.sidebarItem {
font-size: 18px;
padding: 2px 0;
width: 100%;
}
.sidebarLink {
background: none;
border: 0;
color: inherit;
cursor: pointer;
font-size: inherit;
justify-content: flex-start;
&:hover {
color: #fff !important;
}
&:active {
> span i {
position: relative;
box-shadow: none;
top: 1px;
}
}
&[disabled] {
color: var(--foreground);
cursor: not-allowed;
}
&.draft {
color: rgb(255 255 255 / 50%);
line-height: 1.4;
margin: 0 0 1em 1.5em;
width: calc(100% - 2rem);
&:hover {
background: none;
}
}
> span {
justify-self: flex-end;
margin-left: auto;
> i {
border: 1px solid;
border-bottom-width: 2px;
border-radius: 0.2rem;
display: inline-block;
color: inherit;
font-size: 13px;
line-height: 1.4;
margin: 0 0.5em 0 0;
padding: 1px 4px;
&:last-child {
text-transform: uppercase;
}
}
}
}
.themeSwitcher {
border-bottom: 1px solid rgb(255 255 255 / 30%);
border-top: 1px solid rgb(255 255 255 / 30%);
display: flex;
justify-content: space-between;
margin: 1rem;
padding: 1em 0;
input[type='checkbox'] {
opacity: 0;
position: absolute;
+ label {
background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.20869 7.73227C5.22953 7.36499 4.38795 6.70402 3.79906 5.83976C3.2103 4.97565 2.90318 3.95064 2.91979 2.90512C2.93639 1.8597 3.27597 0.844915 3.8919 0C2.82862 0.254038 1.87585 0.844877 1.17594 1.68438C0.475894 2.52388 0.0660276 3.5671 0.00731938 4.6585C-0.0513888 5.74989 0.244296 6.83095 0.850296 7.74073C1.45631 8.65037 2.34006 9.33992 3.36994 9.70637C4.39987 10.073 5.52063 10.0969 6.56523 9.77466C7.60985 9.45247 8.52223 8.80134 9.16667 7.91837C8.1842 8.15404 7.15363 8.08912 6.20869 7.73205V7.73227Z' fill='white'/%3E%3C/svg%3E%0A")
no-repeat 30px 9px,
url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.41196 0H5.58811V2.43024H6.41196V0ZM5.99988 8.96576C4.36601 8.96576 3.03419 7.63397 3.03419 6.00007C3.04792 4.3662 4.36598 3.04818 5.99988 3.03439C7.63375 3.03439 8.96557 4.3662 8.96557 6.00007C8.96557 7.63395 7.63375 8.96576 5.99988 8.96576ZM5.58811 9.56977H6.41196V12H5.58811V9.56977ZM12.0002 5.58811H9.56996V6.41196H12.0002V5.58811ZM0 5.58811H2.43024V6.41196H0V5.58811ZM8.81339 3.76727L10.5318 2.04891L9.94925 1.46641L8.23089 3.18477L8.81339 3.76727ZM3.7745 8.8129L2.05614 10.5313L1.47364 9.94877L3.192 8.2304L3.7745 8.8129ZM9.95043 10.5269L10.5329 9.94437L8.81456 8.22601L8.23207 8.80851L9.95043 10.5269ZM3.76864 3.18731L3.18614 3.76981L1.46778 2.05145L2.05028 1.46895L3.76864 3.18731Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A")
#000 no-repeat 8px 8px;
border-radius: 14px;
cursor: pointer;
display: block;
height: 28px;
line-height: 10em;
overflow: hidden;
position: relative;
transition: background-color 0.3s;
width: 46px;
&::before {
background-color: #fff;
border-radius: 100%;
content: '';
height: 16px;
left: 6px;
position: absolute;
top: 6px;
transition: left 0.3s, color 0.3s;
width: 16px;
}
}
&:checked + label {
background-color: #fff;
&::before {
background-color: #1f1f1f;
left: 24px;
}
}
}
}

66
src/components/Editor/components/Sidebar.tsx
View File

@ -1,24 +1,25 @@
import { For, Show, createEffect, createSignal, onCleanup } from 'solid-js'
import { For, Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
import { unwrap } from 'solid-js/store'
import { undo, redo } from 'prosemirror-history'
import { Draft, useState } from '../store/context'
import { mod } from '../env'
import * as remote from '../remote'
import { isEmpty } from '../prosemirror/helpers'
import type { Styled } from './Layout'
import '../styles/Sidebar.scss'
import { clsx } from 'clsx'
import styles from './Sidebar.module.scss'
import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
import { hideModal } from '../../../stores/ui'
const Off = (props) => <div class="sidebar-off">{props.children}</div>
const Off = (props) => <div class={styles.sidebarOff}>{props.children}</div>
const Label = (props: Styled) => <h3 class="sidebar-label">{props.children}</h3>
const Label = (props: Styled) => <h3 class={styles.sidebarLabel}>{props.children}</h3>
const Link = (
props: Styled & { withMargin?: boolean; disabled?: boolean; title?: string; className?: string }
) => (
<button
class={clsx('sidebar-link', props.className, {
class={clsx(styles.sidebarLink, props.className, {
[styles.withMargin]: props.withMargin
})}
onClick={props.onClick}
@ -33,10 +34,12 @@ const Link = (
export const Sidebar = () => {
const [store, ctrl] = useState()
const [lastAction, setLastAction] = createSignal<string | undefined>()
const toggleTheme = () => {
document.body.classList.toggle('dark')
ctrl.updateConfig({ theme: document.body.className })
}
const collabText = () => {
if (store.collab?.started) {
return 'Stop'
@ -70,14 +73,12 @@ export const Sidebar = () => {
const onCopyAllAsMd = () =>
remote.copyAllAsMarkdown(editorView().state).then(() => setLastAction('copy-md'))
const onDiscard = () => ctrl.discard()
const [isHidden, setIsHidden] = createSignal<boolean | false>()
const [isHidden, setIsHidden] = createSignal(true)
const toggleSidebar = () => {
setIsHidden(!isHidden())
setIsHidden((oldIsHidden) => !oldIsHidden)
}
toggleSidebar()
const onCollab = () => {
const state = unwrap(store)
store.collab?.started ? ctrl.stopCollab(state) : ctrl.startCollab(state)
@ -117,7 +118,7 @@ export const Sidebar = () => {
return (
// eslint-disable-next-line solid/no-react-specific-props
<Link className="draft" onClick={() => onOpenDraft(p.draft)} data-testid="open">
<Link className={styles.draft} onClick={() => onOpenDraft(p.draft)} data-testid="open">
{text()} {p.draft.path && '📎'}
</Link>
)
@ -131,7 +132,7 @@ export const Sidebar = () => {
createEffect(() => {
setLastAction()
}, store.lastModified)
})
createEffect(() => {
if (!lastAction()) return
@ -141,15 +142,37 @@ export const Sidebar = () => {
onCleanup(() => clearTimeout(id))
})
const [mod, setMod] = createSignal<'Ctrl' | 'Cmd'>('Ctrl')
onMount(() => {
setMod(navigator.platform.includes('Mac') ? 'Cmd' : 'Ctrl')
})
const containerRef: { current: HTMLElement } = {
current: null
}
useEscKeyDownHandler(() => setIsHidden(true))
useOutsideClickHandler({
containerRef,
predicate: () => !isHidden(),
handler: () => setIsHidden(true)
})
return (
<div class={'sidebar-container' + (isHidden() ? ' sidebar-container--hidden' : '')}>
<span class="sidebar-opener" onClick={toggleSidebar}>
<div
class={clsx(styles.sidebarContainer, {
[styles.sidebarContainerHidden]: isHidden()
})}
ref={(el) => (containerRef.current = el)}
>
<span class={styles.sidebarOpener} onClick={toggleSidebar}>
Советы и&nbsp;предложения
</span>
<Off onClick={() => editorView().focus()}>
<div class="sidebar-closer" onClick={toggleSidebar} />
<Show when={true}>
<div class={styles.sidebarCloser} onClick={toggleSidebar} />
<div>
{store.path && (
<Label>
@ -160,7 +183,7 @@ export const Sidebar = () => {
<Link>Настройки публикации</Link>
<Link>История правок</Link>
<div class="theme-switcher">
<div class={styles.themeSwitcher}>
Ночная тема
<input type="checkbox" name="theme" id="theme" onClick={toggleTheme} />
<label for="theme">Ночная тема</label>
@ -170,16 +193,16 @@ export const Sidebar = () => {
disabled={!store.path && store.drafts.length === 0 && isEmpty(store.text)}
data-testid="discard"
>
{discardText()} <Keys keys={[mod, 'w']} />
{discardText()} <Keys keys={[mod(), 'w']} />
</Link>
<Link onClick={onUndo}>
Undo <Keys keys={[mod, 'z']} />
Undo <Keys keys={[mod(), 'z']} />
</Link>
<Link onClick={onRedo}>
Redo <Keys keys={[mod, 'Shift', 'z']} />
Redo <Keys keys={[mod(), 'Shift', 'z']} />
</Link>
<Link onClick={onToggleMarkdown} data-testid="markdown">
Markdown mode {store.markdown && '✅'} <Keys keys={[mod, 'm']} />
Markdown mode {store.markdown && '✅'} <Keys keys={[mod(), 'm']} />
</Link>
<Link onClick={onCopyAllAsMd}>Copy all as MD {lastAction() === 'copy-md' && '📋'}</Link>
<Show when={store.drafts.length > 0}>
@ -197,7 +220,6 @@ export const Sidebar = () => {
</span>
</Show>
</div>
</Show>
</Off>
</div>
)

5
src/components/Editor/db.ts
View File

@ -1,5 +1,6 @@
const dbPromise = async () => {
const { openDB } = await import('idb')
import { openDB } from 'idb'
const dbPromise = () => {
return openDB('discours.io', 2, {
upgrade(db) {
db.createObjectStore('keyval')

5
src/components/Editor/env.ts
View File

@ -1,3 +1,2 @@
export const isDark = () => (window as any).matchMedia('(prefers-color-scheme: dark)').matches
export const mod = 'Ctrl'
export const alt = 'Alt'
export const isDark = () =>
typeof window !== undefined && window.matchMedia('(prefers-color-scheme: dark)').matches

4
src/components/Editor/prosemirror/extension/base.ts
View File

@ -9,6 +9,8 @@ import { keymap } from 'prosemirror-keymap'
import type { ProseMirrorExtension } from '../helpers'
import type OrderedMap from 'orderedmap'
import layoutStyles from '../../components/Layout.module.scss'
const plainSchema = new Schema({
nodes: {
doc: {
@ -53,6 +55,6 @@ export default (plain = false): ProseMirrorExtension => ({
keymap(buildKeymap(schema)),
keymap(baseKeymap),
history(),
dropCursor({ class: 'drop-cursor' })
dropCursor({ class: layoutStyles.dropCursor })
]
})

3
src/components/Editor/prosemirror/extension/selection.ts
View File

@ -2,13 +2,14 @@ import { renderGrouped } from 'prosemirror-menu'
import { Plugin } from 'prosemirror-state'
import type { ProseMirrorExtension } from '../helpers'
import { buildMenuItems } from './menu'
import editorStyles from '../../components/Editor.module.scss'
export class SelectionTooltip {
tooltip: any
constructor(view: any, schema: any) {
this.tooltip = document.createElement('div')
this.tooltip.className = 'tooltip'
this.tooltip.className = editorStyles.tooltip
view.dom.parentNode.appendChild(this.tooltip)
const { dom } = renderGrouped(view, buildMenuItems(schema).fullMenu as any)
this.tooltip.appendChild(dom)

15
src/components/Editor/store/actions.ts
View File

@ -7,7 +7,6 @@ import { undo as yUndo, redo as yRedo } from 'y-prosemirror'
import debounce from 'lodash/debounce'
import { createSchema, createExtensions, createEmptyText } from '../prosemirror/setup'
import { State, Draft, Config, ServiceError, newState, ExtensionsProps, EditorActions } from './context'
import { mod } from '../env'
import { serialize, createMarkdownParser } from '../markdown'
import db from '../db'
import { isEmpty, isInitialized } from '../prosemirror/helpers'
@ -102,13 +101,13 @@ export const createCtrl = (initial: State): [Store<State>, EditorActions] => {
return true
}
const keymap = {
[`${mod}-w`]: discard,
[`${mod}-z`]: onUndo,
[`Shift-${mod}-z`]: onRedo,
[`${mod}-y`]: onRedo,
[`${mod}-m`]: toggleMarkdown
} as ExtensionsProps['keymap']
const keymap: ExtensionsProps['keymap'] = {
[`Mod-w`]: discard,
[`Mod-z`]: onUndo,
[`Shift-Mod-z`]: onRedo,
[`Mod-y`]: onRedo,
[`Mod-m`]: toggleMarkdown
}
const createTextFromDraft = async (draft: Draft) => {
const state = unwrap(store)

1
src/components/Editor/store/context.ts
View File

@ -63,7 +63,6 @@ export interface Collab {
export type LoadingType = 'loading' | 'initialized'
export interface State {
isMac?: boolean
text?: ProseMirrorState
editorView?: EditorView
extensions?: ProseMirrorExtension[]

0
src/components/Editor/styles/ArticlesList.scss → src/components/Editor/styles/ArticlesList.scss.bak
View File

25
src/components/Editor/styles/Button.scss
View File

@ -1,25 +0,0 @@
button {
height: 50px;
padding: 0 20px;
font-size: 18px;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
outline: none;
text-decoration: none;
background: none;
font-family: inherit;
color: var(--foreground);
border: 1px solid var(--foreground);
&:hover {
opacity: 0.8;
}
}
button.primary {
color: var(--primary-foreground);
border: 0;
background: var(--primary-background);
}

26
src/components/Editor/styles/Error.scss
View File

@ -1,26 +0,0 @@
.error {
width: 100%;
overflow: y-auto;
padding: 50px;
display: flex;
justify-content: center;
::-webkit-scrollbar {
display: none;
}
}
.error .container {
max-width: 800px;
width: 100%;
height: fit-content;
}
.error pre {
background: var(--foreground);
border: 1px solid var(--foreground);
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 2px;
padding: 10px;
}

3
src/components/Editor/styles/Index.scss
View File

@ -1,3 +0,0 @@
.index {
width: 350px;
}

66
src/components/Editor/styles/Editor.scss → src/components/Editor/styles/ProseMirror.scss
View File

@ -1,61 +1,3 @@
.editor {
flex: 1;
padding-top: 1em;
a {
color: rgb(0 100 200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0 80 160);
}
}
label {
display: block;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
-webkit-padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:disabled {
color: #999;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
.ProseMirror {
color: var(--foreground);
background-color: var(--background);
@ -385,11 +327,3 @@ li.ProseMirror-selectednode::after {
background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1512 0.423856L0.423263 13.1518L2.84763 15.5761L15.5756 2.84822L13.1512 0.423856Z M15.5755 13.1518L2.84763 0.423855L0.423263 2.84822L13.1512 15.5761L15.5755 13.1518Z' fill='%23393840'/%3E%3C/svg%3E%0A")
center no-repeat;
}
.tooltip {
background: #fff;
box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
color: #000;
display: flex;
position: absolute;
}

226
src/components/Editor/styles/Sidebar.scss
View File

@ -1,226 +0,0 @@
.sidebar-container {
color: rgb(255 255 255 / 50%);
@include font-size(1.6rem);
overflow: hidden;
position: relative;
top: 0;
p {
color: var(--foreground);
}
h4 {
@include font-size(120%);
margin-left: 1rem;
}
button {
height: auto;
min-height: 50px;
padding: 0 1rem;
width: 100%;
}
}
.sidebar-off {
background: #1f1f1f;
height: 100%;
min-height: 100vh;
padding: 40px 20px 20px;
top: 0;
transform: translateX(0);
transition: transform 0.3s;
overflow-y: auto;
scrollbar-width: none;
width: 350px;
.sidebar-container--hidden & {
transform: translateX(100%);
}
::-webkit-scrollbar {
display: none;
}
}
.sidebar-opener {
color: #000;
cursor: pointer;
opacity: 1;
position: absolute;
top: 1em;
transition: opacity 0.3s;
&:hover {
opacity: 0.5;
}
&::after {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1090_23825' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='4' height='4'%3E%3Crect y='14.8237' width='3.17647' height='3.17647' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1090_23825)'%3E%3Cpath d='M16.0941 1.05908H0.847027C0.379194 1.05908 0 1.43828 0 1.90611V18.0003L3.38824 14.612H16.0942C16.562 14.612 16.9412 14.2328 16.9412 13.765V1.90614C16.9412 1.43831 16.562 1.05912 16.0942 1.05912L16.0941 1.05908ZM15.2471 12.9179H1.69412V2.7532H15.2471V12.9179Z' fill='black'/%3E%3C/g%3E%3Crect x='1' y='1' width='16' height='12.8235' stroke='black' stroke-width='2'/%3E%3Crect x='4.23535' y='3.17627' width='9.52941' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='9.5293' width='7.41176' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='6.35303' width='5.29412' height='2.11765' fill='black'/%3E%3C/svg%3E");
content: '';
height: 18px;
left: 100%;
margin-left: 0.3em;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 18px;
}
}
.sidebar-closer {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1517 0.423857L0.42375 13.1518L2.84812 15.5761L15.576 2.84822L13.1517 0.423857Z M15.576 13.1518L2.84812 0.423855L0.423751 2.84822L13.1517 15.5761L15.576 13.1518Z' fill='white'/%3E%3C/svg%3E%0A");
cursor: pointer;
height: 16px;
opacity: 1;
position: absolute;
transition: opacity 0.3s;
top: 20px;
width: 16px;
&:hover {
opacity: 0.5;
}
}
.sidebar-label {
color: var(--foreground);
> i {
text-transform: none;
}
}
.sidebar-sub {
margin: 10px 0;
margin-bottom: 30px;
}
.sidebar-container button,
.sidebar-container a,
.sidebar-item {
margin: 0;
outline: none;
display: flex;
align-items: center;
line-height: 24px;
text-align: left;
}
.sidebar-container a,
.sidebar-item {
font-size: 18px;
padding: 2px 0;
width: 100%;
}
.sidebar-link {
background: none;
border: 0;
color: inherit;
cursor: pointer;
font-size: inherit;
justify-content: flex-start;
&:hover {
color: #fff !important;
}
&:active {
> span i {
position: relative;
box-shadow: none;
top: 1px;
}
}
&[disabled] {
color: var(--foreground);
cursor: not-allowed;
}
&.draft {
color: rgb(255 255 255 / 50%);
line-height: 1.4;
margin: 0 0 1em 1.5em;
width: calc(100% - 2rem);
&:hover {
background: none;
}
}
> span {
justify-self: flex-end;
margin-left: auto;
> i {
border: 1px solid;
border-bottom-width: 2px;
border-radius: 0.2rem;
display: inline-block;
color: inherit;
font-size: 13px;
line-height: 1.4;
margin: 0 0.5em 0 0;
padding: 1px 4px;
&:last-child {
text-transform: uppercase;
}
}
}
}
.theme-switcher {
border-bottom: 1px solid rgb(255 255 255 / 30%);
border-top: 1px solid rgb(255 255 255 / 30%);
display: flex;
justify-content: space-between;
margin: 1rem;
padding: 1em 0;
input[type='checkbox'] {
opacity: 0;
position: absolute;
+ label {
background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.20869 7.73227C5.22953 7.36499 4.38795 6.70402 3.79906 5.83976C3.2103 4.97565 2.90318 3.95064 2.91979 2.90512C2.93639 1.8597 3.27597 0.844915 3.8919 0C2.82862 0.254038 1.87585 0.844877 1.17594 1.68438C0.475894 2.52388 0.0660276 3.5671 0.00731938 4.6585C-0.0513888 5.74989 0.244296 6.83095 0.850296 7.74073C1.45631 8.65037 2.34006 9.33992 3.36994 9.70637C4.39987 10.073 5.52063 10.0969 6.56523 9.77466C7.60985 9.45247 8.52223 8.80134 9.16667 7.91837C8.1842 8.15404 7.15363 8.08912 6.20869 7.73205V7.73227Z' fill='white'/%3E%3C/svg%3E%0A")
no-repeat 30px 9px,
url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.41196 0H5.58811V2.43024H6.41196V0ZM5.99988 8.96576C4.36601 8.96576 3.03419 7.63397 3.03419 6.00007C3.04792 4.3662 4.36598 3.04818 5.99988 3.03439C7.63375 3.03439 8.96557 4.3662 8.96557 6.00007C8.96557 7.63395 7.63375 8.96576 5.99988 8.96576ZM5.58811 9.56977H6.41196V12H5.58811V9.56977ZM12.0002 5.58811H9.56996V6.41196H12.0002V5.58811ZM0 5.58811H2.43024V6.41196H0V5.58811ZM8.81339 3.76727L10.5318 2.04891L9.94925 1.46641L8.23089 3.18477L8.81339 3.76727ZM3.7745 8.8129L2.05614 10.5313L1.47364 9.94877L3.192 8.2304L3.7745 8.8129ZM9.95043 10.5269L10.5329 9.94437L8.81456 8.22601L8.23207 8.80851L9.95043 10.5269ZM3.76864 3.18731L3.18614 3.76981L1.46778 2.05145L2.05028 1.46895L3.76864 3.18731Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A")
#000 no-repeat 8px 8px;
border-radius: 14px;
cursor: pointer;
display: block;
height: 28px;
line-height: 10em;
overflow: hidden;
position: relative;
transition: background-color 0.3s;
width: 46px;
&::before {
background-color: #fff;
border-radius: 100%;
content: '';
height: 16px;
left: 6px;
position: absolute;
top: 6px;
transition: left 0.3s, color 0.3s;
width: 16px;
}
}
&:checked + label {
background-color: #fff;
&::before {
background-color: #1f1f1f;
left: 24px;
}
}
}
}

2
src/components/Nav/Header.tsx
View File

@ -134,7 +134,7 @@ export const Header = (props: Props) => {
<div class={styles.usernav}>
<div class={clsx(styles.userControl, styles.userControl, 'col')}>
<div class={clsx(styles.userControlItem, styles.userControlItemWritePost)}>
<a href="/create">
<a href="/create" onClick={handleClientRouteLinkClick}>
<span class={styles.textLabel}>{t('Create post')}</span>
<Icon name="pencil" class={styles.icon} />
</a>

13
src/components/Nav/Modal.tsx
View File

@ -3,6 +3,7 @@ import type { JSX } from 'solid-js'
import { getLogger } from '../../utils/logger'
import './Modal.scss'
import { hideModal, useModalStore } from '../../stores/ui'
import { useEscKeyDownHandler } from '../../utils/useEscKeyDownHandler'
const log = getLogger('modal')
@ -11,10 +12,6 @@ interface ModalProps {
children: JSX.Element
}
const keydownHandler = (e: KeyboardEvent) => {
if (e.key === 'Escape') hideModal()
}
export const Modal = (props: ModalProps) => {
const { modal } = useModalStore()
@ -22,13 +19,7 @@ export const Modal = (props: ModalProps) => {
if (event.target.classList.contains('modalwrap')) hideModal()
}
onMount(() => {
window.addEventListener('keydown', keydownHandler)
onCleanup(() => {
window.removeEventListener('keydown', keydownHandler)
})
})
useEscKeyDownHandler(() => hideModal())
const [visible, setVisible] = createSignal(false)

5
src/components/Nav/Popup.module.scss
View File

@ -36,6 +36,11 @@
}
}
.topBorderItem {
border-top: 2px solid;
padding-top: 1em;
}
a {
border: none;
white-space: nowrap;

24
src/components/Nav/Popup.tsx
View File

@ -1,6 +1,7 @@
import { createEffect, createSignal, JSX, onCleanup, onMount, Show } from 'solid-js'
import styles from './Popup.module.scss'
import { clsx } from 'clsx'
import { useOutsideClickHandler } from '../../utils/useOutsideClickHandler'
type HorizontalAnchor = 'center' | 'right'
@ -22,29 +23,18 @@ export const Popup = (props: PopupProps) => {
}
})
let container: HTMLDivElement | undefined
const containerRef: { current: HTMLElement } = { current: null }
const handleClickOutside = (event: MouseEvent & { target: Element }) => {
if (!isVisible()) {
return
}
if (event.target === container || container?.contains(event.target)) {
return
}
setIsVisible(false)
}
onMount(() => {
document.addEventListener('click', handleClickOutside, { capture: true })
onCleanup(() => document.removeEventListener('click', handleClickOutside, { capture: true }))
useOutsideClickHandler({
containerRef,
predicate: () => isVisible(),
handler: () => setIsVisible(false)
})
const toggle = () => setIsVisible((oldVisible) => !oldVisible)
return (
<span class={clsx(styles.container, props.containerCssClass)} ref={container}>
<span class={clsx(styles.container, props.containerCssClass)} ref={(el) => (containerRef.current = el)}>
<span onClick={toggle}>{props.trigger}</span>
<Show when={isVisible()}>
<div

3
src/components/Nav/ProfilePopup.tsx
View File

@ -1,5 +1,6 @@
import { Popup, PopupProps } from './Popup'
import { signOut, useAuthStore } from '../../stores/auth'
import styles from './Popup.module.scss'
type ProfilePopupProps = Omit<PopupProps, 'children'>
@ -27,7 +28,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
<li>
<a href="#">Настройки</a>
</li>
<li>
<li class={styles.topBorderItem}>
<a
href="#"
onClick={(event) => {

45
src/components/Pages/ConnectPage.tsx Normal file
View File

@ -0,0 +1,45 @@
import { MainLayout } from '../Layouts/MainLayout'
export const ConnectPage = () => {
return (
<MainLayout>
<article class="container container--static-page">
<div class="row">
<h1 class="col-md-8 offset-md-2">
<span class="wrapped">Предложить идею</span>
</h1>
<div class="col-md-8 col-lg-6 offset-md-3">
<p>
Хотите что-то предложить, обсудить или посоветовать? Поделиться темой или идеей? Напишите нам
скорее! Если укажете свою почту, мы&nbsp;обязательно ответим.
</p>
<form action=".">
<div class="pretty-form__item">
<select id="subject">
<option value="">Сотрудничество</option>
<option value="">Посоветовать тему</option>
<option value="">Сообщить об ошибке</option>
<option value="">Предложить проект</option>
<option value="">Волонтерство</option>
<option value="">Другое</option>
</select>
</div>
<div class="pretty-form__item">
<input type="text" id="contact-email" placeholder="Email для обратной связи" />
<label for="contact-email">Email для обратной связи</label>
</div>
<div class="pretty-form__item">
<textarea id="message" placeholder="Текст сообщения" />
<label for="message">Текст сообщения</label>
</div>
<button class="button">Отправить письмо</button>
</form>
</div>
</div>
</article>
</MainLayout>
)
}
export default ConnectPage

10
src/components/Pages/CreatePage.tsx
View File

@ -1,11 +1,15 @@
import { newState } from '../Editor/store/context'
import { lazy, Suspense } from 'solid-js'
import { MainLayout } from '../Layouts/MainLayout'
import { CreateView } from '../Views/Create'
import { Loading } from '../Loading'
const CreateView = lazy(() => import('../Views/Create'))
export const CreatePage = () => {
return (
<MainLayout>
<CreateView state={newState()} />
<Suspense fallback={<Loading />}>
<CreateView />
</Suspense>
</MainLayout>
)
}

124
src/components/Pages/about/DiscussionRulesPage.tsx Normal file
View File

@ -0,0 +1,124 @@
import { MainLayout } from '../../Layouts/MainLayout'
import { t } from '../../../utils/intl'
export const DiscussionRulesPage = () => {
const title = t('Discussion rules')
return (
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 offset-md-2">
<h1>
<span class="wrapped" innerHTML={title} />
</h1>
<div class="col-lg-10 offset-md-1">
<p>
Открытая редакция существует благодаря дружному сообществу авторов
и&nbsp;читателей&nbsp;&mdash; вдумчивых и&nbsp;сознательных людей, приверженных ценностям
гуманизма, демократии и&nbsp;прав человека. Мы&nbsp;очень ценим атмосферу осмысленного
общения, которая здесь сложилась. Чтобы сохранить ее&nbsp;такой&nbsp;же уютной
и&nbsp;творческой, мы&nbsp;составили правила общения в&nbsp;сообществе, руководствуясь
которыми каждый мог&nbsp;бы соучаствовать в&nbsp;плодотворных дискуссиях, не&nbsp;задевая
других. Ключевой принцип этих правил предельно прост&nbsp;&mdash; уважайте ближних,
постарайтесь не&nbsp;нарушать законы Российской Федерации без крайней
на&nbsp;то&nbsp;необходимости и&nbsp;помните, что в&nbsp;дискуссиях чутких
и&nbsp;здравомыслящих людей рождается истина.
</p>
<h3>За&nbsp;что можно получить дырку в&nbsp;карме и&nbsp;выиграть бан в&nbsp;сообществе</h3>
<ol>
<li>
<p>
Оскорбления, личные нападки, травля и&nbsp;угрозы. В&nbsp;любом виде. Конкретного
человека или социальной группы&nbsp;&mdash; не&nbsp;суть. Агрессия, переход
на&nbsp;личности и&nbsp;токсичность едва&nbsp;ли способствуют плодотворному общению.
</p>
</li>
<li>
<p>
Шовинизм, расизм, сексизм, гомофобия, пропаганда ненависти, педофилии, суицида,
распространение детской порнографии и&nbsp;другого человеконенавистнического контента.
</p>
</li>
<li>
<p>
Спам, реклама, фейкньюз, ссылки на&nbsp;пропагандистские СМИ, вбросы дезинформации,
специально уводящий от&nbsp;темы флуд, провокации, разжигание конфликтов, намеренный
срыв дискуссий.
</p>
</li>
<li>
<p>
Неаргументированная критика и&nbsp;комментарии вроде &laquo;отстой&raquo;, &laquo;зачем
я&nbsp;это увидел/а&raquo;, &laquo;не&nbsp;читал, но&nbsp;осуждаю&raquo;,
&laquo;либераху порвало&raquo;, &laquo;лол&raquo;, &laquo;скатились&raquo;,
&laquo;первый нах&raquo; и&nbsp;тому подобные. Односложные реплики не&nbsp;подразумевают
возможность обогащающего диалога, не&nbsp;продуктивны и&nbsp;никак не&nbsp;помогают
авторам делать материалы лучше, а&nbsp;читателям&nbsp;&mdash; разобраться.
</p>
</li>
</ol>
<h3>За&nbsp;что можно получить лучи добра и&nbsp;благодарности в&nbsp;сообществе</h3>
<ol>
<li>
<p>
<strong>Вежливость и&nbsp;конструктивность.</strong> Мы&nbsp;выступаем
за&nbsp;конструктивный диалог, аргументированные комментарии и&nbsp;доброжелательное
отношение друг к&nbsp;другу. Задавайте содержательные вопросы, пишите развернутые
комментарии, подкрепляйте их&nbsp;аргументами, чтобы диалог был полезен всем участникам,
помогая глубже понять тему и&nbsp;разобраться в&nbsp;вопросе. И, пожалуйста, уважайте
собеседника, даже если он&nbsp;вам лично не&nbsp;импонирует: только так получаются
продуктивные дискуссии.
</p>
</li>
<li>
<p>
<strong>Обмен знаниями и&nbsp;историями.</strong> Осмысленные высказывания по&nbsp;теме
поста, оригинальные рассуждения, рассказы о&nbsp;личном опыте и&nbsp;проектах, обмен
профессиональной экспертизой, наблюдения и&nbsp;реальные истории
из&nbsp;жизни&nbsp;&mdash; чем больше мы&nbsp;делимся друг с&nbsp;другом знаниями, тем
интереснее и&nbsp;плодотворнее становится наше общение. Помните, что каждый вдумчивый
ответ повышает качество дискуссий в&nbsp;сообществе и&nbsp;делает чтение самиздата ещё
интереснее.
</p>
</li>
<li>
<p>
<strong>Чувство юмора и&nbsp;добродушие.</strong> Остроумие и&nbsp;дружелюбие
не&nbsp;только направляют дискуссии в&nbsp;продуктивное русло, но&nbsp;и&nbsp;улучшают
настроение. Не&nbsp;вредите негативом, которого в&nbsp;интернете и&nbsp;без нас хватает,
и&nbsp;не&nbsp;травите на&nbsp;корню классные инициативы&nbsp;&mdash; всё великое
начинается с&nbsp;малого. Мы&nbsp;за&nbsp;поддерживающую и&nbsp;вдохновляющую атмосферу
в&nbsp;сообществе. Надеемся, вы&nbsp;тоже.
</p>
</li>
<li>
<p>
<strong>Благодарность и&nbsp;поддержка.</strong> Если публикация вам зашла,
не&nbsp;стесняйтесь ставить лайки, делиться понравившимися материалами, благодарить
авторов, читателей, художников и&nbsp;редакторов в&nbsp;комментариях. Цените
и&nbsp;поддерживайте классные проекты, сильные тексты, новое искусство, осмысленные
комментарии и&nbsp;вклад других в&nbsp;самиздат&nbsp;&mdash; сотрудничество делает нас
сильнее и&nbsp;усиливает звучание идей и&nbsp;смыслов, которые помогают лучше понимать
мир.
</p>
</li>
</ol>
</div>
</div>
</div>
</article>
</MainLayout>
)
}
// for lazy loading
export default DiscussionRulesPage

2
src/components/Pages/about/DogmaPage.tsx
View File

@ -5,7 +5,7 @@ import { MainLayout } from '../../Layouts/MainLayout'
export const DogmaPage = () => {
return (
<MainLayout>
<article class="container">
<article class="container container--static-page">
<div class="row">
<h4 class="col-md-8 offset-md-2">Редакционные принципы</h4>
<div class="col-md-8 col-lg-6 offset-md-3">

2
src/components/Pages/about/GuidePage.tsx
View File

@ -14,7 +14,7 @@ export const GuidePage = () => {
{/*<Meta property="og:image:width" content="1200" />*/}
{/*<Meta property="og:image:height" content="630" />*/}
<article class="container">
<article class="container container--static-page">
<div class="row">
<div class="col-md-2">
<nav class="content-index">

2
src/components/Pages/about/HelpPage.tsx
View File

@ -11,7 +11,7 @@ export const HelpPage = () => {
{/*<Modal name="thank">Благодарим!</Modal>*/}
<article class="container discours-help">
<article class="container container--static-page discours-help">
<div class="row">
<div class="col-md-2">
<nav class="content-index">

2
src/components/Pages/about/ManifestPage.tsx
View File

@ -15,7 +15,7 @@ export const ManifestPage = () => {
<Modal name="subscribe">
<Subscribe />
</Modal>
<article class="container">
<article class="container container--static-page">
<div class="row">
<div class="col-md-2">
<nav class="content-index">

2
src/components/Pages/about/PartnersPage.tsx
View File

@ -6,7 +6,7 @@ import { t } from '../../../utils/intl'
export const PartnersPage = () => {
return (
<MainLayout>
<article class="container">
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 offset-md-2">{t('Partners')}</div>
<div class="col-md-8 col-lg-6 offset-md-3" />

185
src/components/Pages/about/PrinciplesPage.tsx Normal file
View File

@ -0,0 +1,185 @@
import { MainLayout } from '../../Layouts/MainLayout'
import { t } from '../../../utils/intl'
export const PrinciplesPage = () => {
const title = t('Principles')
return (
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 offset-md-2">
<h1>
<span class="wrapped">{title}</span>
</h1>
<div class="col-lg-10 offset-md-1">
<ol>
<li>
<p>
<strong>Горизонтальность</strong>. Мы&nbsp;все разные, и&nbsp;это классно. Вертикалей
в&nbsp;мире достаточно, мы&nbsp;&mdash; горизонтальное сообщество и&nbsp;ценим наши
различия, потому что знаем&nbsp;&mdash; в&nbsp;них наша сила. Благодаря разнообразию
сотен голосов, усиливающих друг друга, в&nbsp;сообществе складывается неповторимая
синергия, которая помогает вместе достигать большего.
</p>
</li>
<li>
<p>
<strong>Многоголосие</strong>. Мы&nbsp;ценим свободу слова и&nbsp;аргументированные
мнения. Предоставляя трибуну каждому, кому есть что сказать, самиздат отражает полифонию
позиций, знаний и&nbsp;опыта, которые открывают более полную картину реальности.
</p>
</li>
<li>
<p>
<strong>Взаимопомощь</strong>. Мы&nbsp;помогаем друг другу, потому что хотим, чтобы
в&nbsp;мире было еще больше хорошего. Обсуждая что-то, мы&nbsp;всегда интересуемся, чем
можем помочь. В&nbsp;самиздате можно найти специалистов практически в&nbsp;любых сферах
и&nbsp;получить поддержку от&nbsp;сотен людей. Благодаря коллективной экспертизе
глобального сообщества в&nbsp;самиздате выходят крутейшие публикации, которыми можно
вечно гордиться.
</p>
</li>
<li>
<p>
<strong>Взаимоуважение</strong>. Мы&nbsp;ценим, искренне уважаем друг друга
и&nbsp;вместо борщевиков враждебности культивируем цветы добра, мира, знания
и&nbsp;юмора. Нам некогда доказывать друг другу, кто круче. Гораздо приятнее
сотрудничать, помогать и&nbsp;создавать что-то важное, интересное и&nbsp;полезное.
</p>
</li>
<li>
<p>
<strong>Созидание</strong>. Мы&nbsp;создаем, потому что любим создавать. Мы&nbsp;открыто
делимся опытом, дарим идеи, обмениваемся мнениями и&nbsp;благодарим за&nbsp;критику,
используя ее&nbsp;для совершенствования мастерства и&nbsp;саморазвития. Мы&nbsp;знаем,
что мир не&nbsp;идеальное место, и&nbsp;делаем всё возможное, чтобы он&nbsp;стал лучше.
</p>
</li>
</ol>
</div>
<h2 class="h2" id="participation">
<span class="wrapped">Как участвовать в&nbsp;самиздате</span>
</h2>
<div class="col-lg-10 offset-md-1">
<p>
Открытая редакция объединяет сотни потрясающих людей со&nbsp;всего мира, которые делают
крутейшие вещи. Это пространство, где доверяют, вдохновляют, исследуют и&nbsp;создают новое
вместе. Поскольку все в&nbsp;сообществе очень разные, как-то мы&nbsp;собрались и&nbsp;решили
зафиксировать базовые ценности открытой редакции, а&nbsp;заодно придумали универсальные
правила взаимодействия, чтобы общение было не&nbsp;только плодотворным,
но&nbsp;и&nbsp;приятным для всех участников сообщества.
</p>
<ol>
<li>
<p>
<strong>Действуем, помогаем и&nbsp;делимся</strong>. В&nbsp;редакции мы&nbsp;создаем
свои проекты и&nbsp;помогаем другим создавать свои&nbsp;&mdash; советами, делом,
участием, вовлеченностью. Мы&nbsp;открыто делимся опытом, мнениями и&nbsp;идеями, потому
что ценим силу сотрудничества и&nbsp;знаем, что идеи реализуются скорее, лучше
и&nbsp;веселее, если над ними трудиться сообща.
</p>
</li>
<li>
<p>
<strong>Общаемся дружелюбно</strong>. Помните, по&nbsp;ту&nbsp;сторону монитора
находятся реальные люди. Неуважение ранит других так&nbsp;же, как ранило&nbsp;бы вас
самих. Поэтому не&nbsp;стоит кричать (даже капслоком), заполнять эфир желчью
и&nbsp;бросаться грубостями&nbsp;&mdash; так вы&nbsp;рискуете не&nbsp;только растерять
доверие окружающих, но&nbsp;и&nbsp;остаться непонятым.
</p>
</li>
<li>
<p>
<strong>Критикуем и&nbsp;реагируем конструктивно</strong>. Самиздат про&nbsp;то, чтобы
разбираться в&nbsp;сложных вещах всем сообществом, поэтому мы&nbsp;тактично и&nbsp;без
агрессии делимся мнениями, стараясь убедительно аргументировать позиции.
И&nbsp;с&nbsp;благодарностью принимаем критику, используя ее&nbsp;для улучшения наших
проектов. Мы&nbsp;верим, что каждый участник сообщества имеет добрые намерения,
и&nbsp;придерживаемся принципов доброжелательной критики, стараемся делиться
советами&nbsp;&mdash; лучшим средством для самосовершенствования. Обоснованная критика
помогает и&nbsp;адресату, и&nbsp;всем участникам сообщества досконально изучить тему
и&nbsp;глубже разобраться в&nbsp;проблеме.
</p>
</li>
<li>
<p>
<strong>Решаем трудности не&nbsp;агрессией, а&nbsp;диалогом</strong>. Обесценивать
мнения и&nbsp;оскорблять других людей только потому, что вы&nbsp;с&nbsp;ними
не&nbsp;согласны,&nbsp;&mdash; не&nbsp;лучший способ донести свою точку зрения. Конечно,
важно высказаться, если вас что-то не&nbsp;устраивает и&nbsp;откровенно бесит.
Но&nbsp;прежде чем сжигать оппонента гневом, попробуйте понять, почему этот
&laquo;нехороший человек&raquo; так поступает. Возможно, аргументы собеседника окажутся
убедительными или вам удастся изменить его мнение. В&nbsp;любом случае конфликты
решаются в&nbsp;диалогах и&nbsp;проходят, а&nbsp;налаженное взаимопонимание останется
надолго.
</p>
</li>
<li>
<p>
<strong>Не&nbsp;переходим на&nbsp;личности&nbsp;&mdash; это признак токсичности</strong>
. Всегда мудрее обсуждать точку зрения человека, а&nbsp;не&nbsp;его самого, даже если
он&nbsp;вам не&nbsp;импонирует. Предвзятое отношение ограничивает кругозор, добавляет
преждевременные морщины и&nbsp;не&nbsp;помогает окружающим стать лучше. Вежливость
и&nbsp;взаимоуважение&nbsp;&mdash; краеугольная основа вдумчивых и&nbsp;осмысленных
дискуссий.
</p>
</li>
<li>
<p>
<strong>Благодарим за&nbsp;помощь</strong>. Благодарите коллег даже за&nbsp;самые,
казалось&nbsp;бы, простые вещи. &laquo;Спасибо&raquo; не&nbsp;зря называют волшебным
словом&nbsp;&mdash; на&nbsp;искренней благодарности держится любое подлинное
сотрудничество. Поддержка воодушевляет на&nbsp;новые подвиги и&nbsp;напоминает, что мир
делают прекрасным не&nbsp;машины, а&nbsp;живые люди.
</p>
</li>
<li>
<p>
<strong>Даем еще один шанс</strong>. Все совершают ошибки, и&nbsp;за&nbsp;один проступок
не&nbsp;стоит вычеркивать людей из&nbsp;жизни. Ошибки нужны, чтобы на&nbsp;них учиться
и&nbsp;делать выводы. Однако если многократно и&nbsp;систематически нарушать правила
сообщества, наверняка можно заслужить минусы в&nbsp;карму от&nbsp;других участников
и&nbsp;потерять доступ к&nbsp;сообществу.
</p>
</li>
<li>
<p>
<strong>Вместе создаем идеальную среду общения</strong>. Открытая редакция&nbsp;&mdash;
это утопическое пространство обогащающей и&nbsp;осмысленной коммуникации. Атмосфера
горизонтального сообщества складывается из&nbsp;действий каждого, поэтому
мы&nbsp;действуем так, чтобы способствовать сотворчеству, коллективному познанию
и&nbsp;развитию самиздата и&nbsp;нашей альтернативной интеллектуальной медиасреды.
</p>
</li>
<li>
<p>
<strong>Помним, что всё в&nbsp;сообществе зависит от&nbsp;нас</strong>. Если нам чего-то
не&nbsp;хватает, мы&nbsp;начинаем действовать&nbsp;&mdash; рассказываем об&nbsp;идее,
находим единомышленников, готовим и&nbsp;запускаем проект. Так в&nbsp;сообществе
становится на&nbsp;одну крутую активность больше. Так появилось наше сообщество. Так
появился самиздат и&nbsp;все проекты открытой редакции. Чтобы в&nbsp;сообществе
случилось что-то прекрасное, достаточно просто положить этому начало.
</p>
</li>
</ol>
</div>
</div>
</div>
</article>
</MainLayout>
)
}
// for lazy loading
export default PrinciplesPage

2
src/components/Pages/about/ProjectsPage.tsx
View File

@ -6,7 +6,7 @@ import { t } from '../../../utils/intl'
export const ProjectsPage = () => {
return (
<MainLayout>
<article class="container">
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 offset-md-2">{t('Projects')}</div>
<div class="col-md-8 col-lg-6 offset-md-3" />

2
src/components/Pages/about/TermsOfUsePage.tsx
View File

@ -9,7 +9,7 @@ export const TermsOfUsePage = () => {
{/*<Meta name="keywords" content={`Discours.io, ${t('Terms of use')}, ${t('Terms of use', 'en')}`} />*/}
{/*<Meta property="og:title" content={title} />*/}
{/*<Meta property="og:description" content={title} />*/}
<article class="container">
<article class="container container--static-page">
<div class="row">
<div class="col-md-2">
<nav class="content-index">

24
src/components/Pages/about/ThanksPage.tsx
View File

@ -10,8 +10,7 @@ export const ThanksPage = () => {
{/*<Meta property="og:title" content={title} />*/}
{/*<Meta property="og:description" content={title} />*/}
<article class="container">
<div class="container open-post margin-top-20px ng-scope">
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 offset-md-2">
<h1>
@ -51,9 +50,9 @@ export const ThanksPage = () => {
Вячеслав Еременко, Кристина Ибрагим, Екатерина Ильина, Анна Капаева, Яна Климова, Александр
Коренков, Ирэна Лесневская, Игорь Лобанов, Анастасия Лозовая, Григорий Ломизе, Евгений
Медведев, Павел Никулин, Николай Носачевский, Андрей Орловский, Михаил Панин, Антон Панов,
Павел Пепперштейн, Любовь Покровская, Илья Розовский, Денис Светличный, Павел Соколов,
Сергей Стрельников, Глеб Струнников, Николай Тарковский, Кирилл Филимонов, Алексей Хапов,
Екатерина Харитонова
Павел Пепперштейн, Любовь Покровская, Илья Розовский, Денис Светличный, Павел Соколов, Сергей
Стрельников, Глеб Струнников, Николай Тарковский, Кирилл Филимонов, Алексей Хапов, Екатерина
Харитонова
</p>
<h3>Авторы</h3>
<p>
@ -62,9 +61,9 @@ export const ThanksPage = () => {
каждому автору
</a>{' '}
за&nbsp;участие и&nbsp;поддержку проекта. Сегодня, когда для большинства деньги стали целью
и&nbsp;основным источником мотивации, бескорыстная помощь и&nbsp;основанный
на&nbsp;энтузиазме труд бесценны. Именно вы&nbsp;своим трудом каждый день делаете Дискурс
таким, какой он&nbsp;есть.
и&nbsp;основным источником мотивации, бескорыстная помощь и&nbsp;основанный на&nbsp;энтузиазме
труд бесценны. Именно вы&nbsp;своим трудом каждый день делаете Дискурс таким, какой
он&nbsp;есть.
</p>
<h3>Иллюстраторы</h3>
<p>
@ -76,10 +75,10 @@ export const ThanksPage = () => {
<h3>Меценаты</h3>
<p>
Дискурс существует исключительно на&nbsp;пожертвования читателей. Мы&nbsp;бесконечно
признательны всем, кто нас поддерживает. Ваши пожертвования&nbsp;&mdash; финансовый
фундамент журнала. Благодаря вам мы&nbsp;развиваем платформу качественной журналистики,
которая помогает самым разным авторам быть услышанными. Стать нашим меценатом
и&nbsp;подписаться на&nbsp;ежемесячную поддержку проекта можно{' '}
признательны всем, кто нас поддерживает. Ваши пожертвования&nbsp;&mdash; финансовый фундамент
журнала. Благодаря вам мы&nbsp;развиваем платформу качественной журналистики, которая помогает
самым разным авторам быть услышанными. Стать нашим меценатом и&nbsp;подписаться
на&nbsp;ежемесячную поддержку проекта можно{' '}
<a href="/about/help" target="_self">
здесь
</a>
@ -87,7 +86,6 @@ export const ThanksPage = () => {
</p>
</div>
</div>
</div>
</article>
</MainLayout>
)

6
src/components/Root.tsx
View File

@ -18,15 +18,18 @@ import { FeedPage } from './Pages/FeedPage'
import { ArticlePage } from './Pages/ArticlePage'
import { SearchPage } from './Pages/SearchPage'
import { FourOuFourPage } from './Pages/FourOuFourPage'
import { DiscussionRulesPage } from './Pages/about/DiscussionRulesPage'
import { DogmaPage } from './Pages/about/DogmaPage'
import { GuidePage } from './Pages/about/GuidePage'
import { HelpPage } from './Pages/about/HelpPage'
import { ManifestPage } from './Pages/about/ManifestPage'
import { PartnersPage } from './Pages/about/PartnersPage'
import { PrinciplesPage } from './Pages/about/PrinciplesPage'
import { ProjectsPage } from './Pages/about/ProjectsPage'
import { TermsOfUsePage } from './Pages/about/TermsOfUsePage'
import { ThanksPage } from './Pages/about/ThanksPage'
import { CreatePage } from './Pages/CreatePage'
import { ConnectPage } from './Pages/ConnectPage'
import { renewSession } from '../stores/auth'
// TODO: lazy load
@ -57,6 +60,7 @@ type RootSearchParams = {
}
const pagesMap: Record<keyof Routes, Component<PageProps>> = {
connect: ConnectPage,
create: CreatePage,
home: HomePage,
topics: AllTopicsPage,
@ -66,12 +70,14 @@ const pagesMap: Record<keyof Routes, Component<PageProps>> = {
feed: FeedPage,
article: ArticlePage,
search: SearchPage,
discussionRules: DiscussionRulesPage,
dogma: DogmaPage,
guide: GuidePage,
help: HelpPage,
manifest: ManifestPage,
projects: ProjectsPage,
partners: PartnersPage,
principles: PrinciplesPage,
termsOfUse: TermsOfUsePage,
thanks: ThanksPage
}

28
src/components/Topic/Card.tsx
View File

@ -1,5 +1,5 @@
import { capitalize, plural } from '../../utils'
import style from './Card.module.scss'
import styles from './Card.module.scss'
import { createMemo, Show } from 'solid-js'
import type { Topic } from '../../graphql/types.gen'
import { FollowingEntity } from '../../graphql/types.gen'
@ -43,20 +43,20 @@ export const TopicCard = (props: TopicProps) => {
}
return (
<div
class={style.topic}
class={styles.topic}
classList={{
row: !props.compact && !props.subscribeButtonBottom,
[style.topicInRow]: props.isTopicInRow
[styles.topicInRow]: props.isTopicInRow
}}
>
<div classList={{ 'col-md-7': !props.compact && !props.subscribeButtonBottom }}>
<Show when={props.topic.title}>
<div class={style.topicTitle}>
<div class={styles.topicTitle}>
<a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
</div>
</Show>
<Show when={props.topic.pic}>
<div class={style.topicAvatar}>
<div class={styles.topicAvatar}>
<a href={props.topic.slug}>
<img src={props.topic.pic} alt={props.topic.title} />
</a>
@ -65,7 +65,7 @@ export const TopicCard = (props: TopicProps) => {
<Show when={!props.compact && props.topic?.body}>
<div
class={style.topicDescription}
class={styles.topicDescription}
classList={{ 'topic-description--short': props.shortDescription }}
>
{props.topic.body}
@ -73,9 +73,9 @@ export const TopicCard = (props: TopicProps) => {
</Show>
<Show when={props.topic?.stat}>
<div class={style.topicDetails}>
<div class={styles.topicDetails}>
<Show when={!props.compact}>
<span class={style.topicDetailsTtem} classList={{ compact: props.compact }}>
<span class={styles.topicDetailsTtem} classList={{ compact: props.compact }}>
{props.topic.stat?.shouts +
' ' +
t('post') +
@ -84,7 +84,7 @@ export const TopicCard = (props: TopicProps) => {
locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
)}
</span>
<span class={style.topicDetailsTtem} classList={{ compact: props.compact }}>
<span class={styles.topicDetailsTtem} classList={{ compact: props.compact }}>
{props.topic.stat?.authors +
' ' +
t('author') +
@ -93,7 +93,7 @@ export const TopicCard = (props: TopicProps) => {
locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
)}
</span>
<span class={style.topicDetailsItem} classList={{ compact: props.compact }}>
<span class={styles.topicDetailsItem} classList={{ compact: props.compact }}>
{props.topic.stat?.followers +
' ' +
t('follower') +
@ -131,15 +131,15 @@ export const TopicCard = (props: TopicProps) => {
<Show
when={subscribed()}
fallback={
<button onClick={() => subscribe(true)} class="button--light">
<Show when={props.iconButton}>{/*<Icon name={}/>*/}</Show>
<button onClick={() => subscribe(true)} class="button--light button--subscribe-topic">
<Show when={props.iconButton}>+</Show>
<Show when={!props.iconButton}>+&nbsp;{t('Follow')}</Show>
</button>
}
>
<button onClick={() => subscribe(false)} class="button--light">
<Show when={props.iconButton}>{/*<Icon name={}/>*/}</Show>
<button onClick={() => subscribe(false)} class="button--light button--subscribe-topic">
<Show when={props.iconButton}>-</Show>
<Show when={!props.iconButton}>-&nbsp;{t('Unfollow')}</Show>
</button>

39
src/components/Views/Connect.tsx
View File

@ -1,39 +0,0 @@
export const ConnectView = () => (
<>
<article class="container">
<div class="row">
<h1 class="col-md-8 offset-md-2">
<span class="wrapped">Предложить идею</span>
</h1>
<div class="col-md-8 col-lg-6 offset-md-3">
<p>
Хотите что-то предложить, обсудить или посоветовать? Поделиться темой или идеей? Напишите нам
скорее! Если укажете свою почту, мы&nbsp;обязательно ответим.
</p>
<form action=".">
<div class="pretty-form__item">
<select id="subject">
<option value="">Сотрудничество</option>
<option value="">Посоветовать тему</option>
<option value="">Сообщить об ошибке</option>
<option value="">Предложить проект</option>
<option value="">Волонтерство</option>
<option value="">Другое</option>
</select>
</div>
<div class="pretty-form__item">
<input type="text" id="contact-email" placeholder="Email для обратной связи" />
<label for="contact-email">Email для обратной связи</label>
</div>
<div class="pretty-form__item">
<textarea id="message" placeholder="Текст сообщения" />
<label for="message">Текст сообщения</label>
</div>
<button class="button">Отправить письмо</button>
</form>
</div>
</div>
</article>
</>
)

18
src/components/Views/Create.tsx
View File

@ -1,6 +1,6 @@
import { Show, onCleanup, createEffect, onError, onMount, untrack } from 'solid-js'
import { Show, onCleanup, createEffect, onError, onMount, untrack, createSignal } from 'solid-js'
import { createMutable, unwrap } from 'solid-js/store'
import { State, StateContext } from '../Editor/store/context'
import { State, StateContext, newState } from '../Editor/store/context'
import { createCtrl } from '../Editor/store/actions'
import { Layout } from '../Editor/components/Layout'
import { Editor } from '../Editor/components/Editor'
@ -9,16 +9,18 @@ import ErrorView from '../Editor/components/Error'
const matchDark = () => window.matchMedia('(prefers-color-scheme: dark)')
export const CreateView = (props: { state: State }) => {
let isMac = false
export const CreateView = () => {
const [isMounted, setIsMounted] = createSignal(false)
onMount(() => setIsMounted(true))
const onChangeTheme = () => ctrl.updateTheme()
onMount(() => {
isMac = window?.navigator.platform.includes('Mac')
matchDark().addEventListener('change', onChangeTheme)
onCleanup(() => matchDark().removeEventListener('change', onChangeTheme))
})
const [store, ctrl] = createCtrl({ ...props.state, isMac })
const [store, ctrl] = createCtrl(newState())
const mouseEnterCoords = createMutable({ x: 0, y: 0 })
const onMouseEnter = (e: MouseEvent) => {
@ -52,6 +54,7 @@ export const CreateView = (props: { state: State }) => {
}, store.loading)
return (
<Show when={isMounted()}>
<StateContext.Provider value={[store, ctrl]}>
<Layout
config={store.config}
@ -64,5 +67,8 @@ export const CreateView = (props: { state: State }) => {
</Show>
</Layout>
</StateContext.Provider>
</Show>
)
}
export default CreateView

5
src/locales/ru.json
View File

@ -26,6 +26,7 @@
"Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects": "Дискурс — это интеллектуальная среда, веб-пространство и инструменты, которые позволяют авторам сотрудничать с читателями и объединяться для совместного создания публикаций и медиапроектов",
"Discours is created with our common effort": "Дискурс существует благодаря нашему общему вкладу",
"Discussing": "Обсуждаемое",
"Discussion rules": "Правила сообществ самиздата в&nbsp;соцсетях",
"Dogma": "Догма",
"Edit": "Редактировать",
"Email": "Почта",
@ -76,6 +77,7 @@
"Please confirm your email to finish": "Подтвердите почту и действие совершится",
"Popular": "Популярное",
"Popular authors": "Популярные авторы",
"Principles": "Принципы сообщества",
"Publications": "Публикации",
"Quit": "Выйти",
"Reason uknown": "Причина неизвестна",
@ -97,7 +99,8 @@
"Successfully authorized": "Авторизация успешна",
"Suggest an idea": "Предложить идею",
"Support us": "Помочь журналу",
"Terms of use": "Условия использования",
"Terms of use": "Правила сайта",
"Thank you": "Благодарности",
"To leave a comment please": "Чтобы оставить комментарий, необходимо",
"Top authors": "Рейтинг авторов",
"Top commented": "Самое комментируемое",

14
src/pages/about/discussion-rules.astro Normal file
View File

@ -0,0 +1,14 @@
---
import Zine from '../../layouts/zine.astro'
import { Root } from '../../components/Root'
import { initRouter } from '../../stores/router'
const { pathname, search } = Astro.url
initRouter(pathname, search)
Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate')
---
<Zine>
<Root client:load />
</Zine>

14
src/pages/about/principles.astro Normal file
View File

@ -0,0 +1,14 @@
---
import Zine from '../../layouts/zine.astro'
import { Root } from '../../components/Root'
import { initRouter } from '../../stores/router'
const { pathname, search } = Astro.url
initRouter(pathname, search)
Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate')
---
<Zine>
<Root client:load />
</Zine>

14
src/pages/connect.astro Normal file
View File

@ -0,0 +1,14 @@
---
import Zine from '../layouts/zine.astro'
import { Root } from '../components/Root'
import { initRouter } from '../stores/router'
const { pathname, search } = Astro.url
initRouter(pathname, search)
Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate')
---
<Zine>
<Root client:load />
</Zine>

6
src/stores/router.ts
View File

@ -6,6 +6,7 @@ import { useStore } from '@nanostores/solid'
// TODO: more
export interface Routes {
home: void
connect: void
create: void
topics: void
topic: 'slug'
@ -15,10 +16,12 @@ export interface Routes {
article: 'slug'
search: 'q'
dogma: void
discussionRules: void
guide: void
help: void
manifest: void
partners: void
principles: void
projects: void
termsOfUse: void
thanks: void
@ -28,6 +31,7 @@ const searchParamsStore = createSearchParams()
const routerStore = createRouter<Routes>(
{
home: '/',
connect: '/connect',
create: '/create',
topics: '/topics',
topic: '/topic/:slug',
@ -37,10 +41,12 @@ const routerStore = createRouter<Routes>(
search: '/search/:q?',
article: '/:slug',
dogma: '/about/dogma',
discussionRules: '/about/discussion-rules',
guide: '/about/guide',
help: '/about/help',
manifest: '/about/manifest',
partners: '/about/partners',
principles: '/about/principles',
projects: '/about/projects',
termsOfUse: '/about/terms-of-use',
thanks: '/about/thanks'

28
src/styles/app.scss
View File

@ -26,6 +26,7 @@ html {
height: 100%;
-webkit-font-smoothing: antialiased;
overscroll-behavior-y: none;
overflow-y: scroll;
}
body {
@ -69,10 +70,14 @@ section {
h1,
h2 {
line-height: 1.3;
.wrapped {
background: #000;
color: #fff;
padding: 0 0.15em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
}
@ -171,6 +176,7 @@ button {
.button {
background: #000;
box-sizing: border-box;
color: #fff;
font-size: 100%;
font-weight: 500;
@ -179,6 +185,7 @@ button {
&:hover {
color: #ccc;
opacity: 1;
}
&:active {
@ -187,8 +194,10 @@ button {
}
.button--subscribe {
padding: 0.6rem 1.2rem;
background: #fff;
border: 2px solid #f6f6f6;
font-size: 1.5rem;
padding: 0.6rem 1.2rem;
transition: background-color 0.2s;
img {
@ -210,10 +219,23 @@ button {
@include font-size(1.5rem);
font-weight: 400;
height: auto;
margin-top: 0.6rem;
padding: 0.6rem 1.2rem 0.6rem 1rem;
}
.button--subscribe-topic {
background: #fff;
border: 2px solid #000;
border-radius: 0.8rem;
&:hover {
background: #000;
color: #fff;
opacity: 1;
}
}
form {
.pretty-form__item {
position: relative;
@ -562,6 +584,10 @@ astro-island {
}
}
.container--static-page {
padding-top: 1.5em;
}
.shift-content {
@include media-breakpoint-up(md) {
margin-left: 127px;

15
src/utils/useEscKeyDownHandler.ts Normal file
View File

@ -0,0 +1,15 @@
import { onCleanup, onMount } from 'solid-js'
export const useEscKeyDownHandler = (onEscKeyDown: () => void) => {
const keydownHandler = (e: KeyboardEvent) => {
if (e.key === 'Escape') onEscKeyDown()
}
onMount(() => {
window.addEventListener('keydown', keydownHandler)
onCleanup(() => {
window.removeEventListener('keydown', keydownHandler)
})
})
}

27
src/utils/useOutsideClickHandler.ts Normal file
View File

@ -0,0 +1,27 @@
import { onCleanup, onMount } from 'solid-js'
type Options = {
predicate?: () => boolean
containerRef: { current: HTMLElement }
handler: () => void
}
export const useOutsideClickHandler = (options: Options) => {
const { predicate, containerRef, handler } = options
const handleClickOutside = (event: MouseEvent & { target: Element }) => {
if (predicate && !predicate()) {
return
}
if (event.target === containerRef.current || containerRef.current?.contains(event.target)) {
return
}
options.handler()
}
onMount(() => {
document.addEventListener('click', handleClickOutside, { capture: true })
onCleanup(() => document.removeEventListener('click', handleClickOutside, { capture: true }))
})
}