Skip to content

Commit 83fec14

Browse files
scriptypescriptype
committed
Draft a proto-layout for contentType selection
List of types and a visualisation of current ontology is imagined. The former is hereby attempted, and the latter needs more think
1 parent b69b7f4 commit 83fec14

3 files changed

Lines changed: 249 additions & 81 deletions

File tree

‎src/cms/server/public/app/components/selectContentTypesForm.js‎

Lines changed: 83 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,89 @@
11
import { createDOMNodeFromHTML } from '../common.js'
22

33
const template = ({ defaultContentTypes }) => {
4-
return (
5-
`<form>
6-
<h1>content types</h1>
7-
${defaultContentTypes.map(contentType => `
8-
<label><input type="checkbox" name="${contentType.name}">${contentType.name}</label>
9-
`
10-
).join('')}
11-
12-
<button>Ok</button>
13-
</form>`
14-
)
4+
// parent selector shortcut
5+
const __ = '#select-content-types'
6+
7+
return (`
8+
<form id="select-content-types">
9+
<style>
10+
${__} {
11+
font: .9rem/1.4 helvetica, sans-serif;
12+
}
13+
14+
${__} .layout-container {
15+
display: flex;
16+
flex-direction: column;
17+
}
18+
19+
${__} .content-types-list {
20+
display: flex;
21+
flex-direction: column;
22+
gap: 1em;
23+
width: 25dvw;
24+
height: 50dvh;
25+
padding: .5em 1em .5em .5em;
26+
overflow: auto;
27+
}
28+
29+
${__} .content-types-list-item {
30+
display: flex;
31+
box-shadow: 0 0 2px #0006;
32+
padding: .66em 0;
33+
border-radius: 0.3em;
34+
cursor: pointer;
35+
}
36+
37+
${__} .content-types-list-item-checkbox {
38+
}
39+
40+
${__} .content-types-list-item:hover {
41+
background: aliceblue;
42+
box-shadow: 0 0 3px #0afa;
43+
}
44+
45+
${__} .content-types-list-item-checkbox {
46+
padding: 0 .66em 0 1em;
47+
place-content: center;
48+
}
49+
50+
${__} .content-types-list-item-content {
51+
}
52+
53+
${__} .content-types-list-item-name {
54+
margin: 0;
55+
}
56+
57+
${__} .content-types-list-item-description {
58+
margin: 0;
59+
font-size: .9em;
60+
opacity: .7;
61+
}
62+
</style>
63+
64+
<h1>content types</h1>
65+
66+
<div class="layout-container">
67+
<div class="content-types-list">
68+
${defaultContentTypes.map(contentType => `
69+
<label class="content-types-list-item">
70+
<div class="content-types-list-item-checkbox">
71+
<input type="checkbox" name="${contentType.name}">
72+
</div>
73+
<div class="content-types-list-item-content">
74+
<p class="content-types-list-item-name">${contentType.name}</p>
75+
<p class="content-types-list-item-description">${contentType.description}</p>
76+
</div>
77+
</label>
78+
`).join('')}
79+
</div>
80+
81+
<div class="ontology-visualisation"></div>
82+
</div>
83+
84+
<button>Ok</button>
85+
</form>
86+
`)
1587
}
1688

1789
const selectContentTypesForm = ({ defaultContentTypes, onSubmit }) => {

‎src/cms/server/public/app/defaultContentTypes.js‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
const homepageTypes = [{
2+
name: 'BasicHomepage',
3+
model: 'homepage',
4+
description: 'A generic landing page',
5+
attributes: {
6+
title: 'title',
7+
description: 'text',
8+
content: 'content'
9+
}
10+
}, {
11+
name: 'FancyHomepage',
12+
model: 'homepage',
13+
description: 'A fancy landing page',
14+
attributes: {
15+
title: 'title',
16+
description: 'text',
17+
content: 'content',
18+
fancyAttribute: 'date'
19+
}
20+
}]
21+
22+
const subpageTypes = [{
23+
name: 'BasicSubpage',
24+
model: 'subpage',
25+
description: 'A generic subpage',
26+
attributes: {
27+
title: 'title',
28+
description: 'text',
29+
content: 'content'
30+
}
31+
}, {
32+
name: 'FancySubpage',
33+
model: 'subpage',
34+
description: 'A fancy subpage',
35+
attributes: {
36+
title: 'title',
37+
description: 'text',
38+
content: 'content'
39+
}
40+
}]
41+
42+
const collectionTypes = [{
43+
name: 'Blog',
44+
model: 'collection',
45+
description: 'A collection of blog posts',
46+
facets: ['tags', 'date', 'author'],
47+
collectionAlias: 'blog',
48+
categoryContentType: '',
49+
categoryAlias: '',
50+
categoriesAlias: '',
51+
entryContentType: 'BlogPost',
52+
entryAlias: 'post',
53+
entriesAlias: 'posts',
54+
attributes: {
55+
title: 'title',
56+
description: 'text',
57+
content: 'content'
58+
}
59+
}, {
60+
name: 'Podcast',
61+
model: 'collection',
62+
description: 'A collection of podcast episodes',
63+
facets: ['tags', 'date', 'guests', 'hosts'],
64+
collectionAlias: 'podcast',
65+
categoryContentType: '',
66+
categoryAlias: '',
67+
categoriesAlias: '',
68+
entryContentType: 'PodcastEpisode',
69+
entryAlias: 'episode',
70+
entriesAlias: 'episodes',
71+
attributes: {
72+
title: 'title',
73+
description: 'text',
74+
content: 'content'
75+
}
76+
}]
77+
78+
const categoryTypes = [{
79+
name: 'Category',
80+
model: 'category',
81+
description: 'A group of entries in a collection',
82+
attributes: {
83+
title: 'title',
84+
description: 'text',
85+
content: 'content'
86+
}
87+
}]
88+
89+
const entryTypes = [{
90+
name: 'BlogPost',
91+
model: 'entry',
92+
description: 'Article in a blog',
93+
attributes: {
94+
title: 'title',
95+
tags: 'string[]',
96+
author: 'Person',
97+
date: 'date',
98+
summary: 'text',
99+
content: 'content',
100+
coverImage: 'imageAttachment'
101+
}
102+
}, {
103+
name: 'PodcastEpisode',
104+
model: 'entry',
105+
description: 'An episode of a podcast show',
106+
attributes: {
107+
title: 'title',
108+
tags: 'string[]',
109+
audioFile: 'attachment:audio',
110+
transcript: 'attachment:text',
111+
guests: 'PodcastGuest[]',
112+
hosts: 'PodcastHost[]'
113+
}
114+
}, {
115+
name: 'Person',
116+
model: 'entry',
117+
description: 'A person',
118+
attributes: {
119+
title: 'title',
120+
email: 'email',
121+
bio: 'text',
122+
avatar: 'image',
123+
}
124+
}, {
125+
name: 'Author',
126+
model: 'entry',
127+
description: 'An author',
128+
attributes: {
129+
title: 'title',
130+
email: 'email',
131+
bio: 'text',
132+
avatar: 'image',
133+
blogPosts: ['+BlogPost:author']
134+
}
135+
}, {
136+
name: 'PodcastHost',
137+
model: 'entry',
138+
description: 'A host in a podcast episode',
139+
attributes: {
140+
title: 'title',
141+
email: 'email',
142+
bio: 'text',
143+
avatar: 'image',
144+
hosted: ['+PodcastEpisode:hosts']
145+
}
146+
}, {
147+
name: 'PodcastGuest',
148+
model: 'entry',
149+
description: 'A guest in a podcast episode',
150+
attributes: {
151+
title: 'title',
152+
email: 'email',
153+
bio: 'text',
154+
avatar: 'image',
155+
hosted: ['+PodcastEpisode:guests']
156+
}
157+
}]
158+
159+
export default [
160+
...homepageTypes,
161+
...subpageTypes,
162+
...collectionTypes,
163+
...categoryTypes,
164+
...entryTypes
165+
]

‎src/cms/server/public/app/editProject.js‎

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,76 +2,7 @@ import api from '../api.js'
22
import { setIframeSrc } from './common.js'
33
import dialog from './components/dialog.js'
44
import selectContentTypesForm from './components/selectContentTypesForm.js'
5-
6-
const defaultContentTypes = [{
7-
name: 'Homepage',
8-
model: 'homepage',
9-
description: 'A generic landing page',
10-
attributes: {
11-
title: 'title',
12-
description: 'text',
13-
content: 'content'
14-
}
15-
}, {
16-
name: 'Subpage',
17-
model: 'subpage',
18-
description: 'A generic subpage',
19-
attributes: {
20-
title: 'title',
21-
description: 'text',
22-
content: 'content'
23-
}
24-
}, {
25-
name: 'Blog',
26-
model: 'collection',
27-
description: 'A collection of blog posts',
28-
facets: ['tags', 'date', 'author'],
29-
collectionAlias: 'blog',
30-
categoryContentType: '',
31-
categoryAlias: '',
32-
categoriesAlias: '',
33-
entryContentType: 'BlogPost',
34-
entryAlias: 'post',
35-
entriesAlias: 'posts',
36-
attributes: {
37-
title: 'title',
38-
description: 'text',
39-
content: 'content'
40-
}
41-
}, {
42-
name: 'Category',
43-
model: 'category',
44-
description: 'A group of entries in a collection',
45-
attributes: {
46-
title: 'title',
47-
description: 'text',
48-
content: 'content'
49-
}
50-
}, {
51-
name: 'BlogPost',
52-
model: 'entry',
53-
description: 'Article in a blog',
54-
attributes: {
55-
title: 'title',
56-
tags: 'strings',
57-
author: 'Person',
58-
date: 'date',
59-
summary: 'text',
60-
content: 'content',
61-
coverImage: 'imageAttachment'
62-
}
63-
}, {
64-
name: 'Person',
65-
model: 'entry',
66-
description: 'A person',
67-
attributes: {
68-
title: 'title',
69-
email: 'email',
70-
bio: 'text',
71-
blogPosts: ['+BlogPost:author']
72-
}
73-
}]
74-
5+
import defaultContentTypes from './defaultContentTypes.js'
756

767
const editProject = async ({ ssgOptions }) => {
778
console.log('starting editor with ssgOptions', ssgOptions)

0 commit comments

Comments
 (0)