refactor

ui/src/components/RenderProps/ListSearchResults/index.tsx

@@ -6,21 +6,17 @@ import { ListSearchResultsProps } from "./utils/types";
 import List from "components/RenderProps/List";
 import { API_ERROR, API_NO_DATA } from "data/constants";
 import Text from "components/General/Text/Text";
-import { Typography } from "antd";
 import { filteredNews, filteredResource } from "./utils/helper";
 import { ReactElement } from "react";
 import { QUERY_KEY_NEWS } from "pages/Newsfeed/utils/constants";
 import useParamsValue from "hooks/useParamsValue";
 
-const { Title } = Typography;
-
 const ListSearchResults = <T,>({
 	items,
 	resourceName,
 	itemComponent,
 	isLoading,
 	isError,
-	source = "",
 }: ListSearchResultsProps<T>): ReactElement => {
 	const { searchParams, updateParamsValue } = useParamsValue({});
 
@@ -65,9 +61,6 @@ const ListSearchResults = <T,>({
 				itemComponent={itemComponent}
 				isLoading={isLoading}
 			/>
-			<Title level={5} onClick={() => window.open(source, "_blank")}>
-				{source && `Source: ${source}`}
-			</Title>
 		</div>
 	);
 };

ui/src/components/RenderProps/ListSearchResults/utils/types.ts

@@ -6,7 +6,6 @@ import {
 interface ListSearchResultsProps<T> extends ListProps<T> {
 	resourceName: string;
 	isError: boolean;
-	source?: string;
 }
 
 export type { ListSearchResultsProps, ListItemProps };

ui/src/data/featureData.ts

@@ -26,7 +26,8 @@ const LIBRARY_URLS: LibraryList = {
 interface Feature {
 	key: string;
 	name: string;
-	description: string;
+	shortDescription: string;
+	fullDescription: string;
 	link: string;
 	library: { name: string; url: string }[];
 }
@@ -35,56 +36,71 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.newsfeed.id,
 		name: routesById.newsfeed.title,
-		description: routesById.newsfeed.description,
+		shortDescription: routesById.newsfeed.description,
+		fullDescription:
+			"Dive into the digital developer universe with our Newsfeed feature at BinaryTree. Get your daily dose of developer news, hot off the press, tailored for you. Whether you are a coding maestro, a tech enthusiast, or a curious learner, stay ahead of the curve with articles, tutorials, and updates that keep you on the cutting edge of the programming landscape. We serve up bite-sized pieces of knowledge that fit your busy schedule. Say goodbye to endless scrolling and hello to targeted, informative content.",
 		link: routesById.newsfeed.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
 	{
 		key: routesById.colorpicker.id,
 		name: routesById.colorpicker.title,
-		description: routesById.colorpicker.description,
+		shortDescription: routesById.colorpicker.description,
+		fullDescription:
+			"Searching for the ideal color palette to make your website truly stand out? We've got you covered. Our Color Picker is your trusty palette, offering HEX, RGB, RGBA, HSL, HSLA formats and CSS variables. Time is money, and we know you've got code to conquer. That's why our Color Picker is lightning-fast and incredibly user-friendly. No more tiresome googling for color codes – it's all right here. Unleash your inner artist and paint your code canvas without any hitch.",
 		link: routesById.colorpicker.path,
 		library: [{ name: "tiny-color-2", url: LIBRARY_URLS["tiny-color-2"] }],
 	},
 	{
 		key: routesById.shadesandtints.id,
 		name: routesById.shadesandtints.title,
-		description: routesById.shadesandtints.description,
+		shortDescription: routesById.shadesandtints.description,
+		fullDescription:
+			"Need that perfect gradient for your project? Adjust the shade percentage and conjure up color variations – because creativity should never be confined. Our Shades & Tints tool is designed to work as swiftly as your imagination, ensuring you spend less time tinkering with color shades and more time bringing your vision to life. Moreover, we've significantly enhanced your convenience through our Output Separator feature. Now, you can effortlessly obtain separate results using new lines, line commas, line spaces, and commas with strings.",
 		link: routesById.shadesandtints.path,
 		library: [{ name: "values.js", url: LIBRARY_URLS["values.js"] }],
 	},
 	{
 		key: routesById.borderradius.id,
 		name: routesById.borderradius.title,
-		description: routesById.borderradius.description,
+		shortDescription: routesById.borderradius.description,
+		fullDescription:
+			"Round or square? Dotted or dashed? Vivid or monochrome? Customize your border styles and add a splash of color to make your website's edges as unique as your imagination. Generate border codes that match your creative vision with ease. It's the ultimate playground for crafting stylish CSS borders that elevate your web creations from mundane to magnificent.",
 		link: routesById.borderradius.path,
 		library: [{ name: "faker.js", url: LIBRARY_URLS["faker-js"] }],
 	},
 	// {
 	// 	key: routesById.boxshadow.id,
 	// 	name: routesById.boxshadow.title,
-	// 	description: routesById.boxshadow.description,
+	// 	shortDescription: routesById.boxshadow.description,
+	// fullDescription: "",
 	// 	link: routesById.boxshadow.path,
 	// 	library: [{ name: "faker.js", url: LIBRARY_URLS["faker-js"] }],
 	// },
 	{
 		key: routesById.base64.id,
 		name: routesById.base64.title,
-		description: routesById.base64.description,
+		shortDescription: routesById.base64.description,
+		fullDescription:
+			"Unlock the power of our Base64 tool, your gateway to effortlessly converting text to Base64 and vice versa. This invaluable resource is your ally in debugging and testing the decoding process, offering a deeper insight into the mechanics of Base64 decryption. It empowers you to decode with ease, discover the process, and enhance your understanding of Base64 decoding. Dive into a world of precision and clarity with this essential utility.",
 		link: routesById.base64.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
 	{
 		key: routesById.pixelconverter.id,
 		name: routesById.pixelconverter.title,
-		description: routesById.pixelconverter.description,
+		shortDescription: routesById.pixelconverter.description,
+		fullDescription:
+			"Hasta la vista to tedious calculations. Let BinaryTree do the heavy lifting while you focus on making your design shine. Our Pixel Converter is your trusty companion for pixel-perfect precision that effortlessly transforms pixels into REM units and unveils the secrets of the base font size.  So, no more pixel-related headaches – it's all about easy conversions.",
 		link: routesById.pixelconverter.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
 	{
 		key: routesById.jsontotypescript.id,
 		name: routesById.jsontotypescript.title,
-		description: routesById.jsontotypescript.description,
+		shortDescription: routesById.jsontotypescript.description,
+		fullDescription:
+			"With our JSON to TypeScript converter, your development journey just got a turbo boost. Whether you're a code warrior on a mission or a developer with a passion for efficiency, our JSON to TypeScript converter is your secret weapon.",
 		link: routesById.jsontotypescript.path,
 		library: [
 			{
@@ -97,7 +113,8 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.data.id,
 		name: routesById.data.title,
-		description: routesById.data.description,
+		shortDescription: routesById.data.description,
+		fullDescription: "",
 		link: routesById.data.path,
 		library: [
 			{
@@ -113,7 +130,8 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.image.id,
 		name: routesById.image.title,
-		description: routesById.image.description,
+		shortDescription: routesById.image.description,
+		fullDescription: "",
 		link: routesById.image.path,
 		library: [
 			{
@@ -133,7 +151,8 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.avatar.id,
 		name: routesById.avatar.title,
-		description: routesById.avatar.description,
+		shortDescription: routesById.avatar.description,
+		fullDescription: "",
 		link: routesById.avatar.path,
 		library: [
 			{
@@ -153,15 +172,17 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.qrcode.id,
 		name: routesById.qrcode.title,
-		description: routesById.qrcode.description,
+		shortDescription: routesById.qrcode.description,
+		fullDescription: "",
 		link: routesById.qrcode.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
 
 	{
 		key: routesById.editor.id,
 		name: routesById.editor.title,
-		description: routesById.editor.description,
+		shortDescription: routesById.editor.description,
+		fullDescription: "",
 		link: routesById.editor.path,
 		library: [
 			{
@@ -173,7 +194,8 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.table.id,
 		name: routesById.table.title,
-		description: routesById.table.description,
+		shortDescription: routesById.table.description,
+		fullDescription: "",
 		link: routesById.table.path,
 		library: [
 			{
@@ -185,7 +207,8 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.tableofcontent.id,
 		name: routesById.tableofcontent.title,
-		description: routesById.tableofcontent.description,
+		shortDescription: routesById.tableofcontent.description,
+		fullDescription: "",
 		link: routesById.tableofcontent.path,
 		library: [
 			{
@@ -197,7 +220,8 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.texteditor.id,
 		name: routesById.texteditor.title,
-		description: routesById.texteditor.description,
+		shortDescription: routesById.texteditor.description,
+		fullDescription: "",
 		link: routesById.texteditor.path,
 		library: [
 			{
@@ -209,7 +233,8 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.diagramming.id,
 		name: routesById.diagramming.title,
-		description: routesById.diagramming.description,
+		shortDescription: routesById.diagramming.description,
+		fullDescription: "",
 		link: routesById.diagramming.path,
 		library: [
 			{
@@ -221,42 +246,48 @@ export const FEATURE_DATA: Feature[] = [
 	{
 		key: routesById.svgformatter.id,
 		name: routesById.svgformatter.title,
-		description: routesById.svgformatter.description,
+		shortDescription: routesById.svgformatter.description,
+		fullDescription: "",
 		link: routesById.svgformatter.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
 	{
 		key: routesById.sorting.id,
 		name: routesById.sorting.title,
-		description: routesById.sorting.description,
+		shortDescription: routesById.sorting.description,
+		fullDescription: "",
 		link: routesById.sorting.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
 	{
 		key: routesById.diffchecker.id,
 		name: routesById.diffchecker.title,
-		description: routesById.diffchecker.description,
+		shortDescription: routesById.diffchecker.description,
+		fullDescription: "",
 		link: routesById.diffchecker.path,
 		library: [{ name: "diff", url: LIBRARY_URLS["diff"] }],
 	},
 	{
 		key: routesById.mimetype.id,
 		name: routesById.mimetype.title,
-		description: routesById.mimetype.description,
+		shortDescription: routesById.mimetype.description,
+		fullDescription: "",
 		link: routesById.mimetype.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
 	{
 		key: routesById.npmpackages.id,
 		name: routesById.npmpackages.title,
-		description: routesById.npmpackages.description,
+		shortDescription: routesById.npmpackages.description,
+		fullDescription: "",
 		link: routesById.npmpackages.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},
 	{
 		key: routesById.blog.id,
 		name: "Resource",
-		description: "List of things",
+		shortDescription: "List of things",
+		fullDescription: "",
 		link: routesById.blog.path,
 		library: [{ name: "Vanilla JS", url: "" }],
 	},

ui/src/pages/About/About.module.scss

@@ -25,7 +25,7 @@
 						rgba(0, 0, 0, 0.2),
 						rgba(0, 0, 0, 0.1)
 					),
-					url("./src/assets/About/card_bg.jpg") no-repeat left / cover;
+					url("src/assets/About/card_bg.jpg") no-repeat left / cover;
 
 				object-fit: cover;
 				background-color: #9c9c9c98;

ui/src/pages/About/components/Features.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { List, Carousel, Card, Space } from "antd";
 import { Tag } from "antd";
-import { FEATURE_DATA } from "../../../data/featureData";
+import { FEATURE_DATA } from "data/featureData";
 import { openLink } from "utils/helper-functions/string";
 
 const Features: React.FC = () => {
@@ -44,7 +44,9 @@ const Features: React.FC = () => {
 							</Space>,
 						]}
 					>
-						{feature.description}
+						{feature.fullDescription.length > 0
+							? feature.fullDescription
+							: feature.shortDescription}
 						<br />
 						<br />
 					</Card>

ui/src/pages/Resource/TvSeries/index.tsx

@@ -13,7 +13,6 @@ const TvSeries: React.FC = () => {
 			itemComponent={Resource}
 			isLoading={isLoading}
 			isError={isError}
-			source="https://github.com/k4m4/movies-for-hackers"
 		/>
 	);
 };