{"id":13500762,"url":"https://github.com/primaryobjects/contentblocks","last_synced_at":"2025-03-26T04:31:49.188Z","repository":{"id":6181745,"uuid":"7412011","full_name":"primaryobjects/contentblocks","owner":"primaryobjects","description":"Create simple editable CMS content blocks in node.js. Wrapper for Create.js CMS framework.","archived":false,"fork":false,"pushed_at":"2023-01-16T13:51:38.000Z","size":2710,"stargazers_count":118,"open_issues_count":0,"forks_count":11,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-09-16T05:49:02.269Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/primaryobjects.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["primaryobjects"]}},"created_at":"2013-01-02T19:29:27.000Z","updated_at":"2023-03-10T11:51:41.000Z","dependencies_parsed_at":"2023-02-10T03:45:17.593Z","dependency_job_id":null,"html_url":"https://github.com/primaryobjects/contentblocks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/primaryobjects%2Fcontentblocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/primaryobjects%2Fcontentblocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/primaryobjects%2Fcontentblocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/primaryobjects%2Fcontentblocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/primaryobjects","download_url":"https://codeload.github.com/primaryobjects/contentblocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221828398,"owners_count":16887338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T22:01:13.223Z","updated_at":"2024-10-29T21:24:29.694Z","avatar_url":"https://github.com/primaryobjects.png","language":"JavaScript","readme":"ContentBlocks\n--------\n\nCreate simple editable CMS content blocks in node.js. Wrapper for Create.js CMS framework.\n\nContentBlocks is a wrapper for the Create.js CMS interface. It allows you to define CMS editable content blocks within your web pages by including HTML5 tags around your content. After adding the markup, simply click Edit in the Create.js toolbar to edit your content in-line on the page. Click Save to persist the data to your CMS back-end web service.\n\nContentBlocks includes a node.js module to pre-render CMS content upon page-load. It also includes pre-defined routes and REST web service integration for saving content back to the CMS. In short, ContentBlocks makes it easy to use the Create.js CMS framework in node.js\n\nDemo http://contentblocks.herokuapp.com\n\nDemo Source https://github.com/primaryobjects/contentblocks-demo\n\n```bash\n$ npm install contentblocks\n```\n\n## About Create.js\n\nFrom the Create.js web site @ http://createjs.org\n\"Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.\"\n\n## Usage\n\n### app.js\n\n```\nvar app = express();\nvar contentBlocks = require('contentblocks')({ app: app, host: 'red-ant.herokuapp.com', port: 80, pathFind: '/v1/nest/find?q={\"@subject\":\"[id]\"}', pathPost: '/v1/nest', pathPut: '/v1/nest/[id]', pathDelete: '/v1/nest/[id]' });\n\napp.use(contentBlocks.render); // Place this line in your app.use() section, so it can pre-render content.\n```\n\n### web site\n\nCopy the contents of node_modules/contentblocks/scripts into your web site javascript folder. These contain the CMS user interface controls.\n\nCopy the contents of node_modules/contentblocks/css into your web site css folder. These contain the CMS user interface styles.\n\nIn your web site footer view (footer.jade, etc), include the scripts and css:\n\n```\nscript(src='http://code.jquery.com/ui/1.9.2/jquery-ui.js')\nscript(src='/scripts/underscore-min.js')\nscript(src='/scripts/backbone-min.js')\nscript(src='/scripts/vie-min.js')\nscript(src='/scripts/jquery.tagsinput.min.js')\nscript(src='/scripts/jquery.rdfquery.min.js')\nscript(src='/scripts/annotate-min.js')\nscript(src='/scripts/rangy-core-1.2.3.js')\nscript(src='/scripts/hallo-min.js')\nscript(src='/scripts/aloha/lib/require.js')\nscript(src='/scripts/aloha/lib/aloha-full.min.js', data-aloha-plugins='common/ui,common/format,common/link,common/image,extra/sourceview')\nscript(src='/scripts/create-min.js')\nscript(src='/scripts/contentblocks.js')\n\nlink(rel='stylesheet', href='/css/aloha/css/aloha.css')\nlink(rel='stylesheet', href='/css/aloha/css/aloha-common-extra.css')\nlink(rel='stylesheet', href='/css/aloha/css/aloha-core.css')\nlink(rel='stylesheet', href='/css/aloha/css/aloha-reset.css')\nlink(rel='stylesheet', href='/css/aloha/css/aloha-sidebar.css')\nlink(rel='stylesheet', href='/css/create-ui/css/create-ui.css')\nlink(rel='stylesheet', href='/css/midgard-notifications/midgardnotif.css')\n```\n\n## Configuration\n\nTwo changes need to be made to point to your own REST web service url for persisting the CMS content:\n\n1. Replace the host and paths in the require('contentBlocks')({ ... }) statement, with your own CMS REST urls. ContentBlocks and Create.js are compatible with any CMS backend system that provides a REST interface (GET/POST/PUT/DELETE) for managing content.\n\n2. Replace the value for \"restUrl\" in /scripts/contentblocks.js to point to your web service \"find\" method.\n\nFor step 1, the paths should be specified as shown below. Use [id] as a placeholder in the url for where the actual content block id will be inserted automatically:\n\npathFind: web service path to Find method, example: '/v1/nest/find?q={\"@subject\":\"[id]\"}'\n\npathPost: web service path to Insert (POST) method, example: '/v1/nest'\n\npathPut: web service path to Update (PUT) method, example: '/v1/nest/[id]'\n\npathDelete: web service path to Delete (DELETE) method, example: '/v1/nest/[id]'\n\n## Configuration for localhost REST Service\n\nIf you are not using a remote REST service to store your CMS data, you can instead have contentblocks post back to your local app to load and save content blocks. For a working example, see the ContentBlocks Demo on [localhost](https://github.com/primaryobjects/contentblocks-demo/tree/localhost).\n\nTo do this, make the following changes:\n\n1. In [scripts/contentblocks.js](https://github.com/primaryobjects/contentblocks-demo/blob/localhost/public/scripts/contentblocks.js#L6), set the value for \"restUrl\" to point to localhost, For example:\n```\nvar restUrl = 'http://localhost:3000/cms/find?q={\"@subject\": \"[id]\"}';\n```\n\n2. In [scripts/contentblocks.js](https://github.com/primaryobjects/contentblocks-demo/blob/localhost/public/scripts/contentblocks.js#L84) line 84, change the dataType from \"jsonp\" to \"json\":\n```\ndataType: 'json',\n```\n\n3. In your [app.js](https://github.com/primaryobjects/contentblocks-demo/blob/localhost/app.js#L16), set the contentBlocks initialization line to point to localhost. For example:\n```\nvar contentBlocks = require('contentblocks')({ app: app, host: 'localhost', port: 3000, pathFind: '/cms/find?q={\"@subject\":\"[id]\"}', pathPost: '/cms', pathPut: '/cms/[id]', pathDelete: '/cms/[id]' });\n```\n\n4. In [app.js](https://github.com/primaryobjects/contentblocks-demo/blob/localhost/app.js#L8), at the top of the file, add a line to include your routes code:\n```\nvar cms = require('./routes/cms');\n```\n\n5. In [app.js](https://github.com/primaryobjects/contentblocks-demo/blob/localhost/app.js#L33-L38), add routes for the CMS calls:\n```\n// REST API routes.\napp.get('/cms/find', cms.find);\napp.get('/cms/:itemId', cms.get);\napp.put('/cms/:itemId', cms.update);\napp.delete('/cms/:itemId', cms.delete);\napp.post('/cms', cms.insert);\n```\n\n6. Create a folder under /routes/cms, with a file [index.js](https://github.com/primaryobjects/contentblocks-demo/blob/localhost/routes/cms/index.js), that will contain your route controller code. These methods will respond to the get, post, put, delete to load data from your database. See the ContentBlocks Demo [localhost](https://github.com/primaryobjects/contentblocks-demo/tree/localhost) for a complete working example.\n\n## Creating a CMS Content Block\n\nThe following Jade (HTML, etc) markup may be used to indicate editable CMS content blocks:\n\n```\n    #myContentBlock(style='font-size:16px; color:#00000;', about='MyContentBlock')\n        div(property='content')\n            if typeof(MyContentBlock_content) !== 'undefined'\n                != MyContentBlock_content\n            else\n                | [edit here]\n```\n\nFor more details on available markup, see http://createjs.org/guide/#rdfa\n\n## Showing the Controls to Administrator Users Only\n\nTo restrict editing of the CMS content to specific users, you can use a url parameter to enable and disable the CMS controls. For example, the following url (containing the parameter admin=1) could allow editing of the CMS blocks on the page:\n\n```\nhttp://localhost:3000/?admin=1\n```\n\nTo do this, first wrap your script and css references in an if/then block, as shown below. This could be placed in your footer.jade file:\n\n```\nif isAdmin\n    script(src='http://code.jquery.com/ui/1.9.2/jquery-ui.js')\n    script(src='/scripts/underscore-min.js')\n    script(src='/scripts/backbone-min.js')\n    script(src='/scripts/vie-min.js')\n    script(src='/scripts/jquery.tagsinput.min.js')\n    script(src='/scripts/jquery.rdfquery.min.js')\n    script(src='/scripts/annotate-min.js')\n    script(src='/scripts/rangy-core-1.2.3.js')\n    script(src='/scripts/hallo-min.js')\n    script(src='/scripts/aloha/lib/require.js')\n    script(src='/scripts/aloha/lib/aloha-full.min.js', data-aloha-plugins='common/ui,common/format,common/link,common/image,extra/sourceview')\n    script(src='/scripts/create-min.js')\n    script(src='/scripts/contentblocks.js')\n\n    link(rel='stylesheet', href='/css/aloha/css/aloha.css')\n    link(rel='stylesheet', href='/css/aloha/css/aloha-common-extra.css')\n    link(rel='stylesheet', href='/css/aloha/css/aloha-core.css')\n    link(rel='stylesheet', href='/css/aloha/css/aloha-reset.css')\n    link(rel='stylesheet', href='/css/aloha/css/aloha-sidebar.css')\n    link(rel='stylesheet', href='/css/create-ui/css/create-ui.css')\n    link(rel='stylesheet', href='/css/midgard-notifications/midgardnotif.css')\n```\n\nNext, in the route for your view, include a value for isAdmin, indicating if the current user should be able to edit the CMS blocks, as follows:\n\n```\nvar remoteip = require('remoteip');\n\nexports.index = function (req, res) {\n    res.render('index', { isAdmin: isCurrentUserAdministrator(req) });\n};\n\nfunction isCurrentUserAdministrator(req) {\n    var adminIp = remoteip.get(req);\n    return ((adminIp == '123.456.789.012' || adminIp == '127.0.0.1') \u0026\u0026 req.query['admin'] == '1');\n}\n```\n\nThat's it! If you load the page without the url parameter, you should not see the CMS controls. If you add the parameter admin=1 to the url, you should see the controls displayed.\n\n## Notes\n\nAfter setup, refresh your web page and you should see the Create.js toolbar along the top of the page. Click Edit to begin editing the content and click Save to save the content to the CMS. Upon clicking Save, the ContentBlocks module will call the REST web service url that you defined in the setup in order to persist the content to the CMS database.\n\nYou are welcome to use the demo REST web service url (red-ant.herokuapp.com, which loads and saves JSON objects to mongodb via REST). However, there is no gaurantee that the web service will remain active. It is recommended to point to your own REST web service, mongodb interface, or CMS.\n\n## Author\n\nKory Becker\nhttp://www.primaryobjects.com\n\nView @ GitHub\nhttps://github.com/primaryobjects/contentblocks\n","funding_links":["https://github.com/sponsors/primaryobjects"],"categories":["JavaScript","others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprimaryobjects%2Fcontentblocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprimaryobjects%2Fcontentblocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprimaryobjects%2Fcontentblocks/lists"}