Skip to content

Commit

Permalink
fix(article-md): markdown styles in constants, TODOs added
Browse files Browse the repository at this point in the history
  • Loading branch information
WaDadidou committed Dec 28, 2024
1 parent c2b53ba commit a58719b
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 86 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ import { ZodSocialFeedArticleMarkdownMetadata } from "@/utils/types/feed";
const ARTICLE_CARD_PADDING_VERTICAL = layout.spacing_x2;
const ARTICLE_CARD_PADDING_HORIZONTAL = layout.spacing_x2_5;

// TODO: It's a copy of SocialArticleCard.tsx, just made waiting for a posts UI (and data) refacto. => Merge them in the future

export const SocialArticleMarkdownCard: FC<{
post: Post;
isPostConsultation?: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ import {
ZodSocialFeedArticleMarkdownMetadata,
} from "@/utils/types/feed";

// TODO: It's a copy of FeedPostArticleView.tsx, just made waiting for a posts UI (and data) refacto

const contentPaddingHorizontal = layout.spacing_x2;

export const FeedPostArticleMarkdownView: FC<{
Expand Down
133 changes: 47 additions & 86 deletions packages/utils/feed/markdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,24 +45,36 @@ export const renderHtmlDomVisitors = {
};

// HTML tags styles used by RenderHtml from react-native-render-html
type HtmlTagStyle = Record<string, string | number>;
const baseTextStyle: HtmlTagStyle = {
color: neutralA3,
fontSize: 14,
letterSpacing: -(14 * 0.04),
lineHeight: 22,
fontFamily: "Exo_500Medium",
fontWeight: "500",
};
const baseBlockStyle: HtmlTagStyle = {
marginTop: 0,
marginBottom: 16,
};
const baseCodeStyle: HtmlTagStyle = {
...baseTextStyle,
fontSize: 13,
letterSpacing: -(13 * 0.04),
backgroundColor: neutral17,
borderRadius: 4,
};
const baseTableChildrenStyle: HtmlTagStyle = {
borderColor: neutral33,
};
export const renderHtmlTagStyles: MixedStyleRecord = {
body: {
color: neutralA3,
fontSize: 14,
letterSpacing: -(14 * 0.04),
lineHeight: 22,
fontFamily: "Exo_500Medium",
fontWeight: "500",
...baseTextStyle,
},
p: {
marginTop: 0,
// marginBottom: 16,

fontSize: 14,
letterSpacing: -(14 * 0.04),
lineHeight: 22,
fontFamily: "Exo_500Medium",
fontWeight: "500",
...baseBlockStyle,
...baseTextStyle,
},
strong: { fontWeight: "700" },
a: {
Expand All @@ -71,157 +83,106 @@ export const renderHtmlTagStyles: MixedStyleRecord = {
},
hr: { backgroundColor: neutralA3 },
h1: {
...baseTextStyle,
color: neutralFF,
fontSize: 28,
letterSpacing: -(28 * 0.02),
lineHeight: 37,
fontFamily: "Exo_500Medium",
fontWeight: "500",
},
h2: {
...baseTextStyle,
color: neutralFF,
fontSize: 21,
letterSpacing: -(21 * 0.02),
lineHeight: 28,
fontFamily: "Exo_500Medium",
fontWeight: "500",
},
h3: {
...baseTextStyle,
color: neutralFF,
fontSize: 16,
letterSpacing: -(16 * 0.02),
lineHeight: 23,
fontFamily: "Exo_500Medium",
fontWeight: "500",
},
h4: {
...baseTextStyle,
color: neutralFF,
fontSize: 14,
letterSpacing: -(14 * 0.04),
lineHeight: 20,
fontFamily: "Exo_500Medium",
fontWeight: "500",
},
h5: {
color: neutralA3,
fontSize: 14,
letterSpacing: -(14 * 0.04),
...baseTextStyle,
lineHeight: 20,
fontFamily: "Exo_500Medium",
fontWeight: "500",
},
h6: {
color: neutralA3,
...baseTextStyle,
fontSize: 12,
letterSpacing: -(12 * 0.04),
lineHeight: 16,
fontFamily: "Exo_500Medium",
fontWeight: "500",
},
ul: {
marginTop: 0,
marginBottom: 16,

color: neutralA3,
fontSize: 14,
letterSpacing: -(14 * 0.04),
...baseBlockStyle,
...baseTextStyle,
lineHeight: 20,
fontFamily: "Exo_500Medium",
fontWeight: "500",
},
ol: {
marginTop: 0,
marginBottom: 16,

color: neutralA3,
fontSize: 14,
letterSpacing: -(14 * 0.04),
...baseBlockStyle,
...baseTextStyle,
lineHeight: 20,
fontFamily: "Exo_500Medium",
fontWeight: "500",
},

blockquote: {
marginTop: 0,
paddingBottom: 0,

...baseBlockStyle,
...baseTextStyle,
color: neutral67,
fontSize: 14,
letterSpacing: -(14 * 0.04),
lineHeight: 20,
fontFamily: "Exo_500Medium",
fontWeight: "500",

marginLeft: 0,
paddingLeft: 14,
borderLeftWidth: 3,
borderLeftColor: neutral67,
},
"ol > :first-child": {
backgroundColor: "red",
},
"blockquote > :first-child": {
marginBottom: 0,
},

code: {
color: neutralA3,
fontSize: 13,
letterSpacing: -(13 * 0.04),
lineHeight: 22,
fontFamily: "Exo_500Medium",
fontWeight: "500",

backgroundColor: neutral17,
...baseCodeStyle,
marginVertical: 4,
paddingHorizontal: 4,
paddingVertical: 2,
borderRadius: 4,
alignSelf: "flex-start",
},
pre: {
fontSize: 13,
letterSpacing: -(13 * 0.04),
fontFamily: "Exo_500Medium",
fontWeight: "500",

backgroundColor: neutral17,
...baseBlockStyle,
...baseCodeStyle,
paddingHorizontal: 8,
borderRadius: 4,

marginTop: 0,
marginBottom: 16,
},

table: {
marginBottom: 16,
},
thead: {
...baseTableChildrenStyle,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
borderColor: neutral33,
borderLeftWidth: 1,
borderTopWidth: 1,
borderRightWidth: 1,
backgroundColor: neutral17,
},
th: {
borderColor: neutral33,
...baseTableChildrenStyle,
padding: 8,
},
tbody: {
...baseTableChildrenStyle,
borderBottomLeftRadius: 4,
borderBottomRightRadius: 4,
borderColor: neutral33,
borderLeftWidth: 1,
borderBottomWidth: 1,
borderRightWidth: 1,
},
tr: {
borderColor: neutral33,
...baseTableChildrenStyle,
},
td: {
...baseTableChildrenStyle,
borderTopWidth: 0.5,
borderColor: neutral33,
padding: 8,
},
};

0 comments on commit a58719b

Please sign in to comment.