Giter Club home page Giter Club logo

umich-lib-ui's Issues

Investigate CSS solutions

  • Redundant CSS is being imported with each component. Is it possible to tree shake importing css with the current approach?
  • What about this CSS-in-JS buzz?

Investigate `react-docgen` and custom doc site

Resources

*important

Doc components

  • Create a list of public components for navigation
  • Create a component detail view

Component detail view

  • Add code preview and editor in component detail view
  • Docs are written in MD.
  • Docs can embed react-live type components. (Children as render prop? with md-to-jsx)
  • Full screen editor toggle?
  • Prop types
  • Usage docs (could these be a tab?)

Other

  • Be able to view changelog of each component?

https://design-system.lib.umich.edu is blank (subpages load normally)

https://design-system.lib.umich.edu/ is blank on Firefox 67.0.2 on Ubuntu 18.04. Disabling my ad-blocker has no affect. https://design-system.lib.umich.edu/getting-started/introduction/ seems to load just fine, and I'm able to navigate to most of the links on the sidebar.

This was the first time I had visited the page, so my cache was fresh. However, the page loads just fine if I start it with a private session.

My browser loads the following source for that page:

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 2.3.3"/><title data-react-helmet="true"></title><style type="text/css">
    .anchor {
      float: left;
      padding-right: 4px;
      margin-left: -20px;
    }
    h1 .anchor svg,
    h2 .anchor svg,
    h3 .anchor svg,
    h4 .anchor svg,
    h5 .anchor svg,
    h6 .anchor svg {
      visibility: hidden;
    }
    h1:hover .anchor svg,
    h2:hover .anchor svg,
    h3:hover .anchor svg,
    h4:hover .anchor svg,
    h5:hover .anchor svg,
    h6:hover .anchor svg,
    h1 .anchor:focus svg,
    h2 .anchor:focus svg,
    h3 .anchor:focus svg,
    h4 .anchor:focus svg,
    h5 .anchor:focus svg,
    h6 .anchor:focus svg {
      visibility: visible;
    }
  </style><script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var hash = window.decodeURI(location.hash.replace('#', ''))
      if (hash !== '') {
        var element = document.getElementById(hash)
        if (element) {
          var offset = element.offsetTop
          // Wait for the browser to finish rendering before scrolling.
          setTimeout((function() {
            window.scrollTo(0, offset - 0)
          }), 0)
        }
      }
    })
  </script><link as="script" rel="preload" href="/component---node-modules-gatsby-plugin-offline-app-shell-js-b2acb4db879a2ec7e5d4.js"/><link as="script" rel="preload" href="/app-8eb7a5ea54d435cc8816.js"/><link as="script" rel="preload" href="/webpack-runtime-f4e3074304bdc99ed7ae.js"/><link as="fetch" rel="preload" href="/static/d/604/path---offline-plugin-app-shell-fallback-a-30-c5a-BawJvyh36KKFwbrWPg4a4aYuc8.json" crossorigin="use-credentials"/></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.page={"componentChunkName":"component---node-modules-gatsby-plugin-offline-app-shell-js","jsonName":"offline-plugin-app-shell-fallback-a30","path":"/offline-plugin-app-shell-fallback/"};window.dataPath="604/path---offline-plugin-app-shell-fallback-a-30-c5a-BawJvyh36KKFwbrWPg4a4aYuc8";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-8eb7a5ea54d435cc8816.js"],"component---node-modules-gatsby-plugin-offline-app-shell-js":["/component---node-modules-gatsby-plugin-offline-app-shell-js-b2acb4db879a2ec7e5d4.js"],"component---src-templates-doc-js":["/component---src-templates-doc-js-468eb58467ec5a22b4c7.js"],"component---src-pages-404-js":["/component---src-pages-404-js-7492dd92ab97e115e429.js"],"component---src-pages-index-js":["/component---src-pages-index-js-6b8edff3682441ab0610.js"],"pages-manifest":["/pages-manifest-e58ce025228ca80dd43d.js"]};/*]]>*/</script><script src="/webpack-runtime-f4e3074304bdc99ed7ae.js" async=""></script><script src="/app-8eb7a5ea54d435cc8816.js" async=""></script><script src="/component---node-modules-gatsby-plugin-offline-app-shell-js-b2acb4db879a2ec7e5d4.js" async=""></script></body></html>

Look into removing ejected create-react-app

  • Move to a basic build build:lib, might just be with babel?
  • Consider keeping storybook for development
  • Manage the doc site with Gatsby.
  • Consider Lerna for multiple packages

I want everything to sparkle

What

I want everything to sparkle. It should be so shiny.

Really I just don't want the community backlog to be empty and am testing things.

Why

BECAUSE REASONS

Anything else

Nope.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.