fix: improve media fetching on collection page, add pagination (#788)
This commit is contained in:
Daniel Lautzenheiser
committed by
GitHub
GitHub
parent
e78ebbe65e
commit
92cc4575f8
@ -5,12 +5,12 @@ backend:
|
||||
|
||||
media_folder: assets/upload
|
||||
public_folder: /assets/upload
|
||||
media_library:
|
||||
max_file_size: 100000000
|
||||
collections:
|
||||
- name: posts
|
||||
label: Posts
|
||||
label_singular: Post
|
||||
media_folder: /assets/posts
|
||||
public_folder: /assets/posts
|
||||
description: >
|
||||
The description is a great place for tone setting, high level information,
|
||||
and editing guidelines that are specific to a collection.
|
||||
|
||||
@ -3,10 +3,12 @@ backend:
|
||||
branch: main
|
||||
repo: static-cms/static-cms-gitlab
|
||||
auth_type: pkce
|
||||
app_id: 91cc479ec663625098d456850c4dc4943fd8462064ebd9693b330e66f9d8f11a
|
||||
app_id: 589ccb30ce31da8ba08e0b1e10b681a10be108e144508c2712573c6e4d60707e
|
||||
|
||||
media_folder: assets/upload
|
||||
public_folder: /assets/upload
|
||||
media_library:
|
||||
max_file_size: 100000000
|
||||
collections:
|
||||
- name: posts
|
||||
label: Posts
|
||||
@ -17,12 +19,14 @@ collections:
|
||||
folder: _posts
|
||||
slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
|
||||
summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
|
||||
summary_fields:
|
||||
- title
|
||||
- date
|
||||
- draft
|
||||
sortable_fields:
|
||||
fields:
|
||||
- title
|
||||
- date
|
||||
default:
|
||||
field: title
|
||||
create: true
|
||||
view_filters:
|
||||
- label: Posts With Index
|
||||
|
||||
@ -7,6 +7,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<script src="/static-cms-core.js"></script>
|
||||
<script type="module" src="/index.js"></script>
|
||||
<script type="module" src="/backends/gitlab/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
197
packages/core/dev-test/backends/gitlab/index.js
Normal file
197
packages/core/dev-test/backends/gitlab/index.js
Normal file
@ -0,0 +1,197 @@
|
||||
// Register all the things
|
||||
CMS.init();
|
||||
|
||||
const PostPreview = ({ entry, widgetFor }) => {
|
||||
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')),
|
||||
);
|
||||
};
|
||||
|
||||
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 PostDraftFieldPreview = ({ value }) => {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
backgroundColor: value === true ? 'rgb(37 99 235)' : 'rgb(22 163 74)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '2px 6px',
|
||||
textAlign: 'center',
|
||||
textDecoration: 'none',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
},
|
||||
},
|
||||
value === true ? 'Draft' : 'Published',
|
||||
);
|
||||
};
|
||||
|
||||
const GeneralPreview = ({ widgetsFor, entry, collection }) => {
|
||||
const title = entry.data.site_title;
|
||||
const posts = entry.data.posts;
|
||||
const thumb = posts && posts.thumb;
|
||||
|
||||
const thumbUrl = useMediaAsset(thumb, collection, undefined, entry);
|
||||
|
||||
return h(
|
||||
'div',
|
||||
{},
|
||||
h('h1', {}, title),
|
||||
h(
|
||||
'dl',
|
||||
{},
|
||||
h('dt', {}, 'Posts on Frontpage'),
|
||||
h('dd', {}, widgetsFor('posts').widgets.front_limit ?? 0),
|
||||
|
||||
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 RelationKitchenSinkPostPreview = ({ fieldsMetaData }) => {
|
||||
// When a post is selected from the relation field, all of it's data
|
||||
// will be available in the field's metadata nested under the collection
|
||||
// name, and then further nested under the value specified in `value_field`.
|
||||
// In this case, the post would be nested under "posts" and then under
|
||||
// the title of the selected post, since our `value_field` in the config
|
||||
// is "title".
|
||||
const post = fieldsMetaData && fieldsMetaData.posts.value;
|
||||
const style = { border: '2px solid #ccc', borderRadius: '8px', padding: '20px' };
|
||||
return post
|
||||
? h(
|
||||
'div',
|
||||
{ style: style },
|
||||
h('h2', {}, 'Related Post'),
|
||||
h('h3', {}, post.title),
|
||||
h('img', { src: post.image }),
|
||||
h('p', {}, (post.body ?? '').slice(0, 100) + '...'),
|
||||
)
|
||||
: null;
|
||||
};
|
||||
|
||||
const CustomPage = () => {
|
||||
return h('div', {}, 'I am a custom page!');
|
||||
};
|
||||
|
||||
CMS.registerPreviewTemplate('posts', PostPreview);
|
||||
CMS.registerFieldPreview('posts', 'date', PostDateFieldPreview);
|
||||
CMS.registerFieldPreview('posts', 'draft', PostDraftFieldPreview);
|
||||
CMS.registerPreviewTemplate('general', GeneralPreview);
|
||||
CMS.registerPreviewTemplate('authors', AuthorsPreview);
|
||||
// Pass the name of a registered control to reuse with a new widget preview.
|
||||
CMS.registerWidget('relationKitchenSinkPost', 'relation', RelationKitchenSinkPostPreview);
|
||||
CMS.registerAdditionalLink({
|
||||
id: 'example',
|
||||
title: 'Example.com',
|
||||
data: 'https://example.com',
|
||||
options: {
|
||||
icon: 'page',
|
||||
},
|
||||
});
|
||||
CMS.registerAdditionalLink({
|
||||
id: 'custom-page',
|
||||
title: 'Custom Page',
|
||||
data: CustomPage,
|
||||
options: {
|
||||
icon: 'page',
|
||||
},
|
||||
});
|
||||
|
||||
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, theme }) => {
|
||||
return h('span', {}, [
|
||||
h('input', {
|
||||
key: 'control-input',
|
||||
value: src,
|
||||
onChange: event => {
|
||||
onChange({ src: event.target.value });
|
||||
},
|
||||
style: {
|
||||
width: '100%',
|
||||
backgroundColor: theme === 'dark' ? 'rgb(30, 41, 59)' : 'white',
|
||||
color: theme === 'dark' ? 'white' : 'black',
|
||||
padding: '4px 8px',
|
||||
},
|
||||
}),
|
||||
h(
|
||||
'iframe',
|
||||
{
|
||||
key: 'control-preview',
|
||||
width: '100%',
|
||||
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}`,
|
||||
},
|
||||
'',
|
||||
),
|
||||
);
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user