primer / blueprints Goto Github PK
View Code? Open in Web Editor NEWReusable components for our documentation sites
License: MIT License
Reusable components for our documentation sites
License: MIT License
Originally posted in primer/css#816 by @gladwearefriends
For example, on the old Colors guide
Glancing at this list lets me confirm if I am on the correct page or not (i.e. some topics as our border radius utility arent intuitive to me as to which page they live on - border? box?). The list also lets me jump to relevant section on the page quicker instead of scrolling.
Perhaps it was taken out for good reason but I just wanted to share my two cents!
If/when a vertical scrollbar is visible in macOS, it runs over the last item in the header, as seen on primer.style/css:
We might want to just bump up the default right padding a notch.
@jhuashao made some really sweet animated versions of header images in (chronologically) primer/design#11, primer/react#413, and primer/css#692. We currently use next/dynamic
to only render them client-side because the bodymovin package doesn't work server-side, but it would be nice to have the static SVG rendered server-side first so to prevent the flash of missing image (yes, FOMI) when it eventually renders client-side. Maybe an HOC like so?
import {createHeaderAnimation} from '@primer/blueprints/components'
import HeaderImage from './HeaderImage'
import animationData from './HeaderImageAnimation.json'
export default createHeaderAnimation(HeaderImage, data)
Another benefit of this is that we wouldn't have to add bodymovin as a local dependency for each of our sites, and could keep it up-to-date here. I think SVGR even allows us to override <svg>
element attributes with props, so our component could add width="100%" height={null}
to have it scale without us having to modify the SVG file after exporting?
Tracking issue for responsive header navigation
Search component:
Top Nav:
๐
On Chrome and Firefox at least, if the main content is too short the styling of the sidebar on the left breaks
It can be tested with this URL for example https://primer.style/css/components/marketing-buttons
Describe the bug
The search bar has a lag to it and does not show what I'm typing until I have finished typing.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I expect the results to load quickly as I'm typing, such as on https://help.github.com/
Desktop (please complete the following information):
Following up the discussion in primer/primer.style#131 (comment), the header link to /team
can be removed. A link to the team has been added in the index page (see primer/primer.style#131 (comment)).
/cc @emplums because primer/primer.style#131 (comment).
/cc @broccolini because primer/primer.style#123 (comment).
This is a tracking/scoping issue for refactoring the SideNav
component to be reusable.
Currently the SideNav component is hardcoded to work specifically for the blueprints project docs. I'd like to break it up into several different components to be added to the library. This will require a bit of refactoring to make all the components truly reusable.
Separate SideNav into 7 components:
Router
with layout stylingpath
prop and children.SideNav
if the path
prop matches the current url.Section
path appended to it's path.SectionLink
sSection
components<SectionLink>
for each child of the path
s node. For instance - <NavList path='support'/>
would render a <SectionLink>
for each doc in the pages/support
folderhref
and children. If children aren't provided then it looks up the meta.title
for the href
and uses that for the title of the link.NodeLink
, but it renders bold when it's href matches the current pathNodeLink
, but it renders with black text when it's href matches the current pathI like the functionality that these components provide, but I'm worried they're too tied to the file structure in next.js being perfect - feels sort of rails-esque. I'm currently considering if a different approach might make them more universal for anyone using React but not necessarily using Next.
Naming could probably be cleaned up a bit. Especially between SectionLink, NodeLink, and NavLink. Do each of these components differentiate based on where they should be used, or how they change when the path matches their href?
I'd love to get a hero illustration made for the docs site, as this is the only docs site that currently doesn't have one!
This issue is to track the remaining components that I'd like to add to Blueprints
Add an edit link component!
It seems that when using custom elements in code examples, the class
attribute gets turned into JSX's classname
.
```html
<custom-element class="btn">Button</custom-element>
```
<custom-element class="btn">Button</custom-element>
<custom-element classname="btn">Button</custom-element>
Originally posted in primer/css#816 by @gladwearefriends
When i looked for it the first time I glanced right over it and thought there wasnt an input. Adjusting the word Search to be lighter would be super helpful!
In order to build the new Header, we'll need a NavDropdown component.
This component must:
<details>
elementAtom packages, docset, GH local environment, and linting don't map well to our new setup. In the new header, they are nested under a Tools section, but they live in primer.style/css. Should we have a Tools site that hosts the docs for all of these?
Serialize a pre-built lunr index ๐
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.