Merge pull request #1059 from scarolac/livebook-images

Update images folders to use files directory in reading and exercises

exercises/battle_map.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"archer_attack.png","type":"attachment"},{"name":"barbarian_attack.png","type":"attachment"},{"name":"battle_map.png","type":"attachment"},{"name":"wizard_attack.png","type":"attachment"}]} -->
+
 # Battle Map
 
 ```elixir
@@ -35,7 +37,7 @@ Mix.install([
 You're developing a 2D tactical combat game.
 
 Characters in your game fight on a grid of potentially infinite size.
-![](images/battle_map.png)
+![](files/battle_map.png)
 
 ## Character Attack
 
@@ -80,7 +82,7 @@ Character.can_attack?(%Barbarian{}, {4, 4}, {6, 6})
 true
 ```
 
-![](images/barbarian_attack.png)
+![](files/barbarian_attack.png)
 
 <details style="background-color: lightgreen; padding: 1rem; margin: 1rem 0;">
 <summary>Example Solution</summary>
@@ -141,7 +143,7 @@ Character.can_attack?(%Wizard{}, {4, 4}, {6, 6})
 true
 ```
 
-![](images/wizard_attack.png)
+![](files/wizard_attack.png)
 
 <details style="background-color: lightgreen; padding: 1rem; margin: 1rem 0;">
 <summary>Example Solution</summary>
@@ -202,7 +204,7 @@ match the existing characters.
 
 For example, you might create an `Archer` who can only attack in a 3 radius square.
 
-![](images/archer_attack.png)
+![](files/archer_attack.png)
 
 <!-- livebook:{"force_markdown":true} -->
 

exercises/blog_home_page.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"blog_home_page.png","type":"attachment"}]} -->
+
 # Blog: Home Page
 
 ```elixir
@@ -42,7 +44,7 @@ Here's an example made by an alumni student [Einar Engström](https://github.com
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/blog_home_page.png)
+![](files/blog_home_page.png)
 
 ## Commit Your Progress
 

exercises/blog_search.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"blog_post_search_mock.png","type":"attachment"}]} -->
+
 # Blog: Search
 
 ```elixir
@@ -38,7 +40,7 @@ Your solution does not have to match this example UI as long as it has the requi
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/blog_post_search_mock.png)
+![](files/blog_post_search_mock.png)
 
 <!-- livebook:{"break_markdown":true} -->
 

exercises/common_components.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"card_component_light_mode.png","type":"attachment"},{"name":"outline-button-hover.png","type":"attachment"},{"name":"outline-button.png","type":"attachment"},{"name":"rainbow_component.png","type":"attachment"}]} -->
+
 # Common Components
 
 ```elixir
@@ -57,15 +59,15 @@ Replicate the following outlined button as closely as you can.
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/outline-button.png)
+![](files/outline-button.png)
 
 <!-- livebook:{"break_markdown":true} -->
 
 On hover, the button should change the `background-color`.
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/outline-button-hover.png)
+![](files/outline-button-hover.png)
 
 ## Rainbow Boxes
 
@@ -80,7 +82,7 @@ Research `padding`, `margin`, `background-color`, and `border` and consider usin
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/rainbow_component.png)
+![](files/rainbow_component.png)
 
 ## Card Component
 
@@ -103,7 +105,7 @@ You can create a horizontal bar using either the `<hr></hr>` element, or an empt
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/card_component_light_mode.png)
+![](files/card_component_light_mode.png)
 
 ## Commit Your Progress
 

exercises/deprecated_home_page.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"portfolio_home_page_exercise.png","type":"attachment"},{"name":"skills%20table.png","type":"attachment"}]} -->
+
 # Home Page
 
 ```elixir
@@ -36,7 +38,7 @@ You're going to build the home page of an HTML portfolio site similar to the fol
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/portfolio_home_page_exercise.png)
+![](files/portfolio_home_page_exercise.png)
 
 <!-- livebook:{"break_markdown":true} -->
 
@@ -56,7 +58,7 @@ Include a table of your skills with an associated score. For example:
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/skills%20table.png)
+![](files/skills%20table.png)
 
 <!-- livebook:{"break_markdown":true} -->
 

exercises/deprecated_math_module_testing.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"test%20cases.png","type":"attachment"}]} -->
+
 # Math Module Testing
 
 ```elixir
@@ -82,7 +84,7 @@ There can be a deceptive number of edge cases to consider. For example, we could
 
 Here, we've colored happy path tests green and edge-case tests yellow.
 
-![](images/test%20cases.png)
+![](files/test%20cases.png)
 
 By planning test cases, we can anticipate possible edge cases and ensure we understand the desired behavior of the feature.
 

exercises/deprecated_mix_math.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"ex_doc_mix_math_example.png","type":"attachment"}]} -->
+
 # Mix Math
 
 ```elixir
@@ -97,7 +99,7 @@ to re-run `mix docs` if you wish to update the documentation.
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/ex_doc_mix_math_example.png)
+![](files/ex_doc_mix_math_example.png)
 
 ## Doc Test Cases
 

exercises/deprecated_portfolio.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"Portfolio%20Projects%20Mock.png","type":"attachment"},{"name":"portfolio_home_page_exercise.png","type":"attachment"}]} -->
+
 # Portfolio
 
 ```elixir
@@ -65,7 +67,7 @@ The home page should be visible when you visit http://localhost:4000/
 
 You may use the following design for inspiration.
 
-![](images/portfolio_home_page_exercise.png)
+![](files/portfolio_home_page_exercise.png)
 
 Ensure you include:
 
@@ -84,7 +86,7 @@ You may use the following design for inspiration.
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/Portfolio%20Projects%20Mock.png)
+![](files/Portfolio%20Projects%20Mock.png)
 
 ## Commit Your Progress
 

exercises/deprecated_portfolio_home_page.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"portfolio_home_page_exercise.png","type":"attachment"}]} -->
+
 # Portfolio: Home Page
 
 ```elixir
@@ -38,7 +40,7 @@ You may take inspiration from the previous [Home Page](./home_page.livemd) exerc
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/portfolio_home_page_exercise.png)
+![](files/portfolio_home_page_exercise.png)
 
 <!-- livebook:{"break_markdown":true} -->
 

exercises/deprecated_rubber_ducky.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"duck.png","type":"attachment"}]} -->
+
 # Rubber Ducky
 
 ```elixir
@@ -16,7 +18,7 @@ Mix.install([
 
 ## Rubber Ducky
 
-![](images/duck.png)
+![](files/duck.png)
 
 <!-- livebook:{"break_markdown":true} -->
 

exercises/deprecated_tailwind_css_components.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"card_component_light_mode.png","type":"attachment"},{"name":"outline-button-hover.png","type":"attachment"},{"name":"outline-button.png","type":"attachment"},{"name":"rainbow_component.png","type":"attachment"},{"name":"tailwind_components_signup_form.png","type":"attachment"}]} -->
+
 # Tailwind Components
 
 ```elixir
@@ -56,15 +58,15 @@ Create a button with rounder corners, an underline, the `orange-500` background
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/outline-button.png)
+![](files/outline-button.png)
 
 <!-- livebook:{"break_markdown":true} -->
 
 On hover, the button should change the background color to `orange-500`.
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/outline-button-hover.png)
+![](files/outline-button-hover.png)
 
 <!-- livebook:{"break_markdown":true} -->
 
@@ -76,15 +78,15 @@ You can find an example solution here: https://play.tailwindcss.com/fghjDPOp7Y
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/tailwind_components_signup_form.png)
+![](files/tailwind_components_signup_form.png)
 
 ## Rainbow Boxes
 
 Create a series of rainbow colored boxes like the following.
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/rainbow_component.png)
+![](files/rainbow_component.png)
 
 ## Card Component
 
@@ -98,7 +100,7 @@ You can use https://picsum.photos/200/100 to retrieve a fake image:
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/card_component_light_mode.png)
+![](files/card_component_light_mode.png)
 
 <!-- livebook:{"break_markdown":true} -->
 

exercises/mazes.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"atom_key_maze.png","type":"attachment"},{"name":"string_maze_small.png","type":"attachment"}]} -->
+
 # Mazes
 
 ```elixir
@@ -44,7 +46,7 @@ We've created a map that represents the following maze. Each cardinal direction
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/atom_key_maze.png)
+![](files/atom_key_maze.png)
 
 <!-- livebook:{"break_markdown":true} -->
 
@@ -99,7 +101,7 @@ Use **map[key]** notation to access the maze and retrieve the `"Exit!"` string.
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/string_maze_small.png)
+![](files/string_maze_small.png)
 
 <!-- livebook:{"break_markdown":true} -->
 

exercises/phoenix_follow_along_counter_app.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"counter_count_page.png","type":"attachment"}]} -->
+
 # Follow Along: Phoenix Counter App
 
 ```elixir
@@ -160,7 +162,7 @@ Visit http://localhost:4000 and you should see our counter initialized to `0`.
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/counter_count_page.png)
+![](files/counter_count_page.png)
 
 ## Connect The Counter
 

exercises/rubix_cube.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"rubix.png","type":"attachment"}]} -->
+
 # Rubix Cube
 
 ```elixir
@@ -39,7 +41,7 @@ Players rotate columns and rows on the cube with the goal of having each side wi
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/rubix.png)
+![](files/rubix.png)
 
 <!-- livebook:{"break_markdown":true} -->
 

exercises/tic-tac-toe.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"tic_tac_toe.png","type":"attachment"},{"name":"tic_tac_toe_coordinates_grid.png","type":"attachment"}]} -->
+
 # Tic-tac-toe
 
 ```elixir
@@ -38,7 +40,7 @@ In Tic-tac-toe, players take turns placing either an `X` or an `O` onto a 3 by 3
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/tic_tac_toe.png)
+![](files/tic_tac_toe.png)
 
 <!-- livebook:{"break_markdown":true} -->
 
@@ -56,7 +58,7 @@ Usually we say grids have an **x** and a **y** axis. Each location in the grid i
 
 <!-- livebook:{"break_markdown":true} -->
 
-![](images/tic_tac_toe_coordinates_grid.png)
+![](files/tic_tac_toe_coordinates_grid.png)
 
 <!-- livebook:{"break_markdown":true} -->
 

reading/big_o_notation.livemd

@@ -1,3 +1,5 @@
+<!-- livebook:{"file_entries":[{"name":"big_o_notation_graph.png","type":"attachment"}]} -->
+
 # Performance
 
 ```elixir
@@ -75,7 +77,7 @@ See the graph below for a general ranking.
 
 <!-- livebook:{"break_markdown":true} -->
 
-![Big O Notation](images/big_o_notation_graph.png)
+![Big O Notation](files/big_o_notation_graph.png)
 
 <!-- livebook:{"break_markdown":true} -->