Add BCP47 language picker in frontmatter

frontend/components/FrontmatterInput.js

@@ -3,6 +3,7 @@ import { has_ctrl_or_cmd_pressed } from "../common/KeyboardShortcuts.js"
 import _ from "../imports/lodash.js"
 
 import "https://cdn.jsdelivr.net/gh/fonsp/[email protected]/lib/rebel-tag-input.mjs"
+import "https://esm.sh/[email protected]?pin=v134&target=es2020"
 
 //@ts-ignore
 import immer from "../imports/immer.js"
@@ -179,7 +180,7 @@ const clean_data = (obj) => {
  return _.isEmpty(a) ? null : a
 }
 
-const special_field_names = ["tags", "date", "license", "url", "color"]
+const special_field_names = ["tags", "date", "language", "license", "url", "color"]
 
 const field_type = (name) => {
  for (const t of special_field_names) {
@@ -195,8 +196,12 @@ const Input = ({ value, on_value, type, id }) => {
 
  useLayoutEffect(() => {
  if (!input_ref.current) return
- input_ref.current.value = value
- }, [input_ref.current, value])
+ if (type === "language") {
+ input_ref.current.setAttribute("value", value)
+ } else {
+ input_ref.current.value = value
+ }
+ }, [input_ref.current, value, type])
 
  useLayoutEffect(() => {
  if (!input_ref.current) return
@@ -205,18 +210,21 @@ const Input = ({ value, on_value, type, id }) => {
  on_value(input_ref.current.value)
  }
 
- input_ref.current.addEventListener("input", listener)
+ let event_name = type === "language" ? "change" : "input"
+ input_ref.current.addEventListener(event_name, listener)
  return () => {
- input_ref.current?.removeEventListener("input", listener)
+ input_ref.current?.removeEventListener(event_name, listener)
  }
- }, [input_ref.current])
+ }, [input_ref.current, type])
 
  const placeholder = type === "url" ? "https://..." : undefined
 
  return type === "tags"
  ? html`<rbl-tag-input id=${id} ref=${input_ref} />`
  : type === "license"
  ? LicenseInput({ ref: input_ref, id })
+ : type === "language"
+ ? LanguageInput({ ref: input_ref, id })
  : html`<input type=${type} id=${id} ref=${input_ref} placeholder=${placeholder} />`
 }
 
@@ -236,3 +244,7 @@ const LicenseInput = ({ ref, id }) => {
  <datalist id="oss-licenses">${licenses.map((name) => html`<option>${name}</option>`)}</datalist>
  `
 }
+
+const LanguageInput = ({ ref, id }) => {
+ return html`<bcp47-picker ref=${ref} id=${id}></bcp47-picker>`
+}

frontend/editor.css

@@ -1,4 +1,6 @@
 @import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/dialog-polyfill.css");
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/bcp47-picker.css");
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css");
 
 /* @import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,500,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext"); */
 @import url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/400.css");
@@ -25,6 +27,52 @@
 
 @import url("./featured-card.css");
 
+.bootstrap .input-group {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: stretch;
+ width: 100%;
+}
+
+.bootstrap .list-group {
+ display: flex;
+ flex-direction: column;
+ padding-left: 0;
+ margin-bottom: 0;
+ border-radius: 0.25rem;
+}
+.bootstrap .list-group-item.active {
+ z-index: 2;
+ color: #fff;
+ background-color: #0d6efd;
+ border-color: #0d6efd;
+}
+
+.bootstrap .gap-2 {
+ gap: 0.5rem !important;
+}
+.bootstrap .d-flex {
+ display: flex !important;
+}
+.bootstrap .form-control {
+ display: block;
+ width: 100%;
+ padding: 0.375rem 0.75rem;
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5;
+ color: #212529;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid #ced4da;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border-radius: 0.25rem;
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
 /* VARIABLES */
 
 :root {