diff --git a/components/ChannelReferenceRenderer.tsx b/components/ChannelReferenceRenderer.tsx new file mode 100644 index 0000000..372029f --- /dev/null +++ b/components/ChannelReferenceRenderer.tsx @@ -0,0 +1,17 @@ +export const ChannelReferenceRenderer = (props: { value: string }) => { + return ( + <> + {props.value.split(/(<#[A-Z0-9]+\|[A-Za-z0-9]+>)/).map((str) => { + const matches = str.match(/<#([A-Z0-9]+)\|([A-Za-z0-9]+)>/); + if (matches) { + return ( + + #{matches[2]} + + ); + } + return str; + })} + > + ); +}; diff --git a/pages/index.tsx b/pages/index.tsx index 60efe37..7b6ed07 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -7,38 +7,14 @@ import InviteForm from "../components/InviteForm"; import Members from "../components/Members"; import Feed from "../components/Feed"; import { getChannels } from "../data/channels"; -import emoji from "emoji-dictionary"; import ReactMarkdown from "react-markdown"; - -const slackMarkdownRenderer = (text: { value: string }) => { - const emojiText = text.value.replace(/:\w+:/gi, (name) => - emoji.getUnicode(name) - ); - - return ( - - {emojiText.split(/(<#[A-Z0-9]+\|[A-Za-z0-9]+>)/).map((str) => { - const matches = str.match(/<#([A-Z0-9]+)\|([A-Za-z0-9]+)>/); - if (matches) { - return ( - - #{matches[2]} - - ); - } - return str; - })} - - ); -}; +import { ChannelReferenceRenderer } from "../components/ChannelReferenceRenderer"; export async function getStaticProps() { const allChannels = await getChannels(); const channels = allChannels .sort((a, b) => b.num_members - a.num_members) - .sort((a, b) => b.unique_members_today - a.unique_members_today) - .slice(0, 10); - + .sort((a, b) => b.unique_members_today - a.unique_members_today); return { props: { channels: channels, @@ -141,38 +117,51 @@ const IndexContent = (props: IndexProps) => (
| + + + {channel.num_members} jäsentä + + | +
+
+ |
+
-
| - - - {channel.num_members} jäsentä - - | -
-
- |
-