styled-components / styled-components-website Goto Github PK

People will look in the DevTools, see the x-Asdf123 classnames and be turned off. Let's avoid that by using the Babel plugin.

I know, I know, who needs SEO anyways? But if you google the site this is what you get:

None of the content, and only the top-level pages are linked. (not even the sub-sections are there) Would much appreciate help so people can find the content on the website more easily!

Since the tooling docs are quite long, they don't really make sense to all live on a single huge page. I think it'd make sense to move them all to actually separate pages:

• /docs/tooling/babel-plugin
• /docs/tooling/stylelint
• etc.

/cc @philpl wdyt?

We've now for the first time moved a section (babel plugin) to a different URL. But a slight rename can also change the URL dramatically, which leads to previous links being dead / unusable. Together with anchors this can become really annoying as it might not be immediately obvious that a section is missing.

We need to add some "stub" entries to the docs.json that set up some simple redirection to the new location. I think this is crucial not to frustrate readers over time 👍

When I'm clicking in "Basics" or "Advanced" it is taking a while before I see the page content.

https://media.giphy.com/media/xDPuIsXoRWxKo/giphy.gif

This could be related to #36

I'm new on using styled-components. I'm working with it on a React Native app. I've read all documentation and React Native section is maybe lacking of some little help It would be useful.

• Emphasize on styled.Component is an alias for styled(Component), in case Component is not built into the aliases (see styled-components/styled-components#1027)

• Interpolation can mix more than text/numeric values/theme.props and also include other expressions (since they're actually ES template strings), e.g.:

  styled.View`
    border-width: ${StyleSheet.hairlineWidth};
  `;

• Animations section is made for web and it is clarified in React Native section: as an improvement it could link to Animations documentation, and mention you can use Animated.createAnimatedComponent() with styled.Component: Animated.createAnimatedComponent(styled.Component)

• (this is still confusing for me) By the end of React Native section it is mentioned that now it uses percentages, which is fine, but It was really confusing for me when I tried to use unitless values (since I've used RN StyleSheet before) and styled-component was expecting a unit like px. Maybe it should emphasize on using units just like on CSS.

Hope this helps to improve documentation :)

We should make the documentation available in more languages! The setup is definitely not there to do this so there'll be a lot of changes necessary in the website to get set up with the tooling. Does anybody have experience with this?

The biggest wins based on where tweets seem to be coming from would likely be:

• Japanese (!)
• Chinese (!)
• German (I can cover this one)
• Spanish?
• Portuguese?
• Hindi?

We could use a more tutorial-like guides section for some longer topics.

• Server-side rendering with Express (including setting up a build process?)
• Setting up a codebase for success (stylelint + prettier + folder structure?)
• Preact + styled-components
• Inferno + styled-components
• Other ideas?

Rather than have the markdown content as strings inside of JavaScript (which is annoying for escaping and highlighting, and might make translation tooling harder) we should be extending the webpack configuration with raw-loader, have .md files, import them and wrap them in react-markings!

We might even be able to do it automatically so that we don't have to do the wrapping manually for each .md file? There's gotta be a webpack plugin for that! 😉

Rather than living on GitHub, the docs for the stylelint processor and the shared config should all live on the website to improve discoverability.

A list of all the positive tweets about styled-components! A tiny list compiled here: styled-components/styled-components.github.io#3

I love how the React and Flow docs do their search, I think that's using Algolia? We should have the search input on every page, so it'll likely have to sit in the nav bar at the top, ref #83.

For now it'd be fine to only live on docs pages in the sidebar though, don't let yourself be blocked by #83!

Update: There's a search component ready for the nav bar.

Hello, the "documentation" button is broken in production:

The classe names (sc-brqgnP dlxELr sc-bZQynM coTCuP) seem to be right, but the order on which they are applied is wrong:

I can't repro the issue on dev (master).

Currently we have a vendored version of next: https://github.com/styled-components/styled-components-website/blob/master/vendor/next-v2.4.8.tgz

This is to work around our styling problem that prevented us from wrapping the entire app. A fix was proposed here but wasn't merged for a long time: vercel/next.js#2010

Now that it was merged we can get rid of the vendored version and upgrade to v3, as soon as the fix lands in the next patch release

This is 100% on me, rather than just link to my talk we should have an actual "Motivation" section.

We want to create a Tooling section, where we are going to add:

• babel-plugin-styled-components (now under Advanced, see: /pull/62)
• jest-styled-components

Perhaps the key aspect of SC is elegance in splitting style/markup. And since many projects still use old CSS classes that are shared for the whole project, class names will remain for many projects.

The new .attr chainable method is awesome for this use case & I think adding a className in the provided example may be a good idea. Something like

import styled from 'styled-components';

const Input = styled.input.attrs({
  type: 'text',
  size: props => props.small ? 3 : 8,
  className: 'pa4 ba bg--black-80',
})`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: ${props => props.padding}
`;

Those don't make any sense to live in the repo, they should be on the website too! (especially once we move to a mono-repo)

Maybe there's a way to show a live star count and "Star" button on the homepage without using GitHub's huge default embed? Can we fetch the star count from the backend and cache it for 24 hours in memory or something like that?

Not many people are aware that you can use styled-components with any third-party component library by just doing

import { Button } from 'component-lib';

const MyButton = styled(Button)`
  styles: here;
`

We should add that somewhere in the docs!

I can't find in new documentation site information from this @mxstbr tweet:
https://twitter.com/mxstbr/status/865916488334684160

And there is a question. I can't use ordinary React component inside constructor, so I do something like that:

export default styled(Item)``

Maybe there is more convenient way to makes it happen?

• Should use a Twitter summary card with large image and use something like the logo on the gradient background as the image. This is what it currently looks like when tweeted, as tested with the official validator:

• Should have a proper description and title on every page

Hi guys,

stumpled upon the beautiful website today - love it! Unfortunately, there's a nasty bug - at least in Mac OS, Chrome Version 60.0.3112.101 (Official Build) (64-bit):

If you scroll down the content completely, you can't scroll in the nav section anymore.

I've created a screencast to highlight this problem:

Unfortunately, you can't see when I'm using my scroll wheel on the mouse - but it should be straight forward to reproduce the issue on your machine:

1. open up https://www.styled-components.com/docs
2. scroll the content area once
3. try to scroll the navigation area
4. 💥 - nothing happens

If you select so much text in the navigation area that it's start scrolling based on your selection, it's free again and it's able to scroll the section. Until: You scroll the content once again! :)

There is some confusion around how to use them: https://stackoverflow.com/questions/44856283/can-not-get-media-templates-working-using-styled-components

We should probably find a way to show the import there!

For some reason the homepage ships a lot of styles (a few thousand lines) even though it should only serve the ones needed to render the homepage. Something's wrong, /cc @styled-components/core 🤔

Maybe that's due to Next.js and how it renders?

h/t @threepointone @AndrewIngram

I'd hate for the docs to be outdated because you can't update the docs and code at the same time. I'd prefer the website (when finished) to live in the same repo as the code if at all possible!

Right now, even on a large screen, large portions of the nav are cut off:

That's not good, and it'll only get worse as we add more content to the site. We should figure out a better way of doing navigation.

We need a top nav for the "big pages" that should persist across all pages. (Homepage, Docs, Docs -> Basics, Docs -> Advanced, Docs -> FAQ, Docs -> Tooling, etc) We'll then likely still need some sort of side nav for the docs pages to navigate within them.

Any design/layout ideas and implementations welcome!

The docs homepage right now mostly duplicates content from the nav and from the homepage:

We should figure out a better thing to do with it than just that. Any ideas?

Hey guys, I have a proposition to improve docs.
In Regards to LiveEdit components where you can scroll inside.

The problem is when you scroll over top or bottom inside LiveEdit component, then you scroll with the whole page and you mess up your scroll position. Which seems super annoying to me.

Here is a demo if you don't know what I mean.
http://codepen.io/pavelsuraba/full/bWVoBO/

Anyway it's not hard to implement and I could fix that with HOC.

Would this change be welcomed?

Thanks.

• Add the MIT License file?
• Update Next.js - It's using 2.3.0-alpha1, 2.4.0 is out and it works fine.

I can take these if permitted???

With the volunteers in #70 and the changes in #74 the content is now in a markdown string and we should now be able to start translating the webpage.

React uses https://crowdin.com, which seems pretty good in terms of the workflow for translators and they offer a free unlimited account to OSS projects. What I'm not sure about is the workflow from the development side; how are changes going to get on the website, which format do the strings need to have, etc.

On top of that I'm not sure how we'd make that happen across the app, how we'd structure the repo, etc.

Any investigations/experiences here very helpful.

micro-analytics is nice and all, but doesn't quite give us what we need and I don't have time to improve it further.

Let's switch to something else. I'd love for the stats to be public, if that's not possible because it doesn't exist let's just use Google Analytics because it's easy?

A video is probably better suited for this part than a wall of text.

As discussed cc @mxstbr

When visiting https://sc-next-docs.philpl.com/docs at a smaller breakpoint, the overlay menu doesn't allow scrolling on desktop (OSX, Chrome 57).

On mobile (iOS 10, Safari) it seems a bit touch and go whether you're scrolling the overlay menu or the body itself.

The FAQ links "Support for nesting" and "Referring to other components" take you to the FAQ, but they don't jump to the appropriate section:

https://www.styled-components.com/docs/faqs#referring-to-other-components

This is because the <SectionLayout> title doesn't match; the FAQ item headings are all question-format, but it looks like it just uses the dash-case version of the menu item for the hash anchor links.

A fancy solution could be to update docs.json to support a "display" heading as well as a "hash" string, for navigation. More simply, we could just update the links to match.

Sometimes I see in different PRs something like that:

const Header = () => {
  const Title = styled.h1`
    font-size: 10px;
  `

  return (
    <div>
      <Title />
    </div>
  )
}

As I understand classes for this component will be generated only in runtime in browser and even SSR doesn't help. It's pretty hard to describe this all the time, so it will be great to have a link in official documentation.

Snack allows to type React Native code in browser and preview directly in the browser with appetize.io simulator, or on a real device. Snack has a embed widget for embedding the editor in a web page.

https://snack.expo.io

Above "Getting started", instead of the "Motivation" section-that should really be its own section? /cc @philpl

https://www.styled-components.com/docs/basics#attaching-additional-props

The attrs function passes all attributes directly to the dom node.
so it should only be used with "safe" values that won't trigger html incompatibilities.

In the docs the word "props" is being used.

"It allows you to attach additional props (or "attributes") to a component."

And it implies that it should be used for organizing the data logic before the css expression.
The example actually uses them for something similar to "defaultProps".
If you use it like the docs tells you to you will suddenly generate tons of react warnings.

The docs should be clearer about this function intended behavior to prevent these confusions.

PS:
The behavior that the documentation implies is actually really helpful and the impossibility to use it like this creates the need for workarounds like creating wrapper-components. Would creating a .props functionality that behaves exactly like attrs but without the dom printing be something to consider? By creating wrapper components you're suddenly breaking the styled-components "flow" preventing further "extensions". With a props functionality tons of compositions would be possible.

Just had a brief discussion here: #59

So either we:

• Add some notes on imports in "Getting Started"
• Add some notes to each helper in the API section
• Add some notes here and there ( 👎 )
• Add an import functionality to react-live ( any ideas )

cc @TrevorBurnham @mxstbr

Yellow!

I was thinking maybe adding eslint and prettier would be a good idea here since the website has a lot of components and things can get messy with different ways of writing code

Sent from my Bq Aquaris M5 using FastHub

Is there some reason why you have used resetStyles object/string in _document.js instead injectGlobal() ?

So it doesn't span the whole page unnecessarily:

On the other hand it might be cool to have a live example on the homepage already so people can start tinkering around?

Because I ❤️ it. I also have a webfont license for it 😄

This is just a note for me or @superhighfives to hook this up soon.

Most of the content right now is from the—fairly outdated—docs in the styled-components repo.

It'd be great to take the time to think about the sections, narrative, missing content, current content, etc.

Rather than living on GitHub, the docs for the Babel plugin should live on the website to improve discoverability.

Rather than having a huge list of related libraries in our README we should move that to the website! Could be structured into "one-off npm components you can use built with s-c", "component libraries" "grids" and "others" or something.