feat: add multi-authors support (#28)

* feat: add multi-authors support

* i have dumb (forgot to remove dev things before commiting)

* feat: add multi-author support to news page

* fix: static video link

package.json

@@ -50,6 +50,7 @@
  "date-fns": "^2.30.0",
  "dompurify": "^3.0.5",
  "gray-matter": "^4.0.3",
+ "js-video-url-parser": "^0.5.1",
  "lodash": "^4.17.21",
  "marked": "^5.1.1",
  "react": "^18.2.0",
@@ -62,4 +63,4 @@
  "vite-plugin-top-level-await": "^1.3.1",
  "zustand": "^4.3.9"
  }
-}
+}

src/components/NewsSection/NewsAuthor/NewsAuthor.module.css

@@ -0,0 +1,27 @@
+
+.author {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+}
+
+.author .avatar {
+ height: 48px;
+ aspect-ratio: 1;
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.author .authorInformation {
+ color: #5A5A5A;
+}
+
+.author .authorInformation .authorName {
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.author .authorInformation .authorRole {
+ font-size: 12px;
+ font-weight: 400;
+}

src/components/NewsSection/NewsAuthor/index.tsx

@@ -0,0 +1,27 @@
+import styles from "./NewsAuthor.module.css";
+import UnknownUserIcon from "@app/assets/Icons/UnknownUser.svg";
+import { AuthorData } from "@app/hooks/useNewsAuthor";
+import { newsBaseURL } from "@app/utils/consts";
+import { Img } from "react-image";
+
+interface Props {
+ author: AuthorData
+}
+
+const NewsAuthor: React.FC<Props> = ({author}: Props) => {
+ return <div className={styles.author}>
+ <div className={styles.avatar}>
+ <Img
+ height={48}
+ alt={`${author.displayName}'s avatar`}
+ src={[`${newsBaseURL}/images/avatars/${author.avatar}`, UnknownUserIcon]}
+ />
+ </div>
+ <div className={styles.authorInformation}>
+ <div className={styles.authorName}>{author.displayName}</div>
+ <div className={styles.authorRole}>{author.role}</div>
+ </div>
+ </div>;
+};
+
+export default NewsAuthor;

src/components/NewsSection/NewsEntry/index.tsx

@@ -6,15 +6,23 @@ import { Img } from "react-image";
 import UnknownUserIcon from "@app/assets/Icons/UnknownUser.svg";
 import { TimeIcon } from "@app/assets/Icons";
 import { intlFormatDistance } from "date-fns";
+import { newsBaseURL } from "@app/utils/consts";
+import { useNewsAuthorSettings } from "@app/hooks/useNewsAuthor";
+import { useQueries } from "@tanstack/react-query";
 
 interface Props {
  article: ArticleData;
 }
 
 const NewsEntry: React.FC<Props> = ({ article }: Props) => {
+
+ const authors = useQueries({
+ queries: article?.authors?.map(authorId => useNewsAuthorSettings(authorId)) || []
+ });
+
  return <Link to={`/news/${article.md}`} key={article.md} style={{ width: "100%" }}>
  <div className={styles.container}>
- <img className={styles.thumbnail} src={`https://raw.githubusercontent.com/YARC-Official/News/master/images/thumbs/${article.thumb}`} />
+ <img className={styles.thumbnail} src={`${newsBaseURL}/images/thumbs/${article.thumb}`} />
  <div className={styles.main}>
  <div className={styles.top_container}>
  <div className={styles.top}>
@@ -31,14 +39,24 @@ const NewsEntry: React.FC<Props> = ({ article }: Props) => {
  {article.title}
  </div>
  <div className={styles.bottom_container}>
- <Img
- height={24}
- alt={`${article.author}'s avatar`}
- src={[`https://raw.githubusercontent.com/YARC-Official/News/master/images/avatars/${article.avatar}`, UnknownUserIcon]}
- style={{ borderRadius: "50%" }}
- />
+ {
+ authors
+ .filter(({data}) => data?.avatar)
+ .map(({data}) => (<Img
+ key={`${data?.avatar}`}
+ height={24}
+ alt={`${data?.displayName}'s avatar`}
+ src={[`${newsBaseURL}/images/avatars/${data?.avatar}`, UnknownUserIcon]}
+ style={{ borderRadius: "50%" }}
+ />))
+ }
  <div>
- By: <span className={styles.author}>{article.author}</span>
+ By: <span className={styles.author}>{
+ authors
+ .map(({data}) => data?.displayName)
+ .filter(authorName => authorName)
+ .join(", ")
+ }</span>
  </div>
  </div>
  </div>

src/components/NewsSection/index.tsx

@@ -25,7 +25,7 @@ const NewsSection: React.FC<Props> = ({ categoryFilter, startingEntries }: Props
  </div>
  </div>
  {
- Array.from(data.articles).filter(i => {
+ data.articles.filter(i => {
  // Filter out everything that doesn't meet the filter
  if (!categoryFilter) return true;
  return i.category === categoryFilter;

src/hooks/useNews.ts

@@ -1,12 +1,12 @@
+import { newsBaseURL } from "@app/utils/consts";
 import { useQuery } from "@tanstack/react-query";
 
 export interface ArticleData {
  md: string,
  type: string,
  title: string,
  thumb: string,
- author: string,
- avatar: string,
+ authors: string[],
  release: string,
  category: string
 }
@@ -19,7 +19,7 @@ export const useNews = () => {
  return useQuery({
  queryKey: ["NewsIndex"],
  queryFn: async (): Promise<NewsData> => await fetch(
- "https://raw.githubusercontent.com/YARC-Official/News/master/index.json")
+ `${newsBaseURL}/index.json`)
  .then(res => res.json())
  });
 };

src/hooks/useNewsArticle.ts

@@ -1,11 +1,21 @@
+import { newsBaseURL } from "@app/utils/consts";
 import { useQuery } from "@tanstack/react-query";
 
+export interface Article {
+ type: string,
+ title: string,
+ banner?: string,
+ authors: string[],
+ release?: string,
+ video?: string
+}
+
 export const useNewsArticle = (md: string) => {
  return useQuery({
  queryKey: ["NewsArticle", md],
  cacheTime: 60 * 60 * 1000,
  queryFn: async () => await fetch(
- `https://raw.githubusercontent.com/YARC-Official/News/master/articles/${md}.md`)
+ `${newsBaseURL}/articles/${md}.md`)
  .then(res => res.text())
  });
 };

src/hooks/useNewsAuthor.ts

@@ -0,0 +1,21 @@
+import { newsBaseURL } from "@app/utils/consts";
+import { useQuery } from "@tanstack/react-query";
+
+export interface AuthorData {
+ displayName: string,
+ avatar?: string,
+ role?: string,
+}
+
+export const useNewsAuthorSettings = (authorId: string) => { 
+ return {
+ queryKey: ["NewsAuthor", authorId],
+ queryFn: async (): Promise<AuthorData> => await fetch(
+ `${newsBaseURL}/authors/${authorId}.json`)
+ .then(res => res.json())
+ };
+};
+
+export const useNewsAuthor = (authorId: string) => {
+ return useQuery(useNewsAuthorSettings(authorId));
+};

src/routes/NewsPage/NewsPage.module.css

@@ -56,35 +56,16 @@
 }
 
 .info {
- display: flex;
- align-items: center;
+ display: grid;
+ grid-template-columns: auto auto;
+ gap: 25px;
 }
 
-.author {
+.authors {
  display: flex;
- gap: 10px;
- align-items: center;
-}
-
-.author .avatar {
- height: 48px;
- aspect-ratio: 1;
- border-radius: 50%;
- overflow: hidden;
-}
-
-.author .authorInformation {
- color: #5A5A5A;
-}
-
-.author .authorInformation .authorName {
- font-size: 16px;
- font-weight: 600;
-}
-
-.author .authorInformation .authorRole {
- font-size: 12px;
- font-weight: 400;
+ max-width: 90%;
+ gap: 25px;
+ flex-wrap: wrap;
 }
 
 .releaseDate {
@@ -95,6 +76,8 @@
  display: flex;
  align-items: center;
  gap: 10px;
+ flex-shrink: 0;
+ height: 48px;
 }
 
 .video_container {
@@ -106,6 +89,8 @@
 .video {
  border: none;
  border-radius: 8px;
- aspect-ratio: calc(16 / 9);
+ aspect-ratio: 16 / 9;
  height: 50vh;
+ width: fit-content;
+ margin: 20px auto 10px;
 }