diff --git a/components/comment.js b/components/comment.js
index 378df154..db840e80 100644
--- a/components/comment.js
+++ b/components/comment.js
@@ -72,7 +72,7 @@ export function CommentFlat ({ item, ...props }) {
}
export default function Comment ({
- item, children, replyOpen, includeParent,
+ item, children, replyOpen, includeParent, topLevel,
rootText, noComments, noReply, truncate, depth
}) {
const [edit, setEdit] = useState()
@@ -173,7 +173,7 @@ export default function Comment ({
)
: (
-
+
{truncate ? truncateString(item.text) : item.searchText || item.text}
diff --git a/components/discussion-form.js b/components/discussion-form.js
index 0e7d351e..82a62374 100644
--- a/components/discussion-form.js
+++ b/components/discussion-form.js
@@ -62,6 +62,7 @@ export function DiscussionForm ({
autoFocus
/>
{textLabel} optional>}
name='text'
as={TextareaAutosize}
diff --git a/components/form.js b/components/form.js
index 283b903f..ad69b270 100644
--- a/components/form.js
+++ b/components/form.js
@@ -71,7 +71,7 @@ export function InputSkeleton ({ label, hint }) {
)
}
-export function MarkdownInput ({ label, groupClassName, ...props }) {
+export function MarkdownInput ({ label, topLevel, groupClassName, ...props }) {
const [tab, setTab] = useState('write')
const [, meta] = useField(props)
@@ -103,7 +103,7 @@ export function MarkdownInput ({ label, groupClassName, ...props }) {
- {tab === 'preview' && {meta.value}}
+ {tab === 'preview' && {meta.value}}
diff --git a/components/item-full.js b/components/item-full.js
index 6a83c46d..60c5576a 100644
--- a/components/item-full.js
+++ b/components/item-full.js
@@ -92,14 +92,14 @@ function TopLevelItem ({ item, noReply, ...props }) {
}
function ItemText ({ item }) {
- return {item.searchText || item.text}
+ return {item.searchText || item.text}
}
export default function ItemFull ({ item, bio, ...props }) {
return (
<>
{item.parentId
- ?
+ ?
: (
{
bio
diff --git a/components/job-form.js b/components/job-form.js
index 93fb2362..e94c4572 100644
--- a/components/job-form.js
+++ b/components/job-form.js
@@ -160,6 +160,7 @@ export default function JobForm ({ item, sub }) {
/>
{
@@ -27,17 +28,18 @@ function myRemarkPlugin () {
}
}
-export default function Text ({ nofollow, children }) {
+export default function Text ({ topLevel, nofollow, children }) {
// all the reactStringReplace calls are to facilitate search highlighting
+
return (
topLevel ? {children}
: {children}
,
+ h2: ({children, node, ...props}) => topLevel ? {children}
: {children}
,
+ h3: ({children, node, ...props}) => topLevel ? {children}
: {children}
,
+ h4: ({children, node, ...props}) => topLevel ? {children}
: {children}
,
+ h5: ({children, node, ...props}) => topLevel ? {children}
: {children}
,
h6: 'h6',
table: ({ node, ...props }) =>
@@ -79,7 +81,8 @@ export default function Text ({ nofollow, children }) {
{children}
)
- }
+ },
+ img: ({node, ...props}) =>
}}
remarkPlugins={[gfm, mention, sub, remarkDirective, myRemarkPlugin]}
>
@@ -88,3 +91,38 @@ export default function Text ({ nofollow, children }) {
)
}
+
+function ZoomableImage ({ src, topLevel, ...props }) {
+ if (!src) {
+ return null
+ }
+
+ const defaultMediaStyle = {
+ maxHeight: topLevel ? '75vh' : '25vh',
+ cursor: 'zoom-in'
+ }
+
+ // if image changes we need to update state
+ const [mediaStyle, setMediaStyle] = useState(defaultMediaStyle)
+ useEffect(() => {
+ setMediaStyle(defaultMediaStyle)
+ }, [src])
+
+ const handleClick = () => {
+ if (mediaStyle.cursor === 'zoom-in') {
+ setMediaStyle({
+ cursor: 'zoom-out'
+ })
+ } else {
+ setMediaStyle(defaultMediaStyle)
+ }
+ }
+
+ return
+}
diff --git a/components/text.module.css b/components/text.module.css
index 740ffc9a..f86ed7a4 100644
--- a/components/text.module.css
+++ b/components/text.module.css
@@ -7,9 +7,13 @@
@media screen and (min-width: 767px) {
.text {
- line-height: 130%;
+ line-height: 130%;
}
- }
+}
+
+.text hr {
+ border-top: 1px solid var(--theme-clickToContextColor);
+}
.text p {
margin-bottom: .5rem;
@@ -21,21 +25,29 @@
margin-bottom: .5rem;
}
-.text pre > div {
+.text pre>div {
margin: 0 !important;
}
-.text > *:last-child {
+.text>*:last-child {
margin-bottom: 0 !important;
}
-.text blockquote > *:last-child {
+.text blockquote>*:last-child {
margin-bottom: 0 !important;
}
.text img {
+ display: block;
+ margin-top: .5rem;
+ border-radius: .4rem;
+ width: min-content;
max-width: 100%;
- max-height: 300px;
+}
+
+.text img.topLevel {
+ margin-top: .75rem;
+ margin-bottom: .75rem;
}
.text table {
@@ -46,4 +58,28 @@
border-left: 2px solid var(--theme-grey);
padding-left: 1rem;
margin: 0 0 0.5rem 0.5rem !important;
+}
+
+.text h1 {
+ font-size: 1.6rem;
+}
+
+.text h2 {
+ font-size: 1.45rem;
+}
+
+.text h3 {
+ font-size: 1.3rem;
+}
+
+.text h4 {
+ font-size: 1.15rem;
+}
+
+.text h5 {
+ font-size: 1rem;
+}
+
+.text h6 {
+ font-size: .85rem;
}
\ No newline at end of file
diff --git a/pages/[name]/index.js b/pages/[name]/index.js
index 4ef4db05..0a830a75 100644
--- a/pages/[name]/index.js
+++ b/pages/[name]/index.js
@@ -64,6 +64,7 @@ export function BioForm ({ handleSuccess, bio }) {
}}
>