gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: miscellaneous fixes and documentation updates (#702)

Browse Source
This commit is contained in:
Denys Konovalov 2023-04-15 20:32:40 +02:00 committed by GitHub
parent d388c1fbcb
commit 778e6bac75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 165 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/lib/hooks/useMediaFiles.ts
View File

@ -31,7 +31,6 @@ export default function useMediaFiles(field?: MediaField, currentFolder?: string
);
const folderSupport = useFolderSupport({ config, collection, collectionFile, field });
console.log('FOLDER_SUPPORT', folderSupport);
useEffect(() => {
if (!currentFolder || !config || !entry) {

8
packages/core/src/locales/de/index.ts
View File

@ -232,6 +232,14 @@ const de: LocalePhrasesRoot = {
deleteSelected: 'Ausgewähltes Element löschen',
chooseSelected: 'Ausgewähltes Element verwenden',
},
folderSupport: {
newFolder: 'Neuer Ordner',
createNewFolder: 'Neuen Ordner erstellen',
enterFolderName: 'Ordnernamen eingeben...',
home: 'Start',
up: 'Zurück',
upToFolder: 'Zurück zu %{folder}',
},
},
ui: {
common: {

2
packages/demo/src/cms.jsx
View File

@ -209,7 +209,7 @@ cms.registerWidget("relationKitchenSinkPost", "relation", RelationKitchenSinkPos
cms.registerAdditionalLink({
id: "docs",
title: "Static CMS Docs",
data: "https://staticjsCMS.netlify.app/",
data: "https://staticcms.org",
options: {
icon: "page",
},

2
packages/docs/content/config.json
View File

@ -1,5 +1,5 @@
{
"base_url": "https://static-cms.netlify.app/",
"base_url": "https://staticcms.org/",
"repo_url": "https://github.com/StaticJsCMS/static-cms",
"site_title": "Static CMS | Open Source Content Management System",
"site_description": "Open source content management for your Git workflow. Use Static CMS with any static site generator for a faster and more flexible web project.",

2
packages/docs/content/docs/additional-links.mdx
View File

@ -8,7 +8,7 @@ The Static CMS exposes a `window.CMS` global object that you can use to register
### React Components Inline
The `registerPreviewTemplate` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
The `registerAdditionalLink` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes some constructs globally to allow you to create components inline: `h` (alias for React.createElement) as well some basic hooks (`useState`, `useMemo`, `useEffect`, `useCallback`).

52
packages/docs/content/docs/beta-features.mdx
View File

@ -27,58 +27,6 @@ Nested collections is a beta feature that allows a folder collection to show a n
See [Nested Collections](/docs/collection-types#nested-collections) for more information.
## Commit Message Templates
You can customize the templates used by Static CMS to generate commit messages by setting the `commit_messages` option under `backend` in your Static CMS `config`.
Template tags wrapped in curly braces will be expanded to include information about the file changed by the commit. For example, `{{path}}` will include the full path to the file changed.
Setting up your Static CMS `config` to recreate the default values would look like this:
<CodeTabs>
```yaml
backend:
commit_messages:
create: Create {{collection}} "{{slug}}"
update: Update {{collection}} "{{slug}}"
delete: Delete {{collection}} "{{slug}}"
uploadMedia: Upload "{{path}}"
deleteMedia: Delete "{{path}}"
```
```js
backend: {
commit_messages: {
create: 'Create {{collection}} "{{slug}}"',
update: 'Update {{collection}} "{{slug}}"',
delete: 'Delete {{collection}} "{{slug}}"',
uploadMedia: 'Upload "{{path}}"',
deleteMedia: 'Delete "{{path}}"',
},
},
```
</CodeTabs>
Static CMS generates the following commit types:
| Commit type | When is it triggered? | Available template tags |
| ------------- | ---------------------------- | ----------------------------------------------------------- |
| `create` | A new entry is created | `slug`, `path`, `collection`, `author-login`, `author-name` |
| `update` | An existing entry is changed | `slug`, `path`, `collection`, `author-login`, `author-name` |
| `delete` | An existing entry is deleted | `slug`, `path`, `collection`, `author-login`, `author-name` |
| `uploadMedia` | A media file is uploaded | `path`, `author-login`, `author-name` |
| `deleteMedia` | A media file is deleted | `path`, `author-login`, `author-name` |
Template tags produce the following output:
- `{{slug}}`: the url-safe filename of the entry changed
- `{{collection}}`: the name of the collection containing the entry changed
- `{{path}}`: the full path to the file changed
- `{{message}}`: the relevant message based on the current change (e.g. the `create` message when an entry is created)
- `{{author-login}}`: the login/username of the author
- `{{author-name}}`: the full name of the author (might be empty based on the user's profile)
## Image widget file size limit
You can set a limit to as what the maximum file size of a file is that users can upload directly into a image field.

55
packages/docs/content/docs/configuration-options.mdx
View File

@ -27,6 +27,61 @@ The `backend` option specifies how to access the content for your site, includin
**Note**: no matter where you access Static CMS — whether running locally, in a staging environment, or in your published site — it will always fetch and commit files in your hosted repository (for example, on GitHub), on the branch you configured in your Static CMS config file. This means that content fetched in the admin UI will match the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI will save directly to the hosted repository, even if you're running the UI locally or in staging. If you want to have your local CMS write to a local repository, [try the local_backend setting](/docs/local-backend).
### Commit Message Templates
You can customize the templates used by Static CMS to generate commit messages by setting the `commit_messages` option.
Template tags wrapped in curly braces will be expanded to include information about the file changed by the commit. For example, `{{path}}` will include the full path to the file changed.
#### Example
<CodeTabs>
```yaml
backend:
commit_messages:
create: Create {{collection}} "{{slug}}"
update: Update {{collection}} "{{slug}}"
delete: Delete {{collection}} "{{slug}}"
uploadMedia: Upload "{{path}}"
deleteMedia: Delete "{{path}}"
```
```js
backend: {
commit_messages: {
create: 'Create {{collection}} "{{slug}}"',
update: 'Update {{collection}} "{{slug}}"',
delete: 'Delete {{collection}} "{{slug}}"',
uploadMedia: 'Upload "{{path}}"',
deleteMedia: 'Delete "{{path}}"',
},
},
```
</CodeTabs>
#### Commit Types
Static CMS generates the following commit types:
| Commit type | When is it triggered? | Available template tags |
| ------------- | ---------------------------- | ----------------------------------------------------------- |
| `create` | A new entry is created | `slug`, `path`, `collection`, `author-login`, `author-name` |
| `update` | An existing entry is changed | `slug`, `path`, `collection`, `author-login`, `author-name` |
| `delete` | An existing entry is deleted | `slug`, `path`, `collection`, `author-login`, `author-name` |
| `uploadMedia` | A media file is uploaded | `path`, `author-login`, `author-name` |
| `deleteMedia` | A media file is deleted | `path`, `author-login`, `author-name` |
#### Template Tags
Template tags produce the following output:
- `{{slug}}`: url-safe filename of the changed entry
- `{{collection}}`: name of the collection containing the changed entry
- `{{path}}`: full path to the changed file
- `{{author-login}}`: login/username of the author
- `{{author-name}}`: full name of the author (might be empty based on the user's profile)
## Media and Public Folders
Static CMS users can upload files to your repository using the Media Gallery. The following settings specify where these files are saved, and where they can be accessed on your built site.

10
packages/docs/content/docs/custom-previews.mdx
View File

@ -4,11 +4,11 @@ title: Creating Custom Previews
weight: 50
---
The Static CMS exposes a `window.CMS` global object that you can use to register custom previews for an entire collection (or file within a file collection) via `registerPreviewTemplate` (editor view) and `registerPreviewCard` (collection view).
The Static CMS exposes a `window.CMS` global object that you can use to register custom previews for an entire collection (or file within a file collection) via `registerPreviewTemplate` (editor view) and `registerPreviewCard` / `registerFieldPreview` (collection view).
### React Components Inline
The `registerPreviewTemplate` and `registerPreviewCard` require you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
`registerPreviewTemplate`, `registerPreviewCard` and `registerFieldPreview` require you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes some constructs globally to allow you to create components inline: `h` (alias for React.createElement) as well some basic hooks (`useState`, `useMemo`, `useEffect`, `useCallback`).
@ -42,7 +42,7 @@ The following parameters will be passed to your `react_component` during render:
```js
const PostPreview = ({ widgetFor, entry, collection, fields }) => {
const imageField = useMemo(
const imageField = useMemo(() =>
fields.find(field => field.name === 'image'),
[fields],
);
@ -64,7 +64,7 @@ CMS.registerPreviewTemplate('posts', PostPreview);
import CMS, { useMediaAsset } from '@staticcms/core';
const PostPreview = ({ widgetFor, entry, collection, fields }) => {
const imageField = useMemo(
const imageField = useMemo(() =>
fields.find(field => field.name === 'image'),
[fields],
);
@ -97,7 +97,7 @@ interface Post {
}
const PostPreview = ({ widgetFor, entry, collection, fields }: TemplatePreviewProps<Post>) => {
const imageField = useMemo(
const imageField = useMemo(() =>
fields.find(field => field.name === 'image'),
[fields],
);

2
packages/docs/content/docs/custom-widgets.mdx
View File

@ -8,7 +8,7 @@ The Static CMS exposes a `window.CMS` global object that you can use to register
### React Components Inline
The `registerPreviewTemplate` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
The `registerWidget` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes some constructs globally to allow you to create components inline: `h` (alias for React.createElement) as well some basic hooks (`useState`, `useMemo`, `useEffect`, `useCallback`).

5
packages/docs/content/docs/typescript.mdx
View File

@ -107,7 +107,10 @@ const PostPreview: FC<TemplatePreviewProps<PostPreviewData>> = ({
}) => {
const dateString = useMemo(() => entry.data.date, [entry.data.date]);
const imageField = useMemo(fields.find((field) => field.name === 'image'), [fields]);
const imageField = useMemo(() =>
fields.find((field) => field.name === 'image'),
[fields]
);
const image = useMediaAsset(entry.data.image ?? '', collection, imageField, entry);
return (

89
packages/docs/content/docs/widget-markdown.mdx
View File

@ -213,3 +213,92 @@ CMS.registerShortcode<YouTubeShortcodeProps>('youtube', {
```
</CodeTabs>
### Interacting With The Media Library
If you want to use the media library in your shortcode you will need to use the `useMediaInsert` and `useMediaAsset` hooks.
- `useMediaInsert` - Takes the current url to your media, details about your field and a callback method for when new media is uploaded.
- `useMediaAsset` - Transforms your stored url into a usable url for displaying as a preview.
<CodeTabs>
```js
const ImageControl = ({ src, onChange, controlProps }) => {
const { collection, field, entry } = controlProps;
const handleChange = ({ path }) => {
onChange({ src: path });
};
const handleOpenMediaLibrary = useMediaInsert(src, { collection: collection, field }, handleChange);
const assetSource = useMediaAsset(src , collection, field, entry);
return [
h('button', { type: 'button', onClick: handleOpenMediaLibrary }, 'Upload'),
h('img', { role: 'presentation', src: assetSource }),
];
};
```
```jsx
import useMediaAsset from '@staticcms/core/lib/hooks/useMediaAsset';
import useMediaInsert from '@staticcms/core/lib/hooks/useMediaInsert';
const ImageControl = ({ src, onChange, controlProps }) => {
const { collection, field, entry } = controlProps;
const handleChange = ({ path }) => {
onChange({ src: path });
};
const handleOpenMediaLibrary = useMediaInsert(src ,{ collection: collection, field }, handleChange);
const assetSource = useMediaAsset(src , collection, field, entry);
return (
<>
<button type="button" onClick={handleOpenMediaLibrary}>
Upload
</button>
<img role="presentation" src={assetSource} />
</>
);
};
```
```tsx
import useMediaAsset from '@staticcms/core/lib/hooks/useMediaAsset';
import useMediaInsert from '@staticcms/core/lib/hooks/useMediaInsert';
import type { WidgetControlProps, MediaPath } from '@staticcms/core/interface';
import type { FC } from 'react';
const FileControl: FC<WidgetControlProps<string, MyField>> = ({
src,
onChange,
controlProps
}) => {
const { collection, field, entry } = controlProps;
const handleChange = ({ path }: MediaPath) => {
onChange({ src: path });
};
const handleOpenMediaLibrary = useMediaInsert(src, { collection, field }, handleChange);
const assetSource = useMediaAsset(value, collection, field, entry);
return (
<>
<button type="button" onClick={handleOpenMediaLibrary}>
Upload
</button>
<img role="presentation" src={assetSource} />
</>
);
};
```
</CodeTabs>