Stuff

components/repoCard.tsx

@@ -0,0 +1,19 @@
+import styled from "styled-components"
+
+const RepoCardCont = styled.div`
+	display: flex;
+
+	h3 a {
+		color: var(--fg);
+	}
+`
+
+const RepoCard = (props: any) => { // TODO: make schema
+	return (
+		<RepoCardCont key={props.id}>
+			<h3><a href={props.url} target="_blank">{props.name}</a></h3>
+		</RepoCardCont>
+	)
+}
+
+export default RepoCard 

graphql/apolloClient.tsx

@@ -0,0 +1,30 @@
+import { 
+	ApolloClient, 
+	InMemoryCache, 
+	createHttpLink
+} from "@apollo/client";
+
+import { setContext } from "@apollo/client/link/context";
+
+export async function createClient() {
+	const httpLink = createHttpLink({
+		uri: "https://api.github.com/graphql",
+	});
+
+	const authLink = setContext((_, { headers }) => {
+		return {
+			headers: {
+				...headers,
+				authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`, 
+			}
+		}
+	});
+
+	const client = new ApolloClient({
+		link: authLink.concat(httpLink),
+		cache: new InMemoryCache()
+	});
+
+	return client;
+}
+

graphql/queries/pinnedItems.graphql

@@ -0,0 +1,25 @@
+{
+  user(login: "E-Almqvist") {
+    pinnedItems(first: 6) {
+      totalCount
+      edges {
+        node {
+          ... on Repository {
+            id
+            name
+            createdAt
+            description
+            forkCount
+            licenseInfo {
+              id
+              nickname
+              url
+            }
+            stargazerCount
+            url
+          }
+        }
+      }
+    }
+  }
+}

package.json

@@ -9,25 +9,27 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@apollo/client": "^3.7.1",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "fontawesome": "^5.6.3",
     "fortawesome": "^0.0.1-security",
-    "next": "12.2.0",
+    "graphql": "^16.6.0",
+    "next": "13.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@types/node": "18.0.0",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "18.0.5",
-    "@types/styled-components": "^5.1.25",
-    "eslint": "8.19.0",
-    "eslint-config-next": "12.2.0",
-    "typescript": "4.7.4"
+    "@types/node": "18.11.7",
+    "@types/react": "18.0.24",
+    "@types/react-dom": "18.0.8",
+    "@types/styled-components": "^5.1.26",
+    "eslint": "8.26.0",
+    "eslint-config-next": "13.0.0",
+    "typescript": "4.8.4"
   }
 }

pages/_app.tsx

@@ -3,11 +3,12 @@ import type { AppProps } from "next/app"
 import type { ReactElement, ReactNode } from "react"
 import type { NextPage } from "next"
 
+// Font Awesome
 import "@fortawesome/fontawesome-svg-core/styles.css"; 
 import { config } from "@fortawesome/fontawesome-svg-core";
 config.autoAddCss = false; 
 
-export type NextPageWithLayout = NextPage & {
+export type NextPageWithLayout<T = {}> = NextPage<T> & {
 	getLayout?: (page: ReactElement) => ReactNode
 }
 

pages/projects.tsx

@@ -1,16 +1,17 @@
-import type {NextPageWithLayout} from './_app'
-import type { ReactElement } from 'react'
-import Layout from '../components/layout'
-import { Section } from './index'
-import Link from "next/link"
+import type {NextPageWithLayout} from "./_app"
+import type { ReactElement } from "react"
+import Layout from "../components/layout"
+import { Section } from "./index"
+// import Link from "next/link"
+// import RepoCard from "components/repoCard";
 
 const Page: NextPageWithLayout = () => {
 	return (
 		<>
 			<Section>
-				<h2>Page under development...</h2>
-				<p>While you wait, why not check out my <a href="https://github.com/E-Almqvist">GitHub</a>? Or perhaps my very own <a href="https://git.wych.dev">git-server</a>?</p>
-				<p>Or you could also <Link href="/">go back</Link> to the home page.</p>
+				<h2>Pinned GitHub Repos</h2>
+				<div>
+				</div>
 			</Section>
 		</>
 	)