165 lines
3.5 KiB
JavaScript
Raw Permalink Normal View History

2022-09-28 20:04:00 -06:00
// Register all the things
2022-10-26 11:46:06 -04:00
CMS.init();
2022-09-28 20:04:00 -06:00
2023-01-13 11:46:56 -05:00
const PostPreview = ({ entry, widgetFor }) => {
2022-11-04 17:41:12 -04:00
return h(
'div',
{},
h('div', { className: 'cover' }, h('h1', {}, entry.data.title), widgetFor('image')),
h('p', {}, h('small', {}, 'Written ' + entry.data.date)),
h('div', { className: 'text' }, widgetFor('body')),
);
};
2022-09-28 20:04:00 -06:00
2023-03-30 13:29:09 -04:00
const PostDateFieldPreview = ({ value }) => {
const date = new Date(value);
const month = date.getMonth() + 1;
const day = date.getDate();
return h(
'div',
{},
`${date.getFullYear()}-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day}`,
);
};
const GeneralPreview = ({ widgetsFor, entry, collection }) => {
2022-11-04 17:41:12 -04:00
const title = entry.data.site_title;
const posts = entry.data.posts;
const thumb = posts && posts.thumb;
2022-09-28 20:04:00 -06:00
const thumbUrl = useMediaAsset(thumb, collection, undefined, entry);
2022-11-04 17:41:12 -04:00
return h(
'div',
{},
h('h1', {}, title),
h(
'dl',
2022-09-28 20:04:00 -06:00
{},
2022-11-04 17:41:12 -04:00
h('dt', {}, 'Posts on Frontpage'),
h('dd', {}, widgetsFor('posts').widgets.front_limit ?? 0),
2022-09-28 20:04:00 -06:00
2022-11-04 17:41:12 -04:00
h('dt', {}, 'Default Author'),
h('dd', {}, widgetsFor('posts').data?.author ?? 'None'),
h('dt', {}, 'Default Thumbnail'),
h('dd', {}, thumb && h('img', { src: thumbUrl })),
),
);
};
const AuthorsPreview = ({ widgetsFor }) => {
return h(
'div',
{},
h('h1', {}, 'Authors'),
widgetsFor('authors').map(function (author, index) {
return h(
'div',
{ key: index },
h('hr', {}),
h('strong', {}, author.data.name),
author.widgets.description,
);
}),
);
};
const CustomPage = () => {
return h('div', {}, 'I am a custom page!');
};
2022-09-28 20:04:00 -06:00
2022-10-26 11:46:06 -04:00
CMS.registerPreviewTemplate('posts', PostPreview);
2023-03-30 13:29:09 -04:00
CMS.registerFieldPreview('posts', 'date', PostDateFieldPreview);
2022-11-04 17:41:12 -04:00
CMS.registerPreviewTemplate('general', GeneralPreview);
2022-10-26 11:46:06 -04:00
CMS.registerPreviewTemplate('authors', AuthorsPreview);
2022-09-28 20:04:00 -06:00
// Pass the name of a registered control to reuse with a new widget preview.
CMS.registerWidget('relationKitchenSinkPost', 'relation');
2022-10-26 11:46:06 -04:00
CMS.registerAdditionalLink({
2022-10-20 11:57:30 -04:00
id: 'example',
title: 'Example.com',
data: 'https://example.com',
options: {
icon: 'page',
},
});
2022-11-04 17:41:12 -04:00
CMS.registerAdditionalLink({
id: 'custom-page',
title: 'Custom Page',
data: CustomPage,
options: {
icon: 'page',
},
});
2022-12-11 09:03:53 -05:00
CMS.registerTheme({
name: 'Custom Red Orange',
extends: 'dark',
primary: {
main: '#ff4500',
}
});
2022-12-11 09:03:53 -05:00
CMS.registerShortcode('youtube', {
label: 'YouTube',
openTag: '[',
closeTag: ']',
separator: '|',
toProps: args => {
if (args.length > 0) {
return { src: args[0] };
}
return { src: '' };
},
toArgs: ({ src }) => {
return [src];
},
control: ({ src, onChange }) => {
const theme = useTheme();
2022-12-11 09:03:53 -05:00
return h('span', {}, [
h('input', {
key: 'control-input',
value: src,
onChange: event => {
onChange({ src: event.target.value });
},
2023-03-30 13:29:09 -04:00
style: {
width: '100%',
backgroundColor: theme.common.gray,
color: theme.text.primary,
2023-03-30 13:29:09 -04:00
padding: '4px 8px',
},
2022-12-11 09:03:53 -05:00
}),
h(
'iframe',
{
key: 'control-preview',
2023-03-30 13:29:09 -04:00
width: '100%',
2022-12-11 09:03:53 -05:00
height: '315',
src: `https://www.youtube.com/embed/${src}`,
},
'',
),
]);
},
preview: ({ src }) => {
return h(
'span',
{},
h(
'iframe',
{
width: '420',
height: '315',
src: `https://www.youtube.com/embed/${src}`,
},
'',
),
);
},
});