From f4e40a889ed60a914fe7fb6e33382e57bd79a5e8 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Sun, 24 May 2020 23:05:02 -0400
Subject: [PATCH 1/7] ui(resources): tweak typo of header

---
 src/components/HeaderBarebone/index.tsx  |  9 ++++++++-
 src/components/HeaderBarebone/styles.tsx | 10 +++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/HeaderBarebone/index.tsx b/src/components/HeaderBarebone/index.tsx
index df3e5aa..afa7ec0 100644
--- a/src/components/HeaderBarebone/index.tsx
+++ b/src/components/HeaderBarebone/index.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import cx from "classnames"
 
 import * as SC from "./styles"
 import { Container } from "../Container"
@@ -23,7 +24,13 @@ export const HeaderBarebone: React.FC<IHeaderBareboneProps> = (props) => {
         <SC.Box>
           {props.above}
 
-          <SC.Title>{props.title}</SC.Title>
+          <SC.Title
+            className={cx({
+              "has-content-below": props.content,
+            })}
+          >
+            {props.title}
+          </SC.Title>
 
           {props.content}
         </SC.Box>
diff --git a/src/components/HeaderBarebone/styles.tsx b/src/components/HeaderBarebone/styles.tsx
index 4f17686..fd1d8a8 100644
--- a/src/components/HeaderBarebone/styles.tsx
+++ b/src/components/HeaderBarebone/styles.tsx
@@ -1,6 +1,6 @@
 import { transparentize, darken } from "polished"
 import styled from "styled-components"
-import { fontFamily, modularScale } from "../../design/typography"
+import { fontFamily } from "../../design/typography"
 import { WavesTop, WavesBottom } from "../Waves"
 import Circles from "../../images/circles.svg"
 
@@ -104,13 +104,13 @@ export const Box = styled.div`
 
 export const Title = styled.h1`
   font-family: ${fontFamily.header};
-  font-size: ${modularScale(6).fontSize}px;
-  line-height: ${modularScale(6).lineHeight}px;
+  font-size: 34px;
+  line-height: 41px;
   letter-spacing: -1.75px;
   margin-top: 0;
   margin: 0;
 
-  & + * {
-    margin-top: 16px;
+  &.has-content-below {
+    margin-bottom: 16px;
   }
 `

From 826294fd84ff16457167c19cf8b9ec3a172c08be Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Sun, 24 May 2020 23:50:47 -0400
Subject: [PATCH 2/7] ui(resources): tweak order of information on language
 home

---
 src/components/ResourcesHomeContent/index.tsx | 26 +++++++++++++++++++
 .../ResourcesHomeContent/styles.tsx           | 15 +++++++++++
 src/templates/languageHome.tsx                | 10 ++-----
 3 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ResourcesHomeContent/index.tsx
 create mode 100644 src/components/ResourcesHomeContent/styles.tsx

diff --git a/src/components/ResourcesHomeContent/index.tsx b/src/components/ResourcesHomeContent/index.tsx
new file mode 100644
index 0000000..8940de5
--- /dev/null
+++ b/src/components/ResourcesHomeContent/index.tsx
@@ -0,0 +1,26 @@
+import React, { FC, HTMLAttributes } from "react"
+import { Footer } from "../Footer"
+import { Markdown } from "../Markdown"
+import { ResourcesList } from "../ResourcesList"
+import * as SC from "./styles"
+
+interface IResourcesHomeContent extends HTMLAttributes<HTMLDivElement> {
+  language: string
+  html: any
+}
+
+export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
+  return (
+    <>
+      <SC.Title>Resources</SC.Title>
+      <SC.Intro>
+        Written by and for TPH members, short introduction topics to commonly
+        answered questions.
+      </SC.Intro>
+      <ResourcesList relativeDirectory={props.language} />
+      <SC.Title>Extra resources</SC.Title>
+      <Markdown content={props.html} />
+      <Footer />
+    </>
+  )
+}
diff --git a/src/components/ResourcesHomeContent/styles.tsx b/src/components/ResourcesHomeContent/styles.tsx
new file mode 100644
index 0000000..ec26efd
--- /dev/null
+++ b/src/components/ResourcesHomeContent/styles.tsx
@@ -0,0 +1,15 @@
+import styled from "styled-components"
+import fontFamily from "../../design/typography"
+
+export const ResourcesHomeContentWrapper = styled.div``
+
+export const Title = styled.h2`
+  font-size: 24px;
+  font-family: ${fontFamily.header};
+`
+
+export const Intro = styled.p`
+  font-size: 16px;
+  font-weight: 700;
+  font-family: ${fontFamily.header};
+`
diff --git a/src/templates/languageHome.tsx b/src/templates/languageHome.tsx
index 584d2a1..3d9f7b4 100644
--- a/src/templates/languageHome.tsx
+++ b/src/templates/languageHome.tsx
@@ -1,11 +1,9 @@
 import { graphql } from "gatsby"
 import React, { FC, Fragment } from "react"
 import { Header } from "../components/Header"
-import { Markdown } from "../components/Markdown"
-import { ResourcesList } from "../components/ResourcesList"
+import { ResourcesHomeContent } from "../components/ResourcesHomeContent"
 import { SEO } from "../components/SEO"
 import { PageContent } from "../components/PageContent"
-import { Footer } from "../components/Footer"
 import useSidebar from "../hooks/useSidebar"
 
 // @todo maybe find alternative type for data
@@ -36,11 +34,7 @@ const LanguageHome: FC<any> = ({ data, pageContext }) => {
       />
       <PageContent
         content={
-          <>
-            <Markdown content={html} />
-            <ResourcesList relativeDirectory={pageContext.language} />
-            <Footer />
-          </>
+          <ResourcesHomeContent language={pageContext.language} html={html} />
         }
         recommendedReading={frontmatter.recommended_reading}
         externalResources={frontmatter.external_resources}

From 4d7dd1bb5efc3fa31fb5798be320fe71a4dbc794 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Mon, 25 May 2020 09:44:56 -0400
Subject: [PATCH 3/7] ui(resources): tweak resource list for single page

---
 src/components/ResourcesList/index.tsx        | 27 +++++++++++--------
 .../resources/bot-development/intro.md        |  2 +-
 src/content/resources/cpp/intro.md            | 10 +++----
 src/content/resources/cryptography/intro.md   |  6 ++---
 src/content/resources/java/intro.md           | 12 ++++-----
 src/content/resources/javascript/intro.md     |  8 +++---
 src/content/resources/kotlin/intro.md         |  6 ++---
 src/content/resources/php/intro.md            |  4 +--
 src/content/resources/python/intro.md         | 10 +++----
 9 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/components/ResourcesList/index.tsx b/src/components/ResourcesList/index.tsx
index d100f89..872c165 100644
--- a/src/components/ResourcesList/index.tsx
+++ b/src/components/ResourcesList/index.tsx
@@ -26,7 +26,7 @@ const ALL_RESOURCES = graphql`
   }
 `
 
-function plantTree(item: IFileOrFolder, index?: number) {
+function plantTree(item: IFileOrFolder, single?: boolean) {
   if (item.type === "file") {
     // remove the first elements, treat as hardcoded
     const [, , , ...cleanedUpPath] = item.path.split("/")
@@ -42,17 +42,21 @@ function plantTree(item: IFileOrFolder, index?: number) {
     )
   }
 
-  return <Language key={item.title} item={item} index={index!} />
+  return <Language key={item.title} item={item} single={Boolean(single)} />
 }
 
-const Language = memo(({ item }: { item: IFolder; index: number }) => {
-  return (
-    <SC.TreeWrapper>
-      <SC.LanguageLabel>{humanize(item.title)}</SC.LanguageLabel>
-      <SC.Children>{item.children.map((node) => plantTree(node))}</SC.Children>
-    </SC.TreeWrapper>
-  )
-})
+const Language = memo(
+  ({ item, single }: { item: IFolder; single: boolean }) => {
+    return (
+      <SC.TreeWrapper>
+        {!single && <SC.LanguageLabel>{humanize(item.title)}</SC.LanguageLabel>}
+        <SC.Children>
+          {item.children.map((node) => plantTree(node))}
+        </SC.Children>
+      </SC.TreeWrapper>
+    )
+  }
+)
 
 interface IResourcesList extends HTMLAttributes<HTMLDivElement> {
   relativeDirectory?: string
@@ -78,10 +82,11 @@ export const ResourcesList: FC<IResourcesList> = (props) => {
 
   const tree = useBuildTree(filteredResources)
   const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
+  const isSingle = Boolean(props.relativeDirectory)
 
   return (
     <SC.ResourcesListWrapper {...props}>
-      {sortedTree.map((node, index) => plantTree(node, index))}
+      {sortedTree.map((node) => plantTree(node, isSingle))}
     </SC.ResourcesListWrapper>
   )
 }
diff --git a/src/content/resources/bot-development/intro.md b/src/content/resources/bot-development/intro.md
index cd852b5..6e89d14 100644
--- a/src/content/resources/bot-development/intro.md
+++ b/src/content/resources/bot-development/intro.md
@@ -5,6 +5,6 @@ created_at: 2020/04/20
 title: Bot Development
 ---
 
-## About
+###### About
 
 In TPH, we employ the use of various Discord bots to help with a myriad of tasks such as moderation and managing embeds.
diff --git a/src/content/resources/cpp/intro.md b/src/content/resources/cpp/intro.md
index 074788c..4c08882 100644
--- a/src/content/resources/cpp/intro.md
+++ b/src/content/resources/cpp/intro.md
@@ -5,28 +5,28 @@ created_at: 2019/12/15
 title: C++
 ---
 
-## Beginner
+###### Beginner
 
 - [Get started](https://isocpp.org/get-started)
 - [Learn C++](http://www.learncpp.com/)
 - [C++ tutorial](http://www.cplusplus.com/doc/tutorial/)
 
-## Documentation
+###### Documentation
 
 - [C++ reference](http://en.cppreference.com/w/)
 - [https://isocpp.org/std/the-standard](https://isocpp.org/std/the-standard)
 - [http://eel.is/c++draft/](http://eel.is/c++draft/)
 
-## Books
+###### Books
 
 - [The definitive C books](https://stackoverflow.com/questions/388242/the-definitive-c-book-guide-and-list/388282#388282)
 
-## Video
+###### Video
 
 - [TPH Picks](https://goo.gl/emLpwP)
 - [Cherno](https://www.youtube.com/playlist?list=PLlrATfBNZ98dudnM48yfGUldqGD0S4FFb)
 
-## Other
+###### Other
 
 - [Super FAQ](https://isocpp.org/wiki/faq)
 - [Compilers](http://www.stroustrup.com/compilers.html)
diff --git a/src/content/resources/cryptography/intro.md b/src/content/resources/cryptography/intro.md
index 413df12..ae7a6a2 100644
--- a/src/content/resources/cryptography/intro.md
+++ b/src/content/resources/cryptography/intro.md
@@ -5,17 +5,17 @@ created_at: 2020/04/23
 title: Introduction to Cryptography
 ---
 
-## Popular Science Books
+###### Popular Science Books
 
 - [The Codebreakers](https://www.amazon.com/Codebreakers-Comprehensive-History-Communication-Internet/dp/0684831309)
 - [Seizing the Enigma: The Race to Break the German U-Boats Codes](https://www.amazon.com/Seizing-Enigma-German-U-Boats-1939-1943/dp/0395427398)
 
-## Books
+###### Books
 
 - [Handbook of Applied Cryptography - Free](http://cacr.uwaterloo.ca/hac/)
 - [Serious Cryptography](https://nostarch.com/seriouscrypto)
 - [Cryptograpy Engineering](https://www.schneier.com/books/cryptography_engineering/)
 
-## Video
+###### Video
 
 - [Coursera](https://www.coursera.org/learn/crypto)
diff --git a/src/content/resources/java/intro.md b/src/content/resources/java/intro.md
index 8aa3255..519d2ed 100644
--- a/src/content/resources/java/intro.md
+++ b/src/content/resources/java/intro.md
@@ -5,30 +5,30 @@ created_at: 2019/12/15
 title: Java
 ---
 
-## Documentation
+###### Documentation
 
 - [Java docs](https://docs.oracle.com/en/java/javase/11/)
 
-## Free Books
+###### Free Books
 
 - [https://goo.gl/WZTC9C](https://goo.gl/WZTC9C)
 
-## Video
+###### Video
 
 - [EJ Media](https://goo.gl/tC1KwC)
 - [Derek Banas](https://goo.gl/9eVFkE)
 - [Free With Registration | Cave of Programming](https://goo.gl/NXTo4H)
 
-## Guides
+###### Guides
 
 - [Learn By Examples | Beginnersbook.com](https://goo.gl/3nDWeQ)
 
-## Useful Repositories
+###### Useful Repositories
 
 - [Frameworks](https://goo.gl/EoLvrH)
 - [Design patterns](https://goo.gl/wT7SfQ)
 
-## Other
+###### Other
 
 - [History of Java](https://en.wikipedia.org/wiki/Java_version_history)
 - [Wikibooks](https://en.wikibooks.org/wiki/Java_Programming/History)
diff --git a/src/content/resources/javascript/intro.md b/src/content/resources/javascript/intro.md
index 1a10c45..a86b1d7 100644
--- a/src/content/resources/javascript/intro.md
+++ b/src/content/resources/javascript/intro.md
@@ -5,7 +5,7 @@ created_at: 2019/12/15
 title: Javascript
 ---
 
-## Documentation
+###### Documentation
 
 - [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 - [jQuery](https://contribute.jquery.org/documentation/)
@@ -13,7 +13,7 @@ title: Javascript
 - [Typescript](https://www.typescriptlang.org/docs/home.html)
 - [Discord.js](https://discord.js.org/#/docs/main/stable/general/welcome)
 
-## Tutorials
+###### Tutorials
 
 - [Eloquent](https://eloquentjavascript.net/)
 - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)
@@ -21,12 +21,12 @@ title: Javascript
 - [Modern JS](https://javascript.info/)
 - [Evie's Accelerated JS Tutorial](https://evie.gitbook.io/js/)
 
-## Discord.js
+###### Discord.js
 
 - [An Idiot's Guide](https://anidiots.guide/)
 - [Discord.js Guide](https://discordjs.guide/)
 
-## Other
+###### Other
 
 - [You might not need jQuery](https://youmightnotneedjquery.com/)
 - [You might not need jQuery 2](https://github.com/you-dont-need-x/you-dont-need-jquery)
diff --git a/src/content/resources/kotlin/intro.md b/src/content/resources/kotlin/intro.md
index 98a004d..7f78142 100644
--- a/src/content/resources/kotlin/intro.md
+++ b/src/content/resources/kotlin/intro.md
@@ -5,17 +5,17 @@ created_at: 2019/12/15
 title: Kotlin
 ---
 
-## About
+###### About
 
 One line language description: Kotlin is a general-purpose programming language that can run on a JVM or be transpiled to Javascript code. It can use functional, procedural, and OO paradigms, and can interleave them. Primarily developed by JetBrains.
 
-## Links
+###### Links
 
 - [Official Website](https://www.kotlinlang.org/)
 - [Official Docs](https://kotlinlang.org/docs/reference/)
 - [Tutorials](https://kotlinlang.org/docs/tutorials/)
 - [Mooc (not free)](https://www.udemy.com/kotlin-course/)
 
-## Recommended reading
+###### Recommended reading
 
 - Kotlin in Action by Dmitry Jemerov and Svetlana Isakova
diff --git a/src/content/resources/php/intro.md b/src/content/resources/php/intro.md
index 5f4ec34..d4b5b07 100644
--- a/src/content/resources/php/intro.md
+++ b/src/content/resources/php/intro.md
@@ -5,7 +5,7 @@ created_at: 2019/12/15
 title: PHP
 ---
 
-## Useful links and documentation
+###### Useful links and documentation
 
 - [Official documentation](https://secure.php.net/manual/en/)
 - [Laracasts PHP tutorials](http://laracasts.com/)
@@ -13,7 +13,7 @@ title: PHP
 - [PHP Standard Recommendations](https://www.php-fig.org/psr/)
 - [OWASP Cheatsheet](https://cheatsheetseries.owasp.org/)
 
-## Useful Libraries
+###### Useful Libraries
 
 - [Composer package manager](https://getcomposer.org/)
 - [phpDocumentor](https://www.phpdoc.org/)
diff --git a/src/content/resources/python/intro.md b/src/content/resources/python/intro.md
index 27d3636..421be0c 100644
--- a/src/content/resources/python/intro.md
+++ b/src/content/resources/python/intro.md
@@ -5,29 +5,29 @@ created_at: 2019/12/15
 title: Python
 ---
 
-## Beginner
+###### Beginner
 
 - [Official tutorial](https://docs.python.org/3/tutorial/)
 - [Automate the boring stuff](https://automatetheboringstuff.com/)
 - [Beginner's guide](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers)
 
-## Documentation
+###### Documentation
 
 - [https://docs.python.org/3/](https://docs.python.org/3/)
 - [https://www.python.org/dev/](https://www.python.org/dev/)
 
-## Video
+###### Video
 
 - [Socratica](https://goo.gl/8xKVKE)
 - [thenewboston](https://goo.gl/9EqF2J)
 
-## Books
+###### Books
 
 - [Free](https://goo.gl/Lxhp7i)
 - [Python Crash Course - paid](https://goo.gl/XQ7Nx6)
 - [Advanced - paid](https://wiki.python.org/moin/AdvancedBooks)
 
-## Other
+###### Other
 
 - [TalkPython | Podcast](https://goo.gl/xwieUA)
 - [Exercises](http://www.practicepython.org/)

From bf3df759af6eda7bb3903c4324a585b4c2e1629a Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Mon, 25 May 2020 22:10:46 -0400
Subject: [PATCH 4/7] feat(resources): remove intro from language home

---
 src/components/ResourcesList/index.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/ResourcesList/index.tsx b/src/components/ResourcesList/index.tsx
index 872c165..f8eae11 100644
--- a/src/components/ResourcesList/index.tsx
+++ b/src/components/ResourcesList/index.tsx
@@ -1,6 +1,6 @@
 import { graphql, useStaticQuery } from "gatsby"
 import sort from "ramda/es/sort"
-import React, { FC, HTMLAttributes, memo } from "react"
+import React, { FC, HTMLAttributes, memo, useMemo } from "react"
 import "react-perfect-scrollbar/dist/css/styles.css"
 import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
 import { getPath, humanize } from "../../utils"
@@ -47,17 +47,30 @@ function plantTree(item: IFileOrFolder, single?: boolean) {
 
 const Language = memo(
   ({ item, single }: { item: IFolder; single: boolean }) => {
+    const children = useMemo(() => {
+      if (single) {
+        return item.children.filter((child) => {
+          const [, , , title] = child.title.split("/")
+          return title !== "intro"
+        })
+      }
+
+      return item.children
+    }, [item.children, single])
+
     return (
       <SC.TreeWrapper>
         {!single && <SC.LanguageLabel>{humanize(item.title)}</SC.LanguageLabel>}
-        <SC.Children>
-          {item.children.map((node) => plantTree(node))}
-        </SC.Children>
+        <SC.Children>{children.map((node) => plantTree(node))}</SC.Children>
       </SC.TreeWrapper>
     )
   }
 )
 
+function sortTree(tree: IFileOrFolder[]) {
+  return sort((a, b) => a.title.localeCompare(b.title), tree)
+}
+
 interface IResourcesList extends HTMLAttributes<HTMLDivElement> {
   relativeDirectory?: string
 }
@@ -81,7 +94,7 @@ export const ResourcesList: FC<IResourcesList> = (props) => {
   }
 
   const tree = useBuildTree(filteredResources)
-  const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
+  const sortedTree = sortTree(tree)
   const isSingle = Boolean(props.relativeDirectory)
 
   return (

From c83701ec586115c8fa6f5fc63aed35484f8b339c Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Mon, 25 May 2020 23:23:46 -0400
Subject: [PATCH 5/7] ui(resources): tweak styling of resource list

---
 src/components/Link/index.tsx           | 10 ++++---
 src/components/ResourcesList/index.tsx  | 10 +++----
 src/components/ResourcesList/styles.tsx | 35 +++++++++----------------
 3 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index 2564fc7..9d5d93d 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -5,13 +5,17 @@ interface ILinkProps {
   to: string
 }
 
-export const Link: FC<ILinkProps> = ({ children, to }) => {
+export const Link: FC<ILinkProps> = ({ children, to, ...props }) => {
   if (!to.match(/^(https?:\/\/)/)) {
-    return <SC.LinkInternal to={to}>{children}</SC.LinkInternal>
+    return (
+      <SC.LinkInternal {...props} to={to}>
+        {children}
+      </SC.LinkInternal>
+    )
   }
 
   return (
-    <SC.LinkExternal rel="noreferrer" href={to} target="_blank">
+    <SC.LinkExternal {...props} rel="noreferrer" href={to} target="_blank">
       {children}
     </SC.LinkExternal>
   )
diff --git a/src/components/ResourcesList/index.tsx b/src/components/ResourcesList/index.tsx
index f8eae11..5f9c3cb 100644
--- a/src/components/ResourcesList/index.tsx
+++ b/src/components/ResourcesList/index.tsx
@@ -1,3 +1,4 @@
+import cx from "classnames"
 import { graphql, useStaticQuery } from "gatsby"
 import sort from "ramda/es/sort"
 import React, { FC, HTMLAttributes, memo, useMemo } from "react"
@@ -34,10 +35,7 @@ function plantTree(item: IFileOrFolder, single?: boolean) {
 
     return (
       <SC.PageLink key={item.title} to={path}>
-        {cleanedUpPath.map((node) => (
-          // TODO: use helper to format path
-          <SC.NodePart key={node}>{humanize(node)}</SC.NodePart>
-        ))}
+        {cleanedUpPath.map((node) => humanize(node)).join(" / ")}
       </SC.PageLink>
     )
   }
@@ -61,7 +59,9 @@ const Language = memo(
     return (
       <SC.TreeWrapper>
         {!single && <SC.LanguageLabel>{humanize(item.title)}</SC.LanguageLabel>}
-        <SC.Children>{children.map((node) => plantTree(node))}</SC.Children>
+        <SC.Children className={cx({ "is-single": single })}>
+          {children.map((node) => plantTree(node))}
+        </SC.Children>
       </SC.TreeWrapper>
     )
   }
diff --git a/src/components/ResourcesList/styles.tsx b/src/components/ResourcesList/styles.tsx
index 7cffb67..ca63668 100644
--- a/src/components/ResourcesList/styles.tsx
+++ b/src/components/ResourcesList/styles.tsx
@@ -1,6 +1,6 @@
-import { Link } from "gatsby"
 import { transparentize } from "polished"
 import styled from "styled-components"
+import { Link } from "../Link"
 
 export const ResourcesListWrapper = styled.div`
   box-sizing: border-box;
@@ -14,6 +14,10 @@ export const Children = styled.div`
   flex-direction: column;
   align-items: flex-start;
   overflow: hidden;
+
+  &.is-single {
+    padding-left: 0;
+  }
 `
 
 export const Label = styled.div`
@@ -65,7 +69,10 @@ export const TreeWrapper = styled.div`
   flex-direction: column;
   width: 100%;
   font-size: 16px;
-  margin: 32px 0;
+
+  & + & {
+    margin-top: 32px;
+  }
 
   ${Children} {
     display: flex;
@@ -77,27 +84,11 @@ export const TreeWrapper = styled.div`
 `
 
 export const PageLink = styled(Link)`
-  display: block;
-  padding: 2px 0;
-  color: ${(props) => props.theme.sidebar.foreground};
-  align-self: flex-start;
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-
-  &:hover {
-    border-color: ${(props) =>
-      transparentize(0.7, props.theme.sidebar.foreground)};
-  }
+  font-weight: 400;
+  display: inline-block;
+  font-size: 18px;
 
   & + & {
-    margin-top: 4px;
-  }
-`
-
-export const NodePart = styled.span`
-  & + &::before {
-    content: "/";
-    opacity: 0.3;
-    margin: 0 4px;
+    margin-top: 8px;
   }
 `

From 22ff6764b6d5e3389919889236f9243efd1f75f2 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Tue, 26 May 2020 01:04:29 -0400
Subject: [PATCH 6/7] refact(resources): clean up dead code

---
 src/components/ResourcesList/styles.tsx | 38 -------------------------
 1 file changed, 38 deletions(-)

diff --git a/src/components/ResourcesList/styles.tsx b/src/components/ResourcesList/styles.tsx
index ca63668..9c66c24 100644
--- a/src/components/ResourcesList/styles.tsx
+++ b/src/components/ResourcesList/styles.tsx
@@ -20,30 +20,6 @@ export const Children = styled.div`
   }
 `
 
-export const Label = styled.div`
-  user-select: none;
-  position: relative;
-  padding: 4px 0 2px;
-  margin-bottom: 2px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid transparent;
-  align-self: flex-start;
-
-  &:hover {
-    border-color: ${(props) =>
-      transparentize(0.7, props.theme.sidebar.foreground)};
-  }
-
-  svg {
-    position: absolute;
-    right: 100%;
-    margin-right: 4px;
-    width: 10px;
-  }
-`
-
 export const LanguageLabel = styled.div`
   display: flex;
   align-items: center;
@@ -52,16 +28,6 @@ export const LanguageLabel = styled.div`
   padding: 4px 15px 4px 0;
   font-weight: 700;
   color: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
-
-  svg {
-    margin-left: auto;
-    transform: rotate(90deg);
-    transition: transform 0.3s;
-
-    path {
-      fill: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
-    }
-  }
 `
 
 export const TreeWrapper = styled.div`
@@ -77,10 +43,6 @@ export const TreeWrapper = styled.div`
   ${Children} {
     display: flex;
   }
-
-  & > ${Label} svg {
-    fill: ${(props) => props.theme.sidebar.foreground};
-  }
 `
 
 export const PageLink = styled(Link)`

From 0e9b0659276087bb3751be59b8643b6922c8f13e Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Tue, 26 May 2020 02:53:11 -0400
Subject: [PATCH 7/7] ui(resources): restyle external resources

---
 src/components/ResourcesHomeContent/index.tsx |   6 +-
 .../ResourcesHomeContent/styles.tsx           |  70 +++++++++++++++++-
 src/icons/external-link.png                   | Bin 0 -> 3199 bytes
 3 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 src/icons/external-link.png

diff --git a/src/components/ResourcesHomeContent/index.tsx b/src/components/ResourcesHomeContent/index.tsx
index 8940de5..cc1b509 100644
--- a/src/components/ResourcesHomeContent/index.tsx
+++ b/src/components/ResourcesHomeContent/index.tsx
@@ -18,8 +18,10 @@ export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
         answered questions.
       </SC.Intro>
       <ResourcesList relativeDirectory={props.language} />
-      <SC.Title>Extra resources</SC.Title>
-      <Markdown content={props.html} />
+      <SC.Box>
+        <SC.Title>Extra resources</SC.Title>
+        <Markdown content={props.html} />
+      </SC.Box>
       <Footer />
     </>
   )
diff --git a/src/components/ResourcesHomeContent/styles.tsx b/src/components/ResourcesHomeContent/styles.tsx
index ec26efd..4e12aa1 100644
--- a/src/components/ResourcesHomeContent/styles.tsx
+++ b/src/components/ResourcesHomeContent/styles.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components"
-import fontFamily from "../../design/typography"
+import fontFamily, { BASE_LINE_HEIGHT } from "../../design/typography"
+import externalLink from "../../icons/external-link.png"
 
 export const ResourcesHomeContentWrapper = styled.div``
 
@@ -13,3 +14,70 @@ export const Intro = styled.p`
   font-weight: 700;
   font-family: ${fontFamily.header};
 `
+
+// most of this should probably be elsewhere and not attempt to overwrite markdown styles
+export const Box = styled.div`
+  background: ${(props) => props.theme.sidebar.background};
+  margin: 32px -16px;
+  padding: 16px;
+
+  ${Title} {
+    margin-top: 0;
+  }
+
+  h6 {
+    margin-top: ${BASE_LINE_HEIGHT}px;
+  }
+
+  h6 ~ h6::before {
+    display: block;
+    margin-bottom: ${BASE_LINE_HEIGHT}px;
+    content: "";
+    height: 1px;
+    background: ${(props) =>
+      props.theme.name === "dark" ? "#34414e" : "#a3beda"};
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  ul li + li {
+      margin-top: 8px;
+  }
+
+  a:not(.anchor) {
+    position: relative;
+    color: #fff !important;
+    font-weight: 400 !important;
+    border-bottom: 1px solid #fff;
+    margin-bottom: 1px;
+    display: inline-flex;
+    align-items: center;
+    font-size: 18px;
+
+    &:hover {
+      background: none;
+      -webkit-background-clip: none;
+      -webkit-text-fill-color: #fff;
+      border-bottom-width: 2px;
+      margin-bottom: 0;
+    }
+
+    &::after {
+      position: absolute;
+      margin-top: -6px;
+      top: 50%;
+      left: 100%;
+      margin-left: 10px;
+      display: block;
+      content: "";
+      /* I would prefer a svg, but could not get it to work */
+      background-image: url("${externalLink}");
+      background-size: 16px 16px;
+      width: 16px;
+      height: 16px;
+    }
+  }
+`
diff --git a/src/icons/external-link.png b/src/icons/external-link.png
new file mode 100644
index 0000000000000000000000000000000000000000..031f0703798c9b6054151cdb76f598c0e982ba0c
GIT binary patch
literal 3199
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

literal 0
HcmV?d00001