Skip to content

Commit

Permalink
create PostDescription component
Browse files Browse the repository at this point in the history
  • Loading branch information
sauldom102 committed Jan 3, 2025
1 parent ef3aa0e commit 037b351
Show file tree
Hide file tree
Showing 6 changed files with 391 additions and 34 deletions.
52 changes: 26 additions & 26 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
<style>
#storybook-docs h1,
#storybook-docs h2,
#storybook-docs h3 {
#storybook-docs h1:not(.docs-story *),
#storybook-docs h2:not(.docs-story *),
#storybook-docs h3:not(.docs-story *) {
font-weight: 500 !important;
color: #0d1625 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
}

#storybook-docs h1 {
#storybook-docs h1:not(.docs-story *) {
font-size: 36px !important;
margin-bottom: 12px !important;
}

#storybook-docs h2 {
#storybook-docs h2:not(.docs-story *) {
font-size: 26px !important;
margin-bottom: 12px !important;
margin-top: 48px !important;
border-bottom: none !important;
}

#storybook-docs a.sbdocs-a {
#storybook-docs a.sbdocs-a:not(.docs-story *) {
color: #ff355e !important;
}

.docblock-source {
.docblock-source:not(.docs-story *) {
font-family:
Menlo,
Consolas,
Expand All @@ -39,7 +39,7 @@
box-shadow: 0px 2px 20px rgba(13, 22, 37, 0.04) !important;
}

.sbdocs-preview {
.sbdocs-preview:not(.docs-story *) {
border: #dce0e5 1px solid !important;
box-shadow: 0px 2px 20px rgba(13, 22, 37, 0.04) !important;
border-radius: 12px !important;
Expand All @@ -63,23 +63,23 @@
background: #fff;
}

.sb-unstyled tbody > tr:nth-child(even) > td:not(.docs-story td),
.docblock-argstable-body > tr:nth-child(even) > td {
.sb-unstyled tbody>tr:nth-child(even)>td:not(.docs-story td),
.docblock-argstable-body>tr:nth-child(even)>td {
background: #fafbfc !important;
}

.sb-unstyled tbody > tr:not(:last-child) > td:not(.docs-story td),
.docblock-argstable-body > tr:not(:last-child) > td {
.sb-unstyled tbody>tr:not(:last-child)>td:not(.docs-story td),
.docblock-argstable-body>tr:not(:last-child)>td {
border-bottom: #dce0e5 1px solid !important;
}

.sb-unstyled thead > tr > th:not(.docs-story th) {
.sb-unstyled thead>tr>th:not(.docs-story th) {
padding: 10px 20px;
color: #647084;
text-align: left;
}

.sb-unstyled tbody > tr > td:not(.docs-story td) {
.sb-unstyled tbody>tr>td:not(.docs-story td) {
padding: 16px 20px;
}

Expand Down Expand Up @@ -123,17 +123,17 @@
color: #fff !important;
}

body.dark #storybook-docs h1 > a,
body.dark #storybook-docs h2 > a,
body.dark #storybook-docs h3 > a {
body.dark #storybook-docs h1>a,
body.dark #storybook-docs h2>a,
body.dark #storybook-docs h3>a {
float: left;
line-height: inherit;
padding-right: 10px;
margin-left: -24px;
color: #647084;
}

body.dark #storybook-docs > div {
body.dark #storybook-docs>div {
background: transparent !important;
}

Expand All @@ -151,7 +151,7 @@
border-left-color: #647084 !important;
}

body.dark .toc-list .toc-list-item > a.is-active-link {
body.dark .toc-list .toc-list-item>a.is-active-link {
color: #fff !important;
}

Expand All @@ -166,8 +166,8 @@
border: #161f30 4px solid;
}

body.dark .sb-unstyled thead > tr > th,
body.dark .docblock-argstable-head > tr > th > span {
body.dark .sb-unstyled thead>tr>th,
body.dark .docblock-argstable-head>tr>th>span {
color: #a1abbd !important;
}

Expand All @@ -177,13 +177,13 @@
background: #0d1625;
}

body.dark .sb-unstyled tbody > tr:nth-child(even) > td,
body.dark .docblock-argstable-body > tr:nth-child(even) > td {
body.dark .sb-unstyled tbody>tr:nth-child(even)>td,
body.dark .docblock-argstable-body>tr:nth-child(even)>td {
background: #111a2a !important;
}

body.dark .sb-unstyled tbody > tr:not(:last-child) > td,
body.dark .docblock-argstable-body > tr:not(:last-child) > td {
body.dark .sb-unstyled tbody>tr:not(:last-child)>td,
body.dark .docblock-argstable-body>tr:not(:last-child)>td {
border-bottom: #172031 1px solid !important;
}

Expand All @@ -192,4 +192,4 @@
background-color: #161f30;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/react-render-tracker"></script>
<script src="https://cdn.jsdelivr.net/npm/react-render-tracker"></script>
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ export const Default: Story = {
},
createdAt: subMonths(new Date(), 1),
title: "Title",
description:
"Description with a maximum of two lines visible.<br />Like this one :)<br />This shouldn't be visible",
description: `<p class="TextEditorTheme__paragraph" dir="ltr"><span>Super Kudos for </span><strong class="mentioned"><span><a href="/employees/1">First Employee</a></span></strong><span> and </span><strong class="mentioned"><span><a href="/employees/2">Second Employee</a></span></strong><span> , who always are available to help in any way they can and as quickly as possible. You guys are great! ⭐</span></p><p class="TextEditorTheme__paragraph" dir="ltr">Including some link here too: <a href="mailto:[email protected]" class="TextEditorTheme__link"><span>[email protected]</span></a></p></p>`,
onClick: () => {},
imageUrl:
"https://multimedia.andalucia.org/media/0BC700DB844F4EDFBE00C1FA9B493D71/img/1112772E6D5945A1B89C26E539DD0D99/SE_Catedral_01.jpg?responsive",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { EllipsisHorizontal } from "@/icons/app"
import { getAgo } from "@/lib/date"
import { withSkeleton } from "@/lib/skeleton"
import { Skeleton } from "@/ui/skeleton"
import { PostDescription } from "../PostDescription"
import { PostEvent, PostEventProps } from "../PostEvent"

type CommunityPostProps = {
Expand Down Expand Up @@ -138,12 +139,7 @@ export const BaseCommunityPost = ({
</div>
<div className="flex flex-col gap-1">
<p className="text-xl font-semibold">{title}</p>
{description && (
<p
dangerouslySetInnerHTML={{ __html: description }}
className="line-clamp-2"
/>
)}
{description && <PostDescription content={description} collapsed />}
</div>
</div>
{imageUrl && !event && (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
.TextEditor {
@apply leading-6;
}

.TextEditorTheme__ltr {
@apply text-left;
}

.TextEditorTheme__rtl {
@apply text-right;
}

.TextEditorTheme__paragraph {
@apply relative m-0 mb-2;
}

.TextEditorTheme__paragraph:last-child {
@apply mb-0;
}

.TextEditorTheme__quote {
@apply m-0 mb-2.5 ml-5 border-b-4 pl-4;
color: rgb(101, 103, 107);
border-left-color: rgb(206, 208, 212);
}

.TextEditorTheme__h1 {
@apply m-0 mb-3 p-0 text-xl font-semibold;
}

.TextEditorTheme__h2 {
@apply m-0 mt-2.5 p-0 text-lg;
}

.TextEditorTheme__h3 {
@apply m-0 mt-2.5 p-0;
}

.TextEditorTheme__textBold {
@apply font-semibold;
}

.TextEditorTheme__textItalic {
@apply italic;
}

.TextEditorTheme__textUnderline {
@apply underline;
}

.TextEditorTheme__textStrikethrough {
@apply line-through;
}

.TextEditorTheme__textUnderlineStrikethrough {
text-decoration: underline line-through;
}

.TextEditorTheme__textSubscript {
vertical-align: sub !important;
}

.TextEditorTheme__textSuperscript {
vertical-align: super;
}

.TextEditorTheme__textCode {
background-color: rgb(240, 242, 245);
padding: 1px 0.25rem;
font-family: Menlo, Consolas, Monaco, monospace;
}

.TextEditorTheme__hashtag {
@apply rounded-xs bg-f1-background-info px-0.5 py-0.5 font-medium text-f1-foreground-info no-underline;
}

.TextEditorTheme__link {
@apply font-medium text-f1-link;
}

.TextEditorTheme__link:hover {
@apply underline;
}

.TextEditorTheme__code {
@apply mx-0 my-2 p-2 pl-10;
background-color: rgb(240, 242, 245);
font-family: Menlo, Consolas, Monaco, monospace;
display: block;
line-height: 1.53;
tab-size: 2;
/* white-space: pre; */
overflow-x: auto;
position: relative;
}

.TextEditorTheme__code:before {
content: attr(data-gutter);
position: absolute;
background-color: #eee;
left: 0;
top: 0;
border-right: 1px solid #ccc;
padding: 8px;
color: #777;
white-space: pre-wrap;
text-align: right;
min-width: 25px;
}

.TextEditorTheme__code:after {
content: attr(data-highlight-language);
top: 0;
right: 3px;
padding: 3px;
text-transform: uppercase;
position: absolute;
color: rgba(0, 0, 0, 0.5);
}

.TextEditorTheme__characterLimit {
display: inline;
background-color: #ffbbbb !important;
}

.TextEditorTheme__ol1 {
@apply m-0 ml-4 p-0;
}

.TextEditorTheme__ol2 {
@apply m-0 ml-4 p-0;
list-style-type: upper-alpha;
}

.TextEditorTheme__ol3 {
@apply m-0 ml-4 p-0;
list-style-type: lower-alpha;
}

.TextEditorTheme__ol4 {
@apply m-0 ml-4 p-0;
list-style-type: upper-roman;
}

.TextEditorTheme__ol5 {
@apply m-0 ml-4 p-0;
list-style-type: lower-roman;
}

.TextEditorTheme__ul {
@apply m-0 ml-4 p-0;
list-style: disc;
}

.TextEditorTheme__tokenComment {
color: slategray;
}

.TextEditorTheme__tokenPunctuation {
color: #999;
}

.TextEditorTheme__tokenProperty {
color: #905;
}

.TextEditorTheme__tokenSelector {
color: #690;
}

.TextEditorTheme__tokenOperator {
color: #9a6e3a;
}

.TextEditorTheme__tokenAttr {
color: #07a;
}

.TextEditorTheme__tokenVariable {
color: #e90;
}

.TextEditorTheme__tokenFunction {
color: #dd4a68;
}

.TextEditorTheme__mark {
background: rgba(255, 212, 0, 0.14);
border-bottom: 2px solid rgba(255, 212, 0, 0.3);
padding-bottom: 2px;
}

.TextEditorTheme__markOverlap {
background: rgba(255, 212, 0, 0.3);
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
}

.TextEditorTheme__mark.selected {
background: rgba(255, 212, 0, 0.5);
border-bottom: 2px solid rgba(255, 212, 0, 1);
}

.TextEditorTheme__markOverlap.selected {
background: rgba(255, 212, 0, 0.7);
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
}

.mention a,
.mentioned a {
@apply rounded-xs bg-f1-background-accent px-1.5 py-0.5 font-medium text-f1-foreground-accent no-underline;
}

.mention:focus a,
.mentioned:focus a {
@apply outline outline-1 outline-offset-1 outline-f1-border-selected-bold;
}

.link_mentioned {
text-decoration: none;
}
Loading

0 comments on commit 037b351

Please sign in to comment.