From 4057730d5543ab0b25b46927e088bce3f6cc4e34 Mon Sep 17 00:00:00 2001 From: maxlkatze Date: Tue, 23 Jul 2024 12:15:32 +0200 Subject: [PATCH] feat(katzencore): Removed projectName property, added storageKey --- README.md | 43 ++++++++++++++++++++++++------------------- src/module.ts | 28 +++++++++++++++++----------- 2 files changed, 41 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index b672043..e210cd6 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Find and replace all on all files (CMD+SHIFT+F): - Description: An easy to setup in APP CMS --> -# CmsKatze - A Nuxt Module CMS +# Katze CMS - A Nuxt Module Headless CMS [![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] @@ -20,16 +20,22 @@ Find and replace all on all files (CMD+SHIFT+F): -## Warning -In active development, not ready for production use. +## Description +Katze is a Nuxt module that provides a headless CMS for your Nuxt app. +Edit content directly in your Nuxt App, store your content in an [Unstorage](https://unstorage.unjs.io/) supported storage +and deploy your content to the Edge or host it on your server. + +### Warning +**In active development, not ready for production use.** _Feel free to contribute to this project by creating a pull request.🐱❤️_ ## Features -- 📝  In app CMS editor for easy content management -- 🎨  Customizable content blocks -- 📦  Easy to setup and use +- 📝  Edit content in your Nuxt app with /cms +- 🚀  Unstorage KV storage for edge deployment +- 🎨  Customisable content blocks (text, rich text, image) +- 📦  Easy to set up and use, just one configuration file ## Quick Setup @@ -53,16 +59,15 @@ Following Route is now available in your Vue app: ![CmsKatze](/documentation/cms_showcase.png) ### Understanding Editable Routes -Every Route inside your Nuxt Router is displayed in the CMS editor. -Currently there is no way to hide away any Routes. +Every route in your Nuxt Router is displayed in the CMS editor ![Edit Pages](/documentation/pages_showcase.png) ### Editable Components -By defining a Composable inside your Vue Component, you can define an editable entry. +By defining a composable within your Vue component, you can define an editable item. #### The importance of the kat-e attribute The e-kat attribute is used to define the key of the editable element. -The CMS editor uses this key to identify the element and display correct positions and types. +The CMS editor uses this key to identify the element and display its correct position and type. #### Plain Text Component ```vue @@ -91,7 +96,7 @@ The CMS editor uses this key to identify the element and display correct positio ``` ##### The katze-rich-text component -The katze-rich-text component different then v-html allows the Content to be rendered on the server and client at the same time. +The katze-rich-text component, unlike v-html, allows content to be rendered on the server and client at the same time. This is important for SEO and performance reasons. #### Image Component @@ -124,19 +129,19 @@ You can configure Katze by adding the `katze` key to `nuxt.config.js` }, ], secret: 'your secret key for token encryption', - projectLocation: './', // default: "./", - projectName: 'YourSiteName', + projectLocation: './', // default: "./" storage: { type: 'fs', // default: "fs" | Unstorage Types supported options: { // UNSTORAGE OPTIONS } }, - deployHookURL: 'https://yourdeployhookurl.com' + storageKey: 'storageKey', //default: "content.katze.json" | The key to store the content in the storage + deployHookURL: 'https://yourdeployhookurl.com' // default: "" } ``` #### Users -Users are used to authenticate the CMS editor. The default user is `admin` with the password `admin`. +The default user is `admin` with the password `admin`. #### Secret The secret is used to encrypt the Login token for the CMS editor. @@ -144,11 +149,11 @@ The secret is used to encrypt the Login token for the CMS editor. #### Project Location The project location is used to store the content.katze.json fileand to locate the public folder. -#### Project Name -The project name is used to identify the project in the Storage. - #### Storage -The storage can be configured with unstorage drivers. +You can configure storage with unstorage drivers. + +#### Storage Key +The key for the content value inside the storage. Can be left as default, when using storages with a base prefix. ##### Supported Unstorage Drivers - azure-app-configuration - [Documentation](https://unstorage.unjs.io/drivers/azure) diff --git a/src/module.ts b/src/module.ts index c16d74a..73aa9bd 100644 --- a/src/module.ts +++ b/src/module.ts @@ -22,12 +22,12 @@ export interface CmsUser { export interface ModuleOptions { users: CmsUser[] secret: string - projectName: string projectLocation: string storage: { type: 'azure-app-configuration' | 'cloudflare-kv-binding' | 'fs' | 'github' | 'mongodb' | 'netlify-blobs' | 'planetscale' | 'redis' | 'vercel-kv' options: object } + storageKey: string deployHookURL?: string } @@ -45,7 +45,6 @@ export default defineNuxtModule({ }, ], secret: 'secret', - projectName: 'defaultProject', projectLocation: './', storage: { type: 'fs', @@ -53,15 +52,16 @@ export default defineNuxtModule({ base: './', }, }, + storageKey: 'katze_content.json', }, async setup(_options, _nuxt) { const { resolve } = createResolver(import.meta.url) updateCheck().then( (latestVersion) => { - console.warn('\x1B[41m There is a new version of KatzeCMS available \x1B[0m') - console.info('\x1B[42m Please update your package with \x1B[0m npm i @maxlkatze/cms@latest') - console.info('\x1B[42m If you\'re already on the @latest version run: \x1B[0m npm update @maxlkatze/cms') - console.info('\x1B[42m Current version: ' + pkg.version + ' Latest version: ' + latestVersion + '\x1B[0m') + katzeError('There is a new version of Katze available') + console.info('\x1B[43m\x1B[30m Please update your package with \x1B[0m npm i @maxlkatze/cms^' + latestVersion) + console.info('\x1B[43m\x1B[30m If you\'re already on the @latest version run: \x1B[0m npm update') + console.info('\x1B[43m\x1B[30m Current version: ' + pkg.version + ' Latest version: ' + latestVersion + '\x1B[0m') }, ) @@ -95,19 +95,17 @@ export default defineNuxtModule({ _nuxt.options.runtimeConfig.users = _options.users _nuxt.options.runtimeConfig.secret = _options.secret _nuxt.options.runtimeConfig.storage = _options.storage - _nuxt.options.runtimeConfig.projectName = _options.projectName + _nuxt.options.runtimeConfig.storageKey = _options.storageKey _nuxt.options.runtimeConfig.projectLocation = _options.projectLocation + (_options.projectLocation.endsWith('/') ? '' : '/') - const storageKey = _options.projectName + '_katze_content' - _nuxt.options.runtimeConfig.storageKey = storageKey _nuxt.options.runtimeConfig.deployHookURL = _options.deployHookURL const contentStorage = await useContentStorage(_nuxt.options.runtimeConfig) - let content = await contentStorage.getItem(storageKey) + let content = await contentStorage.getItem(_options.storageKey) if (content === null) { content = {} } _nuxt.options.runtimeConfig.public.content = content - // console.info('Katze loaded ' + Object.entries(content).length + ' entries from content storage') + katzeLog('Loaded ' + Object.entries(content).length + ' entries from [' + _options.storage.type + '] storage') addRouteMiddleware({ name: 'auth', @@ -194,3 +192,11 @@ const updateCheck = async () => { }) }) } + +const katzeLog = (message: string) => { + console.log('\x1B[42m\x1B[30m Katze \x1B[0m ' + message) +} + +const katzeError = (message: string) => { + console.log('\x1B[41m\x1B[30m !Katze \x1B[0m ' + message) +}