commiting changes working on content components

.eleventy.cjs

@@ -22,8 +22,6 @@ module.exports = function(config) {
   config.addPassthroughCopy({
     'src/assets': '/',
     'src/admin': 'admin',
-    "./node_modules/@11ty/is-land/is-land.js": "js/is-land.js",
-    "./node_modules/@11ty/is-land/is-land-autoinit.js": "js/is-land-autoinit.js"
   })
 
   config.setServerPassthroughCopyBehavior("passthrough")

package-lock.json

@@ -11,9 +11,7 @@
       "dependencies": {
         "@11ty/eleventy": "^2.0.1",
         "@11ty/eleventy-plugin-webc": "^0.11.1",
-        "@11ty/is-land": "^4.0.0",
         "eslint": "^8.54.0",
-        "lit": "^3.1.0",
         "markdown-it": "^13.0.2",
         "markdown-it-footnote": "^4.0.0"
       }
@@ -152,15 +150,6 @@
         "url": "https://opencollective.com/11ty"
       }
     },
-    "node_modules/@11ty/is-land": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@11ty/is-land/-/is-land-4.0.0.tgz",
-      "integrity": "sha512-RxbjF2+FzSu3rerHrWLRsvsPX2YM47RwXpdWCCzLhwRSsz5sJe9TnK7mphEld1gZnp2GeD5ByvhqjIc4CqidsQ==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
     "node_modules/@11ty/lodash-custom": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
@@ -358,19 +347,6 @@
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
       "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
     },
-    "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
-      "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g=="
-    },
-    "node_modules/@lit/reactive-element": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.2.tgz",
-      "integrity": "sha512-SVOwLAWUQg3Ji1egtOt1UiFe4zdDpnWHyc5qctSceJ5XIu0Uc76YmGpIjZgx9YJ0XtdW0Jm507sDvjOu+HnB8w==",
-      "dependencies": {
-        "@lit-labs/ssr-dom-shim": "^1.1.2"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -446,11 +422,6 @@
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
       "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
     },
-    "node_modules/@types/trusted-types": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
-    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -1920,34 +1891,6 @@
       "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
       "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g=="
     },
-    "node_modules/lit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.0.tgz",
-      "integrity": "sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==",
-      "dependencies": {
-        "@lit/reactive-element": "^2.0.0",
-        "lit-element": "^4.0.0",
-        "lit-html": "^3.1.0"
-      }
-    },
-    "node_modules/lit-element": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.2.tgz",
-      "integrity": "sha512-/W6WQZUa5VEXwC7H9tbtDMdSs9aWil3Ou8hU6z2cOKWbsm/tXPAcsoaHVEtrDo0zcOIE5GF6QgU55tlGL2Nihg==",
-      "dependencies": {
-        "@lit-labs/ssr-dom-shim": "^1.1.2",
-        "@lit/reactive-element": "^2.0.0",
-        "lit-html": "^3.1.0"
-      }
-    },
-    "node_modules/lit-html": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.0.tgz",
-      "integrity": "sha512-FwAjq3iNsaO6SOZXEIpeROlJLUlrbyMkn4iuv4f4u1H40Jw8wkeR/OUXZUHUoiYabGk8Y4Y0F/rgq+R4MrOLmA==",
-      "dependencies": {
-        "@types/trusted-types": "^2.0.2"
-      }
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",

package.json

@@ -14,9 +14,7 @@
   "dependencies": {
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-plugin-webc": "^0.11.1",
-    "@11ty/is-land": "^4.0.0",
     "eslint": "^8.54.0",
-    "lit": "^3.1.0",
     "markdown-it": "^13.0.2",
     "markdown-it-footnote": "^4.0.0"
   }

src/_content/work/chantal/index.md

@@ -14,14 +14,14 @@ data:
     value: 3mins 53secs
 elements:
   - title: Video
-    type: mixed
+    type: rich-text
     content: <div style="padding:58.06% 0 0 0;position:relative;"><iframe
       src="https://player.vimeo.com/video/868279067?badge=0&amp;autopause=0&amp;quality_selector=1&amp;player_id=0&amp;app_id=58479"
       frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
       style="position:absolute;top:0;left:0;width:100%;height:100%;"
       title="Chantal"></iframe></div>
   - title: Instructions
-    type: text
+    type: long-form
     content: >-
       as OUTSIDE you are the primary vessel for this experience you will be
       sensorially confused but you will be guided by the others your instruction

src/_content/work/varia/colonial_infrastructures_worksessions/index.md

@@ -9,7 +9,7 @@ data:
     value: "[link](https://vvvvvvaria.org/)"
 elements:
   - title: Text
-    type: mixed
+    type: rich-text
     content: >-
       Our worksessions intend to make tangible invisible colonial mechanisms of hierarchy and oppression that are prevalent in everyday communication technologies, yet often difficult to comprehend. We depart from knowledges and tools shared by invited guests, then learn about practices, and possibilities, of knowledge sharing that evade established colonial practices, and allow for different ways of access and dissemination.
 

src/_includes/base.webc

@@ -13,17 +13,11 @@
   <!-- components -->
   <style @raw="getBundle('css')" webc:keep></style>
   <script type="module" @raw="getBundle('js')" webc:keep></script>
-
-  <script type="module" webc:keep>
-    import { Island } from "/js/is-land.js"
-    import "/js/is-land-autoinit.js"
-  </script>
-
 </head>
 
 <body :class="layout">
   <!-- template content -->
-  <template @html="content" webc:nokeep></template>
+  <template @raw="content" webc:nokeep></template>
 </body>
 
 </html>

src/_includes/cv.webc

@@ -17,18 +17,20 @@ templateEngineOverride: webc,md
     <div class="item" webc:for="(k,i) in c.jobs">
 
       <header>
-        <p class="detail" webc:if="i.year" @raw="i.year"></p>
+        <p class="year" webc:if="i.year" @raw="i.year"></p>
         <template webc:type="11ty" 11ty:type="liquid,md">
 #### <span class="title">{{ i.title }}</span> <span class="type">{{ i.type }}</span>
         </template>
         <p class="subtitle" webc:if="i.subtitle" @raw="i.subtitle"></p>
+        <p class="location" webc:if="i.location" @raw="i.location"></p>
       </header>
 
-      <article webc:if="i.description">
+      <details webc:if="i.description">
+        <summary>more details</summary>
         <template webc:type="11ty" 11ty:type="liquid,md">
 {{ i.description }}
         </template>
-      </article>
+      </details>
     </div>
   </section>
 </main>

src/_includes/work.webc

@@ -16,7 +16,7 @@ layout: base.webc
 </script>
 
 <aside>
-  <a data-variant="back-button" href="/">
+  <a data-variant="back-button">
     <span class="visibly-hidden">back</span>
   </a>
 
@@ -42,13 +42,10 @@ layout: base.webc
 </aside>
 
 <main>
-  <is-land on:visible import="/js/el-work.js">
+  <el-work>
-    <el-work>
+    <template webc:for="(k,d) in elements" webc:nokeep>
-      <template webc:for="(k,d) in elements" webc:type="11ty" 11ty:type="webc,md" webc:nokeep>
+      <long-form :@markdown="d.content" :data-index="k"></long-form>
-        <div class="content" :data-index="k">
+  <!-- <rich-text @content="d.content" :data-index="k"></rich-text> -->
-          <p @raw="d.content"></p>
+    </template>
-        </div>
+  </el-work>
-      </template>
-    </el-work>
-  </is-land>
 </main>

src/admin/config.yml

@@ -41,7 +41,7 @@ collections:
     - {label: "Title", name: "title", widget: "string"}
     - {label: "Sub-title", name: "subtitle", widget: "string", required: false }
     - {label: "Data", name: "data", widget: "list", fields: [ { label: "Name", name: "name", widget: "string" }, { label: "Value", name: "value", modes: ["raw"], buttons: [], editor_components: [], minimal: true, widget: "markdown" }]}
-    - {label: "Work Elements", name: "elements", widget: "list", fields: [ { label: "Title", name: "title", widget: "string" }, { label: "Type", name: "type", widget: "select", options: [ { label: "Mixed content", value: "mixed" },  {label: "Longform Text", value: "text" } ]}, { label: "Content", name: "content", widget: "markdown" }]}
+    - {label: "Work Elements", name: "elements", widget: "list", fields: [ { label: "Title", name: "title", widget: "string" }, { label: "Type", name: "type", widget: "select", options: [ { label: "Mixed content", value: "rich-text" },  {label: "Longform Text", value: "long-form" } ] }, { label: "Content", name: "content", widget: "markdown" }]}
     - {label: "Body", name: "body", widget: "markdown"}
     - {label: "Tags", name: "tags", widget: "list"}
   meta: { path: { widget: string, label: 'Path', index_file: 'index', default: '/' } }

src/assets/js/el-work.js

@@ -1,45 +0,0 @@
-import { LitElement, html, css } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
-
-class ElWork extends LitElement {
-  static properties = {
-    selected: { type: Number }
-  }
-
-  constructor() {
-    super()
-    this.selected = 0
-  }
-
-  get slottedElements() {
-    return this.shadowRoot.querySelector('slot').assignedElements()
-  }
-
-  attributeChangedCallback(name, ov, nv) {
-    if (name == 'selected') {
-      this.selected = nv
-      this._updateVisible()
-    }
-  }
-
-  firstUpdated() {
-    this._updateVisible()
-  }
-
-  _updateVisible() {
-    this.slottedElements.forEach(el => {
-      if (el.dataset.index != this.selected) {
-        el.setAttribute('hidden', '')
-      } else {
-        el.removeAttribute('hidden')
-      }
-    })
-  }
-
-  render() {
-    return html`<slot></slot>`
-  }
-
-  static styles = css``
-}
-
-customElements.define('el-work', ElWork)

src/assets/styles/main.css

@@ -14,8 +14,11 @@
   --violet-400: #e43eda;
   --violet-100: #e48ddf;
 
-  --neutral-100: #fff;
+  --neutral-100: #d5e0de;
-  --neutral-900: #333;
+  --neutral-200: #b4bebc;
+  --neutral-300: #809491;
+  --neutral-400: #516b66;
+  --neutral-900: #E8E9EA;
 
   --ff-serif: 'Ortica Linear';
   --ff-sans: 'Inter';
@@ -50,7 +53,7 @@ a, a:visited, a:active {
 }
 
 p:not(.cv p, .data p) {
-  margin-block-end: 2em;
+  margin-block-end: var(--fs-500);
 }
 
 a[data-variant="back-button"] {
@@ -78,7 +81,7 @@ a[data-variant="back-button"]:hover {
   text-align: right;
 }
 
-h1, h2 {
+h1, h2, h3 {
   font-family: var(--ff-serif, serif);
   color: var(--cyan-400);
   text-shadow: 2px 1px 8px var(--yellow-200);
@@ -95,6 +98,7 @@ h2 {
 }
 
 *[hidden] {
+  display: none !important;
   visibility: hidden;
 }
 
@@ -109,7 +113,7 @@ h2 {
 /* ==> CV LAYOUT */
 .cv .type {
   font-family: var(--ff-sans);
-  color: var(--neutral-300, grey);
+  color: var(--neutral-400, grey);
   font-weight: 400;
   font-size: var(--fs-300);
 }
@@ -118,25 +122,47 @@ h2 {
   min-height: 100vh;
   columns: 3 auto;
   column-fill: auto;
+  padding-block: var(--fs-500);
 }
 
 .cv main section {
   display: grid;
   grid-auto-flow: row;
   gap: 1em;
-  margin-block: 1em;
+}
+
+.cv main section:has(+ section) {
+  padding-block-end: 1em;
+  margin-block-end: 1em;
+  border-bottom: thin dotted var(--cyan-800);
+}
+
+.cv section h3 {
+  break-after: avoid-column;
 }
 
 .item {
   display: grid;
   grid-auto-flow: row;
   grid-gap: 1em;
+  break-inside: avoid-column;
 }
 
-.item article {
+.item .year {
-  padding-inline-start: var(--fs-500);
+  color: var(--neutral-400);
+}
+
+.item details summary {
+  color: var(--neutral-400);
+  padding-block-end: calc(var(--fs-300) * 0.5);
+  translate: calc(var(--fs-300) * -1);
+}
+
+.item details {
+  padding-inline-start: var(--fs-300);
   font-size: var(--fs-300);
-  color: var(--violet-100);
+  color: var(--neutral-400);
+  max-width: 40ch;
 }
 
 /* ==> WORK LAYOUT */
@@ -150,6 +176,11 @@ body.cv {
   grid-template-columns: 30ch 1fr;
 }
 
+.work main {
+  padding-inline-start: calc(0.025 * var(--fs-300));
+  padding-block: var(--fs-500);
+}
+
 :where(.work, .cv) aside {
   display: grid;
   grid-auto-flow: row;