Use House for MD comments

Gemfile

@@ -19,6 +19,9 @@ gem "thruster", require: false
 # Features
 gem "bcrypt", "~> 3.1.7"
 gem "rqrcode"
+gem "redcarpet", "~> 3.6"
+gem "rouge", "~> 4.5"
+gem "jbuilder"
 
 # Telemetry
 gem "sentry-ruby"

Gemfile.lock

@@ -126,6 +126,9 @@ GEM
     irb (1.14.1)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
+    jbuilder (2.13.0)
+      actionview (>= 5.0.0)
+      activesupport (>= 5.0.0)
     json (2.7.2)
     language_server-protocol (3.17.0.3)
     logger (1.6.1)
@@ -223,10 +226,12 @@ GEM
     rake (13.2.1)
     rdoc (6.7.0)
       psych (>= 4.0.0)
+    redcarpet (3.6.0)
     regexp_parser (2.9.2)
     reline (0.5.10)
       io-console (~> 0.5)
     rexml (3.3.8)
+    rouge (4.5.1)
     rqrcode (2.2.0)
       chunky_png (~> 1.0)
       rqrcode_core (~> 1.0)
@@ -335,9 +340,12 @@ DEPENDENCIES
   debug
   hotwire_combobox!
   importmap-rails
+  jbuilder
   propshaft
   puma (>= 5.0)
   rails (>= 8.0.0.rc1)
+  redcarpet (~> 3.6)
+  rouge (~> 4.5)
   rqrcode
   rubocop-rails-omakase
   selenium-webdriver

app/assets/stylesheets/house.css

@@ -0,0 +1,310 @@
+/* Colors */
+:root {
+  /* Named color values */
+  --house-md-black: 0% 0 0;
+  --house-md-white: 100% 0 0;
+  --house-md-gray-light: 96% 0.005 96;
+  --house-md-gray: 92% 0.005 96;
+  --house-md-gray-dark: 75% 0.005 96;
+  --house-md-blue: 54% 0.23 255;
+  --house-md-blue-light: 95% 0.03 255;
+  --house-md-blue-dark: 80% 0.08 255;
+  --house-md-orange: 70% 0.2 44;
+  --house-md-red: 51% 0.2 31;
+  --house-md-green: 65.59% 0.234 142.49;
+  --house-md-always-black: 0% 0 0;
+
+  /* Abstractions */
+  --house-color-negative: oklch(var(--house-md-red));
+  --house-color-positive: oklch(var(--house-md-green));
+  --house-color-bg: oklch(var(--house-md-white));
+  --house-color-ink: oklch(var(--house-md-black));
+  --house-color-ink-reversed: oklch(var(--house-md-white));
+  --house-color-link: oklch(var(--house-md-blue));
+  --house-color-subtle-light: oklch(var(--house-md-gray-light));
+  --house-color-subtle: oklch(var(--house-md-gray));
+  --house-color-subtle-dark: oklch(var(--house-md-gray-dark));
+  --house-color-selected: oklch(var(--house-md-blue-light));
+  --house-color-selected-dark: oklch(var(--house-md-blue-dark));
+  --house-color-alert: oklch(var(--house-md-orange));
+  --house-color-always-black: oklch(var(--house-md-always-black));
+
+  /* Redefine named color values for dark mode */
+  @media (prefers-color-scheme: dark) {
+    --house-md-black: 100% 0 0;
+    --house-md-white: 0% 0 0;
+    --house-md-gray: 25.2% 0 0;
+    --house-md-gray-dark: 30.12% 0 0;
+    --house-md-gray-darker: 44.95% 0 0;
+    --house-md-blue: 72.25% 0.16 248;
+    --house-md-blue-light: 28.11% 0.053 248;
+    --house-md-blue-dark: 42.25% 0.07 248;
+    --house-md-red: 73.8% 0.184 29.18;
+    --house-md-green: 75% 0.21 141.89;
+  }
+}
+
+/* Base styles */
+:is(house-md-editor, house-md-toolbar) {
+}
+
+a:not([class]) {
+  color: var(--house-color-link);
+  text-decoration-skip-ink: auto;
+}
+
+:is(a, button, input, textarea) {
+  --outline-size: max(2px, 0.08em);
+  --outline-style: solid;
+  --house-outline-color: currentColor;
+
+  caret-color: var(--house-color-link);
+
+  &:focus {
+    outline: var(--outline-size) var(--outline-style) var(--house-outline-color);
+    outline-offset: var(--outline-offset, var(--outline-size));
+  }
+
+  &:focus-visible {
+    outline: var(--outline-size) var(--outline-style) var(--house-outline-color);
+    outline-offset: var(--outline-offset, var(--outline-size));
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  ::selection {
+    background-color: var(--house-color-selected);
+  }
+}
+
+/* Editor */
+house-md {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  &:invalid {
+    border: var(--house-color-negative) 2px solid;
+  }
+}
+
+/* Toolbar */
+house-md-toolbar {
+  background-color: inherit;
+  border: 1px solid currentColor;
+  border-radius: 0.5em;
+  color: currentColor;
+  display: inline-flex;
+  font-size: inherit;
+  padding: 0.2em;
+
+  button, label {
+    aspect-ratio: 4/3;
+    appearance: none;
+    background-color: transparent;
+    block-size: 2em;
+    border: none;
+    border-radius: 0.5em;
+    color: currentColor;
+    cursor: pointer;
+    display: grid;
+    font-size: inherit;
+    inline-size: auto;
+    place-items: center;
+    transition: background-color 300ms ease;
+
+    svg {
+      -webkit-touch-callout: none;
+      block-size: 0.9em;
+      fill: currentColor;
+      grid-area: 1/1;
+      inline-size: auto;
+      user-select: none;
+    }
+
+    &:is(:focus, :hover) {
+      background-color: var(--house-color-subtle);
+    }
+
+    &:is(:active) {
+      background-color: var(--house-color-selected);
+    }
+  }
+}
+
+/* Markdown Content */
+.house-md-content {
+  caret-color: var(--color-link);
+  flex-grow: 1;
+  font-family: var(--font-sans);
+  min-block-size: 50dvh;
+  text-align: left;
+  white-space: break-spaces;
+  padding: 1rem;
+
+  &.house-md-content-empty::before {
+    content: attr(placeholder);
+    color: var(--house-color-ink);
+    opacity: 0.5;
+    pointer-events: none;
+    display: block;
+  }
+
+  &:active, &:focus{
+    border:none;
+    outline:none;
+  }
+
+  :is(.h1, .h2, .h3, .h4, .h5, .h6) {
+    display: inline-inblock;
+    font-weight: 600;
+    margin-block: 0;
+  }
+
+  .h1 {
+    font-size: 2em;
+  }
+
+  .h2 {
+    font-size: 1.5em;
+  }
+
+  .h3 {
+    font-size: 1.17em;
+  }
+
+  .h4 {
+    font-size: 1em;
+  }
+
+  .h5 {
+    font-size: 0.83em;
+  }
+
+  .h6 {
+    font-size: 0.67em;
+  }
+
+  .link, .img {
+    color: var(--house-color-link);
+    text-decoration: underline;
+  }
+
+  .hr {
+    border-color: var(--color-house-subtle-dark);
+    border-style: solid none none;
+    margin: 2lh auto;
+  }
+
+  .code {
+    font-family: ui-monospace, monospace;
+    font-weight: 600;
+    font-size: 0.85em;
+  }
+
+  .quote {
+    font-style: italic;
+    margin: 0 3ch;
+  }
+
+  .quote, .ol-li, .ul-li {
+    padding-left: 1em;
+  }
+
+  .comment {
+    color: var(--color-house-positive);
+  }
+
+  mark {
+    background-color: rgba(241, 241, 26, 0.678);
+  }
+}
+
+/* Uploads */
+house-md-upload {
+  border-radius: 0.5em;
+  margin-block: 0.5ex;
+  position: relative;
+
+  &[status="failed"] {
+    background-color: var(--house-color-negative);
+    color: var(--house-color-ink-reversed);
+    font-weight: bold;
+    padding: 0.5em;
+  }
+}
+
+.md-close {
+  appearance: none;
+  display: none;
+  inline-size: 1em;
+  block-size: 1em;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  position: absolute;
+  inset: 0.5em 0.5em auto auto;
+  cursor: pointer;
+
+  house-md-upload[status="failed"] & {
+    color: var(--house-color-ink-reversed);
+    display: inline-block;
+  }
+
+  &::before {
+    content: '×';
+    color: var(--house-color-ink-reversed);
+    font-size: 24px;
+    font-weight: bold;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.md-file {
+  font-weight: normal;
+
+  house-md-upload[status="complete"] & {
+    color: var(--house-color-positive);
+  }
+}
+
+.md-progress-bar {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--house-color-subtle);
+  border-radius: 0.5em;
+  block-size: 1ex;
+  display: block;
+  inline-size: 100%;
+  line-height: inherit;
+  margin: 0;
+
+  house-md-upload[status="failed"] & ,
+  house-md-upload[status="complete"] &{
+    display: none;
+  }
+
+  &::-webkit-progress-bar {
+    border-radius: 0.5em;
+    background-color: var(--house-color-subtle);
+  }
+
+  &::-webkit-progress-inner-element {
+    border-radius: 0.5em;
+  }
+
+  &::-webkit-progress-value {
+    border-radius: 0.5em;
+    background-color: var(--house-color-positive);
+  }
+
+  &::-moz-progress-bar {
+    border-radius: 0.5em;
+    background-color: var(--house-color-positive);
+  }
+}