Documentation links point to obsolete documentation

[gtsiolis]

Problem

The index page points to obsolete documentation. This is also related to #112 and #110.

See also primer/css#759.

Proposal

1. Rename Styleguide link to Documentation.
2. Add a second link Components pointing to Components.
3. Replace links pointing to styleguide.github.com/primer to primer.style/css.
4. Replace links pointing to primer/primer/issues/new/choose to primer/css/issues/new/choose.

Possible fix

diff --git a/README.md b/README.md
index 9deece6..d019cbb 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,9 @@
 <h3 align="center">Primer.style</h3>
 
 <p align="center">
-<a href="https://styleguide.github.com/primer">Styleguide</a>
+<a href="https://primer.style/css">Documentation</a>
+    ·
+    <a href="https://primer.style/components">Components</a>
     ·
     <a href="https://github.com/primer">Primer org</a>
     ·
diff --git a/src/Hero.js b/src/Hero.js
index 1210721..bd83ba9 100644
--- a/src/Hero.js
+++ b/src/Hero.js
@@ -25,8 +25,12 @@ export default function Hero() {
             Resources, tooling, and design guidelines for building interfaces with GitHub’s design system
           </Text>
           <Text fontFamily="mono" is="p" color="blue.3" mt={5}>
-            <LinkLight fontSize={[0, 1, 2]} href="https://styleguide.github.com/primer/">
-              Style guide
+            <LinkLight fontSize={[0, 1, 2]} href="https://primer.style/css/">
+              Documentation
+            </LinkLight>{' '}
+            ・
+            <LinkLight fontSize={[0, 1, 2]} href="https://primer.style/components/">
+              Components
             </LinkLight>{' '}
             ・
             <LinkLight ml={2} fontSize={[0, 1, 2]} href="https://spectrum.chat/primer">
diff --git a/src/OpenSource.js b/src/OpenSource.js
index 061df5b..dbf7ce5 100644
--- a/src/OpenSource.js
+++ b/src/OpenSource.js
@@ -36,7 +36,7 @@ export default function OpenSource() {
             <Octicon icon={SpectrumIcon} size={20} verticalAlign="top" mr={2} />
             Chat with us in Spectrum
           </LinkDark>
-          <LinkDark fontSize={2} mb={3} display="block" href="https://github.com/primer/primer/issues/new/choose">
+          <LinkDark fontSize={2} mb={3} display="block" href="https://github.com/primer/css/issues/new/choose">
             <Octicon icon={Octoface} size={20} verticalAlign="text-top" mr={2} />
             Share feedback on GitHub
           </LinkDark>
diff --git a/src/PrimerCSS.js b/src/PrimerCSS.js
index b354dae..b702fb4 100644
--- a/src/PrimerCSS.js
+++ b/src/PrimerCSS.js
@@ -23,10 +23,10 @@ export default function PrimerCSS() {
           <Text is="p" color="blue.2" mb={5} fontSize={3}>
             Styles can be mixed and matched to achieve many different layouts, independent of their location.
           </Text>
-          <ButtonFill my={[2, 0]} mr={2} href="https://styleguide.github.com/primer/">
+          <ButtonFill my={[2, 0]} mr={2} href="https://primer.style/css/">
             Documentation
           </ButtonFill>
-          <ButtonOutline my={[2, 0]} href="https://github.com/primer/primer">
+          <ButtonOutline my={[2, 0]} href="https://github.com/primer/css">
             GitHub
           </ButtonOutline>
           <Text is="p" fontSize={2} mt={5} color="blue.3" fontFamily="mono">

[emplums]

Thanks for this @gtsiolis! :D

[emplums]

@broccolini for the index page, should we change the style guide link to something else now that the CSS docs are split into their separate site? Or should we link to primer.style/design here?

[emplums]

We've also go the same links in our README

[emplums]

Notes: let's change Style Guide to Team

[gtsiolis]

@emplums a link to the team is already included in the header navigation bar. Do you think adding a link to the team as the first CTA button on the index page could bring unnecessary and too much attention to the team page? If not, maybe the second link on the header bar could be removed, right?

Also, what do you think about replacing Style Guide with Documentation and link to https://primer.style/css/ as seen in the diff in the description instead? Do you think this could be better?

[broccolini]

• we don't want to point to primer.style/css only, now that we have multiple frameworks we shouldn't send people to only one of them
• yes we discussed removing Team from the Header, I think we should go ahead an do that
• I don't feel strongly about the order, but would be down to change to "open-source, community, team"

In future I'd like to update that to "about" so that it can be a space where we dive into why we open-source Primer, clarify that anyone can use it but the primary users are GitHub staff etc., as well as introduce the team. Until we add that content it can stay as Team though.

[gtsiolis]

@broccolini sorry for jumping in here again, but I'm only exploring Primer during the last days. What do you mean multiple frameworks? If you are referring to Primer CSS and Primer Components, I've included both links in the diff in the description for this specific reason. This would change the index links to: Documentation - Components - Community - Open-source. This could sound wrong, but I'll leave this to you.

In any case, adding the link to the team as a less prominent link sounds good, but I could be wrong! 🏀

Also, About section and direction sound nice.

[emplums]

Hey @gtsiolis just reviewed your PR as well. Regarding the multiple frameworks, we currently have tooling for CSS, React, and Rails so I the idea for this hero is to keep things general and then dive into which tools we offer further down in the page :) We've actually got some big design changes for this page coming soon that will help clear that up a bit!

Thanks for the input and the PR! 🙌

[gtsiolis]

Thanks @emplums! Again, sorry for jumping in here! I'll try to check the PR suggestions in a while!

Regarding the multiple frameworks, we currently have tooling for CSS, React, and Rails

Oh, I didn't know about the Rails one.

We've actually got some big design changes for this page coming soon that will help clear that up a bit!

Sounds exciting! 🙌