📝 Oppdatert notater, lagt inn navn på slides

Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>

components/Counter.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const props = defineProps({
-  count: {
-    default: 0,
-  },
-})
-
-const counter = ref(props.count)
-</script>
-
-<template>
-  <div flex="~" w="min" border="~ main rounded-md">
-    <button
-      border="r main"
-      p="2"
-      font="mono"
-      outline="!none"
-      hover:bg="gray-400 opacity-20"
-      @click="counter -= 1"
-    >
-      -
-    </button>
-    <span m="auto" p="2">{{ counter }}</span>
-    <button
-      border="l main"
-      p="2"
-      font="mono"
-      outline="!none"
-      hover:bg="gray-400 opacity-20"
-      @click="counter += 1"
-    >
-      +
-    </button>
-  </div>
-</template>

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "slidev build",
     "dev": "slidev --open",
+    "remote": "slidev --remote",
     "export": "slidev export"
   },
   "dependencies": {

pages/imported-slides.md

@@ -1,27 +0,0 @@
-# Imported Slides
-
-You can split your slides.md into multiple files and organize them as you want using the `src` attribute.
-
-#### `slides.md`
-
-```markdown
-# Page 1
-
-Page 2 from main entry.
-
----
-
-## src: ./subpage.md
-```
-
-<br>
-
-#### `subpage.md`
-
-```markdown
-# Page 2
-
-Page 2 from another file.
-```
-
-[Learn more](https://sli.dev/guide/syntax.html#importing-slides)

slides.md

@@ -1,16 +1,14 @@
 ---
 # You can also start simply with 'default'
 theme: seriph
-# random image from a curated Unsplash collection by Anthony
+background: capgemini.jpg
-# like them? see https://unsplash.com/collections/94734566/slidev
-background: https://cover.sli.dev
 # some information about your slides (markdown enabled)
 title: Homelab presentasjon
 info: |
   ## Homelab presentasjon
   Av Martin og Sindre
 # apply unocss classes to the current slide
-class: text-center
+#class: text-center
 # https://sli.dev/features/drawing
 drawings:
   persist: false
@@ -30,7 +28,7 @@ mdc: true
 
 <div class="abs-br m-6 text-xl">
   <a href="https://codeberg.org/martials/homelab-presentasjon" target="_blank" class="slidev-icon-btn">
-    <carbon:logo-github />
+    <carbon:branch />
   </a>
 </div>
 
@@ -43,13 +41,14 @@ transition: slide-up
 
 layout: image-right
 
-image: ./assets/homelab-martin-full.jpg
+image: /homelab-martin-full.jpg
 ---
 
 # Kort fortalt
 
 - 🏠 En server man konfigurerer selv
 - 🧑‍💻 Kan brukes for personlige tjenester og data
+- 🪣 En sandbox hvor du kan leke "uten fare"
 
 <style>
 h1 {
@@ -64,6 +63,8 @@ h1 {
 </style>
 
 <!--
+<u>Sindre</u>
+
 ### En server man konfigurerer selv
 - OS, programvare, hardware
 ### Kan brukes for personlige tjenester og data
@@ -82,6 +83,7 @@ layout: two-cols
 - Hoste egne nettsider
 - Sette opp personlige tjenester
 - Eie egen data
+- Selvutvikling
 - Gøy
 
 ::right::
@@ -101,6 +103,8 @@ h1 {
 </style>
 
 <!--
+<u>Sindre</u>
+
 ### Hoste egne nettsider
 Portefølje, personlige nettsider, hobby prosjekter eller annet
 
@@ -110,6 +114,9 @@ Skylagring, busjetthåndtering, bildegalleri og mye mer
 ### Eie egen data
 Du har selv kontroll på dataene, de blir ikke solgt eller delt med andre, med mindre du selv deler det.
 
+### Selvutvikling
+Du kommer til å bruke en haug av forskjellige teknologier som gjør at du vil utvikle deg selv innad IT enda mer!
+
 -->
 
 ---
@@ -126,6 +133,10 @@ layout: two-cols
 - **Ente photos** - Google images alternativ
 - **Actual Budget** - Budsjettering
 - **Gitea / Forgejo** - Git
+- **Calibre** - eBook server
+- **Jellyfin** - Media server
+- **Navidrome** - Musikk server
+- **Minecraft server** - & en haug av andre spillservere!
 
 ::right::
 
@@ -144,13 +155,21 @@ h1 {
 </style>
 
 <!--
+<u>Martin</u>
+
 Det er mye forskjellig man kan sette opp på en homelab, blant annet:
-- Home assistant for en smarthusløsning som integrerer med mange ulike gadgets, via ulike standarer og protokoller
+- Home assistant for en smarthusløsning som integrerer med mange ulike gadgets, via ulike standarer og protokoller.
+For eksempel for styring av lys og varme. 
 - Kitchenowl som en handleliste man kan dele med alle i husstanden
-- Nextcloud for skylagring og mye mer.
+- Nextcloud for skylagring og mye mer. Kan brukes som et alternativ til Sharepoint og Microsoft 365 pakken.
+Da det kan utvides med all slags funksjonalitet, word og powerpoint alternativ og teams alternativ.
 - Ente Photos for lagring og deling av bilder, samt 2FA app
 - Actual Budget for budsjettering som kan kobles til banken din
-- Gitea / Forgejo for å lagre å dele egen kode
+- Gitea / ForgeJo for å lagre å dele egen kode, samt CI/CD pipelines for deployment.
+- Calibre for å ha sine e-bøker lagret trygt (Amazon 👀)
+- Jellyfin for å lagre en haug av forskjellige medier, eks. filmer og serier
+- Navidrome for å lagre musikken sin på en dedikert tjeneste om man ikke bruker Spotify
+- Spillservere for Minecraft, Factorio og en haug andre
 
 Det finnes mye mer. Dersom det finnes et behov for en app så finnes det en open-source løsning som kan self-hostes.
 
@@ -197,9 +216,12 @@ h1 {
 </style>
 
 <!--
+<u>Martin</u>
+
 ### Servere
 Mitt oppsett bruker i dag to servere. En Raspberry Pi4 med NixOS, og en HP Homelab med Ubuntu Server.
 Raspberry Pi har nylig blitt konvertert til NixOS og inneholder ikke noe nyttig for øyeblikket.
+Planen er å migrere Homelab til NixOS også etter hvert, men først skal jeg sette opp og teste Raspberry pi med det.
 
 Nå ligger alt på Homelabben som jeg kjøpte på Bergen brukt PC.
 - [HP ProDesk 600](https://bergenbruktpc.no/stasjonaer-pc/hp/hp-prodesk-600-g3-sff-i5-i7-6-gen#&variation=926582)
@@ -210,14 +232,15 @@ Nå ligger alt på Homelabben som jeg kjøpte på Bergen brukt PC.
 
 ### Software
 - Jeg bruker Cloudflare som DNS provider, hvor domene blir registrert og sender trafikker til ruteren.
-  - Her er det registrert hoveddomene samt alle subdomener.
+  - Her er det registrert hoveddomene samt en wildcard for subdomener.
+  - I tillegg er det diverse records for epost og verifiseringer.
 - Ruteren bruker port forwarding for å sende https trafikken videre til homelab.
 - Homelab bruker Caddy for å ta imot requests og sende de videre til de ulike programmene med reverse proxy
   - Den kan også bare returner ressurser som html eller filer
   - Caddy håndterer automatisk TLS sertifikat uten noen ekstra konfigurering
 - Så godt som alle tjenester på homelab bruker docker for å kjøre, dette gjør det utrolig enkelt å sette opp, og fjerne tjenester.
   - Samt oppdateringer
-  - Man får mye gratis, logging, health checks, enkle oppdateringer, enkel testing på andre enheter
+  - Man får mye gratis, samlet logging, health checks, enkle oppdateringer, enkel testing på andre enheter
 
 #### Deployment
 Jeg bruker Gitea for git, hvor all min kode blir lagret. Her kan jeg også sette opp Gitea Actions, som virker nesten identisk til GitHub actions.
@@ -234,11 +257,33 @@ I tillegg må man også ha brukernavn, passord og en 2FA kode.
 
 ---
 transition: slide-up
+
+layout: two-cols
 ---
 
 # Sindres oppsett
 
-- 🧑‍💻 **OS**
+> I prosessen av å refaktorere hele oppsettet med NixOS🎉
+
+### Servere
+
+- **2 x HP Prodesk 600 G3 SFF** som kjører Proxmox
+- **Raspberry Pi 4B** som kjører RetroPie🕹️
+
+### Software
+
+- **Caddy**
+- **Tailscale med Headscale**
+- **Docker**
+- **Kitchenowl**
+- **ForgeJo**
+- **Minecraft server**
+- Med mer
+
+::right::
+
+![](/overview-sindre.svg)
+
 <style>
 h1 {
   background-color: #2B90B6;
@@ -251,13 +296,18 @@ h1 {
 }
 </style>
 
+<!--
+<u>Sindre</u>
+-->
+
 ---
 transition: slide-up
 
 layout: statement
 ---
 
-# Spørsmål?
+# Takk for oss
+## Spørsmål?
 
 <style>
 h1 {
@@ -270,603 +320,3 @@ h1 {
   -moz-text-fill-color: transparent;
 }
 </style>
-
----
----
-
-# What is Slidev?
-
-Slidev is a slides maker and presenter designed for developers, consist of the following features
-
-- 📝 **Text-based** - focus on the content with Markdown, and then style them later
-- 🎨 **Themable** - themes can be shared and re-used as npm packages
-- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
-- 🤹 **Interactive** - embed Vue components to enhance your expressions
-- 🎥 **Recording** - built-in recording and camera view
-- 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA
-- 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev
-  <br>
-  <br>
-
-Read more about [Why Slidev?](https://sli.dev/guide/why)
-
-<style>
-h1 {
-  background-color: #2B90B6;
-  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
-  background-size: 100%;
-  -webkit-background-clip: text;
-  -moz-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  -moz-text-fill-color: transparent;
-}
-</style>
-
-<!--
-TODO Remove this and below.
-
-Here is another comment.
--->
-
----
-transition: slide-up
-level: 2
----
-
-# Navigation
-
-Hover on the bottom-left corner to see the navigation's controls
-panel, [learn more](https://sli.dev/guide/ui#navigation-bar)
-
-## Keyboard Shortcuts
-
-|                                                     |                             |
-|-----------------------------------------------------|-----------------------------|
-| <kbd>right</kbd> / <kbd>space</kbd>                 | next animation or slide     |
-| <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
-| <kbd>up</kbd>                                       | previous slide              |
-| <kbd>down</kbd>                                     | next slide                  |
-
-<!-- https://sli.dev/guide/animations.html#click-animation -->
-<img
-v-click
-class="absolute -bottom-9 -left-7 w-80 opacity-50"
-src="https://sli.dev/assets/arrow-bottom-left.svg"
-alt=""
-/>
-<p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
-
----
-layout: two-cols
-layoutClass: gap-16
----
-
-# Table of contents
-
-You can use the `Toc` component to generate a table of contents for your slides:
-
-```html
-
-<Toc minDepth="1" maxDepth="1" />
-```
-
-The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter.
-
-::right::
-
-<Toc text-sm minDepth="1" maxDepth="2" />
-
----
-layout: image-right
-image: https://cover.sli.dev
----
-
-# Code
-
-Use code snippets and get the highlighting directly, and even types hover!
-
-```ts {all|5|7|7-8|10|all} twoslash
-// TwoSlash enables TypeScript hover information
-// and errors in markdown code blocks
-// More at https://shiki.style/packages/twoslash
-
-import { computed, ref } from 'vue'
-
-const count = ref(0)
-const doubled = computed(() => count.value * 2)
-
-doubled.value = 2
-```
-
-<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
-
-<!-- This allow you to embed external code blocks -->
-<<< @/snippets/external.ts#snippet
-
-<!-- Footer -->
-
-[Learn more](https://sli.dev/features/line-highlighting)
-
-<!-- Inline style -->
-<style>
-.footnotes-sep {
-  @apply mt-5 opacity-10;
-}
-.footnotes {
-  @apply text-sm opacity-75;
-}
-.footnote-backref {
-  display: none;
-}
-</style>
-
-<!--
-Notes can also sync with clicks
-
-[click] This will be highlighted after the first click
-
-[click] Highlighted with `count = ref(0)`
-
-[click:3] Last click (skip two clicks)
--->
-
----
-level: 2
----
-
-# Shiki Magic Move
-
-Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code
-snippets.
-
-Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move.
-For example:
-
-````md magic-move {lines: true}
-```ts {*|2|*}
-// step 1
-const author = reactive({
-  name: 'John Doe',
-  books: [
-    'Vue 2 - Advanced Guide',
-    'Vue 3 - Basic Guide',
-    'Vue 4 - The Mystery'
-  ]
-})
-```
-
-```ts {*|1-2|3-4|3-4,8}
-// step 2
-export default {
-  data() {
-    return {
-      author: {
-        name: 'John Doe',
-        books: [
-          'Vue 2 - Advanced Guide',
-          'Vue 3 - Basic Guide',
-          'Vue 4 - The Mystery'
-        ]
-      }
-    }
-  }
-}
-```
-
-```ts
-// step 3
-export default {
-  data: () => ({
-    author: {
-      name: 'John Doe',
-      books: [
-        'Vue 2 - Advanced Guide',
-        'Vue 3 - Basic Guide',
-        'Vue 4 - The Mystery'
-      ]
-    }
-  })
-}
-```
-
-Non-code blocks are ignored.
-
-```vue
-<!-- step 4 -->
-<script setup>
-const author = {
-  name: 'John Doe',
-  books: [
-    'Vue 2 - Advanced Guide',
-    'Vue 3 - Basic Guide',
-    'Vue 4 - The Mystery'
-  ]
-}
-</script>
-```
-````
-
----
-
-# Components
-
-<div grid="~ cols-2 gap-4">
-<div>
-
-You can use Vue components directly inside your slides.
-
-We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your
-custom components is also super easy.
-
-```html
-
-<Counter :count="10" />
-```
-
-<!-- ./components/Counter.vue -->
-<Counter :count="10" m="t-4" />
-
-Check out [the guides](https://sli.dev/builtin/components.html) for more.
-
-</div>
-<div>
-
-```html
-
-<Tweet id="1390115482657726468" />
-```
-
-<Tweet id="1390115482657726468" scale="0.65" />
-
-</div>
-</div>
-
-<!--
-Presenter note with **bold**, *italic*, and ~~striked~~ text.
-
-Also, HTML elements are valid:
-<div class="flex w-full">
-  <span style="flex-grow: 1;">Left content</span>
-  <span>Right content</span>
-</div>
--->
-
----
-class: px-20
----
-
-# Themes
-
-Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for
-tools. Switching between themes by just **one edit** in your frontmatter:
-
-<div grid="~ cols-2 gap-2" m="t-2">
-
-```yaml
----
-theme: default
----
-```
-
-```yaml
----
-theme: seriph
----
-```
-
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
-
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
-
-</div>
-
-Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and
-check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery).
-
----
-
-# Clicks Animations
-
-You can add `v-click` to elements to add a click animation.
-
-<div v-click>
-
-This shows up when you click the slide:
-
-```html
-
-<div v-click>This shows up when you click the slide.</div>
-```
-
-</div>
-
-<br>
-
-<v-click>
-
-The <span v-mark.red="3"><code>v-mark</code> directive</span>
-also allows you to add
-<span v-mark.circle.orange="4">inline marks</span>
-, powered by [Rough Notation](https://roughnotation.com/):
-
-```html
-<span v-mark.underline.orange>inline markers</span>
-```
-
-</v-click>
-
-<div mt-20 v-click>
-
-[Learn more](https://sli.dev/guide/animations#click-animation)
-
-</div>
-
----
-
-# Motions
-
-Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive.
-
-```html
-
-<div
-        v-motion
-        :initial="{ x: -80 }"
-        :enter="{ x: 0 }"
-        :click-3="{ x: 80 }"
-        :leave="{ x: 1000 }"
->
-    Slidev
-</div>
-```
-
-<div class="w-60 relative">
-  <div class="relative w-40 h-40">
-    <img
-      v-motion
-      :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
-      :enter="final"
-      class="absolute inset-0"
-      src="https://sli.dev/logo-square.png"
-      alt=""
-    />
-    <img
-      v-motion
-      :initial="{ y: 500, x: -100, scale: 2 }"
-      :enter="final"
-      class="absolute inset-0"
-      src="https://sli.dev/logo-circle.png"
-      alt=""
-    />
-    <img
-      v-motion
-      :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
-      :enter="final"
-      class="absolute inset-0"
-      src="https://sli.dev/logo-triangle.png"
-      alt=""
-    />
-  </div>
-
-  <div
-    class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
-    v-motion
-    :initial="{ x: -80, opacity: 0}"
-    :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
-    Slidev
-  </div>
-</div>
-
-<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
-<script setup lang="ts">
-const final = {
-  x: 0,
-  y: 0,
-  rotate: 0,
-  scale: 1,
-  transition: {
-    type: 'spring',
-    damping: 10,
-    stiffness: 20,
-    mass: 2
-  }
-}
-</script>
-
-<div
-  v-motion
-  :initial="{ x:35, y: 30, opacity: 0}"
-  :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
-
-[Learn more](https://sli.dev/guide/animations.html#motion)
-
-</div>
-
----
-
-# LaTeX
-
-LaTeX is supported out-of-box. Powered by [KaTeX](https://katex.org/).
-
-<div h-3 />
-
-Inline $\sqrt{3x-1}+(1+x)^2$
-
-Block
-$$ {1|3|all}
-\begin{aligned}
-\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
-\nabla \cdot \vec{B} &= 0 \\
-\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\
-\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
-\end{aligned}
-$$
-
-[Learn more](https://sli.dev/features/latex)
-
----
-
-# Diagrams
-
-You can create diagrams / graphs from textual descriptions, directly in your Markdown.
-
-<div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
-
-```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    Note over Alice,John: A typical interaction
-```
-
-```mermaid {theme: 'neutral', scale: 0.8}
-graph TD
-B[Text] --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-```mermaid
-mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid
-```
-
-```plantuml {scale: 0.7}
-@startuml
-
-package "Some Group" {
-  HTTP - [First Component]
-  [Another Component]
-}
-
-node "Other Groups" {
-  FTP - [Second Component]
-  [First Component] --> FTP
-}
-
-cloud {
-  [Example 1]
-}
-
-database "MySql" {
-  folder "This is my folder" {
-    [Folder 3]
-  }
-  frame "Foo" {
-    [Frame 4]
-  }
-}
-
-[Another Component] --> [Example 1]
-[Example 1] --> [Folder 3]
-[Folder 3] --> [Frame 4]
-
-@enduml
-```
-
-</div>
-
-Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid)
-and [PlantUML Diagrams](https://sli.dev/features/plantuml)
-
----
-foo: bar
-dragPos:
-  square: 0,-791,0,0
-square: 691,32,167,_,-16
----
-
-# Draggable Elements
-
-Double-click on the draggable elements to edit their positions.
-
-<br>
-
-###### Directive Usage
-
-```md
-<img v-drag="'square'" src="https://sli.dev/logo.png">
-```
-
-<br>
-
-###### Component Usage
-
-```md
-<v-drag text-3xl>
-  <div class="i-carbon:arrow-up" />
-  Use the `v-drag` component to have a draggable container!
-</v-drag>
-```
-
-<v-drag pos="663,206,261,_,-15">
-  <div text-center text-3xl border border-main rounded>
-    Double-click me!
-  </div>
-</v-drag>
-
-<img v-drag="'square'" src="https://sli.dev/logo.png">
-
-###### Draggable Arrow
-
-```md
-<v-drag-arrow two-way />
-```
-
-<v-drag-arrow pos="67,452,253,46" two-way op70 />
-
----
-src: ./pages/imported-slides.md
-hide: false
----
-
----
-
-# Monaco Editor
-
-Slidev provides built-in Monaco Editor support.
-
-Add `{monaco}` to the code block to turn it into an editor:
-
-```ts {monaco}
-import { ref } from 'vue'
-import { emptyArray } from './external'
-
-const arr = ref(emptyArray(10))
-```
-
-Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
-
-```ts {monaco-run}
-import { version } from 'vue'
-import { emptyArray, sayHello } from './external'
-
-sayHello()
-console.log(`vue ${ version }`)
-console.log(emptyArray<number>(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1]))
-```
-
----
-layout: center
-class: text-center
----
-
-# Learn More
-
-[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases)
-
-<PoweredBySlidev mt-10 />

snippets/external.ts

@@ -1,12 +0,0 @@
-/* eslint-disable no-console */
-
-// #region snippet
-// Inside ./snippets/external.ts
-export function emptyArray<T>(length: number) {
-  return Array.from<T>({ length })
-}
-// #endregion snippet
-
-export function sayHello() {
-  console.log('Hello from snippets/external.ts')
-}