content(resources): add link to GitHub

src/components/ResourcesLink/index.tsx

@@ -7,5 +7,15 @@ export function ResourcesLink({
 }: PropsWithChildren<{
   to: string
 }>) {
-  return <SC.ResourcesLinkWrapper to={to}>{children}</SC.ResourcesLinkWrapper>
+  if (!to.match(/^(https?:\/\/)/)) {
+    return (
+      <SC.ResourcesLinkInternal to={to}>{children}</SC.ResourcesLinkInternal>
+    )
+  }
+
+  return (
+    <SC.ResourcesLinkExternal href={to} target="_blank">
+      {children}
+    </SC.ResourcesLinkExternal>
+  )
 }

src/components/ResourcesLink/styles.tsx

@@ -1,7 +1,7 @@
 import { Link } from "gatsby"
-import styled from "styled-components"
+import styled, { css } from "styled-components"
 
-export const ResourcesLinkWrapper = styled(Link)`
+const linkStyle = css`
   color: #0090d8;
   font-weight: 700;
   border-bottom: 2px solid;
@@ -14,3 +14,11 @@ export const ResourcesLinkWrapper = styled(Link)`
     transition: none;
   }
 `
+
+export const ResourcesLinkInternal = styled(Link)`
+  ${linkStyle}
+`
+
+export const ResourcesLinkExternal = styled.a`
+  ${linkStyle}
+`

src/pages/resources.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from "react"
 
+import packageJson from "../../package.json"
 import { ResourcesLink } from "../components/ResourcesLink"
 import { ResourcesList } from "../components/ResourcesList"
 import { SEO } from "../components/SEO"
@@ -14,6 +15,10 @@ function ResourcesPage() {
         on our Discord community,{" "}
         <ResourcesLink to="/about">The Programmer's Hangout</ResourcesLink>.
       </p>
+      <p>
+        All of it is open source, and you can contribute to it on{" "}
+        <ResourcesLink to={packageJson.repository.url}>GitHub</ResourcesLink>.
+      </p>
       <ResourcesList />
     </Fragment>
   )

tsconfig.json

@@ -46,7 +46,7 @@
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */
     "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
 
@@ -59,5 +59,6 @@
     /* Experimental Options */
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    "resolveJsonModule": true
   }
 }

typings.d.ts

@@ -3,6 +3,7 @@ import "styled-components"
 
 declare module "*.svg"
 declare module "*.png"
+declare module "*.json"
 
 type ComponentQuery<T> = {
   readonly data: T