- {contributor.author_login ? getActivity(totalPrs, false) : "-"}
-
{/* Column Repositories */}
diff --git a/components/molecules/DevProfile/dev-profile.tsx b/components/molecules/DevProfile/dev-profile.tsx
index 2504e67577..30fe0a83c2 100644
--- a/components/molecules/DevProfile/dev-profile.tsx
+++ b/components/molecules/DevProfile/dev-profile.tsx
@@ -13,9 +13,9 @@ interface DevProfileProps {
}
const DevProfile = ({ username, hasBorder }: DevProfileProps) => {
return (
-
+
{/* Mobile */}
-
+
{
hasBorder={hasBorder}
avatarURL={getAvatarByUsername(username)}
/>
-
@@ -33,7 +33,7 @@ const DevProfile = ({ username, hasBorder }: DevProfileProps) => {
{username && username.length > 10 ? truncateString(username, 11) : username}
-
+
);
};
diff --git a/components/molecules/GenericBlogOpenGraphImg/generic-blog-open-graph-img.tsx b/components/molecules/GenericBlogOpenGraphImg/generic-blog-open-graph-img.tsx
new file mode 100644
index 0000000000..702e79e686
--- /dev/null
+++ b/components/molecules/GenericBlogOpenGraphImg/generic-blog-open-graph-img.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import InvalidImage from "img/icons/fallback-image-disabled-square.svg";
+
+interface GenericBlogOpenGraphImgProps {
+ blogLink: string;
+ className?: string;
+}
+
+const GenericBlogOpenGraphImg = ({ blogLink, className }: GenericBlogOpenGraphImgProps): JSX.Element => {
+ const [socialImage, setSocialImage] = useState("");
+ const [isValid, setIsValid] = useState(false);
+
+ useEffect(() => {
+ const fetchBlogOGImage = async () => {
+ const response = await fetch(`/api/fetchOGData/?url=${blogLink}`);
+ const data = await response.json();
+ return data;
+ };
+
+ fetchBlogOGImage().then(({ response }) => {
+ if (response) {
+ setSocialImage(response?.image?.url || response?.image?.url[response?.image?.url.length - 1]);
+ setIsValid(true);
+ } else {
+ setSocialImage("");
+ setIsValid(false);
+ }
+ });
+ }, [blogLink]);
+
+ return (
+ <>
+ {socialImage && (
+
+ 
+
+ )}
+
+ );
+};
+
+export default GenericBlogOpenGraphImg;
diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
index 916d19425c..90e89d907e 100644
--- a/components/molecules/HighlightInput/highlight-input-form.tsx
+++ b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -39,14 +39,16 @@ import { TypeWriterTextArea } from "components/atoms/TypeWriterTextArea/type-wri
import { fetchGithubIssueInfo } from "lib/hooks/fetchGithubIssueInfo";
import generateIssueHighlightSummary from "lib/utils/generate-issue-highlight-summary";
import { fetchDevToBlogInfo } from "lib/hooks/fetchDevToBlogInfo";
-import { getBlogDetails, isValidBlogUrl } from "lib/utils/dev-to";
-import generateBlogHighlightSummary from "lib/utils/generate-blog-highlight-summary";
+import { getDevToBlogDetails, isValidDevToBlogUrl } from "lib/utils/dev-to";
+import generateDevToBlogHighlightSummary from "lib/utils/generate-dev-to-blog-highlight-summary";
import Search from "components/atoms/Search/search";
import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
+import { isValidUrl } from "lib/utils/urls";
import { Calendar } from "../Calendar/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover";
import GhOpenGraphImg from "../GhOpenGraphImg/gh-open-graph-img";
import DevToSocialImg from "../DevToSocialImage/dev-to-social-img";
+import GenericBlogOpenGraphImg from "../GenericBlogOpenGraphImg/generic-blog-open-graph-img";
import CardRepoList, { RepoList } from "../CardRepoList/card-repo-list";
import {
Dialog,
@@ -163,16 +165,6 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
}
};
- const checkIfHighlightLinkIsValid = (link: string) => {
- if (!link) return setError("");
- if (isValidPullRequestUrl(link) || isValidIssueUrl(link) || isValidBlogUrl(link)) {
- setIsHighlightURLValid(true);
- setError("");
- } else {
- setIsHighlightURLValid(false);
- setError("Please provide a valid pull request, issue or dev.to blog link!");
- }
- };
useEffect(() => {
// disable scroll when form is open
if (isFormOpenMobile) {
@@ -342,6 +334,22 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
const newTaggedRepoList = [...taggedRepoList, newRepo];
setTaggedRepoList(newTaggedRepoList);
}
+
+ (() => {
+ if (!highlightLink) return setError("");
+ if (
+ isValidPullRequestUrl(highlightLink) ||
+ isValidIssueUrl(highlightLink) ||
+ isValidDevToBlogUrl(highlightLink) ||
+ isValidUrl(highlightLink)
+ ) {
+ setIsHighlightURLValid(true);
+ setError("");
+ } else {
+ setIsHighlightURLValid(false);
+ setError("Please provide a valid pull request, issue or dev.to blog link!");
+ }
+ })();
}, [highlightLink]);
const handleTaggedRepoAdd = async (repoFullName: string) => {
@@ -384,15 +392,21 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
};
const handleGenerateHighlightSummary = async () => {
- if (
- !highlightLink ||
- (!isValidPullRequestUrl(highlightLink) && !isValidIssueUrl(highlightLink) && !isValidBlogUrl(highlightLink))
- ) {
+ if (!highlightLink) {
setError("Please provide a valid pull request, issue or dev.to blog link!");
return;
}
setIsHighlightURLValid(true);
+ if (highlightLink && (!highlightLink.includes("github.com") || !highlightLink.includes("dev.to"))) {
+ toast({
+ description: "Auto-Summarize not supported for current link!",
+ title: "Oops!",
+ variant: "warning",
+ });
+ return;
+ }
+
setIsSummaryButtonDisabled(true);
let summary: string | null;
@@ -404,8 +418,8 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
const issueComments = await getGithubIssueComments(highlightLink);
summary = await generateIssueHighlightSummary(issueTitle, issueBody, issueComments);
} else {
- const { title: blogTitle, markdown: blogMarkdown } = await getBlogDetails(highlightLink);
- summary = await generateBlogHighlightSummary(blogTitle, blogMarkdown);
+ const { title: blogTitle, markdown: blogMarkdown } = await getDevToBlogDetails(highlightLink);
+ summary = await generateDevToBlogHighlightSummary(blogTitle, blogMarkdown);
}
setIsSummaryButtonDisabled(false);
@@ -433,7 +447,12 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
const highlight = bodyText;
- if (isValidPullRequestUrl(highlightLink) || isValidIssueUrl(highlightLink) || isValidBlogUrl(highlightLink)) {
+ if (
+ isValidPullRequestUrl(highlightLink) ||
+ isValidIssueUrl(highlightLink) ||
+ isValidDevToBlogUrl(highlightLink) ||
+ isValidUrl(highlightLink)
+ ) {
setIsHighlightURLValid(true);
// generateApiPrUrl will return an object with repoName, orgName and issueId
// it can work with both issue and pull request links
@@ -648,19 +667,24 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
value={highlightLink}
handleChange={(value) => {
setHighlightLink(value);
- checkIfHighlightLinkIsValid(value);
}}
placeholder="Paste the URL to your PR, Issue, or Dev.to blog post."
/>