release: portfolio feed item

src/hooks.client.ts

@@ -5,20 +5,19 @@ import type { HandleClientError } from '@sveltejs/kit';
 
 export const handleError: HandleClientError = async ({ error, event }) => {
     const { code, message, stack, error: _error } = transformError(error);
-    rollbar.configure({
-        payload: {
-            environment: config.env,
-            client: {
-                javascript: {
-                    source_map_enabled: true,
-                    guess_uncaught_frames: true
+    if (!message.includes('Not found') && !message.includes('not_found')) {
+        rollbar.configure({
+            payload: {
+                environment: config.env,
+                client: {
+                    javascript: {
+                        source_map_enabled: true,
+                        guess_uncaught_frames: true
+                    }
                 }
             }
-        }
-    }).error({
-        message: message,
-        stack: stack
-    }, { url: event.url });
+        }).error([message, stack], { url: event.url });
+    }
 
     return {
         code: code,
@@ -37,14 +36,15 @@ let transformError = (error: unknown) => {
             stack: _error?.networkError || _error?.graphQLErrors || _error
         }
     } else if (typeof error === "object") {
+        const _error = JSON.stringify(error as any);
         return {
             code: (error as any)?.code ?? '500',
-            message: (error as any)?.message || 'Client error',
-            error: error,
-            stack: error
+            message: (error as any)?.message ?? 'Client error',
+            error: _error,
+            stack: _error
         }
     } else {
-        const _error = JSON.parse(error as any);
+        const _error = JSON.stringify(error as any);
         return {
             code: '500',
             message: 'Client error',

src/hooks.server.ts

@@ -15,14 +15,13 @@ export const handleError: HandleServerError = ({ error, event }) => {
     event.request.headers.forEach((v, k) => (headers[k] = v));
     const { code, message, stack, error: _error } = transformError(error);
 
-    rollbar.configure({ accessToken: config.rollbarAccessToken }).error({
-        message: message,
-        stack: stack
-    }, {
-        headers: headers,
-        url: event.url,
-        method: event.request.method
-    });
+    if (!message.includes('Not found') && !message.includes('not_found')) {
+        rollbar.configure({ accessToken: config.rollbarAccessToken }).error([message, stack], {
+            headers: headers,
+            url: event.url,
+            method: event.request.method
+        });
+    }
     return {
         code: code,
         message: message,
@@ -40,14 +39,15 @@ let transformError = (error: unknown) => {
             stack: _error?.networkError || _error?.graphQLErrors || _error
         }
     } else if (typeof error === "object") {
+        const _error = JSON.stringify(error as any);
         return {
             code: (error as any)?.code ?? '500',
-            message: (error as any)?.message || 'Server error',
-            error: error,
-            stack: error
+            message: (error as any)?.message ?? 'Server error',
+            error: _error,
+            stack: _error
         }
     } else {
-        const _error = JSON.parse(error as any);
+        const _error = JSON.stringify(error as any);
         return {
             code: '500',
             message: 'Server error',

src/lib/components/Button/style.sass

@@ -10,7 +10,7 @@
         &.btn--secondary
             @apply py-1.75 px-3.75
 
-    &-medium
+    &--medium
         @apply py-1 px-4 text-cta rounded-xl
 
         &.btn--secondary

src/lib/components/Feed/Item/index.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Icon from '$components/Icons/index.svelte';
+	import TextParagraph from '$components/TextParagraph/index.svelte';
+
+	import { ChatBubbleLeftEllipsis, HandThumbUp } from '$components/Icons';
+	import { timeFormat, extendedTimeFormat } from '$components/DateManager';
+	import { formatNumber } from '$components/NumbersManager';
+	import type { ParsedMessage } from '$components/BodyParser';
+
+	export let message: ParsedMessage;
+
+	let className: string = '';
+	export { className as class };
+</script>
+
+<template lang="pug" src="./template.pug">
+
+</template>

src/lib/components/Feed/Item/template.pug

@@ -0,0 +1,27 @@
+a(href="/c/{message.communitySlug}/{message.messageSlug}" class!="transition-colors text-t1 hover:text-accent1-default block {className}")
+    article(class="flex items-center gap-4")
+        .feed-icon(class="relative block w-32 h-24 xs:w-24 border border-solid border-l4 rounded-xl bg-l2")
+            img(class="relative block w-full h-full object-center rounded-xl object-cover" alt="{message.title}" src="{message.cover || '/default-cover.png'}")
+        .feed-content(class="flex items-start justify-center flex-col")
+            TextParagraph(
+                element="h2" 
+                textColor="text-inherit" 
+                class="!font-bold block relative w-full whitespace-nowrap overflow-hidden text-ellipsis"
+            ) {message.title}
+            +if('message.subtitle')
+                TextParagraph(
+                    textColor="text-t2" 
+                    class="block relative w-full whitespace-nowrap overflow-hidden text-ellipsis xs:hidden"
+                ) {message.subtitle}
+            TextParagraph(textColor="text-t3" class="flex gap-2")
+                time(
+                    datetime="{timeFormat(message.createdAt, 'YYYY-MM-DD')}"
+                    title="{extendedTimeFormat(message.createdAt)}"
+                ) {timeFormat(message.createdAt)}
+                span(class="opacity-50 xs:hidden") • 
+                span(class="inline-flex items-center gap-1 xs:hidden")
+                    Icon(icon="{HandThumbUp}" width="{20}" height="{20}" colorInherit)
+                    span {formatNumber(message.votesCount.up - message.votesCount.down, '0,0a')}
+                span(class="inline-flex items-center gap-1 xs:hidden") 
+                    Icon(icon="{ChatBubbleLeftEllipsis}" width="{20}" height="{20}" colorInherit)
+                    span {formatNumber(message.allReplies.totalCount, '0,0a')}

src/lib/components/Feed/PortfolioItem/index.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Icon from '$components/Icons/index.svelte';
+
+	import Hashtag from '$components/Hashtag/index.svelte';
+	import TextParagraph from '$components/TextParagraph/index.svelte';
+
+	import { ChatBubbleLeftEllipsis, HandThumbUp } from '$components/Icons';
+	import { timeFormat, extendedTimeFormat } from '$components/DateManager';
+	import { formatNumber } from '$components/NumbersManager';
+	import type { ParsedMessage } from '$components/BodyParser';
+
+	export let message: ParsedMessage;
+
+	let className: string = '';
+	export { className as class };
+</script>
+
+<template lang="pug" src="./template.pug">
+
+</template>

src/lib/components/Feed/PortfolioItem/template.pug

@@ -0,0 +1,11 @@
+a(href="/c/{message.communitySlug}/{message.messageSlug}" class!="transition-colors text-t1 hover:text-accent1-default block {className}")
+    article(class="relative flex items-start gap-4 flex-col p-5.75 border border-solid border-l4 rounded-xl h-96 xs:p-3.75 xs:h-80")
+        img(class="absolute block w-full h-full left-0 top-0 object-center rounded-xl object-cover" alt="{message.title}" src="{message.cover || '/default-cover.png'}")
+        +if('message.hashtags && message.hashtags.length > 0')
+            ul.feed-body-tags(class="relative z-1 flex items-start gap-3 flex-wrap w-full")
+                +each('message.hashtags as tag')
+                    Hashtag(tag="{'#'}{tag}" disabled)
+        .feed-body(class="flex flex-col gap-4 xs:gap-2 justify-end relative z-1 flex-grow")
+            h2(class="relative w-full text-h2-l xs:text-h2-s font-satoshi text-inherit block whitespace-nowrap overflow-hidden text-ellipsis") {message.title}
+            +if('message.subtitle')
+                TextParagraph {message.subtitle}

src/lib/components/Feed/index.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Parser from '$components/BodyParser';
+
+	import DefaultFeedItem from '$components/Feed/Item/index.svelte';
+	import PortfolioFeedItem from '$components/Feed/PortfolioItem/index.svelte';
+
+	import type {
+		Message,
+		PostedMessagesConnectionEdge,
+		CommunityPostedMessagesConnectionEdge,
+		PageInfo
+	} from '$lib/types/api';
+	import Button from '$components/Button/index.svelte';
+
+	type FeedType = 'default' | 'portfolio';
+
+	export let feedType: FeedType = 'default';
+
+	export let edges: PostedMessagesConnectionEdge[] | CommunityPostedMessagesConnectionEdge[];
+	export let totalCount: number;
+	export let pageInfo: PageInfo;
+	export let isRefetching: boolean;
+	export let loadMore: () => void;
+
+	let parseMessage = (message: Message, category: string) => {
+		return Parser.parseViaCategory(message, category);
+	};
+</script>
+
+<template lang="pug" src="./template.pug">
+
+</template>

src/lib/components/Feed/template.pug

@@ -0,0 +1,24 @@
++if('totalCount > 0')
+    .feed-articles(class="relative block w-full")
+        +each('edges as messageNode, index (messageNode.node.id)')
+            +if("feedType === 'default'")
+                DefaultFeedItem(
+                    class="{index === 0 ? '' : 'mt-8 xs:mt-4'}"
+                    message="{parseMessage(messageNode.node)}"
+                )
+                +else("feedType === 'portfolio'")
+                    PortfolioFeedItem(
+                        class="{index === 0 ? '' : 'mt-8 xs:mt-4'}"
+                        message="{parseMessage(messageNode.node)}"
+                    )
+    +if('pageInfo && pageInfo.hasNextPage')
+        .btn-wrapper(class="flex justify-center w-full py-3")
+            Button(
+                label="Load more"
+                class="mobile:!w-full"
+                size="medium"
+                disabled="{isRefetching}"
+                onClick!="{() => loadMore(pageInfo.endCursor)}"
+            )
+    +else()
+        p(class="text-paragraph-l text-t3 w-full text-center") No articles found.

src/lib/components/Hashtag/index.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let element: string = 'li';
+
+	export let size: 'medium' | 'small' = 'medium';
+
+	export let tag: string;
+	export let onClick: () => void;
+
+	export let disabled: boolean = false;
+
+	let className: string = '';
+	export { className as class };
+
+	$: sizeClass = `tag--${size}`;
+	$: disabledClass = disabled ? 'tag__disabled' : '';
+
+	$: classNames = ['tag', sizeClass, disabledClass, className].join(' ');
+</script>
+
+<svelte:element this={element} class={classNames} on:click={onClick}>
+	{tag}
+</svelte:element>
+
+<style lang="sass" src="./style.sass">
+
+</style>

src/lib/components/Hashtag/style.sass

@@ -0,0 +1,20 @@
+.tag
+    @apply inline-flex relative justify-center rounded-full bg-l2 shadow-tag text-t3 transition-all cursor-pointer
+    @apply before:content-[''] before:absolute before:border before:border-solid before:border-l4 before:w-full before:h-full before:rounded-full before:left-0 before:top-0
+
+    &--medium
+        @apply text-cta px-3
+
+    &--small
+        @apply text-caption font-bold px-2 py-1
+
+    &:not(.tag__disabled)
+        &:hover
+            @apply bg-l3 text-t1 before:border-l5
+
+        &:focus,
+        &.active
+            @apply shadow-tag-active text-t1 before:border-accent1-default
+
+    &.tag__disabled
+        @apply shadow-none cursor-default

src/lib/components/TextParagraph/index.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let element: string = 'p';
+	export let responsive: boolean = true;
+	export let textColor: string = 'text-t1';
+
+	let className: string = '';
+	export { className as class };
+
+	$: classNames = [
+		'text-paragraph-l',
+		textColor,
+		responsive ? 'xs:text-paragraph-s' : '',
+		className
+	].join(' ');
+</script>
+
+<svelte:element this={element} class={classNames}>
+	<slot />
+</svelte:element>

src/lib/styles/theme.scss

@@ -50,4 +50,8 @@
     .font-inherit {
         font: inherit;
     }
+
+    .feed-content {
+        max-width: calc(100% - #{theme('spacing.40')});
+    }
 }

src/routes/(pages)/c/+page.svelte

@@ -16,6 +16,9 @@
 	import MetaTags from '$components/MetaTags/index.svelte';
 	import Icon from '$components/Icons/index.svelte';
 
+	import DefaultFeedItem from '$components/Feed/Item/index.svelte';
+	import Feed from '$components/Feed/index.svelte';
+
 	import { timeFormat, extendedTimeFormat } from '$components/DateManager';
 	import { formatNumber } from '$components/NumbersManager';
 	import { parseQueryFilter } from './util';
@@ -93,7 +96,3 @@
 <template lang="pug" src="./template.pug">
 
 </template>
-
-<style lang="sass" src="./style.sass">
-
-</style>

src/routes/(pages)/c/[slug]/+page.svelte

@@ -13,15 +13,19 @@
 		UserGroup
 	} from '$components/Icons';
 	import MetaTags from '$components/MetaTags/index.svelte';
+	import Hashtag from '$components/Hashtag/index.svelte';
 	import Icon from '$components/Icons/index.svelte';
 
+	import DefaultFeedItem from '$components/Feed/Item/index.svelte';
+	import Feed from '$components/Feed/index.svelte';
+
 	import { timeFormat, extendedTimeFormat } from '$components/DateManager';
 	import { formatNumber } from '$components/NumbersManager';
 	import { routes } from '$lib/config';
 	import { parseQueryFilter } from '../util';
 	import { parseCommunityCoverImage, sanitizeHtml } from '$lib/utils';
 
-	import type { Community, Hashtag, HashtagsConnectionEdge, Message } from '$lib/types/api';
+	import type { Community, Hashtag as HashtagType, HashtagsConnectionEdge, Message } from '$lib/types/api';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
@@ -62,12 +66,12 @@
 
 	let sortHashtags = (s: HashtagsConnectionEdge[]) => {
 		let values = s
-			.filter((a) => (a.node as Hashtag).postedMessagesTotalCount > 1)
+			.filter((a) => (a.node as HashtagType).postedMessagesTotalCount > 1)
 			.slice(0)
 			.sort(
 				(a, b) =>
-					(b.node as Hashtag).postedMessagesTotalCount -
-					(a.node as Hashtag).postedMessagesTotalCount
+					(b.node as HashtagType).postedMessagesTotalCount -
+					(a.node as HashtagType).postedMessagesTotalCount
 			);
 
 		return values;
@@ -117,7 +121,3 @@
 <template lang="pug" src="./template.pug">
 
 </template>
-
-<style lang="sass" src="../style.sass">
-
-</style>