suroh/pxls.homepage
1
0
Fork 0
Code Actions

commiting changes working on content components

Browse Source
This commit is contained in:
suroh 2023-12-12 14:27:26 +01:00
parent 89d2bda617
commit f8bf2a625a
11 changed files with 57 additions and 139 deletions
.eleventy.cjspackage-lock.jsonpackage.json
src
_content/work
chantal
index.md
varia/colonial_infrastructures_worksessions
index.md
_includes
base.webccv.webcwork.webc
admin
config.yml
assets
js
el-work.js
styles
main.css

2
.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")

57
package-lock.json generated

@ -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",

2
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"
}

4
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

2
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.

8
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>

8
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>

17
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>
<template webc:for="(k,d) in elements" webc:type="11ty" 11ty:type="webc,md" webc:nokeep>
<div class="content" :data-index="k">
<p @raw="d.content"></p>
</div>
</template>
</el-work>
</is-land>
<el-work>
<template webc:for="(k,d) in elements" webc:nokeep>
<long-form :@markdown="d.content" :data-index="k"></long-form>
<!-- <rich-text @content="d.content" :data-index="k"></rich-text> -->
</template>
</el-work>
</main>

2
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: '/' } }

45
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)

49
src/assets/styles/main.css

@ -14,8 +14,11 @@
--violet-400: #e43eda;
--violet-100: #e48ddf;
--neutral-100: #fff;
--neutral-900: #333;
--neutral-100: #d5e0de;
--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 {
padding-inline-start: var(--fs-500);
.item .year {
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;