Obsidian support, improved blip text view (#14)

Adds a part in the readme on how to use Obsidian to edit the blip texts.
Also updates the blip text view to make it possible to close without
zooming out when there is a lot of text - previously the close button
was outside the screen.

Author: obcilion

.gitignore

@@ -1,3 +1,6 @@
+# Manually added section
+.obsidian/
+
 # Created by https://www.toptal.com/developers/gitignore/api/macos,windows,linux,node,visualstudiocode
 # Edit at https://www.toptal.com/developers/gitignore?templates=macos,windows,linux,node,visualstudiocode
 
@@ -100,7 +103,7 @@ web_modules/
 # TypeScript cache
 *.tsbuildinfo
 
-# Optional npm cache directory
+# Optional npm cache
 .npm
 
 # Optional eslint cache
@@ -237,4 +240,4 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-# End of https://www.toptal.com/developers/gitignore/api/macos,windows,linux,node,visualstudiocode
+# End of https://www.toptal.com/developers/gitignore/api/macos,windows,linux,node,visualstudiocode

Readme.md

@@ -20,3 +20,48 @@ And start the development server with
 cd capra-fagradar
 pnpm dev
 ```
+
+## Updating contents
+
+Content is found in two folders;
+
+- `src/technical-radar`
+- `src/tech-leader-radar`
+
+The files themselves are .mdx files, using .yaml frontmatter for configuration.
+These are the config values:
+
+- `id`: unused
+- `name`: what it says on the tin
+- `depth`: 1-4. See `src/om-fagradar.mdx` for info on the depth levels
+- `qudrant`: which named quadrant to put this item in. Quadrant names are set in `index.tsx` for both radars (`const quadrants = [...]`)
+
+Editing can be done in two ways:
+
+1. Using an IDE
+1. Using [Obsidian](https://obsidian.md/)
+
+If you have not heard of Obsidian before, you can read about them [here](https://obsidian.md/about)
+
+### How to actually update the contents
+
+#### With an IDE
+
+Requirements: IDE installed, git configured
+
+1. Clone the repo
+2. Open it with your IDE
+3. Do the changes in the most likely very mediocre markdown editor
+4. Commit using your preferred git tool
+
+#### With Obsidian
+
+Requirements: Obsidian installed, git configured
+
+1. Clone the repo
+2. Open `src/` as a vault in Obsidian
+3. Do the changes with a kick-ass editor
+4. Commit using your preferred git tool
+
+To be able to edit the .mdx files you need to install the Obsidian community plugin "mdx as md".  
+Obsidian also has a very popular Git plugin, if you don't want to do git on the outside.

capra-fagradar/src/radar/index.tsx

@@ -399,7 +399,11 @@ const BlipInfo: React.FC<BlipInfoProps> = ({ blip }) => {
         {blip.is_new && <Label>new</Label>}
       </div>
       <div>{blip.element}</div>
-      <button type="button" onClick={() => selectBlip(undefined)}>
+      <button
+        type="button"
+        className={styles.closeButton}
+        onClick={() => selectBlip(undefined)}
+      >
         Close
       </button>
     </RightAnchoredShelf>

capra-fagradar/src/radar/radar.module.css

@@ -1,19 +1,36 @@
 .rightAnchoredShelf {
   position: fixed;
   width: 25vw;
+  min-width: 320px;
+  max-width: 50ch;
   top: 10rem;
+  bottom: 2rem;
   right: 0;
   background: white;
   border: 0.2rem solid #121c31;
   border-right: 0;
   padding: 2rem;
   border-radius: 1rem 0 0 1rem;
   z-index: 100;
+  overflow-y: auto;
   p {
     max-width: 50ch;
   }
 }
 
+.closeButton {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  background: #121c31;
+  color: white;
+  border: 0;
+  padding: 1rem 2rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  margin-top: 2rem;
+}
+
 .quadrants {
   width: 100%;
   display: grid;

capra-fagradar/src/tech-leader-radar/Teknologi/event-storming.mdx

@@ -6,16 +6,11 @@ quadrant: Teknologi
 is_new: true
 ---
 ## Hva er det?
-Event Storming er en workshop-basert metode for å raskt finne ut hva som skjer i et domene ved at alle
-deltagere kort beskriver hendelser i form av klistrelapper plassert på en tidslinje. Vanlig scenario er
-at programvareutviklere og domeneeksperter sammen enes om hva som skjer og hvordan en skal bygge systemet
-for å understøtte dette. Grovt sett finnes det tre varianter: én som fokuserer på hendelser og beskriver
-helheten, én som beskriver prosessen med aktører, data, kommandoer, systemer og resulterende hendelser,
-og én som også inneholder programvarekomponenter som aggregater og forretningsregler.
+Event Storming er en workshop-basert metode for å raskt finne ut hva som skjer i et domene ved at alle deltagere kort beskriver hendelser i form av klistrelapper plassert på en tidslinje. Vanlig scenario er at programvareutviklere og domeneeksperter sammen enes om hva som skjer og hvordan en skal bygge systemet
+for å understøtte dette. Grovt sett finnes det tre varianter: én som fokuserer på hendelser og beskriver helheten, én som beskriver prosessen med aktører, data, kommandoer, systemer og resulterende hendelser, og én som også inneholder programvarekomponenter som aggregater og forretningsregler.
 
 ## Hvorfor er det viktig for oss?
-Event Storming er en effektiv og svært enkel teknikk å benytte når en større gruppe mennesker enten skal skape et felles bilde
-av et domene og eventuelt designe løsninger kollektivt. Som teknologileder kan vi være gode fasilitatorer da de bør være eksterne.
+Event Storming er en effektiv og svært enkel teknikk å benytte når en større gruppe mennesker enten skal skape et felles bilde av et domene og eventuelt designe løsninger kollektivt. Som teknologileder kan vi være gode fasilitatorer da de bør være eksterne.
 
 ## Hva gjør vi hvis vi vil bli bedre på dette?
 En god starte er boken til oppfinneren Alberto Brandolini, [Introducing EventStorming](https://www.eventstorming.com/book/), samt