Update code examples in README

[ci skip]

Author: mcmire

README.md

@@ -84,13 +84,13 @@ expect(actual).to eq(expected)
 
 You would get output that looks like this:
 
-![Before super_diff](doc/before_super_diff.png)
+![Before super_diff](doc/before.png)
 
 What this library does is to provide a diff engine that knows how to figure out
 the differences between any two data structures and display them in a sensible
 way. So, using the example above, you'd get this instead:
 
-![After super_diff](doc/after_super_diff.png)
+![After super_diff](doc/after.png)
 
 ## Installation
 

doc/after.png

@@ -0,0 +1,56 @@
+require "super_diff/rspec"
+
+class Person
+  attr_accessor :name, :age
+
+  def initialize(name:, age:)
+    @name = name
+    @age = age
+  end
+end
+
+describe "My test" do
+  it "does something" do
+    actual = {
+      customer: {
+        person: Person.new(name: "Marty McFly, Jr.", age: 17),
+        shipping_address: {
+          line_1: "456 Ponderosa Ct.",
+          city: "Hill Valley",
+          state: "CA",
+          zip: "90382",
+        },
+      },
+      items: [
+        {
+          name: "Fender Stratocaster",
+          cost: 100_000,
+          options: ["red", "blue", "green"],
+        },
+        { name: "Mattel Hoverboard" },
+      ],
+    }
+
+    expected = {
+      customer: {
+        person: Person.new(name: "Marty McFly", age: 17),
+        shipping_address: {
+          line_1: "123 Main St.",
+          city: "Hill Valley",
+          state: "CA",
+          zip: "90382",
+        },
+      },
+      items: [
+        {
+          name: "Fender Stratocaster",
+          cost: 100_000,
+          options: ["red", "blue", "green"],
+        },
+        { name: "Chevy 4x4" },
+      ],
+    }
+
+    expect(actual).to eq(expected)
+  end
+end

doc/after.rb

@@ -0,0 +1,54 @@
+class Person
+  attr_accessor :name, :age
+
+  def initialize(name:, age:)
+    @name = name
+    @age = age
+  end
+end
+
+describe "My test" do
+  it "does something" do
+    actual = {
+      customer: {
+        person: Person.new(name: "Marty McFly, Jr.", age: 17),
+        shipping_address: {
+          line_1: "456 Ponderosa Ct.",
+          city: "Hill Valley",
+          state: "CA",
+          zip: "90382",
+        },
+      },
+      items: [
+        {
+          name: "Fender Stratocaster",
+          cost: 100_000,
+          options: ["red", "blue", "green"],
+        },
+        { name: "Mattel Hoverboard" },
+      ],
+    }
+
+    expected = {
+      customer: {
+        person: Person.new(name: "Marty McFly", age: 17),
+        shipping_address: {
+          line_1: "123 Main St.",
+          city: "Hill Valley",
+          state: "CA",
+          zip: "90382",
+        },
+      },
+      items: [
+        {
+          name: "Fender Stratocaster",
+          cost: 100_000,
+          options: ["red", "blue", "green"],
+        },
+        { name: "Chevy 4x4" },
+      ],
+    }
+
+    expect(actual).to eq(expected)
+  end
+end

doc/after_super_diff.png

@@ -0,0 +1,27 @@
+{
+  "backgroundColor": "rgba(0, 0, 0, 0)",
+  "backgroundImage": null,
+  "backgroundImageSelection": null,
+  "backgroundMode": "color",
+  "dropShadow": true,
+  "dropShadowBlurRadius": "20px",
+  "dropShadowOffsetY": "5px",
+  "exportSize": "2x",
+  "firstLineNumber": 1,
+  "fontFamily": "Fira Code",
+  "fontSize": "14px",
+  "hiddenCharacters": false,
+  "isVisible": true,
+  "language": "text",
+  "lineHeight": "133%",
+  "lineNumbers": false,
+  "loading": false,
+  "paddingHorizontal": "25px",
+  "paddingVertical": "25px",
+  "squaredImage": false,
+  "theme": "seti",
+  "watermark": false,
+  "widthAdjustment": true,
+  "windowControls": true,
+  "windowTheme": "none"
+}

doc/before.png

@@ -0,0 +1,11 @@
+# Carbon
+
+The screenshots in the README are made with Carbon.
+
+The links to the Carbon snippets are:
+
+* [Before](https://carbon.now.sh/iyP283Mj0nRXt1gfvNh7)
+* [After](https://carbon.now.sh/C6J2A8WoDhKuiudIYykl)
+
+Unfortunately you have to manually fill in colors every time you reload the page
+:(