Work on article

src/components/Figure.astro

@@ -0,0 +1,28 @@
+---
+const { label } = Astro.props;
+---
+
+<figure>
+	{label && <figcaption>{label}</figcaption>}
+	<div>
+		<slot />
+	</div>
+</figure>
+
+<style>
+	figure {
+		border: var(--2px) solid var(--color-link);
+		border-radius: var(--4px);
+	}
+
+	figcaption {
+		background-color: var(--color-link);
+		border-bottom: var(--2px) solid var(--color-link);
+		color: var(--color-base);
+		padding: 0.5em 1em;
+	}
+
+	div {
+		margin: var(--16px);
+	}
+</style>

src/components/ImpactMapFigure.astro

@@ -1,14 +1,33 @@
-<figure class="im">
-	<slot />
+---
+const { label } = Astro.props;
+---
+
+<figure>
+	{label && <figcaption>{label}</figcaption>}
+	<div class="im">
+		<slot />
+	</div>
 </figure>
 
-<style is:global>
-	.im {
+<style>
+	figure {
 		border: var(--2px) solid var(--color-link);
 		border-radius: var(--4px);
+	}
+
+	figcaption {
+		background-color: var(--color-link);
+		border-bottom: var(--2px) solid var(--color-link);
+		color: var(--color-base);
+		padding: 0.5em 1em;
+	}
+
+	div {
 		padding: var(--8px) var(--16px) var(--16px);
 	}
+</style>
 
+<style is:global>
 	.im > ul {
 		padding-left: 0;
 	}

src/content/writings/2023-11-14-practice.mdx

@@ -0,0 +1,141 @@
+---
+title: Practice with impact maps
+pubDate: 2023-11-14
+description: ""
+draft: true
+---
+
+import Aside from '@components/Aside.astro';
+import Figure from '@components/Figure.astro';
+import ImpactMapFigure from '@components/ImpactMapFigure.astro';
+
+<Aside>
+**Read first:**
+- [Build the right thing with impact maps](/2023-10-31/impact)
+- [Overcome assumptions with impact maps](/2023-11-07/assumptions)
+</Aside>
+
+Making impact maps is a skill that requires practice. Ideally, the goal is known upfront, so the impact map is developed top-down. However, sometimes the goal is unclear at the start of the project. Stakeholders may have an easier time describing a solution that could solve their problem than describing the problem itself. The following exercises will help form an impact map, regardless of the project's starting point:
+
+- [Make an impact map](#exercise-make-an-impact-map)
+- [Discover a goal](#exercise-discover-the-goal)
+
+## Exercise: Make an impact map
+
+Properly formulating a goal can hinder the work of just diving in and developing an impact map. For this exercise, select a goal from the following list, then make an impact map from that goal.
+
+### Step 1: Select a goal
+
+Select a goal from a predefined list.
+
+If conducting this exercise with a group, consider using [dot voting](https://en.wikipedia.org/wiki/Dot-voting) to select the goal. In the following examples, a `+` indicates one vote, and a <mark>highlighted</mark> item indicates the group's selection based on the votes.
+
+<Figure label="Example goals">
+1. Run a 5km road race in the next three months. `++++`
+1. Help my family eat more nutritious food this year. `+++`
+1. Limit my shower usage to under seven minutes a day for two weeks. `+`
+1. Make two new soups this month. `+++`
+1. <mark>Visit a national park this year with my family.</mark> `+++++`
+1. Volunteer one day a month at a non-profit, for the next six months. `+`
+1. Grow and harvest a tomato plant this season. `++++`
+1. Read a book a month this year. `+++`
+1. Play a round of disc golf at each course in town this year.
+1. Learn to identify six native bird species this year. `+++`
+1. Start a sharing library (of things) in my neighborhood this year. `+++`
+1. Increase attendance and participation at the local library by 5% over the next six months. `++`
+</Figure>
+
+### Step 2: Select actors
+
+Each participant should spend 5 minutes making a list of actors (individuals, groups, or systems). Ask:
+
+> Who can help or hinder achieving the goal?
+
+Come together as a group and share the lists. Use dot voting to select one to three actors for the next step.
+
+<Figure label="Example actors">
+- National Park Service `+`
+- Park visitors
+- Park guide
+- <mark>My family</mark> `++++`
+- Transportation
+- <mark>Myself</mark> `+++++`
+- Weather
+</Figure>
+
+### Step 3: Select impacts
+
+Each participant should spend 5 minutes making a list of impacts (behavior changes) for each of the selected actors in Step 2. Ask:
+
+> What should the actors do or not do to impact the goal?
+
+Come together as a group and share the lists. Use dot voting to select one to three impacts for the next step.
+
+<Figure label="Example impacts by actor">
+My family:
+- <mark>Be motivated and excited.</mark>
+- Identify a time period.
+- Select a national park.
+
+Myself:
+- <mark>Fund the trip.</mark>
+- Book transportation.
+- Book lodging.
+- <mark>Explore activities.</mark>
+</Figure>
+
+### Step 4: Select deliverables
+
+Each participant should spend 5 minutes making a list of deliverables (solutions) for each of the selected impacts in Step 3. Ask:
+
+> How will you help the actors make the intended impact?
+
+Come together as a group and share the lists. Use dot voting to select one to three deliverables for the next step.
+
+<Figure label="Example deliverables by impact">
+Be motivated and excited:
+- Watch relevant National Geographic documentaries.
+- <mark>Borrow relevant books from the library.</mark>
+- Take day-trips to local parks.
+- Obtain and try hiking equipment.
+
+Fund the trip:
+- Estimate expenses.
+- Put aside money.
+- Reduce expenses.
+
+Explore activities:
+- Hiking trails
+- Major towns
+- "Rainy day" options
+- Museums
+</Figure>
+
+### Step 5: Select experiments
+
+Each participant should spend 5 minutes making a list of experiments (research or evidence) for each of the selected deliverables in Step 4. Ask:
+
+> How can you test whether the deliverable will have the intended impact?
+
+Come together as a group and share the lists. Use dot voting to select one to three experiments for the next step.
+
+### Step 6: Compose the impact map
+
+As a group, take the lists in Steps 2 through 5 and compose them as an impact map. This can be in the form of an outline. Order every item in the list by which actor, impact, deliverable, or experiment will be the most important toward achieving the goal.
+
+Feel free to later expand, refine, and tweak the impact map as desired. To keep track of the work, append the current status to each deliverable (due date or done date) or experiment (success or failure).
+
+<ImpactMapFigure label="Example impact map">
+- **Goal:** Visit a national park this year with my family.
+	- **Actor:** My family
+		- **Impact:** Be motivated and excited.
+			- **Deliverable:** Borrow relevant books from the library. <span class="u-nowrap">(Done Oct 25.)</span>
+				- **Experiment:** Ask everyone about what they learned from the books; what more they want to learn before the trip; and what they want to see or do during the trip. (Success!)
+	- **Actor:** Myself
+		- **Impact:** Fund the trip.
+		- **Impact:** Explore activities.
+</ImpactMapFigure>
+
+## Exercise: Discover the goal
+
+Choose a solution. Ask "why" several times to find the underlying motivation. Make a goal. Optionally, make an impact map from this goal.

src/styles/global.css

@@ -19,6 +19,7 @@
 	--color-base: var(--color-255-15);
 	--color-code: var(--color-150-75);
 	--color-link: var(--color-255-75);
+	--color-mark: var(--color-80-75);
 	--color-muted: var(--color-255-75-5);
 	--color-text: var(--color-255-95);
 	--color-visited: var(--color-285-75);
@@ -154,6 +155,19 @@ main::after {
 	width: var(--size);
 }
 
+mark {
+	background-color: var(--color-mark);
+	color: var(--color-base);
+}
+
+mark::before {
+	content: " [highlight start] ";
+}
+
+mark::after {
+	content: " [highlight end] ";
+}
+
 ol,
 ul {
 	margin: 1em 0 0;
@@ -192,6 +206,8 @@ table {
 	margin: 0;
 }
 
+mark::before,
+mark::after,
 .sr-only:not(:focus):not(:active) {
 	clip: rect(0 0 0 0);
 	clip-path: inset(50%);