Ci+embeds (codesandbox#3022)

garethx · CompuIves · commit 4ffa3b63fd3e · 2019-11-13T14:48:16.000+01:00
* Adding draft announcement post * fix link * Delete mattgperry_tweet_1181863225756934144.png * Add files via upload * Update index.md * Update index.md * Moving docs onto /docs * fix issues * Alter docs * Tweak docs * Tweaks to blog posts * Tweaks to embed * Update packages/homepage/content/articles/codesandbox-ci-embeds/index.md Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * Update packages/homepage/content/articles/codesandbox-ci-embeds/index.md Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * Update packages/homepage/content/articles/codesandbox-ci-embeds/index.md Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * Update packages/homepage/content/articles/codesandbox-ci-embeds/index.md Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * Update packages/homepage/content/articles/codesandbox-ci-embeds/index.md Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * Update packages/homepage/content/articles/codesandbox-ci-embeds/index.md Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * Update thank youi * Add links to thanks * Update index.md apparently we don't need the embed code, some plugin will turn this into one. * Add files via upload * Update index.md * Add docs for theme in embed * Revert "Update packages/homepage/content/articles/codesandbox-ci-embeds/index.md" This reverts commit 3a86b0d.
diff --git a/packages/app/src/embed/components/App/elements.js b/packages/app/src/embed/components/App/elements.js
@@ -33,9 +33,9 @@ export const Moving = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
+  left: props.sidebarOpen ? 250 : 0;
   right: 0;
-  transform: translateX(${props => (props.sidebarOpen ? 250 : 0)}px);
+  width: ${props => (props.sidebarOpen ? 'calc(100% - 250px)' : '100%')};
   border: 1px solid;
   /* 8 digit hex code with last 2 for opacity */
   border-color: ${props => props.theme.colors.sideBar.border + '33'};
diff --git a/packages/app/src/embed/components/Content/index.tsx b/packages/app/src/embed/components/Content/index.tsx
@@ -83,7 +83,7 @@ type State = {
   running: boolean;
   currentDevToolPosition: DevToolsTabPosition;
 };
-
+// eslint-disable-next-line import/no-default-export
 export default class Content extends React.PureComponent<Props, State> {
   state: State;
 
diff --git a/packages/app/src/sandbox/status-screen/run-on-click-screen.html b/packages/app/src/sandbox/status-screen/run-on-click-screen.html
@@ -4,6 +4,7 @@
     color: #fff;
     font-family: 'Inter UI', sans-serif;
     background: #151515;
+    cursor: pointer;
   }
 
   .container {
diff --git a/packages/homepage/content/articles/codesandbox-ci-embeds/images/banner.png b/packages/homepage/content/articles/codesandbox-ci-embeds/images/banner.png
diff --git a/packages/homepage/content/articles/codesandbox-ci-embeds/images/mattgperry_tweet_1181863225756934144.png b/packages/homepage/content/articles/codesandbox-ci-embeds/images/mattgperry_tweet_1181863225756934144.png
diff --git a/packages/homepage/content/articles/codesandbox-ci-embeds/images/oldvsnew.png b/packages/homepage/content/articles/codesandbox-ci-embeds/images/oldvsnew.png
diff --git a/packages/homepage/content/articles/codesandbox-ci-embeds/index.md b/packages/homepage/content/articles/codesandbox-ci-embeds/index.md
@@ -0,0 +1,104 @@
+---
+banner: ./images/banner.png
+slug: codesandbox-ci-embeds
+authors: ['Ives van Hoorne']
+photo: https://avatars0.githubusercontent.com/u/587016?s=460&v=4
+title: Announcing CodeSandbox CI and all-new Embeds
+description:
+  Today we're pleased to launch CodeSandbox CI - A free continuous integration
+  service purpose-built for open source library maintainers, along with a new
+  look for embeds.
+date: 2019-11-13
+---
+
+## CodeSandbox CI
+
+Maintaining open source projects, while enormously fulfilling, can be
+time-consuming and stressful. After a busy Hacktober, we know from first-hand
+experience what it's like, and we wanted to help library maintainers make the
+best use of their time. Today we're pleased to launch CodeSandbox CI: A free
+continuous integration service purpose-built for open source library
+maintainers.
+
+https://youtu.be/k_aR_4FeKlc
+
+### Here's how it works
+
+CodeSandbox CI is a GitHub app that auto-builds your library⁠ from pull
+requests. Whenever someone opens a new pull request, CodeSandbox CI builds a new
+version of your library. Those builds get posted to our registry, so you can
+test it in CodeSandbox or locally, and all without having to publish the build
+to npm⁠. Plus, if the original GitHub issue contains a link to a reproducible
+sandbox, then we'll automatically fork it using the new PR build. That means you
+can review it online with one click.
+
+### Used by the biggest names in OSS
+
+After a successful private beta, CodeSandbox CI is already in use by projects
+like React, Babel, Framer, Material UI, and others. And it's proving to be a
+real time-saver.
+
+**Try it out for yourself by
+[installing the GitHub app](https://github.com/apps/codesandbox)**.
+
+[![Framer tweet](./images/mattgperry_tweet_1181863225756934144.png)](https://twitter.com/mattgperry/status/1181863225756934144?s=20)
+
+## A new look for Embeds
+
+CodeSandbox CI is the latest way maintainers can use CodeSandbox to save time
+and improve experiences for users and contributors. But more than 4000 open
+source projects already use CodeSandbox embeds in their docs, blog posts, and
+websites—providing visitors with working examples that help explain how to use
+their creations.
+
+Embeds provide the ability to view a sandbox inline in your content, whether you
+want to show the code, the running app, or both at the same time. Our embeds use
+a specially designed version of CodeSandbox that's small in size but almost as
+powerful as the full thing, making for a great way to explain a coding concept
+or show off a demo.
+
+We want you to be able to use embeds anywhere you want. So based on feedback
+from our community, we've launched a new default look and feel for embeds that's
+minimal in design and looks great wherever you place it. With a subtle color
+palette and no branding, it doesn't take the focus away from your great content.
+
+Danny Ruchtie, Head of Design here at CodeSandbox, notes that with this release,
+_“we've focused on building something that would better blend in with its
+surroundings while maintaining all its powerful features. So there's less focus
+on the UI and more on the content. We also wanted to give users more control and
+improve the embed experience on mobile.”_
+
+See the difference for yourself:
+
+https://codesandbox.io/s/new?fontsize=14
+
+### The next big design trend?
+
+Ahead of the hipster crowd and the recent dark mode trend (we've had a default
+dark theme since we started!), we're pleased to introduce what's sure to be the
+next big thing in web design: light mode!
+
+Seriously though, while black's our go-to, we appreciate it doesn't always work
+for some site designs. So we've added a new white-based theme for embeds, which
+you can toggle on when creating an embed from the Share menu in the editor.
+
+The new design is already live, so check it out and take a look at
+[our docs](https://codesandbox.io/docs/embedding) for more info.
+
+### Get more done
+
+With embeds, and now CodeSandbox CI, we're giving open-source project
+maintainers new ways to reduce their support overhead and get more done.
+Available now, CodeSandbox CI makes it possible to test fixes without the need
+to clone, install, and check things locally. There’s more info about how to
+configure CodeSandbox CI in [our docs](https://u2edh.csb.app/docs.html), and you
+can get started by
+[installing the GitHub app](https://github.com/apps/codesandbox).
+
+## Thanks
+
+Thanks goes to [Bogdan Luca](https://twitter.com/lucabogdan),
+[Siddharth Kshetrapal](https://twitter.com/siddharthkp), and
+[Danny Ruchtie](https://twitter.com/druchtie) whose hard work made these updates
+possible. And also to our community for your thoughtful feedback and
+suggestions. We can't wait to see what you will build!
diff --git a/packages/homepage/content/docs/2-embedding.md b/packages/homepage/content/docs/2-embedding.md
@@ -49,6 +49,7 @@ find them here.
 | `runonclick`     | Only load the preview when the user says so.                                                                   | `0`/`1`                              | `0`                                  |
 | `verticallayout` | Whether to show the editor and preview vertically.                                                             | `0`/`1`                              | `0`                                  |
 | `view`           | Which view to open by default                                                                                  | `editor`/`split`/`preview`           | `split`, `preview` for small screens |
+| `theme`          | Which theme to show for the embed                                                                              | `dark`/`light`                       | `dark`                               |
 
 ## Example Embeds
 
diff --git a/packages/homepage/content/docs/8-ci.md b/packages/homepage/content/docs/8-ci.md
@@ -0,0 +1,102 @@
+---
+title: CI
+authors: ['Ives van Hoorne']
+description:
+  Here's what CodeSandbox CI is, how it will benefit you as a library
+  maintainer, and how to set it up for your library.
+---
+
+## What is CodeSandbox CI?
+
+CodeSandbox CI is a [GitHub app](https://github.com/apps/codesandbox) that you
+can install in your repository. The app is responsible for building your
+library. Whenever a Pull Request is opened it builds a version of the library
+from that PR. This is published to our registry, so you can immediately test the
+library in CodeSandbox or locally without publishing to nom or elsewhere.
+
+## Why do I want this?
+
+The goal of this app is to make it easier for you to test your library without
+publishing to npm yet. Since CodeSandbox is already used for bug reports we
+wanted to make it possible to also test the PR version of your library with the
+existing bug reports.
+
+## How does it work?
+
+A typical workflow might look like this:
+
+- Someone opens an issue for a bug with a sandbox reproducible
+- Someone opens a fix PR mentioning the issue
+- We build the library from the PR, fork the sandbox repro and install the new
+  library in that sandbox. This way you will only have to open the generated
+  sandbox to confirm that the fix works with no need to clone, install or test
+  locally.
+
+## How do I set this up?
+
+For most libraries, the only thing you need to do is install this
+[GitHub App](https://github.com/apps/codesandbox). In some cases you might need
+to do some configuration, an example of this is for monorepos. You can configure
+your library by creating a file called `ci.json` in a folder called
+`.codesandbox` (`.codesandbox/ci.json`) in the root of your repo. An example PR
+can be found [here](https://github.com/facebook/react/pull/17175).
+
+## Configuration
+
+You can configure how your projects build on CodeSandbox CI by creating a file
+called `ci.json` in a folder called `.codesandbox` in the root of your
+repository.
+
+### Configuration Format
+
+These are all the configuration options you can set. They are all optional.
+
+```json
+{
+  // which script in package.json to run to install instead of `npm ci` or `yarn install`,
+  // can be `false` if you want to skip this step
+  "installCommand": "install",
+  // which script in package.json to run to build,
+  // can be `false` if you want to skip this step
+  "buildCommand": "build",
+  // if you have a monorepo, put the paths of the packages here. We'll infer the package names.
+  // globs are supported
+  "packages": ["packages/react", "packages/react-dom"],
+  // if you don't publish from the package directory, specify per dependency
+  // where the contents of the built dependency are. These files will be uploaded
+  // to our registry
+  "publishDirectory": {
+    "react": "build/node_modules/react"
+    "react-dom": "build/node_modules/react-dom"
+  },
+  // a list of sandboxes that you want generated for a PR, if this list
+  // is not set we will default to `vanilla`. The built library will automatically
+  // be installed in the fork of these sandboxes in the place of the library. So if
+  // you have a sandbox with `lodash`, and you built `lodash` and `vue`, we will only
+  // replace `lodash` with the built version.
+  // You can also set absolute paths to a directory in your repository. We will make sure
+  // to generate a sandbox from the contents of that directory.
+  "sandboxes": ["vanilla", "new", "/examples/todomvc"]
+}
+```
+
+### Monorepo Example
+
+Monorepos are quite common, here's an example configuration for a monorepo:
+
+```json
+{
+  "packages": ["./", "packages/vue-template-compiler"]
+}
+```
+
+This builds two libraries: `vue`, which is in the root of the repository, and
+`vue-template-compiler`, which resides in the `packages` folder.
+
+We automatically infer your packages from your lerna config or yarn workspaces
+config if `packages` is not set.
+
+We handle auto linking of these dependencies, this means that we rewrite the
+dependencies to the newly built versions of CodeSandbox CI. In this example,
+`vue` uses `vue-template-compiler`, so we've updated `package.json` of `vue` to
+point to our built `vue-template-compiler`.
diff --git a/packages/homepage/gatsby-node.js b/packages/homepage/gatsby-node.js
@@ -14,7 +14,7 @@ const getBlogNodeInfo = ({
     frontmatter: { authors, date, description, photo },
   },
 }) => ({
-  author: authors[0],
+  authors,
   date,
   description,
   photo,
@@ -89,7 +89,7 @@ const createNodeFieldsFromNodeInfo = ({
 const createBlogNodeFields = ({ createNodeField, nodeInfo }) => {
   createNodeFieldsFromNodeInfo({
     createNodeField,
-    nodeFieldNames: ['author', 'date', 'description', 'photo'],
+    nodeFieldNames: ['authors', 'date', 'description', 'photo'],
     nodeInfo,
   });
 };
diff --git a/packages/homepage/src/components/PostElements.js b/packages/homepage/src/components/PostElements.js
@@ -28,14 +28,14 @@ export const AuthorImage = styled.img`
   width: 32px;
   height: 32px;
   border-radius: 4px;
+  margin-right: 1rem;
 `;
 
 export const Author = styled.h4`
   font-family: 'Poppins', sans-serif;
   font-weight: 500;
   font-size: 18px;
   margin: 0;
-  margin-left: 16px;
 
   color: #f2f2f2;
 `;
diff --git a/packages/homepage/src/pages/blog.js b/packages/homepage/src/pages/blog.js
@@ -26,15 +26,17 @@ import {
 // UNCOMMENT AT THE BOTTOM IF IT BREAKS
 // GATSBY DOES NOT LET YOU HAVE FIELDS THAT DON'T EXIST YET
 
-const Info = ({ author, date, mobile, photo, ...props }) => (
+const Info = ({ authors, date, mobile, photo, ...props }) => (
   <Aside mobile={mobile} {...props}>
     <PostDate>{format(date, 'MMM DD, YYYY')}</PostDate>
 
-    <section>
-      <AuthorImage src={photo} alt={author} />
+    {authors.map(author => (
+      <section key={author.name}>
+        <AuthorImage src={photo} alt={author} />
 
-      <Author>{author}</Author>
-    </section>
+        <Author>{author}</Author>
+      </section>
+    ))}
   </Aside>
 );
 
@@ -62,15 +64,15 @@ const Blog = ({
       {blogPosts.map(
         ({
           node: {
-            fields: { author, date, description, photo, slug, title },
+            fields: { authors, date, description, photo, slug, title },
             frontmatter: {
               banner: { publicURL: banner },
             },
             id,
           },
         }) => (
           <Wrapper key={id}>
-            <Info author={author} date={date} photo={photo} />
+            <Info authors={authors} date={date} photo={photo} />
 
             <Posts>
               {banner && (
@@ -98,7 +100,7 @@ const Blog = ({
                 <Subtitle>{description}</Subtitle>
               </div>
 
-              <Info author={author} date={date} mobile photo={photo} />
+              <Info authors={authors} date={date} mobile photo={photo} />
             </Posts>
           </Wrapper>
         )
@@ -116,7 +118,7 @@ export const query = graphql`
       edges {
         node {
           fields {
-            author
+            authors
             date
             description
             photo
diff --git a/packages/homepage/src/templates/_post.elements.js b/packages/homepage/src/templates/_post.elements.js
@@ -91,5 +91,5 @@ export const MetaData = styled.aside`
 export const AuthorContainer = styled.div`
   align-items: center;
   display: flex;
-  flex: 1;
+  margin-bottom: 0.5rem;
 `;
diff --git a/packages/homepage/src/templates/post.js b/packages/homepage/src/templates/post.js
@@ -23,7 +23,7 @@ import {
 export default ({
   data: {
     blogPost: {
-      fields: { author, date, description, photo, title },
+      fields: { authors, date, description, photo, title },
       frontmatter: {
         banner: { publicURL: banner },
       },
@@ -43,11 +43,17 @@ export default ({
         <Title>{title}</Title>
 
         <MetaData>
-          <AuthorContainer>
-            <AuthorImage alt={author} src={photo} />
+          <div style={{ flex: 1 }}>
+            {authors.map(author => (
+              <AuthorContainer key={author}>
+                {authors.length === 1 && (
+                  <AuthorImage alt={author} src={photo} />
+                )}
 
-            <Author>{author}</Author>
-          </AuthorContainer>
+                <Author>{author}</Author>
+              </AuthorContainer>
+            ))}
+          </div>
 
           <PostDate>{format(date, 'MMM DD, YYYY')}</PostDate>
         </MetaData>
@@ -64,7 +70,7 @@ export const pageQuery = graphql`
   query Post($id: String) {
     blogPost: markdownRemark(id: { eq: $id }) {
       fields {
-        author
+        authors
         date
         description
         photo

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`color: #fff;`
`5`	`5`	`font-family: 'Inter UI', sans-serif;`
`6`	`6`	`background: #151515;`
	`7`	`+ cursor: pointer;`
`7`	`8`	`}`
`8`	`9`
`9`	`10`	`.container {`