add projects

components/ButtonGrid.tsx

@@ -1,15 +1,35 @@
 import Button from "./Button";
 import styles from "styles/Button.module.sass";
-import { SocialButton } from "utils/types";
+import { ProjectButton, SocialButton } from "utils/types";
 import { CSSProperties } from "react";
 
 const ButtonGrid = ({
   Buttons,
   style,
 }: {
-  Buttons: SocialButton[];
+  Buttons: SocialButton[] | ProjectButton[];
   style?: CSSProperties;
 }) => {
+
+  if (Buttons[0].project) {
+    return (
+      <div className={styles.grid} style={style}>
+        {Buttons.map((button, index) => {
+          return (
+            <Button
+              id={button.id}
+              key={`${button.platform}-${index}`}
+              icon={button.icon}
+              platform={button.project}
+              username={button.platform}
+              url={button.url}
+            />
+          );
+        })}
+      </div>
+    )
+  }
+
   return (
     <div className={styles.grid} style={style}>
       {Buttons.map((button, index) => {

package.json

@@ -20,6 +20,7 @@
     "remark": "^14.0.2",
     "remark-html": "^15.0.1",
     "sass": "^1.53.0",
+    "swr": "^1.3.0",
     "use-lanyard": "^1.1.0"
   },
   "license": "MIT",

pages/index.tsx

@@ -2,27 +2,30 @@ import ButtonGrid from "components/ButtonGrid";
 import Lanyard from "components/Lanyard";
 import Navbar from "components/Navbar";
 import getProfiles from "utils/shared/profiles";
-import { getAllPostIDs, getPostData,getSortedPosts } from "utils/shared/posts";
+import getProjects from "utils/shared/projects";
+import { getAllPostIDs, getPostData, getSortedPosts } from "utils/shared/posts";
 import { SocialButton } from "utils/types";
 import styles from "styles/Index.module.sass";
-import Link from "components/Link";
-import Post from "components/Post";
-import PostGrid from "components/PostGrid";
+// import Link from "components/Link";
+// import Post from "components/Post";
+// import PostGrid from "components/PostGrid";
+import useSwr from 'swr';
 
 export async function getStaticProps() {
   const profiles = await getProfiles();
   const posts = await getSortedPosts();
-  
+  const projects = await getProjects("showcase-lio")
   return {
     props: {
       profiles,
-      posts
+      posts,
+      projects
     },
   };
 }
 
-const IndexPage = (props: { profiles: SocialButton[]; posts: Array<any> }) => {
-  // console.log(props.posts);
+const IndexPage = (props: { profiles: SocialButton[]; posts: Array<any>; projects: SocialButton[] }) => {
+  const showposts = false
   return (
     <>
       <div className={styles.center}>
@@ -32,13 +35,14 @@ const IndexPage = (props: { profiles: SocialButton[]; posts: Array<any> }) => {
           <ButtonGrid Buttons={props.profiles} />
         </div>
         <div>
-          <p>Posts</p>
-          <PostGrid posts={props.posts}/>
+          <p>Projects</p>
+          <ButtonGrid Buttons={props.projects} />
         </div>
+        {/* {showposts && (<div><p>Posts</p><PostGrid posts={props.posts} /></div>)} */}
       </div>
       <Lanyard />
     </>
   );
 };
 
-export default IndexPage;
+export default IndexPage

utils/shared/projects.ts

@@ -0,0 +1,16 @@
+import { ProjectButton } from "utils/types";
+
+export default async function getProjects(k): Promise<ProjectButton[]> {
+    const res = await fetch(`https://git.lio.cat/api/v1/repos/search?q=${k}&topic=true`)
+    const data = await res.json()
+
+    return data.data.map(data => {
+        return {
+            icon: "git-branch",
+            platform: (data.description === "" || data.description.length > 30) ? "git.lio.cat" : data.description,
+            project: data.full_name,
+            url: `https://git.lio.cat/${data.full_name}`,
+            updated: data.updated_at
+        }
+    }).sort((lhs, rhs) => { return lhs.updated < rhs.updated ? 1 : lhs.updated > rhs.updated ? -1 : 0; })
+}

utils/types.ts

@@ -1,11 +1,21 @@
 export type SocialButton = {
-  id: number;
+  id?: number;
   icon: Icon;
   platform: string;
   username: string;
+  project?: null;
   url?: string;
 };
 
+export type ProjectButton = {
+  id?: number;
+  icon: Icon;
+  project: string;
+  platform: string;
+  url?: string;
+};
+
+
 export type Icon =
   | "x"
   | "smile"