moved files from old repo and rewrote some

Added LinkedIn link in footer.

Added option to add icon to ExternalLinks

Refactored some code in ExternalLink.

Signed-off-by: Martin Berg Alstad <git@martials.no>

.env

@@ -1,3 +0,0 @@
-DOMAIN="martials.no"
-GIT_URL=https://git.$DOMAIN
-STATUS_URL="https://status.$DOMAIN/status/home"

astro.config.mjs

@@ -1,7 +1,7 @@
 // @ts-check
 import { defineConfig, envField } from "astro/config"
 import paraglide from "@inlang/paraglide-astro"
-import tailwindcss from "@tailwindcss/vite"
+import tailwind from "@astrojs/tailwind"
 import sitemap from "@astrojs/sitemap"
 import svelte from "@astrojs/svelte"
 import node from "@astrojs/node"
@@ -20,9 +20,10 @@ export default defineConfig({
   output: "server",
   i18n: {
     defaultLocale: "nb",
-    locales: ["nb", "en"],
+    locales: ["nb", "en"]
   },
   integrations: [
+    tailwind(),
     sitemap(),
     mdx(),
     svelte(),
@@ -30,21 +31,15 @@ export default defineConfig({
     paraglide({
       // recommended settings
       project: "./project.inlang",
-      outdir: "./src/paraglide", //where your files should be
-    }),
+      outdir: "./src/paraglide" //where your files should be
+    })
   ],
   adapter: node({
-    mode: "standalone",
+    mode: "standalone"
   }),
-  vite: {
-    plugins: [tailwindcss()],
-  },
   env: {
     schema: {
-      DOMAIN: envField.string({ context: "client", access: "public" }),
-      URL: envField.string({ context: "client", access: "public" }),
-      GIT_URL: envField.string({ context: "client", access: "public" }),
-      STATUS_URL: envField.string({ context: "client", access: "public" }),
-    },
-  },
+      URL: envField.string({ context: "client", access: "public" })
+    }
+  }
 })

messages/en.json

@@ -7,7 +7,6 @@
   "contactMe": "Contact me",
   "myLinks": "My links",
   "myProjects": "My projects",
-  "uses": "Uses",
   "hardware": "Hardware",
   "accessories": "Accessories",
   "sourceCode": "Source code",

messages/nb.json

@@ -7,7 +7,6 @@
   "contactMe": "Kontakt meg",
   "myLinks": "Mine lenker",
   "myProjects": "Mine prosjekter",
-  "uses": "Uses",
   "hardware": "Maskinvare",
   "accessories": "Tilbehør",
   "sourceCode": "Kildekode",

package.json

@@ -8,35 +8,36 @@
     "build": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide && astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "type-check": "astro check",
     "postinstall": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide",
     "format": "prettier --write \"./src/**/*.{js,mjs,ts,astro,svelte,css,md,json}\"",
     "watch-messages": "paraglide-js compile --watch --project ./project.inlang --outdir ./src/paraglide"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^4.0.8",
-    "@astrojs/node": "9.1.0",
+    "@astrojs/mdx": "4.0.0-beta.2",
+    "@astrojs/node": "9.0.0-beta.2",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/svelte": "^7.0.4",
-    "@iconify-json/pajamas": "^1.2.5",
-    "@inlang/paraglide-astro": "^0.3.5",
-    "@inlang/paraglide-js": "1.11.8",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.0.6",
-    "astro": "5.3.0",
-    "astro-icon": "^1.1.5",
+    "@astrojs/svelte": "6.0.0-beta.1",
+    "@astrojs/tailwind": "^5.1.2",
+    "@iconify-json/pajamas": "^1.2.3",
+    "@inlang/paraglide-astro": "^0.2.2",
+    "@inlang/paraglide-js": "1.11.2",
+    "@tailwindcss/typography": "^0.5.15",
+    "astro": "5.0.0-beta.5",
+    "astro-icon": "^1.1.1",
+    "diff": "^7.0.0",
     "sharp": "^0.33.5",
-    "svelte": "^5.20.1",
-    "tailwindcss": "^4.0.6",
-    "typescript": "^5.7.3"
+    "svelte": "^4.2.19",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.3"
   },
   "devDependencies": {
-    "daisyui": "^5.0.0-beta.8",
-    "prettier": "^3.5.1",
+    "@types/diff": "^5.2.3",
+    "daisyui": "^4.12.13",
+    "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-svelte": "^3.3.3",
-    "vite": "^6.1.0"
+    "prettier-plugin-svelte": "^3.2.7",
+    "vite": "^5.4.8"
   },
   "prettier": {
     "semi": false,

src/components/Footer.astro

@@ -1,20 +1,19 @@
 ---
 import GiteaLink from "./links/GiteaLink.astro"
-import PajamasIcon from "./icons/PajamasIcon.astro"
 import ExternalLink from "./links/ExternalLink.astro"
 import LanguageButtonGroup from "./LanguageButtonGroup.astro"
-import { GIT_URL, STATUS_URL } from "astro:env/client"
 import * as m from "@/paraglide/messages"
-
-const giteaLink = `${GIT_URL}/martials/martials.no`
+import { LINKED_IN_URL, THIS_GIT_URL, STATUS_URL } from "../constants"
 ---
 
 <div class="divider" />
 <div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
-  <div>
-    <GiteaLink href={giteaLink} />
-    <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">
-      <PajamasIcon name="pajamas:status-health" class="w-6 h-6 mr-2" />
+  <div class="flex flex-col gap-1">
+    <GiteaLink href={THIS_GIT_URL} />
+    <ExternalLink href={LINKED_IN_URL} iconLeft="pajamas:linkedin" iconLeftAriaLabel="LinkedIn" title="LinkedIn">
+      LinkedIn
+    </ExternalLink>
+    <ExternalLink href={STATUS_URL} iconLeft="pajamas:status-health" iconLeftAriaLabel="Status health" title="Status">
       {m.status()}
     </ExternalLink>
   </div>

src/components/HardwarePage.svelte

@@ -4,31 +4,31 @@
   import CollapseList from "@/components/collapse/CollapseList.svelte"
   import type { CollectionEntry } from "astro:content"
 
-  interface Props {
-    uses: CollectionEntry<'uses'>[]
-  }
+  export let hardware: CollectionEntry<"hardware">[] = []
 
-  const { uses }: Props = $props()
-
-  const hardwareOptions = uses.map((item) => ({
+  const hardwareOptions = hardware.map((item) => ({
     key: item.id,
     value: item.data.title
   }))
 
-  let selectedHardwareKey = $state(uses[0].id)
-  let selectedHardware = $derived(uses.find((item) => item.id === selectedHardwareKey)!)
+  let selectedHardwareKey: string = hardware[0].id
+  $: selectedHardware = hardware.find((item) => item.id === selectedHardwareKey)!
+
+  // TODO bind to component
+  function onChange({ detail }: CustomEvent<string>) {
+    selectedHardwareKey = detail
+  }
 
 </script>
-
 <div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
-  <h1 class="text-center">{m.uses()}</h1>
+  <h1 class="text-center">{m.hardware()}</h1>
   <div>
-    <Select options={hardwareOptions} bind:selected={selectedHardwareKey} class="mx-auto w-max" />
+    <Select options={hardwareOptions} on:change={onChange} class="mx-auto w-max" />
   </div>
   <br />
 
   <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
-  <div class="my-2"></div>
+  <div class="my-2" />
   {#if (selectedHardware.data.accessories)}
     <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />
   {/if}

src/components/Input.astro

@@ -1,28 +0,0 @@
----
-interface Props {
-  label: string
-  type?: "text" | "email" | "password" | "number"
-  name: string
-  required?: boolean
-  placeholder?: string
-}
-
-const {
-  label,
-  type = "text",
-  name,
-  required = false,
-  placeholder,
-} = Astro.props
----
-
-<label class="flex flex-col">
-  {label}
-  <input
-    class="input input-bordered"
-    type={type}
-    name={name}
-    required={required}
-    placeholder={placeholder}
-  />
-</label>

src/components/Input.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let label: string
+  export let type: "text" | "email" | "password" | "number" = "text"
+  export let name: string
+  export let required: boolean = false
+  export let placeholder: string
+  export let inputClass: string
+</script>
+
+<label class="flex flex-col ${$$restProps.class}">
+  {label}
+  <input
+    class="input input-bordered ${inputClass}"
+    type={type}
+    name={name}
+    required={required}
+    placeholder={placeholder}
+  />
+</label>

src/components/Menu.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div>
+  <!-- TODO -->
+</div>

src/components/Row.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div class="flex flex-row items-center ${$$restProps.class}">
+  <slot />
+</div>

src/components/Select.svelte

@@ -1,23 +1,20 @@
 <script lang="ts">
+  import { createEventDispatcher } from "svelte"
 
   // TODO move to types?
-  interface Option<Key> {
-    key: Key
+  interface Option {
+    key: string
     value: string
   }
 
-  interface Props<Key = string> {
-    selected: Key
-    options?: Option<Key>[]
-    class?: string
-  }
-
-  let { selected = $bindable(), options = [], class: clazz }: Props = $props()
+  export let options: Option[] = []
+  // TODO bind data instead of dispatching events
+  const dispatch = createEventDispatcher<{ change: string }>()
 </script>
 
 <select
-  bind:value={selected}
-  class="select select-bordered w-full max-w-xs ${clazz}"
+  class="select select-bordered w-full max-w-xs ${$$restProps.class}"
+  on:change={(value) => dispatch("change", value.currentTarget.value)}
 >
   {#each options as { key, value }}
     <option value={key}>{value}</option>

src/components/Switch.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+
+  export let defaultValue: boolean = false
+  export let title: string
+  export let onChange: (value: boolean) => void
+  export let name: string
+  export let id: string
+
+  let checked = defaultValue
+
+  function handleChange() {
+    checked = !checked
+    if (onChange) {
+      onChange(checked)
+    }
+  }
+</script>
+
+<button
+  id={id}
+  on:click={handleChange}
+  title={title}
+  class={`${checked ? "bg-cyan-900" : "bg-gray-500"} relative my-2 inline-flex h-6 w-11 items-center rounded-full ${$$restProps.class}`}
+>
+  <span class={"sr-only"}>{name}</span>
+  <span
+    class={`${checked ? "translate-x-6" : "translate-x-1"} inline-block h-4 w-4 transform rounded-full bg-white transition-all`}
+  />
+</button>

src/components/buttons/Button.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+
+  export let id: string | undefined = undefined
+  export let title: string
+  export let type: "button" | "submit" | "reset" = "button"
+
+</script>
+
+<button id={id} class="btn" title={title} type={type}>
+  <slot />
+</button>

src/components/collapse/Collapse.svelte

@@ -1,16 +1,10 @@
 <script lang="ts">
-
-  interface Props {
-    title?: string
-    children: any
-  }
-
-  const { title = "", children }: Props = $props()
+  export let title: string = ""
 </script>
 
 <details class="collapse collapse-arrow bg-base-200">
   <summary class="collapse-title text-xl font-medium">{title}</summary>
   <div class="collapse-content">
-    {@render children()}
+    <slot />
   </div>
 </details>

src/components/collapse/CollapseList.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
   import Collapse from "@/components/collapse/Collapse.svelte"
 
-  interface Props {
-    items?: string[]
-    title?: string
-  }
+  export let items: string[] = []
+  export let title: string = ""
 
-  const { items = [], title = "" }: Props = $props()
 </script>
 
 <Collapse title={title}>

src/components/contactMe/ContactMeForm.astro

@@ -1,5 +1,5 @@
 ---
-import Input from "@/components/Input.astro"
+import Input from "@/components/Input.svelte"
 import * as m from "@/paraglide/messages.js"
 // TODO self-host email server
 ---

src/components/contactMe/ContactMePage.astro

@@ -0,0 +1,7 @@
+---
+import ContactMeForm from "./ContactMeForm.astro"
+import * as m from "@/paraglide/messages"
+---
+
+<h1 class="text-center">{m.contactMe()}</h1>
+<ContactMeForm />

src/components/icons/Gitea.astro

@@ -7,4 +7,4 @@ interface Props {
 const { class: clazz } = Astro.props
 ---
 
-<PajamasIcon name="pajamas:gitea" class={clazz}></PajamasIcon>
+<PajamasIcon name="pajamas:gitea" aria-label="Gitea" class={clazz} />

src/components/icons/PajamasIcon.astro

@@ -2,11 +2,13 @@
 import type { PajamasIcon } from "@/types/icons"
 import type { ComponentProps } from "@/types/props"
 import { Icon } from "astro-icon/components"
+
 interface Props extends ComponentProps {
   name: PajamasIcon
+  "aria-label": string
 }
 
 const { name, class: clazz, ...props } = Astro.props
 ---
 
-<Icon name={name} class:list={[clazz]} {...props} />
+<Icon name={name} class:list={["w-6 h-6", clazz]} {...props} />

src/components/icons/PajamasIcon.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { PajamasIcon } from "@/types/icons"
+  import { Icon } from "astro-icon/components"
+
+  export let name: PajamasIcon
+  export let ariaLabel: string
+
+</script>
+
+<Icon name={name} class="w-6 h-6 ${$$restProps.class}" aria-label={ariaLabel} />

src/components/links/ExternalLink.astro

@@ -1,12 +1,28 @@
 ---
 import type { LinkProps } from "@/types/props"
+import type { PajamasIcon } from "@/types/icons"
+import ExternalLinkTextOnly from "./ExternalLinkTextOnly.astro"
+import ExternalLinkIconLeft from "./ExternalLinkIconLeft.astro"
+
 interface Props extends LinkProps {
-  noStyle?: boolean
+  iconLeft?: PajamasIcon
+  iconLeftAriaLabel?: string
 }
 
-const { href, noStyle = false, class: clazz, ...props } = Astro.props
+const { iconLeft, iconLeftAriaLabel, ...props } = Astro.props
+if (iconLeft && !iconLeftAriaLabel) {
+  throw new Error("ExternalLink: iconLeftAriaLabel is required when iconLeft is provided")
+}
 ---
 
-<a href={href} target="_blank" rel="noopener" class:list={[noStyle ? "" : "link", clazz]} {...props}>
+{  iconLeft && iconLeftAriaLabel
+  ?
+<ExternalLinkIconLeft iconLeft={iconLeft} iconLeftAriaLabel={iconLeftAriaLabel} {...props}>
   <slot />
-</a>
+</ExternalLinkIconLeft>
+  :
+<ExternalLinkTextOnly {...props}>
+  <slot />
+</ExternalLinkTextOnly>
+  }
+

src/components/links/ExternalLinkIconLeft.astro

@@ -0,0 +1,20 @@
+---
+import type { PajamasIcon as PajamasIconType } from "@/types/icons"
+import type { LinkProps } from "@/types/props"
+import ExternalLinkTextOnly from "./ExternalLinkTextOnly.astro"
+import PajamasIcon from "../icons/PajamasIcon.astro"
+
+interface Props extends LinkProps {
+  iconLeft: PajamasIconType
+  iconLeftAriaLabel: string
+}
+const { href, class: clazz, iconLeft, iconLeftAriaLabel, ...props } = Astro.props
+---
+
+<div class="flex items-center">
+  <PajamasIcon name={iconLeft} aria-label={iconLeftAriaLabel} class="mr-2" />
+  <ExternalLinkTextOnly href={href} class={clazz} {...props}>
+    <slot />
+  </ExternalLinkTextOnly>
+</div>
+

src/components/links/ExternalLinkTextOnly.astro

@@ -0,0 +1,12 @@
+---
+import type { LinkProps } from "@/types/props"
+
+interface Props extends LinkProps {
+}
+
+const { href, class: clazz, ...props } = Astro.props
+---
+
+<a href={href} target="_blank" rel="noopener" class:list={[clazz]} {...props}>
+  <slot />
+</a>

src/components/links/GiteaLink.astro

@@ -1,7 +1,6 @@
 ---
 import ExternalLink from "./ExternalLink.astro"
 import * as m from "@/paraglide/messages"
-import Gitea from "../icons/Gitea.astro"
 interface Props {
   href: string
 }
@@ -9,8 +8,7 @@ const { href } = Astro.props
 ---
 
 <div>
-  <ExternalLink href={href} class="flex items-center gap-1">
-    <Gitea class="w-6 h-6" />
+  <ExternalLink iconLeft="pajamas:gitea" iconLeftAriaLabel="Gitea" href={href}>
     {m.sourceCode()}
   </ExternalLink>
 </div>

src/components/myLinks/LinkCard.astro

@@ -10,10 +10,10 @@ interface Props extends MyLink {
 const { title, message, url, icon, class: clazz } = Astro.props
 ---
 
-<ExternalLink href={url} noStyle>
+<ExternalLink href={url}>
   <div class:list={["card bg-neutral", clazz]}>
     <div class="card-body p-5 flex flex-row items-center">
-      <PajamasIcon name={icon ?? "pajamas:link"} class="w-6 h-6" />
+      <PajamasIcon name={icon ?? "pajamas:link"} aria-label={icon ? title : "Link"} />
       <div>
         <h5 class="card-title">{title}</h5>
         <p class="prose">{message}</p>

src/components/myLinks/myLinks.ts

@@ -1,6 +1,6 @@
 import type { PajamasIcon } from "@/types/icons.ts"
-import { GIT_URL } from "astro:env/client"
 import * as m from "@/paraglide/messages"
+import * as c from "@/constants.ts"
 
 export interface MyLink {
   title: string;
@@ -12,35 +12,35 @@ export interface MyLink {
 export default [
   {
     title: "GitHub",
-    url: "https://github.com/emberal",
+    url: c.GITHUB_PROFILE_URL,
     icon: "pajamas:github"
   },
   {
     title: "Gitea",
-    url: `${GIT_URL}/martials`,
+    url: c.GIT_PROFILE_URL,
     message: m.forPersonalProjects(),
     icon: "pajamas:gitea"
   },
   {
     title: "LinkedIn",
-    url: "https://www.linkedin.com/in/martin-b-2a69391a3/",
+    url: c.LINKED_IN_URL,
     icon: "pajamas:linkedin"
   },
   {
     title: "Mastodon (Snabelen)",
-    url: "https://snabelen.no/@Martials",
+    url: c.MASTODON_URL,
     icon: "pajamas:mastodon"
   },
   {
     title: "Pixelfed",
-    url: "https://pixelfed.social/i/web/profile/261454857934868480"
+    url: c.PIXELFED_URL
   },
   {
     title: "Steam",
-    url: "https://steamcommunity.com/id/martials/"
+    url: c.STEAM_URL
   },
   {
     title: "Trakt.tv",
-    url: "https://trakt.tv/users/martials"
+    url: c.TRAKT_URL
   }
 ] satisfies MyLink[]

src/components/projects/ProjectPage.astro

@@ -15,7 +15,7 @@ interface Props {
 const { project } = Astro.props
 
 const entry = await getEntry("projects", project)
-const { Content } = await render(entry!)
+const { Content } = await render(entry)
 const {
   title,
   description,

src/components/simplifyTruths/HowTo.astro

@@ -0,0 +1,26 @@
+---
+import KeywordsDisclosure from "./KeywordsDisclosure.astro"
+import DisclosureContainer from "./output/DisclosureContainer.astro"
+import Disclosure from "./output/Disclosure.astro"
+import ExternalLink from "../links/ExternalLink.astro"
+// TODO translate and move link
+---
+
+<DisclosureContainer>
+  <Disclosure title={"How to"}>
+    <p>
+      Fill in a truth expression and it will be simplified for you as much as possible. It will
+      also genereate a truth table with all possible values. You can use a single letter, word or
+      multiple words without spacing for each atomic value. If you do not want to simplify the
+      expression, simply turn off the toggle. Keywords for operators are defined below.
+      Parentheses is also allowed.
+    </p>
+    <p>
+      API docs can be found
+      <ExternalLink href={"https://api.martials.no/simplify-truths"}>here</ExternalLink>
+      .
+    </p>
+  </Disclosure>
+
+  <KeywordsDisclosure />
+</DisclosureContainer>

src/components/simplifyTruths/KeywordsDisclosure.astro

@@ -0,0 +1,40 @@
+---
+import Disclosure from "./output/Disclosure.astro"
+// TODO Translate
+---
+
+<Disclosure title={"Keywords"}>
+  <table>
+    <thead>
+    <tr class={"text-left"}>
+      <th>Name</th>
+      <th class={"pr-2"}>API</th>
+      <th>Other</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>Not:</td>
+      <td>!</td>
+      <td>NOT</td>
+    </tr>
+    <tr>
+      <td>And:</td>
+      <td>&</td>
+      <td>AND</td>
+    </tr>
+    <tr>
+      <td>Or:</td>
+      <td>|</td>
+      <td>/</td>
+      <td>OR</td>
+    </tr>
+    <tr>
+      <td class={"pr-2"}>Implication:</td>
+      <td>{"->"}</td>
+      <td class={"px-2"}>IMPLICATION</td>
+      <td>IMP</td>
+    </tr>
+    </tbody>
+  </table>
+</Disclosure>

src/components/simplifyTruths/Search.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+
+  import Input from "@/components/Input.svelte"
+</script>
+
+<Input
+  inputClass={`rounded-xl pl-7 h-10 w-full pr-8`}
+  class={`w-full ${$$restProps.class}`}
+  id={id}
+  ref={ref}
+  placeholder="¬A & B -> C"
+  type={"text"}
+  onChange={onChange}
+  leading={
+        <Icon path={magnifyingGlass} aria-label={"Magnifying glass"} class={"absolute pl-2"} />
+      }
+  trailing={
+        <Show when={typing()} keyed>
+          <button class={"absolute right-2"} title={"Clear"} type={"reset"} onClick={clearSearch}>
+            <Icon path={xMark} aria-label={"The letter X"} />
+          </button>
+        </Show>
+      }
+/>

src/components/simplifyTruths/ShowMeHow.astro

@@ -0,0 +1,37 @@
+---
+import type { FetchResult } from "@/types/types"
+import Disclosure from "./output/Disclosure.astro"
+import DisclosureContainer from "./output/DisclosureContainer.astro"
+import { diffChars } from "diff"
+
+interface Props {
+  fetchResult: FetchResult | null
+}
+const { fetchResult } = Astro.props
+---
+
+<DisclosureContainer>
+  <Disclosure title={"Show me how it's done"}>
+    <table class={"table"}>
+      <tbody>
+      {
+        fetchResult?.orderOperations?.map((operation, index) => (
+          <tr class={"border-b border-dotted border-gray-500"}>
+            <td>{index + 1}:</td>
+            <td class={"px-2"}>
+              {
+                diffChars(operation.before, operation.after).map((part) => (
+                  <span class={`${part.added && "bg-green-700"} ${part.removed && "bg-red-700"}`}>
+                    {part.value}
+                  </span>
+                ))
+              }
+            </td>
+            <td>using: {operation.law}</td>
+          </tr>
+        ))
+        }
+      </tbody>
+    </table>
+  </Disclosure>
+</DisclosureContainer>

src/components/simplifyTruths/SimplifyTruthsPage.astro

@@ -0,0 +1,10 @@
+---
+import SimplifyTruthsPageBody from "./SimplifyTruthsPageBody.svelte"
+import HowTo from "./HowTo.astro"
+---
+
+<div id={"truth-content"}>
+  <SimplifyTruthsPageBody>
+    <HowTo />
+  </SimplifyTruthsPageBody>
+</div>

src/components/simplifyTruths/SimplifyTruthsPage.tsx

@@ -0,0 +1,428 @@
+/* @refresh reload */
+
+type Option = {
+  name: string
+  value: "NONE" | "TRUE" | "FALSE" | "DEFAULT" | "TRUE_FIRST" | "FALSE_FIRST"
+}
+
+const fetchUrls = [
+  "http://localhost:8080/simplify/table/",
+  "https://api.martials.no/simplify-truths/simplify/table/"
+]
+
+// TODO move some code to new components
+const TruthTablePage: Component = () => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  let inputElement: HTMLInputElement | undefined = undefined
+
+  let simplifyDefault = searchParams.simplify === undefined || searchParams.simplify === "true",
+    inputContent = !!searchParams.exp,
+    hideIntermediate = searchParams.hideIntermediate === "true"
+
+  const [simplifyEnabled, setSimplifyEnabled] = createSignal(simplifyDefault)
+  const [fetchResult, setFetchResult] = createSignal<FetchResult | null>(null)
+
+  const hideOptions: Option[] = [
+    { name: "Show all result", value: "NONE" },
+    { name: "Hide true results", value: "TRUE" },
+    { name: "Hide false results", value: "FALSE" }
+  ]
+
+  const [hideValues, setHideValues] = createSignal(hideOptions[0])
+
+  const sortOptions: Option[] = [
+    { name: "Sort by default", value: "DEFAULT" },
+    { name: "Sort by true first", value: "TRUE_FIRST" },
+    { name: "Sort by false first", value: "FALSE_FIRST" }
+  ]
+
+  const [sortValues, setSortValues] = createSignal(sortOptions[0])
+  const [hideIntermediates, setHideIntermediates] = createSignal(hideIntermediate)
+  const [isLoaded, setIsLoaded] = createSignal<boolean | null>(null)
+  const [error, setError] = createSignal<{ title: string; message: string } | null>(null)
+  const [useLocalhost, setUseLocalhost] = createSignal(false)
+
+  /**
+   * Updates the state of the current expression to the new search with all whitespace removed.
+   * If the element is not found, reset.
+   */
+  function onClick(e: Event): void {
+    e.preventDefault() // Stops the page from reloading onClick
+    const exp = inputElement?.value
+
+    if (exp) {
+      setSearchParams({
+        exp,
+        simplify: simplifyEnabled(),
+        hide: hideValues().value,
+        sort: sortValues().value,
+        hideIntermediate: hideIntermediates()
+      })
+
+      getFetchResult(exp)
+    }
+  }
+
+  function getFetchResult(exp: string | null): void {
+    setFetchResult(null)
+
+    if (exp && exp !== "") {
+      exp = replaceOperators(exp)
+      setError(null)
+      setIsLoaded(false)
+
+      fetch(`${fetchUrls[useLocalhost() ? 0 : 1]}${encodeURIComponent(exp)}?
+simplify=${simplifyEnabled()}&hide=${hideValues().value}&sort=${sortValues().value}&caseSensitive=false&
+hideIntermediate=${hideIntermediates()}`)
+        .then((res) => res.json())
+        .then((res) => {
+          if (res.status !== "OK" && !res.ok) {
+            return setError({ title: "Input error", message: res.message })
+          }
+          return setFetchResult(res)
+        })
+        .catch((err) => setError({ title: "Fetch error", message: err.toString() }))
+        .finally(() => setIsLoaded(true))
+    }
+  }
+
+  onMount((): void => {
+    if (searchParams.exp) {
+      const exp = searchParams.exp
+      if (exp && inputElement) {
+        inputElement.value = exp
+      }
+      const hide = searchParams.hide
+      if (hide) {
+        setHideValues(hideOptions.find((o) => o.value === hide) ?? hideOptions[0])
+      }
+      const sort = searchParams.sort
+      if (sort) {
+        setSortValues(sortOptions.find((o) => o.value === sort) ?? sortOptions[0])
+      }
+
+      getFetchResult(exp)
+    }
+
+    // Focuses searchbar on load
+    if (!isTouch()) {
+      inputElement?.focus()
+    }
+  })
+
+  const tableId = "truth-table"
+  const filenameId = "excel-filename"
+
+  function _exportToExcel(): void {
+    const value = getElementById<HTMLInputElement>(filenameId)?.value
+    exportToExcel({
+      name: value !== "" ? value : undefined,
+      tableId
+    })
+  }
+
+  return (
+    <Layout title={"Truth tables"}>
+      <Show when={import.meta.env.DEV ?? false} keyed>
+        (DEV) Use localhost:
+        <MySwitch title={"Use localhost"} defaultValue={false} onChange={setUseLocalhost} />
+      </Show>
+
+      <div id={"truth-content"}>
+        <div class={"mx-auto max-w-2xl"}>
+          <HowTo />
+
+          <form class={"flex-row-center"} onSubmit={onClick} autocomplete={"off"}>
+            <Search ref={inputElement} typingDefault={inputContent} />
+
+            <Button
+              id={"truth-input-button"}
+              title={"Generate (Enter)"}
+              type={"submit"}
+              className={"min-w-50px ml-2 h-10"}
+              children={"Generate"}
+            />
+          </form>
+
+          {/* Options row */}
+          <Row className={"my-1 gap-2"}>
+            <span class={"h-min"}>{"Simplify"}: </span>
+
+            <MySwitch
+              onChange={setSimplifyEnabled}
+              defaultValue={simplifyEnabled()}
+              title={"Simplify"}
+              name={"Turn on/off simplify expressions"}
+              className={"mx-1"}
+            />
+
+            <div class={"relative h-min"}>
+              <MyMenu
+                title={"Filter results"}
+                id={"filter-results"}
+                button={
+                  <Show
+                    when={hideValues().value !== "NONE"}
+                    children={
+                      <Icon
+                        path={eyeSlash}
+                        aria-label={"An eye with a slash through it"}
+                        class={`mx-1 ${hideValues().value === "TRUE" ? "text-green-500" : "text-red-500"}`}
+                      />
+                    }
+                    fallback={<Icon path={eye} aria-label={"An eye"} class={"mx-1"} />}
+                    keyed
+                  />
+                }
+                children={
+                  <For each={hideOptions}>
+                    {(option) => (
+                      <SingleMenuItem
+                        onClick={() => setHideValues(option)}
+                        option={option}
+                        currentValue={hideValues}
+                      />
+                    )}
+                  </For>
+                }
+                itemsClassName={"right-0"}
+              />
+            </div>
+
+            <div class={"relative h-min"}>
+              <MyMenu
+                title={"Sort results"}
+                id={"sort-results"}
+                button={
+                  <Icon
+                    path={funnel}
+                    aria-label={"Filter"}
+                    class={`h-6 w-6 ${
+                      sortValues().value === "TRUE_FIRST"
+                        ? "text-green-500"
+                        : sortValues().value === "FALSE_FIRST" && "text-red-500"
+                    }`}
+                  />
+                }
+                children={
+                  <For each={sortOptions}>
+                    {(option) => (
+                      <SingleMenuItem
+                        option={option}
+                        currentValue={sortValues}
+                        onClick={() => setSortValues(option)}
+                      />
+                    )}
+                  </For>
+                }
+                itemsClassName={"right-0"}
+              />
+            </div>
+
+            <MySwitch
+              title={"Hide intermediate values"}
+              onChange={setHideIntermediates}
+              defaultValue={hideIntermediates()}
+            />
+
+            <Show when={isLoaded() && error() === null} keyed>
+              <MyDialog
+                title={"Download"}
+                description={"Export current table (.xlsx)"}
+                button={
+                  <>
+                    <p class={"sr-only"}>{"Download"}</p>
+                    <Icon aria-label={"Download"} path={arrowDownTray} />
+                  </>
+                }
+                callback={_exportToExcel}
+                acceptButtonName={"Download"}
+                cancelButtonName={"Cancel"}
+                buttonClass={`float-right`}
+                buttonTitle={"Export current table"}
+                acceptButtonId={"download-accept"}
+              >
+                <p>{"Filename"}:</p>
+                <Input
+                  className={"border-rounded h-10 px-2"}
+                  id={filenameId}
+                  placeholder={"Truth Table"}
+                />
+              </MyDialog>
+            </Show>
+          </Row>
+
+          <Show when={error()} keyed>
+            <ErrorBox
+              title={error()?.title ?? "Error"}
+              error={error()?.message ?? "Something went wrong"}
+            />
+          </Show>
+
+          <Show when={isLoaded() === false} keyed>
+            <Icon
+              path={arrowPath}
+              aria-label={"Loading indicator"}
+              class={"mx-auto animate-spin"}
+            />
+          </Show>
+
+          <Show when={simplifyEnabled() && (fetchResult()?.orderOperations?.length ?? 0) > 0} keyed>
+            <ShowMeHow fetchResult={fetchResult} />
+          </Show>
+        </div>
+
+        <Show when={isLoaded() && error() === null} keyed>
+          <Show when={simplifyEnabled()} keyed>
+            <InfoBox
+              className={"mx-auto w-fit pb-1 text-center text-lg"}
+              title={"Output:"}
+              id={"expression-output"}
+            >
+              <p>{fetchResult()?.after}</p>
+            </InfoBox>
+          </Show>
+
+          <div class={"m-2 flex justify-center"}>
+            <div id={"table"} class={"h-[45rem] overflow-auto"}>
+              <TruthTable
+                header={fetchResult()?.header ?? undefined}
+                table={fetchResult()?.table?.truthMatrix}
+                id={tableId}
+              />
+            </div>
+          </div>
+        </Show>
+      </div>
+    </Layout>
+  )
+}
+
+export default TruthTablePage
+
+interface SingleMenuItem {
+  option: Option
+  currentValue?: Accessor<Option>
+  onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>
+}
+
+const SingleMenuItem: Component<SingleMenuItem> = ({ option, currentValue, onClick }) => {
+  const isSelected = () => currentValue?.().value === option.value
+  return (
+    <button class={`flex-row-center cursor-pointer last:mb-1 hover:underline`} onClick={onClick}>
+      <Icon
+        path={check}
+        aria-label={isSelected() ? "A checkmark" : "Nothing"}
+        class={`text-white ${!isSelected() && "invisible"}`}
+      />
+      {option.name}
+    </button>
+  )
+}
+
+const ErrorBox: Component<{ title: string; error: string }> = ({ title, error }) => (
+  <InfoBox className={"mx-auto w-fit text-center"} title={title} error={true}>
+    <p>{error}</p>
+  </InfoBox>
+)
+
+interface ShowMeHowProps {
+  fetchResult: Accessor<FetchResult | null>
+}
+
+const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => (
+  <MyDisclosureContainer>
+    <MyDisclosure title={"Show me how it's done"}>
+      <table class={"table"}>
+        <tbody>
+        <For each={fetchResult()?.orderOperations}>{orderOperationRow()}</For>
+        </tbody>
+      </table>
+    </MyDisclosure>
+  </MyDisclosureContainer>
+)
+
+const HowTo: Component = () => (
+  <MyDisclosureContainer>
+    <MyDisclosure title={"How to"}>
+      <p>
+        Fill in a truth expression and it will be simplified for you as much as possible. It will
+        also genereate a truth table with all possible values. You can use a single letter, word or
+        multiple words without spacing for each atomic value. If you do not want to simplify the
+        expression, simply turn off the toggle. Keywords for operators are defined below.
+        Parentheses is also allowed.
+      </p>
+      <p>
+        API docs can be found <Link to={"https://api.martials.no/simplify-truths"}>here</Link>.
+      </p>
+    </MyDisclosure>
+
+    <KeywordsDisclosure />
+  </MyDisclosureContainer>
+)
+
+const orderOperationRow = () => (operation: OrderOfOperation, index: Accessor<number>) => (
+  <tr class={"border-b border-dotted border-gray-500"}>
+    <td>{index() + 1}:</td>
+    <td class={"px-2"}>
+      {
+        <For each={diffChars(operation.before, operation.after)}>
+          {(part) => (
+            <span class={`${part.added && "bg-green-700"} ${part.removed && "bg-red-700"}`}>
+              {part.value}
+            </span>
+          )}
+        </For>
+      }
+
+      <Show when={typeof window !== "undefined" && window.outerWidth <= 640} keyed>
+        <p>
+          {"using"}: {operation.law}
+        </p>
+      </Show>
+    </td>
+    <Show when={typeof window !== "undefined" && window.outerWidth > 640} keyed>
+      <td>
+        {"using"}: {operation.law}
+      </td>
+    </Show>
+  </tr>
+)
+
+const KeywordsDisclosure: Component = () => (
+  <MyDisclosure title={"Keywords"}>
+    <table>
+      <thead>
+      <tr class={"text-left"}>
+        <th>Name</th>
+        <th class={"pr-2"}>API</th>
+        <th>Other</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td>Not:</td>
+        <td>!</td>
+        <td>NOT</td>
+      </tr>
+      <tr>
+        <td>And:</td>
+        <td>&</td>
+        <td>AND</td>
+      </tr>
+      <tr>
+        <td>Or:</td>
+        <td>|</td>
+        <td>/</td>
+        <td>OR</td>
+      </tr>
+      <tr>
+        <td class={"pr-2"}>Implication:</td>
+        <td>{"->"}</td>
+        <td class={"px-2"}>IMPLICATION</td>
+        <td>IMP</td>
+      </tr>
+      </tbody>
+    </table>
+  </MyDisclosure>
+)

src/components/simplifyTruths/SimplifyTruthsPageBody.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+
+  import Switch from "@/components/Switch.svelte"
+  import Search from "@/components/simplifyTruths/Search.svelte"
+  import { onMount } from "svelte"
+  import Button from "@/components/buttons/Button.svelte"
+  import Row from "@/components/Row.svelte"
+  import Menu from "@/components/Menu.svelte"
+  import PajamasIcon from "@/components/icons/PajamasIcon.svelte"
+
+  let useLocalhost = false
+  let inputElement: HTMLInputElement | null = null
+
+  // TODO refactor getter and setters
+
+  /**
+   * Updates the state of the current expression to the new search with all whitespace removed.
+   * If the element is not found, reset.
+   */
+  function onFormSubmit(e: Event): void {
+    e.preventDefault() // Stops the page from reloading on:click
+    const exp = inputElement?.value // TODO test
+
+    if (exp) {
+      setSearchParams({
+        exp,
+        simplify: simplifyEnabled(),
+        hide: hideValues().value,
+        sort: sortValues().value,
+        hideIntermediate: hideIntermediates()
+      })
+
+      getFetchResult(exp)
+    }
+  }
+
+  function getFetchResult(exp: string | null): void {
+    setFetchResult(null)
+
+    if (exp && exp !== "") {
+      exp = replaceOperators(exp)
+      setError(null)
+      setIsLoaded(false)
+
+      // TODO refactor
+      fetch(`${fetchUrls[useLocalhost() ? 0 : 1]}${encodeURIComponent(exp)}?
+simplify=${simplifyEnabled()}&hide=${hideValues().value}&sort=${sortValues().value}&caseSensitive=false&
+hideIntermediate=${hideIntermediates()}`)
+        .then((res) => res.json())
+        .then((res) => {
+          if (res.status !== "OK" && !res.ok) {
+            return setError({ title: "Input error", message: res.message })
+          }
+          return setFetchResult(res)
+        })
+        .catch((err) => setError({ title: "Fetch error", message: err.toString() }))
+        .finally(() => setIsLoaded(true))
+    }
+  }
+
+  const fetchUrls = [
+    "http://localhost:8080/simplify/table/",
+    "https://api.martials.no/simplify-truths/simplify/table/"
+  ]
+
+  const [searchParams, setSearchParams] = useSearchParams()
+  let inputElement: HTMLInputElement | undefined = undefined
+
+  let simplifyDefault = searchParams.simplify === undefined || searchParams.simplify === "true",
+    inputContent = !!searchParams.exp,
+    hideIntermediate = searchParams.hideIntermediate === "true"
+
+  const [simplifyEnabled, setSimplifyEnabled] = createSignal(simplifyDefault)
+  const [fetchResult, setFetchResult] = createSignal<FetchResult | null>(null)
+
+  const hideOptions: Option[] = [
+    { name: "Show all result", value: "NONE" },
+    { name: "Hide true results", value: "TRUE" },
+    { name: "Hide false results", value: "FALSE" }
+  ]
+
+  const [hideValues, setHideValues] = createSignal(hideOptions[0])
+
+  const sortOptions: Option[] = [
+    { name: "Sort by default", value: "DEFAULT" },
+    { name: "Sort by true first", value: "TRUE_FIRST" },
+    { name: "Sort by false first", value: "FALSE_FIRST" }
+  ]
+
+  const [sortValues, setSortValues] = createSignal(sortOptions[0])
+  const [hideIntermediates, setHideIntermediates] = createSignal(hideIntermediate)
+  const [isLoaded, setIsLoaded] = createSignal<boolean | null>(null)
+  const [error, setError] = createSignal<{ title: string; message: string } | null>(null)
+  const [useLocalhost, setUseLocalhost] = createSignal(false)
+
+  onMount((): void => {
+    if (searchParams.exp) {
+      const exp = searchParams.exp
+      if (exp && inputElement) {
+        inputElement.value = exp
+      }
+      const hide = searchParams.hide
+      if (hide) {
+        setHideValues(hideOptions.find((o) => o.value === hide) ?? hideOptions[0])
+      }
+      const sort = searchParams.sort
+      if (sort) {
+        setSortValues(sortOptions.find((o) => o.value === sort) ?? sortOptions[0])
+      }
+
+      getFetchResult(exp)
+    }
+
+    // Focuses searchbar on load
+    if (!isTouch()) {
+      inputElement?.focus()
+    }
+  })
+
+  const tableId = "truth-table"
+  const filenameId = "excel-filename"
+
+  function _exportToExcel(): void {
+    const value = getElementById<HTMLInputElement>(filenameId)?.value
+    exportToExcel({
+      name: value !== "" ? value : undefined,
+      tableId
+    })
+  }
+
+</script>
+
+{#if import.meta.env.DEV}
+  (DEV) Use localhost:
+  <Switch title={"Use localhost"} defaultValue={false} onChange={(state) => useLocalhost = state} />
+{/if}
+
+
+<div class={"mx-auto max-w-2xl"}>
+  <slot />
+  <form class={"flex-row-center"} onSubmit={onFormSubmit} autocomplete={"off"}>
+    <Search ref={inputElement} typingDefault={inputContent} />
+
+    <Button
+      id={"truth-input-button"}
+      title={"Generate (Enter)"}
+      type={"submit"}
+      className={"min-w-50px ml-2 h-10"}
+    >
+      Generate
+    </Button>
+  </form>
+
+  <!-- Options row -->
+  <Row class={"my-1 gap-2"}>
+    <span class={"h-min"}>{"Simplify"}: </span>
+
+    <Switch
+      onChange={setSimplifyEnabled}
+      defaultValue={simplifyEnabled()}
+      title={"Simplify"}
+      name={"Turn on/off simplify expressions"}
+      className={"mx-1"}
+    />
+
+    <div class={"relative h-min"}>
+      <Menu
+        title={"Filter results"}
+        id={"filter-results"}
+        button={
+                  <Show
+                    when={hideValues().value !== "NONE"}
+                    children={
+                      <Icon
+                        path={eyeSlash}
+                        aria-label={"An eye with a slash through it"}
+                        class={`mx-1 ${hideValues().value === "TRUE" ? "text-green-500" : "text-red-500"}`}
+                      />
+                    }
+                    fallback={<Icon path={eye} aria-label={"An eye"} class={"mx-1"} />}
+                    keyed
+                  />
+                }
+        children={
+                  <For each={hideOptions}>
+                    {(option) => (
+                      <SingleMenuItem
+                        onClick={() => setHideValues(option)}
+                        option={option}
+                        currentValue={hideValues}
+                      />
+                    )}
+                  </For>
+                }
+        itemsClassName={"right-0"}
+      />
+    </div>
+
+    <div class={"relative h-min"}>
+      <Menu
+        title={"Sort results"}
+        id={"sort-results"}
+        button={
+                  <PajamasIcon
+                    name="TODO"
+                    aria-label={"Filter"}
+                    class={`h-6 w-6 ${
+                      sortValues().value === "TRUE_FIRST"
+                        ? "text-green-500"
+                        : sortValues().value === "FALSE_FIRST" && "text-red-500"
+                    }`}
+                  />
+                }
+        children={
+                  <For each={sortOptions}>
+                    {(option) => (
+                      <SingleMenuItem
+                        option={option}
+                        currentValue={sortValues}
+                        onClick={() => setSortValues(option)}
+                      />
+                    )}
+                  </For>
+                }
+        itemsClassName={"right-0"}
+      />
+    </div>
+
+    <Switch
+      title={"Hide intermediate values"}
+      onChange={setHideIntermediates}
+      defaultValue={hideIntermediates()}
+    />
+
+    <Show when={isLoaded() && error() === null} keyed>
+      <MyDialog
+        title={"Download"}
+        description={"Export current table (.xlsx)"}
+        button={
+                  <>
+                    <p class={"sr-only"}>{"Download"}</p>
+                    <Icon aria-label={"Download"} path={arrowDownTray} />
+                  </>
+                }
+        callback={_exportToExcel}
+        acceptButtonName={"Download"}
+        cancelButtonName={"Cancel"}
+        buttonClass={`float-right`}
+        buttonTitle={"Export current table"}
+        acceptButtonId={"download-accept"}
+      >
+        <p>{"Filename"}:</p>
+        <Input
+          className={"border-rounded h-10 px-2"}
+          id={filenameId}
+          placeholder={"Truth Table"}
+        />
+      </MyDialog>
+    </Show>
+  </Row>
+
+  <Show when={error()} keyed>
+    <ErrorBox
+      title={error()?.title ?? "Error"}
+      error={error()?.message ?? "Something went wrong"}
+    />
+  </Show>
+
+  <Show when={isLoaded() === false} keyed>
+    <Icon
+      path={arrowPath}
+      aria-label={"Loading indicator"}
+      class={"mx-auto animate-spin"}
+    />
+  </Show>
+
+  <Show when={simplifyEnabled() && (fetchResult()?.orderOperations?.length ?? 0) > 0} keyed>
+    <ShowMeHow fetchResult={fetchResult} />
+  </Show>
+</div>
+
+{#if isLoaded() && error() === null}
+  {#if simplifyEnabled()}
+    <InfoBox
+      className={"mx-auto w-fit pb-1 text-center text-lg"}
+      title={"Output:"}
+      id={"expression-output"}
+    >
+      <p>{fetchResult()?.after}</p>
+    </InfoBox>
+  {/if}
+
+  <div class={"m-2 flex justify-center"}>
+    <div id={"table"} class={"h-[45rem] overflow-auto"}>
+      <TruthTable
+        header={fetchResult()?.header ?? undefined}
+        table={fetchResult()?.table?.truthMatrix}
+        id={tableId}
+      />
+    </div>
+  </div>
+{/if}

src/components/simplifyTruths/SingleMenuItem.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { SimplifyTruthsOption } from "@/types/types.ts"
+
+  export let option: SimplifyTruthsOption
+  export let currentValue: () => SimplifyTruthsOption
+  export let onClick: () => void
+
+  const isSelected = () => option === currentValue()
+
+  // TODO bind on:click
+</script>
+
+<button class={`flex-row-center cursor-pointer last:mb-1 hover:underline`} on:click={onClick}>
+  <Icon
+    path={check}
+    aria-label={isSelected() ? "A checkmark" : "Nothing"}
+    class={`text-white ${!isSelected() && "invisible"}`}
+  />
+  {option.name}
+</button>

src/components/simplifyTruths/TruthTable.astro

@@ -0,0 +1,39 @@
+---
+import type { Table } from "@/types/types"
+import type { ComponentProps } from "@/types/props"
+
+interface Props extends ComponentProps {
+  table?: Table
+  header?: string[]
+}
+const { table, header, class: clazz, ...props } = Astro.props
+---
+
+<table class={`z-10 table border-collapse border-2 border-gray-500 ${clazz}`} {...props}>
+  <thead>
+  <tr>
+    {header?.map(exp => (
+      <th
+        scope={"col"}
+        class={
+          `sticky top-0 bg-default-bg text-center outline
+                             outline-2 outline-offset-[-1px] outline-gray-500 [position:-webkit-sticky;]` /*TODO sticky header at the top of the screen */
+        }
+      >
+        <p class={"w-max px-2"}>{exp}</p>
+      </th>
+    ))}
+  </tr>
+  </thead>
+  <tbody>
+  {table?.map(row => (
+    <tr class={"hover:text-black"}>
+      {row.map(value => (
+        <td class={`border border-gray-500 text-center last:underline ${value ? "bg-green-700" : "bg-red-700"}`}>
+          <p>{value ? "T" : "F"}</p>
+        </td>
+      ))}
+    </tr>
+  ))}
+  </tbody>
+</table>

src/components/simplifyTruths/output/Disclosure.astro

@@ -0,0 +1,4 @@
+---
+
+---
+<div>TODO implement</div>

src/components/simplifyTruths/output/DisclosureContainer.astro

@@ -0,0 +1,6 @@
+---
+
+---
+<div class={`border-rounded mb-2 flex flex-col gap-1 bg-cyan-900 p-2 dark:border-gray-800 ${Astro.props.className}`}>
+  <slot />
+</div>

src/components/simplifyTruths/output/ErrorBox.astro

@@ -0,0 +1,12 @@
+---
+import InfoBox from "./InfoBox.astro"
+interface Props {
+  title: string
+  error: string
+}
+const { title, error } = Astro.props
+---
+
+<InfoBox class={"mx-auto w-fit text-center"} title={title} error={true}>
+  <p>{error}</p>
+</InfoBox>

src/components/simplifyTruths/output/InfoBox.astro

@@ -0,0 +1,16 @@
+---
+import type { ComponentProps } from "@/types/props"
+interface Props extends ComponentProps {
+  title: string
+  error?: boolean
+}
+
+const { title, error = false, class: clazz, ...props } = Astro.props
+---
+
+<div class={`border-rounded ${error ? "border-red-500" : "border-gray-500"} ${clazz}`} {...props}>
+  <p class={`border-b px-2 ${error ? "border-red-500" : "border-gray-500"}`}>{title}</p>
+  <div class="mx-2">
+    <slot />
+  </div>
+</div>

src/constants.ts

@@ -0,0 +1,11 @@
+export const DOMAIN = "martials.no"
+export const LINKED_IN_URL = "https://www.linkedin.com/in/martin-b-2a69391a3"
+export const GIT_BASE_URL = `https://git.${DOMAIN}`
+export const GIT_PROFILE_URL = `${GIT_BASE_URL}/martials`
+export const GITHUB_PROFILE_URL = "https://github.com/emberal"
+export const MASTODON_URL = "https://snabelen.no/@Martials"
+export const PIXELFED_URL = "https://pixelfed.social/i/web/profile/261454857934868480"
+export const STEAM_URL = "https://steamcommunity.com/id/martials/"
+export const THIS_GIT_URL = `${GIT_BASE_URL}/martials/martials.no`
+export const TRAKT_URL = "https://trakt.tv/users/martials"
+export const STATUS_URL = `https://status.${DOMAIN}/status/home`

src/content/config.ts

@@ -16,8 +16,8 @@ const projectCollection = defineCollection({
     })
 })
 
-const usesCollection = defineCollection({
-  loader: glob({ pattern: "**\/*.yaml", base: "./src/content/uses" }),
+const hardwareCollection = defineCollection({
+  loader: glob({ pattern: "**\/*.yaml", base: "./src/content/hardware" }),
   schema: z.object({
     title: z.string(),
     accessories: z.optional(z.array(z.string())),
@@ -27,5 +27,5 @@ const usesCollection = defineCollection({
 
 export const collections = {
   projects: projectCollection,
-  uses: usesCollection
+  hardware: hardwareCollection
 }

src/content/hardware/desktop.yaml

@@ -2,8 +2,8 @@ title: Desktop
 accessories:
   - Gaming chair | Arozzi Mezzo V2 Gaming chair Fabric Black/Red # https://www.komplett.no/product/1079732?noredirect=true
   - Headset | Logitech PRO X LIGHTSPEED Wireless Gaming Headset # https://www.komplett.no/product/1162749?noredirect=true
-  - Keyboard | Keychron K8 Pro QMK/VIA RGB Gateron Red # https://www.komplett.no/product/1303473/gaming/gaming-utstyr/gamingtastatur/keychron-k8-pro-qmkvia-rgb-gateron-red-traadloest-gamingtastatur-sort
-  - Monitor 1 | Philips 34" 34M2C6500/00 # https://www.komplett.no/product/1307753/gaming/gaming-utstyr/gamingskjermer/philips-34-gamingskjerm-34m2c650000
+  - Keyboard | Logitech G710
+  - Monitor 1 | AOC 27" LED FreeSync G2790PX # https://www.komplett.no/product/975642?noredirect=true
   - Monitor 2 | Asus 28" 4K LED PB287Q # https://www.komplett.no/product/815114?noredirect=true
   - Mouse | Logitech G502 HERO Gaming Mouse
   - Mousepad | Svive Styx ESGR Gaming Mousepad XXL # https://www.komplett.no/product/985884?noredirect=true

src/content/hardware/homeServer.yaml

@@ -1,3 +1,3 @@
-title: Homelab
+title: Home Server
 hardware:
   - b # Graphics cards, CPUs, etc.

src/links.ts

@@ -20,8 +20,8 @@ const Links: Link[] = [
     to: "/links"
   },
   {
-    label: m.uses,
-    to: "/uses"
+    label: m.hardware,
+    to: "/hardware"
   },
   {
     label: m.contactMe,

src/pages/404.astro

@@ -1,6 +1,5 @@
 ---
 import Layout from "../layouts/Layout.astro"
-import "@/styles/global.css"
 ---
 
 <Layout title="404">

src/pages/contact.astro

@@ -1,9 +1,9 @@
 ---
-import ContactMeForm from "@/components/ContactMeForm.astro"
+import ContactMePage from "@/components/contactMe/ContactMePage.astro"
 import Layout from "@/layouts/Layout.astro"
 import "@/styles/global.css"
 ---
 
 <Layout title="Kontakt meg">
-  <ContactMeForm />
+  <ContactMePage />
 </Layout>

src/pages/en/contact.astro

@@ -1,9 +1,9 @@
 ---
-import ContactMeForm from "@/components/ContactMeForm.astro"
+import ContactMePage from "@/components/contactMe/ContactMePage.astro"
 import Layout from "@/layouts/Layout.astro"
 import "@/styles/global.css"
 ---
 
 <Layout title="Kontakt meg">
-  <ContactMeForm />
+  <ContactMePage />
 </Layout>

src/pages/en/hardware.astro

@@ -1,12 +1,12 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import UsesPage from "@/components/UsesPage.svelte"
+import HardwarePage from "@/components/HardwarePage.svelte"
 import "@/styles/global.css"
 import { getCollection } from "astro:content"
 
-const uses = await getCollection("uses")
+const hardware = await getCollection("hardware")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <UsesPage server:defer uses={uses} />
+  <HardwarePage server:defer hardware={hardware} />
 </Layout>

src/pages/en/index.astro

@@ -1,7 +1,6 @@
 ---
 import OnePager from "../../components/Greeting.astro"
 import Layout from "../../layouts/Layout.astro"
-import "@/styles/global.css"
 ---
 
 <Layout title="Welcome">

src/pages/en/links.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from "@/layouts/Layout.astro"
 import LinksPage from "@/components/myLinks/LinksPage.astro"
-import "@/styles/global.css"
 ---
 <Layout title="My links">
   <LinksPage />

src/pages/en/projects/[project].astro

@@ -1,7 +1,6 @@
 ---
 import ProjectPage from "@/components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
-import "@/styles/global.css"
 
 // Prerender the page as static HTML during build
 export const prerender = true

src/pages/en/projects/index.astro

@@ -2,7 +2,6 @@
 import { getCollection } from "astro:content"
 import Layout from "@/layouts/Layout.astro"
 import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
-import "@/styles/global.css"
 
 const projects = await getCollection("projects")
 ---

src/pages/en/simplify-truths.astro

@@ -0,0 +1,8 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import SimplifyTruthsPage from "@/components/simplifyTruths/SimplifyTruthsPage.astro"
+---
+
+<Layout title="Simplify truths">
+  <SimplifyTruthsPage />
+</Layout>

src/pages/hardware.astro

@@ -1,12 +1,12 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import UsesPage from "@/components/UsesPage.svelte"
+import HardwarePage from "@/components/HardwarePage.svelte"
 import "@/styles/global.css"
 import { getCollection } from "astro:content"
 
-const uses = await getCollection("uses")
+const hardware = await getCollection("hardware")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <UsesPage client:load uses={uses} />
+  <HardwarePage server:defer hardware={hardware} />
 </Layout>

src/pages/index.astro

@@ -1,9 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro"
 import Greeting from "../components/Greeting.astro"
-
-// https://slashpages.net/
-
 ---
 
 <Layout title="Velkommen">

src/pages/links.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from "@/layouts/Layout.astro"
 import LinksPage from "@/components/myLinks/LinksPage.astro"
-import "@/styles/global.css"
 ---
 <Layout title="Mine lenker">
   <LinksPage />

src/pages/projects/[project].astro

@@ -1,7 +1,6 @@
 ---
 import ProjectPage from "@/components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
-import "@/styles/global.css"
 
 // Prerender the page as static HTML during build
 export const prerender = true

src/pages/projects/index.astro

@@ -2,7 +2,6 @@
 import { getCollection } from "astro:content"
 import Layout from "@/layouts/Layout.astro"
 import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
-import "@/styles/global.css"
 
 const projects = await getCollection("projects")
 ---

src/pages/simplify-truths.astro

@@ -0,0 +1,8 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import SimplifyTruthsPage from "@/components/simplifyTruths/SimplifyTruthsPage.astro"
+---
+
+<Layout title="Forenkle sannhetsverdier">
+  <SimplifyTruthsPage />
+</Layout>

src/styles/global.css

@@ -1,6 +1,6 @@
-@import "tailwindcss";
-@plugin "@tailwindcss/typography";
-@plugin "daisyui";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 @layer utilities {
     .debug {

src/types/props.ts

@@ -1,6 +1,8 @@
 export interface ComponentProps {
   class?: string;
+  style?: string;
   title?: string;
+  id?: string;
 }
 
 export interface LinkProps extends ComponentProps {

src/types/types.ts

@@ -3,3 +3,40 @@ import type { CollectionEntry } from "astro:content"
 export type AbsolutePathname = `/${string}`
 
 export type Project = CollectionEntry<"projects">
+
+export type Operator = "AND" | "OR" | "NOT" | "IMPLICATION"
+
+export type Table = boolean[][]
+
+export type OrderOfOperation = {
+  before: string
+  after: string
+  law: string
+}
+
+export type Expression = {
+  leading: string
+  left: Expression | null
+  operator: Operator | null
+  right: Expression | null
+  trailing: string
+  atomic: string | null
+}
+
+export type FetchResult = {
+  status: string
+  version: string | null
+  before: string
+  after: string
+  orderOperations: OrderOfOperation[] | null
+  expression: Expression | null
+  header: string[] | null
+  table: {
+    truthMatrix: Table
+  } | null
+}
+
+export type SimplifyTruthsOption = {
+  name: string
+  value: "NONE" | "TRUE" | "FALSE" | "DEFAULT" | "TRUE_FIRST" | "FALSE_FIRST"
+}

src/utils/linking.ts

@@ -12,14 +12,14 @@ export type NavLink =
   | "/projects"
   | `/projects/${Project["id"]}`
   | "/links"
-  | "/uses"
+  | "/hardware"
 
 const paths: Set<NavLink> = new Set([
   "/",
   "/contact",
   "/projects",
   "/links",
-  "/uses"
+  "/hardware"
 ])
 
 /**
@@ -58,8 +58,9 @@ export function localizePathname(
 }
 
 export function resolvePathname(pathname: string): AbsolutePathname {
-  if (pathname.startsWith("/en")) {
-    return pathname.slice(3) as AbsolutePathname
+  const enPattern = "/en"
+  if (pathname.startsWith(enPattern)) {
+    return pathname.slice(enPattern.length) as AbsolutePathname
   }
   return pathname as AbsolutePathname
 }

tailwind.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import("tailwindcss").Config} */
+export default {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {}
+  },
+  plugins: [require("@tailwindcss/typography"), require("daisyui")]
+}