Skip to content

Commit

Permalink
some language fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
ksuess committed Nov 3, 2024
1 parent d1249b0 commit 119e459
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 15 deletions.
2 changes: 1 addition & 1 deletion docs/mastering-plone/volto_listing_variation.md
Original file line number Diff line number Diff line change
Expand Up @@ -198,5 +198,5 @@ TalkListingBlockVariation.propTypes = {
export default TalkListingBlockVariation;
```

This is a very basic block variation.
This is a basic block variation.
Block variations can have variations: See {doc}`plone6docs:volto/blocks/extensions` for advanced techniques.
12 changes: 6 additions & 6 deletions docs/mastering-plone/volto_overrides.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ After a restart you can change this Footer component and the changes are shown i

We want to show the date a News Item is published.
This way visitors can see at a glance if they are looking at current news.
This information is not shown by default.
This information isn't shown by default.
So you need to customize the way a News Item is rendered.

A News Item has date attributes.
Expand Down Expand Up @@ -198,7 +198,7 @@ To display the date add the following before the text:
```

This will render something like *2022-10-02T21:58:54*.
Not very user friendly.
This isn't user friendly.
Let's use one of many helpers available in Volto.

Import the component `FormattedDate` from `@plone/volto/components` at the top of the file and use it to format the date in a human readable format.
Expand Down Expand Up @@ -301,7 +301,7 @@ Now another issue appears. There are various dates associated with any content o
- The date the item is published `content.effective`

In fact you most likely want to show the date when the item has been published.
But while the item is not yet published, that value is not yet set and you will get an error.
But while the item isn't yet published, this value isn't yet set and you will get an error.
So we'll add some simple logic to show the effective date only if it exists.

```jsx
Expand All @@ -312,14 +312,14 @@ So we'll add some simple logic to show the effective date only if it exists.
)}
```

As we are in the HTML part of our React component, we surround the JavaScript code with curly braces.
As we're in the HTML part of our React component, we surround the JavaScript code with curly braces.
Inside JavaScript we embrace HTML in rounded braces.


## Summary

- Component shadowing allows you to modify and extend views and other components in Volto.
- It is a powerful mechanism making changes without the need of complex configuration or maintaining a fork of the code.
- With component shadowing views and other components in Volto can be modified and extended.
- Component shadowing a powerful mechanism making changes without the need of complex configuration or maintaining a fork of the code.
- You need to restart Volto when you add a new overriding.

```{seealso}
Expand Down
16 changes: 8 additions & 8 deletions docs/mastering-plone/volto_talkview.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ myst:

(volto-talkview-label)=

# Volto View Component: A Default View for a "Talk"
# Volto view component: A default view for a "Talk"

```{card}
In this part we will:
Expand Down Expand Up @@ -44,9 +44,9 @@ More info in {doc}`code`

## Creating and registering a new view component

The default visualization for our new content type `talk` lists the field values according to the type schema.
The default visualization for the new content type `talk` lists the field values according to the type schema.

Since we want to show the talk data in a nice way, display the speaker portrait and add some components, we write a custom view for type talk.
To show the talk data in a nice way, display the speaker portrait and add some components, we create a custom view for type talk.

In the folder {file}`frontend` you need to add a new file {file}`packages/volto-ploneconf/src/components/Views/Talk.jsx`.
Create the folder {file}`Views` first.
Expand All @@ -72,7 +72,7 @@ import TalkView from './Views/Talk';
export { TalkView };
```

This is a common practice and allows us to import the new view component as `import { TalkView } from './components';` instead of `import { TalkView } from './components/Views/Talk';`.
This is a common practice and allows to import the new view component as `import { TalkView } from './components';` instead of `import { TalkView } from './components/Views/Talk';`.

Now register the new component as the default view for `talks` in {file}`packages/volto-ploneconfig/src/index.js`.

Expand All @@ -98,12 +98,12 @@ export default applyConfig;
- This extends the Volto default setting `config.views.contentTypesViews` with the key/value pair `talk: TalkView`.
- It uses the [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to take the default settings and overrides what needs to be overridden.

When Volto is restarted (with `make start`) it picks up these configuration modifications and displays the placeholder in place of the previously used default view.
A restarted Volto (with `make start`) picks up these configuration modifications and displays the placeholder in place of the previously used default view.


## Enhancing the view

Now we will improve this view step by step.
Now we're improving this view step by step.
First we reuse the component `DefaultView.jsx` in our custom view:

```{code-block} jsx
Expand Down Expand Up @@ -136,7 +136,7 @@ export default TalkView;
```

- `<> </>` is a fragment. The return value of React needs to be one single element.
- The variable `props` is used to receive data from the parent component.
- The variable `props` receives data from the parent component.
As the TalkView component is registered as a content type view, it receives the content data and some more.
We will use the content part.
So we introduce a constant `content` to be more explicit.
Expand All @@ -156,7 +156,7 @@ export default TalkView;

Please check the 'components' tab of Google developer tools for property `content` of the `TalkView` component to see the field values of your talk instance.

The result is not really beautiful, because the text sticks to the left border of the page.
The result isn't beautiful, because the text sticks to the left border of the page.
You need to wrap it in a `Container` to get the same styling as the content of `DefaultView`:

```{code-block} jsx
Expand Down

0 comments on commit 119e459

Please sign in to comment.