Update footer links (graphql#1089)

Includes some of the newer additions to the site and minor rearranging and renaming of links to make more sense.

Author: leebyron

gatsby-node.js

@@ -201,6 +201,15 @@ exports.createPages = async ({ graphql, actions }) => {
               category: "GraphQL Foundation",
             },
           },
+          {
+            frontmatter: {
+              sidebarTitle: "GraphQL Landscape",
+              title: "GraphQL Landscape",
+              permalink: "https://landscape.graphql.org/",
+              date: null,
+              category: "GraphQL Foundation",
+            },
+          },
         ],
       },
     ],

src/assets/css/_css/graphql.less

@@ -208,7 +208,7 @@ footer {
 
     .nav-home {
       display: table;
-      margin: -12px 20px 0 0;
+      margin: -12px 20px 0 -10px;
       padding: 10px;
       width: 50px;
       height: 50px;
@@ -224,15 +224,21 @@ footer {
       }
     }
 
-    a {
+    a, span {
       color: white;
       display: table;
       margin: 2px -10px;
       padding: 3px 10px;
-      &:hover,
-      &:focus {
-        color: @rhodamine-color;
-        text-decoration: none;
+      position: relative;
+
+      img {
+        opacity: 0.6;
+        position: absolute;
+        height: 0.85em;
+        right: ~"calc(100% - 4px)";
+        top: 50%;
+        transform: translateY(-50%);
+        user-select: none;
       }
     }
 
@@ -241,11 +247,11 @@ footer {
       margin: 0 0 10px;
 
       &,
-      & > a {
+      & > a, & > span {
         color: lighten(@dark-color, 50%);
       }
 
-      & > a {
+      & > a, & > span {
         margin: 0 -10px;
       }
     }

src/components/Footer/index.tsx

@@ -4,6 +4,7 @@ import Link from "../Link"
 interface LinkItem {
   text: string
   href: string
+  icon?: string
 }
 
 interface FooterLinks {
@@ -17,57 +18,65 @@ const getLinks = (sourcePath: string): FooterLinks[] => [
     text: "Learn",
     href: "/learn/",
     subsections: [
-      { text: "Introduction", href: "/learn/" },
-      { text: "Query Language", href: "/learn/queries/" },
-      { text: "Type System", href: "/learn/schema/" },
-      { text: "Execution", href: "/learn/execution/" },
+      { text: "Introduction to GraphQL", href: "/learn/" },
       { text: "Best Practices", href: "/learn/best-practices/" },
+      { text: "Frequently Asked Questions", href: "/faq/" },
+      { text: "Training Courses", href: "/community/users/#training-courses" },
     ],
   },
   {
-    text: "Spec and Code",
+    text: "Code",
     href: "/code",
     subsections: [
-      { text: "Specification", href: "https://spec.graphql.org" },
-      { text: "Languages", href: "/code/#languages" },
-      { text: "Tools", href: "/code/#tools" },
-      { text: "Services", href: "/code/#services" },
       {
-        text: "Edit this page ✎",
-        href:
-          "https://github.com/graphql/graphql.github.io/edit/source/" +
-          sourcePath,
+        text: "GitHub",
+        href: "https://github.com/graphql",
+        icon: "/img/logos/github.svg",
       },
+      { text: "GraphQL Specification", href: "https://spec.graphql.org" },
+      { text: "Libraries & Tools", href: "/code/" },
+      { text: "Services & Vendors", href: "/code/#services" },
     ],
   },
   {
     text: "Community",
     href: "/community",
     subsections: [
-      { text: "Code of Conduct", href: "/codeofconduct/" },
-      { text: "GitHub", href: "https://github.com/graphql" },
       {
-        text: "Stack Overflow",
-        href: "http://stackoverflow.com/questions/tagged/graphql",
+        text: "@graphql",
+        href: "https://twitter.com/graphql",
+        icon: "/img/logos/twitter.svg",
+      },
+      {
+        text: "Discord",
+        href: "https://discord.graphql.org/",
+        icon: "/img/logos/discord.svg",
       },
       {
-        text: "Facebook Group",
-        href: "https://www.facebook.com/groups/graphql.community/",
+        text: "Stack Overflow",
+        href: "http://stackoverflow.com/questions/tagged/graphql",
+        icon: "/img/logos/stackoverflow.svg",
       },
-      { text: "Twitter", href: "https://twitter.com/GraphQL" },
-      { text: "Upcoming Events", href: "/community/upcoming-events/" },
+      { text: "Resources", href: "/community/users/" },
+      { text: "Events", href: "/community/upcoming-events/" },
+      { text: "Landscape", href: "https://landscape.graphql.org" },
     ],
   },
   {
-    text: "GraphQL Foundation",
-    href: "/foundation/",
+    text: "& More",
     subsections: [
-      { text: "About", href: "/foundation/" },
-      { text: "Join", href: "/foundation/join/" },
-      { text: "Current members", href: "/foundation/members/" },
-      { text: "Landscape", href: "https://landscape.graphql.org" },
+      { text: "News Blog", href: "/blog/" },
+      { text: "GraphQL Foundation", href: "/foundation/" },
       { text: "Artwork", href: "https://github.com/graphql/artwork" },
-      { text: "Contact", href: "/foundation/contact/" },
+      { text: "Code of Conduct", href: "/codeofconduct/" },
+      { text: "Contact Us", href: "/foundation/contact/" },
+      {
+        text: "Edit this page",
+        href:
+          "https://github.com/graphql/graphql.github.io/edit/source/" +
+          sourcePath,
+        icon: "/img/edit.svg",
+      },
     ],
   },
 ]
@@ -84,11 +93,12 @@ const Footer = ({ sourcePath }: { sourcePath: string }) => {
                 {section.href ? (
                   <Link href={section.href}>{section.text}</Link>
                 ) : (
-                  section.text
+                  <span>{section.text}</span>
                 )}
               </h5>
               {section.subsections.map((subsection: any, i) => (
                 <Link key={i} href={subsection.href}>
+                  {subsection.icon && <img src={subsection.icon} />}
                   {subsection.text}
                 </Link>
               ))}

src/components/HeaderLinks/index.tsx

@@ -43,11 +43,6 @@ const links: LinkItem[] = [
     text: "News",
     href: "/blog/",
   },
-  {
-    section: "landscape",
-    text: "Landscape",
-    href: "https://l.graphql.org/"
-  },
 ]
 
 export default () => (

src/content/community/Community-Resources.md

@@ -23,6 +23,7 @@ Please follow these channels for updates and information:
 * **GitHub:** [github.com/graphql](https://github.com/graphql)
 * **Discord** [discord.graphql.org](https://discord.graphql.org)
   * We're in the process of moving our official chat to Discord, but you may find historical discussion on ~~**Slack:** [slack.graphql.org](https://slack.graphql.org) ([get an invite](https://slack-invite.graphql.org))~~.
+* **Facebook Group:** [fb.com/groups/graphql.community/](https://www.facebook.com/groups/graphql.community/)
 * **Google Calendar:** [calendar.graphql.org](https://calendar.graphql.org)
 * **Blog:** [graphql.org/blog](/blog/)
 

src/content/community/Community-Users.md

@@ -37,6 +37,7 @@ Please be patient and polite. These are not explicitly user support channels, al
 
 * [GraphQL Foundation Discord](https://discord.graphql.org)
   * We're in the process of moving our official chat to Discord, but you may find historical discussion in ~~[#general on the GraphQL Slack](https://graphql.slack.com/messages/general/) [(Get an invite)](https://graphql-slack.herokuapp.com/)~~.
+* [GraphQL Community Facebook Group](https://www.facebook.com/groups/graphql.community/)
 * [Everything GraphQL: Curated By The Guild](https://discord.gg/xud7bH9)
 * [#help-graphql on the ReactiFlux Discord](http://join.reactiflux.com/)
 * [#graphql on freenode IRC](https://freenode.net/)