Skip to content

Commit

Permalink
renamed "guide" to "tutorial" everywhere
Browse files Browse the repository at this point in the history
  • Loading branch information
Florian committed Jun 13, 2016
1 parent a6637da commit d6d0895
Show file tree
Hide file tree
Showing 18 changed files with 24 additions and 24 deletions.
8 changes: 4 additions & 4 deletions developer/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ For more information on nodes, check out the [Routing section](../developer/rout

## Node options

If your module wants to add a configuration screen to the content editor in the Site Tree, you can use the `node` property to add default options to the node object (complete explanation for configuration screen in the [Theme guide](../tutorials/theme.md#adding-position-options)).
If your module wants to add a configuration screen to the content editor in the Site Tree, you can use the `node` property to add default options to the node object (complete explanation for configuration screen in the [Theme tutorial](../tutorials/theme.md#adding-position-options)).


In the following example, a theme defines a `top_style` property which is automatically added to every node object that is rendered. By default, the property will have the value `uk-block-muted`, which is a CSS class that we want to render for the `top` position, in this example.
Expand All @@ -241,7 +241,7 @@ When rendering a page in the `template.php` of the theme, you can then access th

With the `node` property, you set the default value for every node. To allow the user to change these values, you will want to add an interface to the admin area (typically in the form of an addition _Theme_ tab when editing a page's content).

To allow the user to change the values of the default widget options that you have defined here, you can add an interface to the admin area. To achieve that, you define a JavaScript component to display the editing screen ([Example](https://github.com/pagekit/example-theme/blob/master/app/components/node-theme.vue)), register that JavaScript file on the content editor page ([Example](https://github.com/pagekit/example-theme/blob/master/index.php#L43)) and optionally update your Webpack configuration, if you are using Webpack ([Example](https://github.com/pagekit/example-theme/blob/master/webpack.config.js#L5)). A complete explanation for this can be found in the [Theme guide](../tutorials/theme.md#adding-position-options).
To allow the user to change the values of the default widget options that you have defined here, you can add an interface to the admin area. To achieve that, you define a JavaScript component to display the editing screen ([Example](https://github.com/pagekit/example-theme/blob/master/app/components/node-theme.vue)), register that JavaScript file on the content editor page ([Example](https://github.com/pagekit/example-theme/blob/master/index.php#L43)) and optionally update your Webpack configuration, if you are using Webpack ([Example](https://github.com/pagekit/example-theme/blob/master/webpack.config.js#L5)). A complete explanation for this can be found in the [Theme tutorial](../tutorials/theme.md#adding-position-options).

## Add menu items to the admin panel
You can add menu items to the admin panel's main navigation. These can link to any registered route and be limited to certain access permissions. The `access` property determines if the menu item is visible or not.
Expand Down Expand Up @@ -303,7 +303,7 @@ A Widget is also a module. With the `widgets` property you can register all widg

## Widget options

If your module wants to add a configuration screen to the Widget editor (which is often the case when developing a theme), you can use the `widget` property to add default options to the widget object (a complete example for a widget configuration screen is in the [Theme guide](../tutorials/theme.md#adding-widget-options)).
If your module wants to add a configuration screen to the Widget editor (which is often the case when developing a theme), you can use the `widget` property to add default options to the widget object (a complete example for a widget configuration screen is in the [Theme tutorial](../tutorials/theme.md#adding-widget-options)).

In the following example, a theme defines a `panel` property which is automatically added to every widget object that is rendered. By default, the property will have the empty string as its value.

Expand All @@ -321,4 +321,4 @@ When rendering the widget, you can then access that property from the `$widget->
<?php echo $widget->theme['panel'] ?>
```

To allow the user, to change the values of the default widget options that you have defined here, you can add an interface to the admin area. To achieve that, you define a JavaScript component to display the editing screen ([Example](https://github.com/pagekit/example-theme/blob/master/app/components/widget-theme.vue)), register that JavaScript file on the widget editor page ([Example](https://github.com/pagekit/example-theme/blob/master/index.php#L47)) and optionally update your Webpack configuration, if you are using Webpack ([Example](https://github.com/pagekit/example-theme/blob/master/webpack.config.js#L7)). A complete explanation for this can be found in the [Theme guide](../tutorials/theme.md#adding-widget-options).
To allow the user, to change the values of the default widget options that you have defined here, you can add an interface to the admin area. To achieve that, you define a JavaScript component to display the editing screen ([Example](https://github.com/pagekit/example-theme/blob/master/app/components/widget-theme.vue)), register that JavaScript file on the widget editor page ([Example](https://github.com/pagekit/example-theme/blob/master/index.php#L47)) and optionally update your Webpack configuration, if you are using Webpack ([Example](https://github.com/pagekit/example-theme/blob/master/webpack.config.js#L7)). A complete explanation for this can be found in the [Theme tutorial](../tutorials/theme.md#adding-widget-options).
2 changes: 1 addition & 1 deletion developer/packages.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ A package contains at least two files.
1. The `composer.json` contains the metadata for your package and therefore acts as the package definition.
2. The `index.php` is a so called [Module definition](modules.md) and adds actual functionality to Pagekit.

The rest of the package content depends on the package's `type`. To learn more about the actual content of a package, check out the [Theme Guide](../tutorials/theme.md) or the [Extension Guide](../tutorials/extension.md).
The rest of the package content depends on the package's `type`. To learn more about the actual content of a package, check out the [Theme tutorial](../tutorials/theme.md) or the [Extension tutorial](../tutorials/extension.md).

## Package definition
A package is defined by its `composer.json`. This file includes the package name, potential dependencies to be installed by [Composer](https://getcomposer.org) and other information that displays in the Pagekit marketplace.
Expand Down
2 changes: 1 addition & 1 deletion developer/theme.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Themes
<p class="uk-article-lead">A theme changes the look of your site. In its simplest form a theme generates the surrounding HTML markup for the content output of your extensions.</p>

**Note** The examples in this guide are taken from the _Hello_ theme, which is available in the Marketplace. When installed, the _Hello_ theme is located in `/packages/pagekit/theme-hello`.
**Note** The examples in this tutorial are taken from the _Hello_ theme, which is available in the Marketplace. When installed, the _Hello_ theme is located in `/packages/pagekit/theme-hello`.

<ul class="uk-list">
<li><a href="#package-definition">Package definition</a></li>
Expand Down
4 changes: 2 additions & 2 deletions developer/vuejs-and-webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ This solution is perfectly fine if you prefer not to use Webpack. However, using
</script>
```

As you can see, you do not need to define a template as a clunky string. Instead, Webpack converts the readable `*.vue` file and compiles it into a `*.js` file with the template markup converted to an inline string.
As you can see, you do not need to define a template as a clunky string. Instead, Webpack converts the readable `*.vue` file and compiles it into a `*.js` file with the template markup converted to an inline string.

Webpack is a tool that runs on your terminal and then compiles the `*.vue` files to `*.js` files. Pagekit has a default `webpack.config.js` on the root level. When you run `webpack` or `webpack --watch` in the Pagekit folder, it will traverse all themes and extensions in the `packages` subfolders.
Webpack is a tool that runs on your terminal and then compiles the `*.vue` files to `*.js` files. Pagekit has a default `webpack.config.js` on the root level. When you run `webpack` or `webpack --watch` in the Pagekit folder, it will traverse all themes and extensions in the `packages` subfolders.

Your package also needs to have its own `webpack.config.js` in your package, for example `packages/pagekit/example/webpack.config.js`. This file defines which `*.vue` files are compiled and what ouput file they should be compiled to.

Expand Down
2 changes: 1 addition & 1 deletion getting-started/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ Depending on your goals with Pagekit you might want to read only pieces of the d
1. Pagekit [installation](installation.md), [requirements](requirements.md) and places to [find help](../getting-started/getting-help.md) if you are stuck.
2. Learn how to use the Pagekit [user interface](../user-interface/dashboard.md).
3. To get started as a developer, learn [how to create an extension](../tutorials/extension.md) and [how to build a theme](../tutorials/theme.md).
4. For a complete video guide on building an extension, watch [the screencast about an example extension](../tutorials/extension.md).
4. For a complete video tutorial on building an extension, watch [the screencast about an example extension](../tutorials/extension.md).
5. For more fundamental developer topics, read up on e.g. [packages](../developer/packages.md), [modules](../developer/packages.md) and [packages](../developer/routing.md).
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
4 changes: 2 additions & 2 deletions tutorials/extension.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

# How to develop a complete extension

<p class="uk-article-lead">This guide follows all steps needed to setup and develop a full extension to manage Todo items in the admin area of Pagekit. You will learn about basic extension concepts, controllers, routing, view rendering and the Vue.js framework.</p>
<p class="uk-article-lead">This tutorial follows all steps needed to setup and develop a full extension to manage Todo items in the admin area of Pagekit. You will learn about basic extension concepts, controllers, routing, view rendering and the Vue.js framework.</p>

## Content

Expand All @@ -13,7 +13,7 @@
<li><a href="#the-completed-example">The completed example</a></li>
</ol>

If you prefer video instead of text, check out the [Youtube playlist with all screencasts](https://www.youtube.com/playlist?list=PL2rU5GxE-MQ7aYIcxTmDh4-BTHRM-9lto) included in this guide.
If you prefer video instead of text, check out the [Youtube playlist with all screencasts](https://www.youtube.com/playlist?list=PL2rU5GxE-MQ7aYIcxTmDh4-BTHRM-9lto) included in this tutorial.

**Note** The [completed example](https://github.com/pagekit/example-todo) is available on Github.

Expand Down
20 changes: 10 additions & 10 deletions tutorials/theme.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# How to develop a theme

<p class="uk-article-lead">In this guide you will learn how to develop your own theme from our Hello Theme blueprint. You will find out about the theme structure and follow the essential steps to add new positions and options.</p>
<p class="uk-article-lead">In this tutorial you will learn how to develop your own theme from our Hello Theme blueprint. You will find out about the theme structure and follow the essential steps to add new positions and options.</p>

**Note** The [completed theme](https://github.com/pagekit/example-theme) can be found on Github.

## Getting started

For this guide, we assume you have a running Pagekit installation on a local server environment. If that is not the case, [download](https://pagekit.com/download) a Pagekit installation package and quickly [install](../getting-started/installation.md) it. Then login to the admin area and have a look at the Theme section of the integrated Marketplace.
For this tutorial, we assume you have a running Pagekit installation on a local server environment. If that is not the case, [download](https://pagekit.com/download) a Pagekit installation package and quickly [install](../getting-started/installation.md) it. Then login to the admin area and have a look at the Theme section of the integrated Marketplace.

The Pagekit Marketplace features our [Hello Theme](https://pagekit.com/marketplace/package/pagekit/theme-hello), a blueprint for developing themes, including code examples and a general foundation to help you get started.

Expand All @@ -15,7 +15,7 @@ The Pagekit Marketplace features our [Hello Theme](https://pagekit.com/marketpla
<figcaption class="uk-thumbnail-caption">Hello theme doesn't provide any styling, but gives you a good starting point to develop your own theme.</figcaption>
</figure>

First of all install the theme from the Pagekit marketplace and have a look at the overall file structure. When installed, the *Hello* theme is located in `packages/pagekit/theme-hello`. If you develop your own themes in the future, we recommend to install a simple theme on the side for reference, like the default [Theme One](https://pagekit.com/marketplace/package/pagekit/theme-one). That way you can compare structural elements and get some inspiration. For this guide though, we only need Hello theme.
First of all install the theme from the Pagekit marketplace and have a look at the overall file structure. When installed, the *Hello* theme is located in `packages/pagekit/theme-hello`. If you develop your own themes in the future, we recommend to install a simple theme on the side for reference, like the default [Theme One](https://pagekit.com/marketplace/package/pagekit/theme-one). That way you can compare structural elements and get some inspiration. For this tutorial though, we only need Hello theme.

## Structure
Let's take a look at some of the central files and folders that you will deal with when developing your own theme.
Expand All @@ -42,7 +42,7 @@ If you simply change the files of Hello theme, any Marketplace updates to the th
2. Open `composer.json` and replace `"name": "pagekit/theme-hello",` with `"name": "your-name/your-theme"`. ALso change `"title": "Hello"` to `"title": "Your theme"`.
3. Open `index.php` and replace `'name' => 'theme-hello'` with `'name' => 'your-theme'`.

Out of simplicity, the rest of the guide will still call it `theme-hello` in the examples.
Out of simplicity, the rest of the tutorial will still call it `theme-hello` in the examples.

### CSS
Hello theme doesn't contain any styles. The included `css/theme.css` file lists all CSS classes that are rendered by the Pagekit core extensions without additional styling. You can add your own CSS to these classes.
Expand Down Expand Up @@ -73,7 +73,7 @@ Now add another line to add the UIkit CSS. Make sure to add it **above** the lin
That's it, your theme now contains UIkit's CSS. To add your own CSS rules, simply edit `theme-hello/css/theme.css`.

<figure class="uk-thumbnail">
<img src="assets/guide-theme-basic-css.png" alt="Default UIkit styling">
<img src="assets/tutorial-theme-basic-css.png" alt="Default UIkit styling">
<figcaption class="uk-thumbnail-caption">Adding the CSS from UIkit will add default styling to the rendered markup. To actually make it pretty, we also need to add some classes to the markup, customize the default UIkit style and maybe add our own CSS styling</figcaption>
</figure>

Expand Down Expand Up @@ -176,7 +176,7 @@ var gulp = require('gulp'),

After you have created the files above, go to the [UIkit Github repository](https://github.com/uikit/uikit), download the Zip, unpack it and find the `themes/default` folder (or one of the other themes, if you like). Note that you need the Github version for this, not the css-only version we have downloaded in the simple setup.

![Download UIkit from Github](assets/guide-theme-download-uikit.png)
![Download UIkit from Github](assets/tutorial-theme-download-uikit.png)

#### Step 3

Expand Down Expand Up @@ -364,7 +364,7 @@ The page *content* is nothing other than Pagekit's system output. That means tha
To navigate through any site, you first need to set up a *menu*. For this purpose, Pagekit provides different menu positions that allow users to publish menus in several locations of the theme markup.

<figure class="uk-thumbnail">
<img src="assets/guide-theme-elements.png" alt="Typical theme elements">
<img src="assets/tutorial-theme-elements.png" alt="Typical theme elements">
<figcaption class="uk-thumbnail-caption">A typical site layout consists of the main navigation, the page content and several widget positions</figcaption>
</figure>

Expand Down Expand Up @@ -704,7 +704,7 @@ To render the new position in the theme's markup, we need to add it to the `view
Now can select *Top* for any widget that you want to render in the newly created position.

<figure class="uk-thumbnail">
<img src="assets/guide-theme-select-position.png" alt="Widget position">
<img src="assets/tutorial-theme-select-position.png" alt="Widget position">
<figcaption class="uk-thumbnail-caption">Select the new position when creating a widget.</figcaption>
</figure>

Expand Down Expand Up @@ -817,7 +817,7 @@ Lastly, to actually render the chosen setting into the widget position, we need
In the site tree, you now see a _Theme_ tab when editing a page. Here you can configure the new option. This configuration only applies for this specific page.

<figure class="uk-thumbnail">
<img src="assets/guide-theme-node.png" alt="Node options added by the theme">
<img src="assets/tutorial-theme-node.png" alt="Node options added by the theme">
<figcaption class="uk-thumbnail-caption">Node options added by the theme.</figcaption>
</figure>

Expand Down Expand Up @@ -939,7 +939,7 @@ To understand which variables are available in these views, look at the markup i

## Wrapping up

In this guide, you have learned the basic knowledge and tools to create themes for Pagekit. Let us summarize which topics we have covered.
In this tutorial, you have learned the basic knowledge and tools to create themes for Pagekit. Let us summarize which topics we have covered.

**Note** The [completed theme](https://github.com/pagekit/example-theme) can be found on Github.

Expand Down
6 changes: 3 additions & 3 deletions tutorials/translation.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ If you would like to improve or complete an existing localization, go to [Pageki

To take part in the Pagekit project, you must first click the _Join team_ button in the language folder. Once we've approved your request, you will be able to access the language team and can start to translate the project. Thanks!

![Join team](assets/guide-translation-join.png)
![Join team](assets/tutorial-translation-join.png)

Choose the resource you want to contribute to by clicking on it, this will open an options screen. By clicking _Translate now_ you will enter the Transifex editor, which allows you to translate on the fly without having to down- and upload the files.

## Request a language
If your language is not listed, you can add a new language to the project. To do so, go to the [Pagekit project](http://www.transifex.com/organization/pagekit/) on Transifex and add a new language by clicking the button on the right hand side _Request language_. We will then get notified and can review and approve your added language.

![Request a language](assets/guide-translation-request.png)
![Request a language](assets/tutorial-translation-request.png)

Following our approval, you will have two options:

Expand All @@ -32,4 +32,4 @@ In case you already created a .po language file, you can easily upload it by cli

A green bar in each column shows you the progress of each localization.

![Options](assets/guide-translation-options.png)
![Options](assets/tutorial-translation-options.png)

0 comments on commit d6d0895

Please sign in to comment.