Skip to content

Commit

Permalink
Documentation fixes
Browse files Browse the repository at this point in the history
Co-authored-by: Alan Semenov <alansemenov@users.noreply.github.com>
  • Loading branch information
pmi and alansemenov committed Sep 12, 2023
1 parent 8769a1f commit 0c80f25
Show file tree
Hide file tree
Showing 10 changed files with 22 additions and 25 deletions.
6 changes: 3 additions & 3 deletions docs/api-primer.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ Based on the developer environment you created in the previous chapter, you'll n

== Headless API

Enonic provides and out-of-the-box GraphQL API that dynamically to reflects your applications and content.The API is highly flexible, and may even be customized.For a deep dive, visit the link:https://developer.enonic.com/docs/guillotine/stable[Guillotine documentation].
Enonic provides an out-of-the-box GraphQL API that dynamically reflects changes in your applications and content.The API is highly flexible, and may even be customized.For a deep dive, visit the link:https://developer.enonic.com/docs/guillotine/stable[Guillotine documentation].

TIP: New to GraphQL?Check out the link:https://graphql.org/[GraphQL documentation]

== Task: Install API

The headless API can be installed via an application called `Guillotine`.

. Install via `XP menu` -> `Applications` -> `Install`.
Search for `Guillotine` and install it.
. Install via XP menu (XP icon in the top right corner) -> `Applications` -> `Install`.
Search for `Guillotine` and install the app.
+
. Once installed, Guillotine will automatically create and expose a GraphQL API for your application and project.
You can verify that Guillotine is working by opening Content Studio.
Expand Down
2 changes: 1 addition & 1 deletion docs/deployment.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ TIP: Check the Vercel function logs if you are not getting the expected result.
== Task: Link Content Studio to Vercel
With the front-end running, you can link it to Content Studio to activate the preview, and start building pages once again.

TIP: To save time, you may export content from your local machine, and importing it to the server using the https://market.enonic.com/vendors/glenn-ricaud/data-toolbox[Data Toolbox app].
TIP: To save time, you may export content from your local machine and import it to the server using the https://market.enonic.com/vendors/glenn-ricaud/data-toolbox[Data Toolbox app].

. **Install the Next.XP app** `Solution` -> `Applications` -> `Install` -> Search for `Next.XP`, select it an click install
. **Add configuration**.
Expand Down
16 changes: 7 additions & 9 deletions docs/i18n.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ image:content-studio-filmdb.png[title="Film DB project",width=1024px]

Next, let's turn on multi-language support in Next.js.

. Start by activating Next.js' multilanguage support by adding a few lintes to the `next.config.js` file:
. Start by activating Next.js' multilanguage support by adding a few lines to the `next.config.js` file:
+
.next.config.js
[source,JSON]
Expand Down Expand Up @@ -74,9 +74,7 @@ Let's break down the syntax.
For each comma separated entry, you will find the following pattern: `<locale>:<repository>/<sitekey>`.
From the example above `no:moviedb-no/hmdb`.
+
The first entry in the list may skip the locale.
As it will map to the `defaultLocale` specified in `next.config.js` earlier.
In our case,`en`.
The first entry in the list may skip the locale, as it will map to the `defaultLocale` specified in `next.config.js` earlier (in our case, `en`).
+
NOTE: The reason for repeating paths, is that the path may be different in each project/translation.
+
Expand Down Expand Up @@ -106,18 +104,18 @@ image:content-studio-mark-as-ready.png[title="Click tree icon to include all chi
+
. **Verify that your front-end is working**
+
Finally. By adding `/no` i.e. `localhost:4242/no` to the URL of your Next.js server, you should now see the published content from the Norwegian project.
Finally, by adding `/no` (i.e. `localhost:4242/no`) to the URL of your Next.js server you should now see the published content from the Norwegian project.


== Multi front-end setup

In some cases, you may prefer a setup where each language/market is served by a separate Next.js front-end, or you may simply have different sites accessing the same Enonic instance.

Setting up Next.js to do this is just like handling a single language. For Content Studio preview to know which Next.js server to use, means some additional configuration.
Setting up Next.js to do this is just like handling a single language. To enable Content Studio preview to know which Next.js server to use, some additional configuration will be required.

. *Update the Next.xp configuration file* for your Enonic installation by adding multiple entries:
+
NOTE: The sandbox configuration files are located in the sandbox home directory, located in your users home directory at `.enonic/sandboxes/<your-sandbox-name>/home/config`.
NOTE: The sandbox configuration files are located in the sandbox' home directory inside your user's root directory at `.enonic/sandboxes/<your-sandbox-name>/home/config`.
+
.com.enonic.app.nextxp.cfg
[source,properties]
Expand All @@ -136,7 +134,7 @@ nextjs.anotherName.url=https://your.other-next-site.com
# ...
----
+
. *Assign the configuration to your site* by click the pencil icon next to the `Next.XP` app name in the site form, and selecting it from the list of named configurations:
. *Assign the configuration to your site* by clicking the pencil icon next to the `Next.XP` app name in the site form, and selecting it from the list of named configurations:
+
image:content-studio-configure-nextxp.png[title="Form with fields for server url and nextjs token",width=771px]

Expand All @@ -157,7 +155,7 @@ export async function getStaticProps(context: Context): Promise<GetStaticPropsRe
}
----

Additionally, `MetaData` object available in every view, contains `locale` and `defaultLocale` along with other runtime data:
Additionally, `MetaData` object (available in every view) contains `locale` and `defaultLocale` along with other runtime data:

[source,TypeScript,options="nowrap"]
----
Expand Down
2 changes: 1 addition & 1 deletion docs/nextjs-setup.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ ENONIC_API=http://127.0.0.1:8080/site <2>
+
<1> XP projects configuration.
More about it in <<i18n#, multi-language>> support.
<2> The base URL to the content APIs created by Guillotine discussed in <<api-primer#, the API>>, but without project and branch parts.
<2>Base URL of the Guillotine API discussed in <<api-primer#, the API>>, but without project and branch parts.
+
We don't need to specify the project and branch parts here, as the Enonic Adapter will automatically add these based on the runtime environment.
For example, when serving the preview for Content Studio, the project will be set to the currently opened one, and the branch will be set to `draft`.
Expand Down
6 changes: 3 additions & 3 deletions docs/pages.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,13 @@ Content types need to exist in Enonic before an editor can create content. Simil
+
NOTE: The definition of the region `main`, allows Content Studio editors to add components to the page, as you will see later.
+
*Redploy the Enonic app* to register the page component.
*Redeploy the Enonic app* to register the page component.
+
. **Configure page rendering in Next.js**
Rendering a page is similar to rendering a content type.
Go to the folder `./src/components`, create a new folder here - `pages`, and within it a new file called `Main.tsx` containing the following code.
Go to the folder `./src/components`, create a new folder here called `pages`, and inside it a new file called `Main.tsx` containing the following code.
+
WARNING: Make sure to use `src/components/pages`, not `src/pages`!
IMPORTANT: Make sure to use `src/components/pages`, not `src/pages`!
+
.src/components/pages/Main.tsx
[source,TypeScript]
Expand Down
2 changes: 1 addition & 1 deletion docs/parts.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ This means editors can configure it - sorting the items Ascending or Descending.
+
Back in Content Studio, edit the `/hmdb/persons` folder item.
Expand the page preview section by clicking display icon in the top right corner and select `Main page` controller in the dropdown in the middle of page.
Create the page and place the new part into the region (`right-click -> Insert`, or drag-n-drop from the `Insert panel`` on the right hand side).
Create the page and add a new part to the region (`right-click -> Insert`, or drag-n-drop from the `Insert panel`` on the right hand side).
Finally select the `Child list` in the part descriptor dropdown.
+
TIP: The part will appear without making any changes to the front-end, this is because the Enonic Adapter contains fallback part rendering, as long as Next.js is running in DEV mode.
Expand Down
3 changes: 1 addition & 2 deletions docs/release.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ Note, that shortcuts are not displayed in Page Editor because there is nothing t

=== Support Next.js localization

You can now use multi-language Next.js projects with Next.XP.
Both in Content Studio and stand-alone.
You can now use multi-language Next.js projects with Next.XP, both in Content Studio and stand-alone.
All that is needed for that, on top of the `i18n` section in `next.config.js`, is installing `guillotine` application (if you don't have it already) and adding a new environmental variable called `ENONIC_PROJECTS`.
You can read more in the <<upgrading, upgrade section>>.

Expand Down
6 changes: 3 additions & 3 deletions docs/release/upgrade.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,12 @@ nextjs.anotherName.url=https://your.other-next-site.com
# ...
----
+
NOTE: Remember to update properties' values with your own data
NOTE: Remember to update property values with your own data

. remove `lib-guillotine` dependency from your enonic app build.gradle file
. remove `lib-guillotine` dependency from build.gradle file of your Enonic XP app
. install `Guillotine` application from Enonic Market
+
NOTE: Use Guillotine 7 or higher if you need to extend the graphql schema
TIP: Use Guillotine 7 or higher if you need to extend the graphql schema

. Add `Next.XP` application to your site in every layer and save it
. Default configuration will be used automatically for each site.
Expand Down
2 changes: 1 addition & 1 deletion docs/static.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
:toc: right
:imagesdir: media/

In this chapter you will learn about NextJS' static site generation capabilities, and how the Enonic triggers re-generation of pages when publishing.
In this chapter you will learn about NextJS' static site generation capabilities, and how Enonic triggers re-generation of pages when publishing.

== Introduction

Expand Down
2 changes: 1 addition & 1 deletion docs/tldr.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Vercel are the makers of Next.js, and you'll be using their service to host the
* ENONIC_API_TOKEN: <yourSecret>
* ENONIC_PROJECTS: /hmdb/hmdb
+
NOTE: The PROJECTS variable defines which content project, and site to access in Enonic.
NOTE: The PROJECTS variable defines which content project and site to access in Enonic.
+
. After deploying, the Vercel app should render the front page:
+
Expand Down

0 comments on commit 0c80f25

Please sign in to comment.