Skip to content

Cms custom components #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aloxe wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Cms custom components #99

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a16fa88
registerEditorComponent image
aloxe Jan 15, 2025
5ba662a
essai de stylage
aloxe Jan 16, 2025
a3efa1f
adding youtube component
aloxe Jan 16, 2025
4847dec
add back sveltia
aloxe Apr 1, 2025
6594706
add categories widget
aloxe Apr 1, 2025
06927b9
register definition component
aloxe Apr 1, 2025
705297a
try out with test1 and 2
aloxe Apr 2, 2025
3f75a21
try youtube block
aloxe Apr 2, 2025
3d3ddff
try with decap
aloxe Apr 4, 2025
8e9d653
Youtube + test 1 test 2
aloxe Apr 4, 2025
d9211df
add custom component image + class
aloxe Apr 4, 2025
c928c9f
switch back to sveltia
aloxe Apr 4, 2025
1f5970e
fix image component and load after window
aloxe Oct 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 74 additions & 25 deletions src/_assets/public/admin/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" />
<link rel="dns-prefetch" href="https://unpkg.com">
<link rel="dns-prefetch" href="https://unpkg.com" />
<title>CMS admin sveltia CMS</title>
</head>
<body>
Expand All @@ -13,34 +13,83 @@
Huwindty uses sveltia CMS but you may prefer decap cms if you want certain features that are not yet implemented in sveltia (like workflow)
-->
<!-- <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script> -->
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script>
<script
src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"
type="module"
></script>

<script>
// Taken from demo https://github.com/decaporg/decap-cms/blob/main/dev-test/index.html
const previewStyles = `
html,
body {
color: #444;
font-size: 14px;
font-family: sans-serif;
}
window.onload = function () {
// from https://github.com/decaporg/decap-cms/blob/main/dev-test/index.html
// documentation: https://decapcms.org/docs/custom-widgets/#registereditorcomponent
CMS.registerEditorComponent({
id: "youtube",
label: "Youtube",
fields: [{ name: "id", label: "Youtube Video ID" }],
pattern: /^{{<\s?youtube (\S+)\s?>}}/,
fromBlock: function (match) {
return {
id: match[1],
};
},
toBlock: function (obj) {
return "{{< youtube " + obj.id + " >}}";
},
toPreview: function (obj) {
return (
'<img src="http://img.youtube.com/vi/' +
obj.id +
'/maxresdefault.jpg" alt="Youtube Video"/>'
);
},
});

body {
padding: 20px;
}
CMS.registerEditorComponent({
id: "CustomImage",
label: "CustomImage",
fields: [
{
name: "src",
label: "image",
widget: "image",
},
{
name: "alt",
label: "Param Two",
widget: "string",
},
{
name: "title",
label: "Param 3",
widget: "string",
},
{
name: "cssClass",
label: "Param css",
widget: "string",
},
],
pattern: /!\[([\w .]*?)\]\((.*?)(?: "([\w .]*?)")?\)/,
fromBlock: function (match) {
console.log(match);

h1 {
margin-top: 20px;
color: #666;
font-weight: bold;
font-size: 32px;
}

img {
max-width: 100%;
}
`;
CMS.registerPreviewStyle(previewStyles, { raw: true });
return {
src: decodeURI(match[1]),
alt: match[2],
title: match[3],
cssClass: match[4],
};
},
toBlock: function (obj) {
return `\n\n![${obj.alt}](${obj.src}${
obj.title ? ` "${obj.title}"` : ""
}){.${obj.cssClass}}\n\n`;
},
toPreview: function (obj) {
return `<img src="${obj.src}" alt="${obj.alt}" title="${obj.title}" class="${obj.cssClass}">`;
},
});
};
</script>
</body>
</html>