Styled-components-website: Link to awesome-styled-components list

[mxstbr]

styled-components has such a great community behind it and there's so many modules built with it! We should link to https://github.com/styled-components/awesome-styled-components from the website to make sure people can discover them.

[SaraVieira]

@mxstbr Where do you think this should be linked ?

[mxstbr]

No idea!

[morajabi]

Maybe a community link in the navbar, for now?

[mxstbr]

"Community" should, if anything, like to Spectrum, but what about "ecosystem"? We need to figure out what to put in the navbar anyway, see #115, so we can finally ship your awesome updates @morajabi!

[morajabi]

@mxstbr You're totally right, Max! I like "ecosystem". Also, it sounds like a proper link to put in out empty navbar :)

[SaraVieira]

And should that page simply have the contents of the readme in awesome styled components?

[mxstbr]

We either pull it in via the API or something (so we don't have to keep two lists up to date), or we just like to the repo.

[kitten]

We have a task tracking this: https://github.com/styled-components/styled-components-website/issues/99

I think having a generator API that pulls the readme from the awesome repo and transforms it would be optimal.

[morajabi]

Yeah, that's right. @mxstbr himself opened that too :) Sounds good.

[SaraVieira]

Yellow !

I'm giving this a try with the md component but I'm having some hardship :(

Is this the correct way to use it ?

import React, { Component } from 'react'
import DocsLayout from '../components/DocsLayout'
import { getReadme } from '../utils/githubApi'
import md from '../components/md'
import Loading from '../components/Loading'

const Ecosystem = ({readme}) => (
      <DocsLayout
        title="Ecosystem"
        description="Ecosystem of styled-components"
      >
        {!readme ? <Loading /> : md(readme)}
      </DocsLayout>
    )

Ecosystem.getInitialProps = async () => {
  const readme = await getReadme()

  return { readme }
}

export default Ecosystem

I will place the state stuff into a readme component but just wanted to get it working first

@mxstbr @morajabi @philpl

[morajabi]

@SaraVieira Sounds good! As we're using Next, It'd be great to have the data fetching (getReadme() in your snippet) stuff in getInitialProps so we'll fetch them on the server and users won't have to wait for it to finish.

[SaraVieira]

Sorry, here is the code

import 'isomorphic-fetch'
import base64 from 'base-64'

export const getReadme = (repo = 'awesome-styled-components') =>
  fetch(`https://api.github.com/repos/styled-components/${repo}/readme`)
    .then(resp => resp.json())
    .then(data => base64.decode(data.content))
    .catch(err => err)

But it doesn't work :(

Internal Server Error.
strings.join is not a function
TypeError: strings.join is not a function
    at md (/Users/flyingunicornaway/Projects/styled-components-website/.next/dist/components/md.js:101:50)
    at Ecosystem (/Users/flyingunicornaway/Projects/styled-components-website/.next/dist/pages/ecosystem.js:52:25)
    at /Users/flyingunicornaway/Projects/styled-components-website/node_modules/react-dom/lib/ReactCompositeComponent.js:305:16
    at measureLifeCyclePerf (/Users/flyingunicornaway/Projects/styled-components-website/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (/Users/flyingunicornaway/Projects/styled-components-website/node_modules/react-dom/lib/ReactCompositeComponent.js:304:14)
    at ReactCompositeComponentWrapper._constructComponent (/Users/flyingunicornaway/Projects/styled-components-website/node_modules/react-dom/lib/ReactCompositeComponent.js:279:21)
    at ReactCompositeComponentWrapper.mountComponent (/Users/flyingunicornaway/Projects/styled-components-website/node_modules/react-dom/lib/ReactCompositeComponent.js:187:21)
    at Object.mountComponent (/Users/flyingunicornaway/Projects/styled-components-website/node_modules/react-dom/lib/ReactReconciler.js:45:35)
    at ReactCompositeComponentWrapper.performInitialMount (/Users/flyingunicornaway/Projects/styled-components-website/node_modules/react-dom/lib/ReactCompositeComponent.js:370:34)
    at ReactCompositeComponentWrapper.mountComponent (/Users/flyingunicornaway/Projects/styled-components-website/node_modules/react-dom/lib/ReactCompositeComponent.js:257:21)

[morajabi]

Are you sure it's coming from this code block? Add a catch and check if it's this block.

[morajabi]

Found it, try calling md like this in your component:

{ !this.state.loading && md`${this.state.readme}` }

[SaraVieira]

@morajabi Updated all the code to use isomorphic options and also placed the error stack

[morajabi]

@SaraVieira Did this solve the issue?

[SaraVieira]

I tried that , that gives me a diffrent error:

Paragraph(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
Invariant Violation: Paragraph(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (http://localhost:3000/_next/1506977670642/commons.js:50:15)
    at ReactCompositeComponentWrapper.mountComponent (http://localhost:3000/_next/1506977670642/commons.js:30161:82)
    at mountComponent (http://localhost:3000/_next/1506977670642/commons.js:2391:35)
    at Object.module.exports._ReactReconciler2.default.mountComponent (http://localhost:3000/_next/1506977670642/commons.js:14891:35)
    at ReactDOMComponent.mountChildren (http://localhost:3000/_next/1506977670642/commons.js:34703:44)
    at ReactDOMComponent._createInitialChildren (http://localhost:3000/_next/1506977670642/commons.js:31691:32)
    at ReactDOMComponent.mountComponent (http://localhost:3000/_next/1506977670642/commons.js:31510:12)
    at mountComponent (http://localhost:3000/_next/1506977670642/commons.js:2391:35)
    at Object.module.exports._ReactReconciler2.default.mountComponent (http://localhost:3000/_next/1506977670642/commons.js:14891:35)
    at Object.updateChildren (http://localhost:3000/_next/1506977670642/commons.js:29896:51)

If I console log the readme it+s perfect markdown

[morajabi]

With that code, sometimes you are filling the readme with something other than the string (i.e. a Promise or error object).

!(new Promise(()=>{})) // => false

You need to change this line:

{!readme ? <Loading /> : md`${readme}`}

Maybe into

{!readme && typeof readme !== 'string' ? <Loading /> : md`${readme}`)}

Also you can just remove md from the component itself and try running md`${content}` in then block to make sure it's not getting called with unappropriate content and check if the issue is this.

[SaraVieira]

It still gives me the same error above even with:

import React from 'react'
import DocsLayout from '../components/DocsLayout'
import { getReadme } from '../utils/githubApi'
import md from '../components/md'
import Loading from '../components/Loading'

const Ecosystem = ({readme}) => {
  console.log(typeof readme)
      return (<DocsLayout
        title="Ecosystem"
        description="Ecosystem of styled-components"
      >
        {typeof readme !== 'string' ? <Loading /> : md`${readme}`}
      </DocsLayout>)
}


Ecosystem.getInitialProps = async () => {
  const readme = await getReadme()

  return { readme }
}

export default Ecosystem

:(

[morajabi]

OK, push your changes into a branch so I can check them here.

[SaraVieira]

Here is the branch: https://github.com/styled-components/styled-components-website/tree/ecosystem-page

[morajabi]

@SaraVieira Maybe it's something in the readme that md cannot parse or needs it to be escaped?

Update: I added the readme manually and I still get that error. It's something with how md parses the markdown.

Update: I didn't pass readme as a variable and it's working fine!

const parsedReadme = md`... place readme here by hand ... `

Update: See below

[morajabi]

OK! I got it working by this: md([readme])

{typeof readme !== 'string' ? <Loading /> : md([readme])}

Full component code:

const Ecosystem = ({readme}) => {
  console.log(readme)
  return (
    <DocsLayout
      title="Ecosystem"
      description="Ecosystem of styled-components"
    >
      {typeof readme !== 'string' ? <Loading /> : md([readme])}
    </DocsLayout>
  )
}

Try that @SaraVieira and tell me what happens.

BTW, I think we need to update the md to handle this less hacky :)

[morajabi]

Also, we'll need to remove some sections from the readme as they're not related to this page.

[kitten]

@morajabi @SaraVieira sorry for the hardship you two! You guys are right on track :)

Since it’s a tag function that’s supposed to be used for tagged template literals it accepts an array of strings and spreader arguments as interleaved placeholders. In this case the placeholders are expected to be React elements and the strings are expected to be markdown 😬

Feel free to modify the md tag function to just accept a string as a regular function as well 😬

For the page itself the most important thing to use is getInitialProps which will enable us to properly offload some things to SSR when the user enters the page directly. You can find some info on it on next’s repo

Edit: oh also feel free to message me on Twitter if you need some more immediate help. Sorry for being a tad more busy in the last months

[morajabi]

@philpl

For the page itself the most important thing to use is getInitialProps which will enable us to properly offload some things to SSR when the user enters the page directly. You can find some info on it on next’s repo

Yeah, I told Sara above and she did that

Feel free to modify the md tag function to just accept a string as a regular function as well 😬

I think just a type check (to check whether it's an array of strings or just a string) on strings would be fine.

[SaraVieira]

@morajabi You are the best , it works ❤️

@philpl No problem man , never apolagize for being busy :)

[morajabi]

I created a PR https://github.com/styled-components/styled-components-website/pull/124 to fix that problem. After merging that, we'll be able to simply call md function like this: md(readme). No more hacky-arrays :)

[SaraVieira]

@morajabi Nicce !

The page looks like this at the moment : https://styled-components-docs-hnzxcqefvt.now.sh/ecosystem ?

Watchu guys think ?

cc @mxstbr @philpl

[morajabi]

@SaraVieira As I said earlier:

Also, we'll need to remove/change some sections from the readme after fetching as they're not related to this page.

Anyway, it's my opinion. Let's wait to hear from @mxstbr @philpl.

[SaraVieira]

I know that why I deployed to get everyones feedback on what should be removed :)

[morajabi]

@SaraVieira You're right, sorry for repeating obvious things :)

[SaraVieira]

@morajabi Don't apologize man , I know lots of people don't read comments so it's never bad to repeat stuff 😉

[kitten]

@SaraVieira Looks good! It'll need some formatting though. We should strip out the title (# ...), the table of content, the note, the badge, and the two footers.

The contribute section needs to be replaced with some content of our own that tells people to go to the repo.

And the last part is sth tricky. @morajabi The navbar and sidebar are pretty static and unconfigurable at the moment 😢 However, we'll need to include the navbar on the homepage eventually, and we'll need to grab all the headers (## ...) and generate an alternative sidebar for this page.

Is this possible at the moment or will it need loads of modifications?

Edit: @SaraVieira I think we should just retrieve the raw md file and not do a base64 conversion at all. (https://raw.githubusercontent.com/styled-components/awesome-styled-components/master/README.md) It might seem more brittle, but some unicode is being broken, and it seems like an unnecessary conversion

[mxstbr]

This is awesome @SaraVieira! I'd definitely link to the repo from somewhere so folks can contribute their stuff to it?

[morajabi]

@philpl I can take a look at this tonight (GMT+3:30 🙃). Also if we closed #115 and shipped the nav bar before this, we need to add "Ecosystem" link to nav.

[SaraVieira]

@philpl I'll switch the API call to just get the raw one and see if it works :)

About the removing stuff aside from splitting the text in various places I don't know how we can achieve this 😢

@mxstbr Sure ! I'll add links at the bottom 😄

[mxstbr]

About the removing stuff aside from splitting the text in various places I don't know how we can achieve this 😢

Why not do that? It's not beautiful but if it works, it works!

[SaraVieira]

@mxstbr Just wanted to get that approval :p

We should strip out the title (# ...), the table of content, the note, the badge, and the two footers.

I will do this then and have a PR today 😝

When is the next release?

[mxstbr]

As soon as #115 lands, basically. That's blocking a release atm.

[kitten]

@morajabi Thanks! I don't think that the ecosystem page (+ the navbar fixes) will go in before #115. At least I hope not since it's a trivial PR I think 😆 Shall I open a new issue for you with the things mentioned above for the navbar/sidebar, regarding the homepage and ecosystem page?

[morajabi]

@philpl No problem!

[morajabi]

@philpl Can you make the issue with details?

[SaraVieira]

Closed by #99