delucis / astro-netlify-cms Goto Github PK
View Code? Open in Web Editor NEWIntegration to add Netlify CMS’s admin dashboard to any Astro project
Integration to add Netlify CMS’s admin dashboard to any Astro project
I was wondering if it was possible to use this with i18n support. Is there an example? Would it be possible to combine with a multilingual front page? Or do you need a different package for multilanguage options for the front page like 18next?
At the moment the identity widget + the webpack://components/modal.css is served on every page.
those 2 are the biggest files on every page.
is there a way to bind the scripts and styles to the /admin only?
We then can just have a small function on the homepage that looks if there is a password reset #hash present and redirect to the admin.
https://www.my-website.com/#recovery_token=<token>
=> https://www.my-website.com/admin/#recovery_token=<token>
This is a feature request - the plugin is great to quickly add the Netlify CMS to an Astro project, but eliminates the ability to modify the /admin page (favicon, title, additional stylesheets, etc.) as it's bundled with the package.
It would be great to expose an optional admin-layout.astro file that could be used to customize the dashboard. Not sure what the best path forward is, but I may end up dropping the package and configuring everything manually so I can retain control over the admin.html page.
Is there an easy way to modify the admin page currently?
Kinda follow up of #18 , this time if I move vue()
like this:
// https://astro.build/config
export default defineConfig({
integrations: [NetlifyCMS({...}), vue()],
site: `whatever`,
output: 'static',
});
Instead of this:
// https://astro.build/config
export default defineConfig({
integrations: [vue(), NetlifyCMS({...})],
site: `whatever`,
output: 'static',
});
like title, NetlifyCMS won't show up
So far I installed the package, pasted the necessary code into astro.config.mjs. This is what I get when visiting /admin
config:
import { defineConfig } from 'astro/config';
import svelte from "@astrojs/svelte";
import NetlifyCMS from 'astro-netlify-cms';
import mdx from "@astrojs/mdx";
// https://astro.build/config
export default defineConfig({
site: 'https://kodvet.gitlab-pages.liu.se/',
base: '/sektionshemsidan',
// Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
// base: 'kvit/',
sitemap: true,
// Generate sitemap (set to "false" to disable)
// GitLab Pages requires exposed files to be located in a folder called "public".
// So we're instructing Astro to put the static build output in a folder of that name.
outDir: 'public',
// The folder name Astro uses for static files (`public`) is already reserved
// for the build output. So in deviation from the defaults we're using a folder
// called `static` instead.
publicDir: 'static',
integrations: [NetlifyCMS({
config: {
backend: {
name: 'git-gateway',
branch: 'main',
},
media_folder: 'public/assets/blog',
public_folder: '/assets/blog',
collections: [
// Content collections
{
name: 'posts',
label: 'Blog Posts',
folder: 'src/pages/posts',
create: true,
delete: true,
fields: [
{ name: 'title', widget: 'string', label: 'Post Title' },
{ name: 'body', widget: 'markdown', label: 'Post Body' },
],
}
],
},
}), svelte(), mdx()]
});
This is a very useful starter. One thing which I am not able to figure out is how to integrate netlify-cms-widget-mdx
Being able to support mdx widget (in place of markdown) would be very useful.
Basically where and how to add the following lines:
import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';
CMS.registerWidget('mdx', MdxControl, MdxPreview);
Working on a Windows OS and running astro dev returns the following error.
node:events:368
throw er; // Unhandled 'error' event
^
Error: spawn netlify-cms-proxy-server ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
at onErrorNT (node:internal/child_process:477:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
at onErrorNT (node:internal/child_process:477:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn netlify-cms-proxy-server',
path: 'netlify-cms-proxy-server',
spawnargs: []
}
when I manually start the proxy server and comment out:
/* 'astro:server:start': () => {
const proxy = spawn('netlify-cms-proxy-server', { stdio: 'inherit' });
process.on('exit', () => proxy.kill());
}, */
it works.
Hi,
is there a way to set a specific localization for my NetlifyCMS with this library?
I know you can set the locale with this code:
import CMS from 'netlify-cms-app'; import { de } from 'netlify-cms-locales'; CMS.registerLocale('de', de);
But I don't know of a way to pass this to the NetlifyCMS integration
Thanks in advance
Hi, I'm facing an error which I couldn't solve it, I'm using astro getCollection() method then render multi MDXs in same page.
so when I'm using the method before adding the NetlifyCMS everything works fine
export const getContent = async ({
pageName,
locale,
}: {
pageName: PageName;
locale: string;
}): Promise<AstroComponentFactory[]> => {
const allContent = (
await getCollection(pageName, (entry) => entry.id.includes(locale))
).sort((a, b) => a.data.order - b.data.order) as CollectionEntry<PageName>[];
const mdxComponents = await Promise.all(
allContent.map(async (content) => {
try {
// will throw an error
const { Content } = await content.render();
return Content;
} catch (e) {
console.log(e);
return null;
}
})
);
return mdxComponents.filter(
(component) => component !== null
) as AstroComponentFactory[];
};
but when adding NetlifyCMS in integrations like this code below
// when commit this part all works fine
NetlifyCMS({
config: {
backend: {
name: "github",
branch: "main",
},
collections: [
{
name: "hero",
label: "hero section",
folder: "src/content/home/hero",
create: true,
delete: false,
extension: "mdx",
format: "frontmatter",
fields: [
{ name: "title", widget: "string", label: "File Title" },
{
widget: "string",
name: "firstLine",
label: "First Line",
required: true,
},
],
},
],
},
}),
I'm getting this error
Error: Parse error @:12:102
at parse (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/[email protected]/node_modules/es-module-lexer/dist/lexer.js:2:358)
at TransformContext.transform (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/@[email protected][email protected]/node_modules/@astrojs/mdx/dist/index.js:102:58)
at Object.transform (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:44240:62)
at async loadAndTransform (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:54896:29)
at async instantiateModule (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55821:10) {
idx: 464,
plugin: '@astrojs/mdx-postprocess',
id: '/Users/my-user/Desktop/magical-main/src/content/home/hero/en.mdx',
pluginCode: '/*@jsxRuntime automatic @jsxImportSource astro*/\n' +
'export const frontmatter = {\n' +
' "title": "Testing Hero",\n' +
' "firstLine": "Crafting softwares with astro and DecapCMS",\n' +
' "description": "Hero is a simple, extensible, drop-in replacement for the default Hugo theme.",\n' +
' "order": 1\n' +
'};\n' +
'export function getHeadings() {\n' +
' return [];\n' +
'}\n' +
'function _createMdxContent(props) {\n' +
' return <><h1>{" "}{frontmatter.title}{" "}</h1>{"\\n"}<h1>{" "}{frontmatter.firstLine}{" "}</h1></>;\n' +
'}\n' +
'function MDXContent(props = {}) {\n' +
' const {wrapper: MDXLayout} = props.components || ({});\n' +
' return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);\n' +
'}\n' +
'export default MDXContent;\n'
}
So what could be the issue here and how to solve it?
*note: If I used.md files it will work fine
for full reff you can see this repo
Update:
I believe it could be astro version in astro-netlify-cms it's older then the one I'm using which is "astro": "^2.9.3",
Hey there!
I've just noticed that a script page.<hash>.js
is injected into every page when using this integration with the default config from the Astro Netlify CMS Starter.
I'm unsure whether this is the desired behavior. I've read that the identity widget is used if you're hosting the blog+cms on Netlify and do not use a git hosting provider such as github. So backend: git-gateway
, hosted on Netlify without github et al.
I'm opening this issue because I'm not sure if this is a bug or desired.
Thank you!
Trying to build with Astro 1.4.4 and failing:
generating static routes error component is not defined ReferenceError: component is not defined at
file:///Users/psmith/Sites/nw-3-deploy-testing/test/.astro/entry.mjs?time=1665061500569:1780:25``
line 1780:
__astro_tag_component__(component, "@astrojs/react");
package.json:
{ "name": "@example/blog", "version": "0.0.1", "private": true, "scripts": { "dev": "astro dev", "start": "npm run dev", "build": "astro build", "preview": "astro preview" }, "devDependencies": { "astro": "^1.4.4", "astro-netlify-cms": "^0.2.2" } }
I tried to deploy the Blog Starter to Netlify.
Even after configuring Netlify Identity and Git Gateway, the admin panel doesn't seem to log in with Netlify Identity.
Hey, this feature could be great but not sure how difficult or feasible it is.
You could automatically generate DecapCMS config's collections based on the the Content Collections schemas.
This way we can have a single schema fields definition, and boilerplates a CMS really fast!
Adding this package to my Astro installation will trigger npm audit
without being able to fix it because some dependency packaging has an hard coded semantic version. Could you check it please?
here is a working fork
https://github.com/advanced-astro/astro-decap-cms
I have seen numerous people attempt to use this as it is linked in the docs but only to be confused
If you're willing to keep this up to date, I am happy to update the demo
Hi!
Today StaticCMS has released its 1.0.0 version of the successor of NetlifyCMS, which it has been abandoned.
https://github.com/StaticJsCMS/static-cms/releases/tag/v1.0.0
It may be good switching ASAP to get better features and security in the future
You can check it on https://randomname123.netlify.app/posts/
The problem is only in header section.
Hi @delucis 👋
I am a complete newbie to Astro and Netlify CMS. I have a problem logging into the Netlify CMS administration.
I have installed astro-netlify-cms
and edited the astro.config.mjs
config as needed (see below).
import { defineConfig } from 'astro/config';
import NetlifyCMS from 'astro-netlify-cms';
import preact from "@astrojs/preact";
export default defineConfig({
integrations: [
NetlifyCMS({
config: {
backend: {
name: 'git-gateway',
branch: 'master',
},
collections: [
{
name: 'posts',
label: 'Blog posts',
folder: 'src/pages/posts',
create: true,
delete: true,
fields: [
{ name: 'title', widget: 'string', label: 'Post title' },
{ name: 'body', widget: 'markdown', label: 'Post body'},
],
},
],
},
}),
preact()]
});
I committed everything to the repository on GitHub. In the netlify app I added a new site with the following settings:
Base directory: Not set
Build command: npm run build
Publish directory: dist
Deploy log visibility: Logs are public
Build status: Active
I also enabled Identity and Git gateway. The first thing I noticed is that the site doesn't show the login widget. When I add /admin
, it takes me to the Netlify CMS login page, but shouldn't the registration option pop up first?
You can check the site yourself - www.stpn.dev
Then here is my repo - stpn-astro
I don't really know where to look for the error and that's why I would like to ask for help.
Running into the following error:
Seems to be related to #34 , but with react()
instead of vue()
added as integration.
Makes no difference if putting it before or after NetlifyCMS()
in the config.
The admin dashboard is working perfectly fine without the react integration and dependencies.
Will provide a cleaned repo to reproduce the issue later.
Directly reference the layout and code of the theme. What if you need to update the theme? It's a bigger problem for you to switch themes. Do you consider providing module references
Hello,
I have integrated the plugin correctly and works ok on localhost. Before using this plugin, I used the tutorial from Astro blog with Netlify CMS integration, and all worked well on prod.
Later on, I switched to this plugin, and seems that in prod I can see this ugly page :(.
The "pop-up" to login with Github doesn't show...
I am currently learning how to use astro-netlify-cms to create a sample blogging and I am having trouble implementing the layout for the blogs.
My folder structure looks like the following
-src
-layouts
-MarkdownPostLayout.astro
-pages
-posts
-blog1.md
astro.config.mjs
Here is my astro.config.mjs file:
https://github.com/Albertyhu/astro-blog-with-netlify-cms/blob/main/astro.config.mjs
In collections, I set the field layout to the following:
{
name: "layout",
widget: "hidden",
label: "Layout",
default: `import layout from '../../layouts/MarkdownPostLayout.astro'`,
},
Here is the Github repository for the rest of the project: https://github.com/Albertyhu/astro-blog-with-netlify-cms/tree/main
I appreciate any help I can get here.
With Astro v4+, a warning pops up when the dev server is launched:
[WARN] The injected route "/admin" by netlify-cms specifies the entry point with the "entryPoint" property. This property is deprecated, please use "entrypoint" instead.
I've tested and this works by simply replacing entryPoint
with entrypoint
here:
astro-netlify-cms/integration/index.ts
Line 70 in 66d4f0f
I'm getting the following error on astro dev.
Running Mac Os Ventura
PNPM is my package manager
🚀 astro v1.7.2 started in 333ms
┃ Local http://localhost:3000/
┃ Network use --host to expose
node:events:491
throw er; // Unhandled 'error' event
^
Error: spawn netlify-cms-proxy-server ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:283:19)
at onErrorNT (node:internal/child_process:476:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
at ChildProcess._handle.onexit (node:internal/child_process:289:12)
at onErrorNT (node:internal/child_process:476:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn netlify-cms-proxy-server',
path: 'netlify-cms-proxy-server',
spawnargs: []
}
Node.js v18.12.1
ELIFECYCLE Command failed with exit code 1.```
After installing astro-netlify-cms and adding a basic config entry in astro.config.mjs
, Vue components failed to render as the Vue instance was seemingly not being properly mounted.
export default defineConfig({
site: 'https://example.com',
integrations: [
mdx(),
sitemap(),
vue(), // Vue integration declared before NetlifyCMS
NetlifyCMS({
config: {
backend: {
name: 'git-gateway',
branch: 'master'
},
collections: [
{
name: 'posts',
label: 'Blog Posts',
folder: 'src/pages/blog',
create: true,
delete: true,
fields: [
{ name: 'title', widget: 'string', label: 'Post Title' },
{ name: 'body', widget: 'markdown', label: 'Post Body' },
],
},
]
}
}),
],
});
export default defineConfig({
site: 'https://example.com',
integrations: [
mdx(),
sitemap(),
NetlifyCMS({
config: {
backend: {
name: 'git-gateway',
branch: 'master'
},
collections: [
{
name: 'posts',
label: 'Blog Posts',
folder: 'src/pages/blog',
create: true,
delete: true,
fields: [
{ name: 'title', widget: 'string', label: 'Post Title' },
{ name: 'body', widget: 'markdown', label: 'Post Body' },
],
},
]
}
}),
vue(),
],
});
I'm not sure if this is an issue specific to the Astro-Netlify-CMS integration, or if it's on the Astro / Astro Vue integration side of things. However, it was difficult to figure out the cause other than that it having occurred after setting up Astro-Netlify-CMS.
In case it helps to identify the source, here's the error messages I was getting.
[plugin:vite:vue] Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<)
Vue warn: Component is missing template or render function
Perhaps it's worth mentioning in the installation / config instructions that this can be resolved by declaring the Astro-Netlify-CMS integration prior to Vue.
Hi,
Where is the place to add custom widgets for netlify CMS to extend the cms?
thanks
Update to astro v4
I've just started playing with this integration today and I'm running into a bit of a project design issue. If I wanted to add a collection to NetlifyCMS to use as feature switches (e.g. "show author names on blog landing page"), how should I go about building that so I can read that value in my Astro file and change the page accordingly? I'm still exploring Astro, I don't have any pre-existing file structure to worry about so I'm open to any suggestions.
When I was using 11ty, I would just create a blogSettings.yml file and read directly from that since it gets supplied as global data. I'm not sure what the proper style here would be.
Thanks for your help, appreciate the work you're doing!
Yesterday they've just released a new version: https://decapcms.org/blog/2023/08/decap-3
Also they changed package names.
Currently if you don't set disableIdentityWidgetInjection to true then it add the Netlify Identity Widget to all page which can lead to unnecessary ressource being loaded in most case.
I would be nice to have a options to only inject it on admin routes.
Hi there and thanks for this great integration :)
I have everything up and running and it worked great, until I turned on showDefaultLocale
to true
in my i18next config file.
What this does is that instead of having the urls for the default language on /
, they are on /en
. (i.e. /blog
becomes /en/blog
)
So for the homepage, as stated in Astro's docs, I just have this src/pages/index.astro
:
<meta http-equiv="refresh" content="0;url=/en/" />
Which just redirects from /
to /en
.
But then the links in the emails sent by Netlify upon registration or forgotten email all point to /#invite_token=2EUz71D9siVlVLJjsPhj1w
which then redirects to /en
without the extra #invite_token
.
Would there be a way to specify the URL in the emails to be /en
?
Or could we change src/pages/index.astro
so that upon redirecting it preserves the #invite_token
?
Thank you so much :)
I get CORS Missing Allow Header
https://clever-stroopwafel-5cf68a.netlify.app
And the admin panel doesn't work because of it.
The repo is untouched thank you!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.