There's kind of a tool for this, but I don't think it'll work with the way we're doing things. But it'd be pretty sweet to have a tool that'd automatically apply prettier-eslint to all of our code examples in our markdown strings :)

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: None, sorry!
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/integrations/content/recompose.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Right now, pretty much any change is going to result in snapshots breaking. That's fine, but one thing I want to avoid is having to update the snapshots for every content change. We want this to be really easy for folks to contribute to and that means being able to contribute without even pulling down the repo and just using the GitHub editor for updating content.

I'm unsure of the best way to solve this. I just don't want to have to update snapshots every single time there's a content change.

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/blob/master/README.md#theming
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/advanced/content/theming.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Because on sites like this one, normally folks don't care whether they've been there before and it's distracting IMO.

Also this is ugly 😛:

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/tree/master/examples/with-jest
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/integrations/content/jest.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/tree/master/examples#with-nextjs
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/integrations/content/next.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/tree/master/examples#dynamic--static-styles
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/basics/content/dynamic-styles.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

In particular, we should verify color contrast and font sizes are accessible 👍 we already have eslint-plugin-jsx-a11y which is really helpful for many things. Would be great to just make sure our design is accessible to people 👍

There is a URL /docs that we'd like to populate with documentation. The documentation that we have now is all piled into the README of glamorous.

Ideally the documentation we store will be in markdown to make it easy or other people to contribute.

Since there is no content just yet, there's a lot of flexibility on how to structure this. It might be worth creating a directory like docs and then putting the markdown files in there. Then we can load the markdown files into the /docs page.

An idea I have is to split the documentation up into separate files like according to the headers. From there we might have an easier time supporting searching and direct linking to topics through query params.

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/blob/master/README.md#glamorous-api
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/api/content/glamorous.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

We'd like to have this as a MIT licensed project, but there isn't any LICENSE file yet.

In addition, we should probably add a Contributing file and Code of Conduct.

Any other neat things we can think of (PR templates, commitzen, etc.) could be helpful too. Whatever makes it easy for people to contribute! 😄

So we can encourage folks to contribute improvements to the docs. Probably want to just have some subtle icon at the top of each section that links to the github /edit URL for the relevant file, for example.

creating wireframes with sketch so that the look n feel of the website is agreed upon.

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/blob/master/README.md#size
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/advanced/content/size.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

The site's design could use lots of attention, and while it's being done we may want to move global style choices (colors, typography, etc) into a ThemeProvider and then use the ThemeProvider in the layout component.

Further, there is a mix of uses of glamorous in this site. There are inline component definitions and glamorousComponentFactory definitions, which makes it a little harder to find your way around the codebase. We may want to lean towards one method for the sake of coherence and legibility, and in consideration of the use of a ThemeProvider it might be clearer to use glamorousComponentFactory.

Consider this example, where we can use the theme in a component to define a common color and media query.

const StyledHeading = glamorous.H1((props, theme) => ({
  color: theme.colors.primary, // uses theme as single location for definitions
  fontSize: 10,

   // pulls in the query definition from theme
   [theme.mediaQueries.mobile]: {
      fontSize: 20
  }
}))

export default () => <StyledHeading>glamorous</StyledHeading>

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/tree/master/examples#with--polished
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/integrations/content/polished.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

This looks kinda funny

Analytics will help give us an idea of what people are looking at most and where to focus efforts.

I don't think Google analytics in the browser will be good enough because many of our target audience blocks those. Any ideas?

When I used README.io for angular-formly I really liked the "callout" feature:

I think that we could add another pragmaHandler here to support a syntax like this:

# this is some markdown

```callout {type: 'info', title: 'Alternative method'}
You could also do things like such-and such... blah blah

And `markdown` should work *here* too
```

I'm thinking about doing this myself, but we probably need a design for this...

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: None, sorry
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/advanced/content/existing-css.js (partially finished)

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

This is a small issue since we're hosted on now, but everyone is advised to upgrade next to mitigate a security issue.

https://send-patch.now.sh/

I think it'd be great to have some more labels available on this repo so we can organize tasks and make it easier for people to find something they can contribute that falls within their skill set. Off the top of my head I'm thinking:

• Good for Beginner (or "Good First PR", something to highlight tasks that don't require a ton of background knowledge)
• Documentation
• Has PR
• Under Discussion

Anything else?

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: I'm actually not certain what this should be... Maybe we could include the video intro?
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/basics/content/getting-started.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Because this.

We just need to check in our scripts whether the PR is coming from a fork and if it is, we just don't attempt to deploy. Could probably do this at the top of other/now-travis...

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/tree/master/examples#with-create-react-app
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/integrations/content/create-react-app.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/blob/master/README.md#react-native
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/basics/content/react-native.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

I'm pretty sure this is what Styled-Components uses for their site: https://react-live-demo.philpl.com/

Right now the production deployment will freeze after an hour of inactivity. That's kinda annoying. So I have to do now scale https://rc.glamorous.rocks every time there's a new deploy if I don't want it to freeze. By the time the website is live, I don't want to have to do that with https://glamorous.rocks. Let's automate that (just for the production deployment).

I don't know how other folks do this, but I think that Algolia is what several others use. Anyone wanna know what it'd take to do that?

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: The animation bit from here
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/basics/content/animation.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Before we officially announce the website, we should probably have a slick looking twitter preview card for it so when folks tweet about it, they see something awesome (in addition to the equally awesome domain: https://glamorous.rocks/)

So I'd love to get some mocks together for a good twitter card. We could do small:

Or large:

Once we have the image we want to use, we'll need to implement the twitter/facebook meta tags. I did this with JavaScript Air and this is what it looked like:

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="google-site-verification" content="85n8ZBk_3hSeShlRmsVJXgDolakFG4UsMJgpy3mQyPs" />
<meta name="theme-color" content="#efdd4f" />
<meta name="author" content="JavaScript Air" />
<link rel="publisher" href="https://plus.google.com/b/105493143005968326308" />
<meta name="description" content="Episode 049 of the live JavaScript broadcast podcast. Kent C. Dodds has sunset JavaScript Air. No shows are currently scheduled." />
<meta name="description" content="Episode 049 of the live JavaScript broadcast podcast. Kent C. Dodds has sunset JavaScript Air. No shows are currently scheduled." />
<meta name="keywords" content="Maybe one day..." />
<meta name="author" content="JavaScript Air" />
<meta name="copyright" content="2016" />
<meta name="application-name" content="JavaScript Air Podcast" />
<meta property="og:title" content="Maybe one day..." />
<meta property="og:type" content="video" />
<meta property="og:image" content="https://javascriptair.com/episodes/2222-10-18/screenshot.png" />
<meta property="og:url" content="https://javascriptair.com/episodes/2222-10-18" />
<meta property="og:description" content="Episode 049 of the live JavaScript broadcast podcast. Kent C. Dodds has sunset JavaScript Air. No shows are currently scheduled." />
<meta property="og:site_name" content="JavaScript Air" />
<meta property="video:release_date" content="2222-10-18" />
<meta property="og:video:url" content="https://www.youtube.com/embed/" />
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
<meta property="og:video:url" content="https://www.youtube.com/v/?version=3&amp;amp;autohide=1" />
<meta property="og:video:secure_url" content="https://www.youtube.com/v/?version=3&amp;amp;autohide=1" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Maybe one day..." />
<meta name="twitter:description" content="Episode 049 of the live JavaScript broadcast podcast. Kent C. Dodds has sunset JavaScript Air. No shows are currently scheduled." />
<meta name="twitter:image" content="https://javascriptair.com/episodes/2222-10-18/screenshot.png" />
<meta name="twitter:image:alt" content="JavaScript Air episode card with information about the guests, the episode description, and the episode date and time" />
<meta name="twitter:site" content="@JavaScriptAir" />
<meta name="twitter:creator" content="@JavaScriptAir" />
<meta name="twitter:player" content="https://www.youtube.com/embed/" />
<meta name="twitter:player:width" content="1280" />
<meta name="twitter:player:height" content="720" />
<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
<link rel="manifest" href="/resources/manifest/manifest.json" />

Some of those things are not relevant, but much of it would be :)

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: Not really a direct copy, but this should give you an idea: https://github.com/paypal/glamorous/blob/master/README.md#terms-and-concepts
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/basics/content/core-concepts.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Could we do something fun like this? https://twitter.com/tharakawj/status/868411676449796096
Just for fun if anyone wants to do it.

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/blob/master/README.md#glamorouscomponentfactory
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/api/content/glamorous-component-factory.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

This is a chore for @kentcdodds I think:

We should set up Travis or CodeCov to have automated testing for PRs.

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/blob/master/README.md#server-side-rendering-ssr
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/advanced/content/ssr.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

This should be done after #53 so we can include a link to that in each issue.

In the original CodeSandbox there was support for several languages, but in the initial port to next it was not preserved.

We'd like internationalization that supports language selection and will modify all of the UI content (nav, footer, buttons) and when #5 is complete, should also be used to load the correct translation of the documentation.

The CodeSandbox used react-intl so whoever takes this on may want to investigate that library and use it.

I can help with sw-precache-webpack-plugin???

Sadly, it turns out that using *.js files for localization does not work very well for any localization tool :-(

So I'm thinking that maybe we should have a build step. We could actually have a separate build for every locale as well which may not be a terrible idea. Doing this would allow us to do the static export when it's officially released in next.js.

I'm going to start to work on something, but I'm very open to any ideas folks have!

What you did:
Stay relevant on Twitter... 🙃

What happened:
mentioned @kentcdodds and @paulmolluzzo and conversation happened... 😏

Suggested solution:
This cool repo we can use for country flags with localization dropdown

So folks know how they can help

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: None, sorry!
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/integrations/content/glamor.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Not sure why this is.... But it makes them inaccessible to the keyboard.

That would really help I think.

Roadmap link in CONTRIBUTING.md is pointing to 404 page. Please create the Roadmap page.

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/blob/master/README.md#installation
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/basics/content/install.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Learn how to set up the project here and how docs work here. For much of this you should be able to do everything without even cloning the project. You could just do it in the GitHub editor!

• Existing docs: https://github.com/paypal/glamorous/blob/master/other/TYPESCRIPT_USAGE.md
• Destination: https://github.com/kentcdodds/glamorous-website/blob/master/pages/api/content/typescript.js

Anyone can work on this Just comment here when you're going to start. Feel free to improve the existing docs if you're copying them over (it doesn't have to be a direct copy/paste if feel you can improve upon them).

Thanks!

Problem description:
The current favicon is too tiny to make sense out of - Neither the lipstick nor the name is visible. I feel it is because of the too too much surrounding white space.

Suggested solution:
Can we use one of the other logos that we have - The lipstick with g on the side or the background, etc? Or just the lipstick with the braces?