From e857968570c039637cc78dd896d660316ca77db7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Bruer-Skarsb=C3=B8?= <obr@ssb.no>
Date: Mon, 23 Oct 2023 08:49:41 +0200
Subject: [PATCH] Changed a few components

---
 dapla-manual/_quarto.yml                      |  30 +-
 .../{dapla-test5.mp4 => dapla-animation.mp4}  | Bin
 dapla-manual/index.qmd                        |   7 +-
 dapla-manual/om-dapla.qmd                     |   1 +
 dapla-manual/statistikkere/gcc.qmd            |   2 +-
 dapla-manual/statistikkere/introduksjon.qmd   |   4 +
 dapla-manual/theme.scss                       |   3 +
 .../utviklere/Infrastructure-as-Code.html     | 292 ------------------
 dapla-manual/utviklere/iac.qmd                | 130 +++++++-
 9 files changed, 166 insertions(+), 303 deletions(-)
 rename dapla-manual/images/{dapla-test5.mp4 => dapla-animation.mp4} (100%)
 create mode 100644 dapla-manual/om-dapla.qmd
 create mode 100644 dapla-manual/theme.scss
 delete mode 100644 dapla-manual/utviklere/Infrastructure-as-Code.html

diff --git a/dapla-manual/_quarto.yml b/dapla-manual/_quarto.yml
index 4e91874a..b5887a7f 100644
--- a/dapla-manual/_quarto.yml
+++ b/dapla-manual/_quarto.yml
@@ -8,11 +8,12 @@ website:
   title: "Dapla-manualen"
   image: images/dapla-long.png
   favicon: images/dapla-favicon.png
-  repo-url: https://github.com/statisticsnorway/dapla-manual
+  repo-url: https://github.com/statisticsnorway/dapla-manual-internal
+  issue-url: https://github.com/statisticsnorway/dapla-manual-internal/issues/new
   repo-actions: [edit, issue]
+  twitter-card: true
+  page-navigation: true
   open-graph: true
-  search:
-    location: sidebar
   page-footer:
     left:
       This is site heavily inspired by the
@@ -22,8 +23,10 @@ website:
   
   navbar:
     logo: images/dapla-long.png
+    logo-alt: "Logo for Dapla"
     background: "#F0F8F9" # "Dark 1" from https://design.ssb.no/#/components/color
     foreground: "#274247" # "Dark 5" from https://design.ssb.no/#/components/color
+    search: true
     left:
       - text: Statistikkere
         href: statistikkere/introduksjon.qmd
@@ -31,6 +34,8 @@ website:
         href: utviklere/index.qmd
       - text: Eksempler
         href: notebooks/index.qmd
+      - text: "Om Dapla"
+        href: om-dapla.qmd
       - text: Hjelp
         menu:
           - text: Opprette Dapla-team
@@ -43,9 +48,24 @@ website:
             icon: send-fill
             href: https://ssb.pureservice.com/#/new/7
     right:
+      - text: "Logg inn"
+        icon: person-circle
+        menu:
+          - text: "DaplaHub"
+            href: https://datahub.external.staging.ssb.cloud.nais.io/explore
+            icon: database-fill
+          - text: "DaplaLab"
+            href: om-dapla.qmd
+            icon: graph-up
+          - text: "JupyterLab (legacy)"
+            href: hhttps://jupyter.dapla.ssb.no/
+            icon: journal-code
+          - text: "Google Cloud Console"
+            href: https://console.cloud.google.com/
+            icon: google
       - icon: github
         href: https://github.com/statisticsnorway/dapla-manual
-        aria-label: Dapla-manual GitHub
+        aria-label: Dapla-manual GitHub repository
 
   sidebar:
     - id: statistikkere
@@ -128,6 +148,6 @@ format:
   html:
     toc: true
     collapse-level: 1
-    theme: cosmo
+    theme: [cosmo, theme.scss]
     code-copy: true
     code-overflow: wrap
diff --git a/dapla-manual/images/dapla-test5.mp4 b/dapla-manual/images/dapla-animation.mp4
similarity index 100%
rename from dapla-manual/images/dapla-test5.mp4
rename to dapla-manual/images/dapla-animation.mp4
diff --git a/dapla-manual/index.qmd b/dapla-manual/index.qmd
index adbe5267..febbc111 100644
--- a/dapla-manual/index.qmd
+++ b/dapla-manual/index.qmd
@@ -33,16 +33,15 @@ resources:
 ### Hvordan? Hva? Hvorfor? Dapla-manualen gjør overgangen til Dapla enklere.
 
 ::: {.hero-buttons}
-[Hurtigstart](./statistikkere/introduksjon.qmd){.btn-action-primary .btn-action .btn .btn-success .btn-lg role="button"}
-[Manual](docs/guide/){#btn-guide .btn-action .btn .btn-info .btn-lg role="button"}
-[Logg inn på Dapla](https://jupyter.dapla.ssb.no/){#btn-guide .btn-action .btn .btn-info .btn-lg role="button"}
+[For statistikkere](./statistikkere/introduksjon.qmd){.btn-action-primary .btn-action .btn .btn-success .btn-lg role="button"}
+[For utviklere](docs/guide/){#btn-guide .btn-action .btn .btn-info .btn-lg role="button"}
 ::: 
 :::
 
 ::: {.hero-animation}
 
 <video autoplay muted playsinline loop>
-<source src="images/dapla-test5.mp4 " type="video/mp4"/>
+<source src="images/dapla-animation.mp4 " type="video/mp4"/>
 </video>
 :::
 
diff --git a/dapla-manual/om-dapla.qmd b/dapla-manual/om-dapla.qmd
new file mode 100644
index 00000000..d5b33cc0
--- /dev/null
+++ b/dapla-manual/om-dapla.qmd
@@ -0,0 +1 @@
+# Om Dapla
\ No newline at end of file
diff --git a/dapla-manual/statistikkere/gcc.qmd b/dapla-manual/statistikkere/gcc.qmd
index 8dd58342..3ce3e900 100644
--- a/dapla-manual/statistikkere/gcc.qmd
+++ b/dapla-manual/statistikkere/gcc.qmd
@@ -17,7 +17,7 @@ Hvis du trykker på prosjektvelgeren vil det åpnes opp et nytt vindu. Sjekk at
 ![Prosjektvelgeren i Google Cloud Console](../images/prosjektvelger.png){fig-alt="Bilde som viser prosjektvelgeren i Google Cloud Console" #fig-prosjektvelger}
 
 ### Velg prosjekt
-Her vises det hvordan man velger et prosjekt I [GCC](../gcc.qmd). Eksempelet benytter Dapla teamet `demo stat b` og fortsetter fra (@fig-prosjektvelger).
+Her vises det hvordan man velger et prosjekt I [GCC](./gcc.qmd#prosjektvelger). Eksempelet benytter Dapla teamet `demo stat b` og fortsetter fra (@fig-prosjektvelger).
 
 1. Skrive teamnavn i søkefeltet, resultatene burde se ut som i (@fig-sok).
 1. Trykk på lenken `prod-demo-stat-b`, som markert med rød pil i (@fig-sok).
diff --git a/dapla-manual/statistikkere/introduksjon.qmd b/dapla-manual/statistikkere/introduksjon.qmd
index 1937000b..c40771a9 100644
--- a/dapla-manual/statistikkere/introduksjon.qmd
+++ b/dapla-manual/statistikkere/introduksjon.qmd
@@ -1,3 +1,7 @@
+---
+toc: false
+---
+
 # Introduksjon {#sec-project-dice}
 
 Målet med dette kapittelet er å gi en grunnleggende innføring i hva som legges i ordet **Dapla**. I tillegg gis en forklaring på hvorfor disse valgene er tatt.
\ No newline at end of file
diff --git a/dapla-manual/theme.scss b/dapla-manual/theme.scss
new file mode 100644
index 00000000..727200f4
--- /dev/null
+++ b/dapla-manual/theme.scss
@@ -0,0 +1,3 @@
+/*-- scss:defaults --*/
+$link-color: #143f90;
+$text-muted: #6a737b;
\ No newline at end of file
diff --git a/dapla-manual/utviklere/Infrastructure-as-Code.html b/dapla-manual/utviklere/Infrastructure-as-Code.html
deleted file mode 100644
index 0a8eb2af..00000000
--- a/dapla-manual/utviklere/Infrastructure-as-Code.html
+++ /dev/null
@@ -1,292 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
-
-<meta charset="utf-8">
-<meta name="generator" content="quarto-1.3.433">
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
-
-
-<title>infrastructure-as-code</title>
-<style>
-code{white-space: pre-wrap;}
-span.smallcaps{font-variant: small-caps;}
-div.columns{display: flex; gap: min(4vw, 1.5em);}
-div.column{flex: auto; overflow-x: auto;}
-div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
-ul.task-list{list-style: none;}
-ul.task-list li input[type="checkbox"] {
-  width: 0.8em;
-  margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ 
-  vertical-align: middle;
-}
-</style>
-
-
-<script src="Infrastructure-as-Code_files/libs/clipboard/clipboard.min.js"></script>
-<script src="Infrastructure-as-Code_files/libs/quarto-html/quarto.js"></script>
-<script src="Infrastructure-as-Code_files/libs/quarto-html/popper.min.js"></script>
-<script src="Infrastructure-as-Code_files/libs/quarto-html/tippy.umd.min.js"></script>
-<script src="Infrastructure-as-Code_files/libs/quarto-html/anchor.min.js"></script>
-<link href="Infrastructure-as-Code_files/libs/quarto-html/tippy.css" rel="stylesheet">
-<link href="Infrastructure-as-Code_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
-<script src="Infrastructure-as-Code_files/libs/bootstrap/bootstrap.min.js"></script>
-<link href="Infrastructure-as-Code_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
-<link href="Infrastructure-as-Code_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
-
-
-</head>
-
-<body class="fullcontent">
-
-<div id="quarto-content" class="page-columns page-rows-contents page-layout-article">
-
-<main class="content" id="quarto-document-content">
-
-
-
-<section id="infrastructure-as-code-iac" class="level1">
-<h1>Infrastructure-as-Code (IaC)</h1>
-<p>løgkjfdskljfgkl</p>
-</section>
-
-</main>
-<!-- /main column -->
-<script id="quarto-html-after-body" type="application/javascript">
-window.document.addEventListener("DOMContentLoaded", function (event) {
-  const toggleBodyColorMode = (bsSheetEl) => {
-    const mode = bsSheetEl.getAttribute("data-mode");
-    const bodyEl = window.document.querySelector("body");
-    if (mode === "dark") {
-      bodyEl.classList.add("quarto-dark");
-      bodyEl.classList.remove("quarto-light");
-    } else {
-      bodyEl.classList.add("quarto-light");
-      bodyEl.classList.remove("quarto-dark");
-    }
-  }
-  const toggleBodyColorPrimary = () => {
-    const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
-    if (bsSheetEl) {
-      toggleBodyColorMode(bsSheetEl);
-    }
-  }
-  toggleBodyColorPrimary();  
-  const icon = "";
-  const anchorJS = new window.AnchorJS();
-  anchorJS.options = {
-    placement: 'right',
-    icon: icon
-  };
-  anchorJS.add('.anchored');
-  const isCodeAnnotation = (el) => {
-    for (const clz of el.classList) {
-      if (clz.startsWith('code-annotation-')) {                     
-        return true;
-      }
-    }
-    return false;
-  }
-  const clipboard = new window.ClipboardJS('.code-copy-button', {
-    text: function(trigger) {
-      const codeEl = trigger.previousElementSibling.cloneNode(true);
-      for (const childEl of codeEl.children) {
-        if (isCodeAnnotation(childEl)) {
-          childEl.remove();
-        }
-      }
-      return codeEl.innerText;
-    }
-  });
-  clipboard.on('success', function(e) {
-    // button target
-    const button = e.trigger;
-    // don't keep focus
-    button.blur();
-    // flash "checked"
-    button.classList.add('code-copy-button-checked');
-    var currentTitle = button.getAttribute("title");
-    button.setAttribute("title", "Copied!");
-    let tooltip;
-    if (window.bootstrap) {
-      button.setAttribute("data-bs-toggle", "tooltip");
-      button.setAttribute("data-bs-placement", "left");
-      button.setAttribute("data-bs-title", "Copied!");
-      tooltip = new bootstrap.Tooltip(button, 
-        { trigger: "manual", 
-          customClass: "code-copy-button-tooltip",
-          offset: [0, -8]});
-      tooltip.show();    
-    }
-    setTimeout(function() {
-      if (tooltip) {
-        tooltip.hide();
-        button.removeAttribute("data-bs-title");
-        button.removeAttribute("data-bs-toggle");
-        button.removeAttribute("data-bs-placement");
-      }
-      button.setAttribute("title", currentTitle);
-      button.classList.remove('code-copy-button-checked');
-    }, 1000);
-    // clear code selection
-    e.clearSelection();
-  });
-  function tippyHover(el, contentFn) {
-    const config = {
-      allowHTML: true,
-      content: contentFn,
-      maxWidth: 500,
-      delay: 100,
-      arrow: false,
-      appendTo: function(el) {
-          return el.parentElement;
-      },
-      interactive: true,
-      interactiveBorder: 10,
-      theme: 'quarto',
-      placement: 'bottom-start'
-    };
-    window.tippy(el, config); 
-  }
-  const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
-  for (var i=0; i<noterefs.length; i++) {
-    const ref = noterefs[i];
-    tippyHover(ref, function() {
-      // use id or data attribute instead here
-      let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
-      try { href = new URL(href).hash; } catch {}
-      const id = href.replace(/^#\/?/, "");
-      const note = window.document.getElementById(id);
-      return note.innerHTML;
-    });
-  }
-      let selectedAnnoteEl;
-      const selectorForAnnotation = ( cell, annotation) => {
-        let cellAttr = 'data-code-cell="' + cell + '"';
-        let lineAttr = 'data-code-annotation="' +  annotation + '"';
-        const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
-        return selector;
-      }
-      const selectCodeLines = (annoteEl) => {
-        const doc = window.document;
-        const targetCell = annoteEl.getAttribute("data-target-cell");
-        const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
-        const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
-        const lines = annoteSpan.getAttribute("data-code-lines").split(",");
-        const lineIds = lines.map((line) => {
-          return targetCell + "-" + line;
-        })
-        let top = null;
-        let height = null;
-        let parent = null;
-        if (lineIds.length > 0) {
-            //compute the position of the single el (top and bottom and make a div)
-            const el = window.document.getElementById(lineIds[0]);
-            top = el.offsetTop;
-            height = el.offsetHeight;
-            parent = el.parentElement.parentElement;
-          if (lineIds.length > 1) {
-            const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
-            const bottom = lastEl.offsetTop + lastEl.offsetHeight;
-            height = bottom - top;
-          }
-          if (top !== null && height !== null && parent !== null) {
-            // cook up a div (if necessary) and position it 
-            let div = window.document.getElementById("code-annotation-line-highlight");
-            if (div === null) {
-              div = window.document.createElement("div");
-              div.setAttribute("id", "code-annotation-line-highlight");
-              div.style.position = 'absolute';
-              parent.appendChild(div);
-            }
-            div.style.top = top - 2 + "px";
-            div.style.height = height + 4 + "px";
-            let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
-            if (gutterDiv === null) {
-              gutterDiv = window.document.createElement("div");
-              gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
-              gutterDiv.style.position = 'absolute';
-              const codeCell = window.document.getElementById(targetCell);
-              const gutter = codeCell.querySelector('.code-annotation-gutter');
-              gutter.appendChild(gutterDiv);
-            }
-            gutterDiv.style.top = top - 2 + "px";
-            gutterDiv.style.height = height + 4 + "px";
-          }
-          selectedAnnoteEl = annoteEl;
-        }
-      };
-      const unselectCodeLines = () => {
-        const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
-        elementsIds.forEach((elId) => {
-          const div = window.document.getElementById(elId);
-          if (div) {
-            div.remove();
-          }
-        });
-        selectedAnnoteEl = undefined;
-      };
-      // Attach click handler to the DT
-      const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
-      for (const annoteDlNode of annoteDls) {
-        annoteDlNode.addEventListener('click', (event) => {
-          const clickedEl = event.target;
-          if (clickedEl !== selectedAnnoteEl) {
-            unselectCodeLines();
-            const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
-            if (activeEl) {
-              activeEl.classList.remove('code-annotation-active');
-            }
-            selectCodeLines(clickedEl);
-            clickedEl.classList.add('code-annotation-active');
-          } else {
-            // Unselect the line
-            unselectCodeLines();
-            clickedEl.classList.remove('code-annotation-active');
-          }
-        });
-      }
-  const findCites = (el) => {
-    const parentEl = el.parentElement;
-    if (parentEl) {
-      const cites = parentEl.dataset.cites;
-      if (cites) {
-        return {
-          el,
-          cites: cites.split(' ')
-        };
-      } else {
-        return findCites(el.parentElement)
-      }
-    } else {
-      return undefined;
-    }
-  };
-  var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
-  for (var i=0; i<bibliorefs.length; i++) {
-    const ref = bibliorefs[i];
-    const citeInfo = findCites(ref);
-    if (citeInfo) {
-      tippyHover(citeInfo.el, function() {
-        var popup = window.document.createElement('div');
-        citeInfo.cites.forEach(function(cite) {
-          var citeDiv = window.document.createElement('div');
-          citeDiv.classList.add('hanging-indent');
-          citeDiv.classList.add('csl-entry');
-          var biblioDiv = window.document.getElementById('ref-' + cite);
-          if (biblioDiv) {
-            citeDiv.innerHTML = biblioDiv.innerHTML;
-          }
-          popup.appendChild(citeDiv);
-        });
-        return popup.innerHTML;
-      });
-    }
-  }
-});
-</script>
-</div> <!-- /content -->
-
-
-
-</body></html>
\ No newline at end of file
diff --git a/dapla-manual/utviklere/iac.qmd b/dapla-manual/utviklere/iac.qmd
index cac8f43f..599d349c 100644
--- a/dapla-manual/utviklere/iac.qmd
+++ b/dapla-manual/utviklere/iac.qmd
@@ -1,3 +1,131 @@
 # Infrastructure-as-Code (IaC)
 
-løgkjfdskljfgkl
\ No newline at end of file
+## Struktur
+
+### Eksempel IaC-repo struktur
+
+```{.yaml filename="IaC-repo"}
+dapla-example-iac
+│
+├── automation
+│   │
+│   └── source_data
+│       │
+│       ├── dapla-example-test
+│       │
+│       └── dapla-example-prod
+│
+├── data
+│
+├── docs
+│
+├── infra
+│   │
+│   ├── stack
+│   │
+│   └── projects
+│       │
+│       ├── dapla-example-test
+│       │   │
+│       │   ├── project.yaml
+│       │   │
+│       │   ├── ....tf
+│       │
+│       └── dapla-example-prod
+│           │
+│           ├── project.yaml
+│           │
+│           ├── ....tf
+│
+└── atlantis.yaml
+```
+
+###  automation
+
+Mappe for skript som blir brukt av automatiseringstjenesten.
+
+### data
+
+Mappe for å ha metadata som teamet selv ønsker.
+
+::: {.callout-important title="Viktig"}
+Data mappen er ikke ment for å lagre data til bruk i statistikkproduksjon.
+:::
+
+### docs
+
+Mappe for å samle dokumentasjon.
+
+### infra
+
+Mappe for teamets infrastruktur.
+
+#### infra/projects.yaml
+
+Dette er en fil som teamet selv kan spesifisere prosjekter og features som er ønsket at et prosjekt skal ha.
+Når man lager en PR etter å lagt inn f.eks et nytt prosjekt, så trigger det en Github Action som genererer Terraform koden som lager prosjektet.
+`project_name` feltet skal ikke inneholde miljøtypen eller andre prefiks eller suffikser, disse blir automatisk lagt på.
+
+Eksemplet under vil lage 3 prosjekter i Google Cloud som vil få følgende prosjekt navn `dapla-example-p`, `dapla-example-t`, og `dapla-example-d`, prosjekt ID'ene vil være det samme bare med 2 tilfeldige karakterer på slutten.
+
+##### Eksempel projects.yaml
+
+```yaml
+team_uniform_name: dapla-example
+
+projects:
+  - project_name: dapla-example
+    env: test
+    features:
+      - dapla-buckets
+
+  - project_name: dapla-example
+    env: prod
+    features:
+      - dapla-buckets
+      - transfer-service
+  
+  - project_name: dapla-example
+    env: dev
+```
+
+##### Features
+| Name | Description | Interacts with |
+| -------- | -------- | -------- |
+| `dapla-buckets` | Oppretter "standard" Dapla-bøttene (kilde, produkt, delt) samt et kildeprosjekt. | `transfer-service,disable-default-bucket-iam,disable-default-project-iam` |
+| `transfer-service` | Oppretter bindinger for Transfer Service service kontoer | `dapla-buckets`|
+| `source-data-automation` | Ikke helt klar ennå :) | `none` |
+| `disable-default-project-iam` | Deaktiverer standard IAM-bindinger for standard Dapla-prosjekter | `dapla-buckets` |
+| `disable-default-bucket-iam` | Deaktiverer standard IAM-bindinger for standard Dapla-bøttene | `dapla-buckets` |
+
+#### infra/projects
+
+Her er det en mappe for hvert prosjekt teamet har i Google Cloud.
+Hvis man bruker `infra/projects.yaml` for å opprette prosjekter så blir det automatisk opprettet en egen mappe under her som inneholder all Terraform kode for det prosjektet.
+
+#### infra/stack
+
+Hvis teamet har noen gjenbrukbare moduler som skal brukes i alle prosjekter så kan de opprettes her.
+
+### atlantis.yaml
+
+Konfigurasjon av prosjektene Atlantis automatisk kjører `atlantis plan` for.
+Hvis et prosjekt er opprettet via `infra/projects.yaml` så blir det automatisk lagt til i denne filen.
+
+#### Eksempel atlantis.yaml
+
+```yaml
+version: 3
+parallel_plan: true
+parallel_apply: true
+projects:
+- dir: ./infra/projects/dapla-example-prod
+  autoplan:
+    when_modified: ["*.tf", "terraform.tfvars", "*.yaml"]
+- dir: ./infra/projects/dapla-example-test
+  autoplan:
+    when_modified: ["*.tf", "terraform.tfvars", "*.yaml"]
+- dir: ./infra/projects/dapla-example-dev
+  autoplan:
+    when_modified: ["*.tf", "terraform.tfvars", "*.yaml"]
+```
\ No newline at end of file