1
0
mirror of https://github.com/typemill/typemill.git synced 2025-10-16 23:28:52 +02:00

Version 1.0.0

This commit is contained in:
Sebastian
2017-04-14 21:45:15 +02:00
commit f39d60b60b
1064 changed files with 79822 additions and 0 deletions

View File

@@ -0,0 +1,20 @@
# Use Cases
Whenever you want to publish a finished text work as a website, then TYPEMILL is a smart and lightweight solution. Possible use cases are ...
- a book
- a drama
- a lyric collection
- a whitepaper
- a documentation
- a manual or user guide
- a handbook
- a tutorial
- a study
- a collection of articles
TYPEMILL is not a full blown Content Management System (CMS). It has no admin panel and it does not support any content creation right now. Instead, it takes some existing markdown files and generates a beautiful website.
Use your favourite text or markdown editor (e.g. Typora) to create markdown files and upload them with a FTP software (e.g. FileZilla) to your server.
TYPEMILL is not the right solution, if you want to create a blog, a wiki or any website with an author interface. But it is a smart solution to publish any text work based on markdown files.

View File

@@ -0,0 +1,22 @@
# Features
TYPEMILL has a limited set of features right now. It transforms a bunch of **markdown files** into a **website** and generates a list of contents for **navigation**.
This is what you can **do with TYPEMILL**:
- Setup your website with an easy setup form.
- Create your website content with simple folders and files (markdown).
- Choose a static startpage for your website (optional).
- Change the theme (design).
- Create your own theme with HTML, CSS and Twig (a template language for PHP).
This is, what **TYPEMILL does** for you:
- It creates a website based on your folders and files.
- It generates a navigation according to the structure of your folders and files.
- It adds a paging.
- It adds a breadcrumb.
- It adds hierarchic numbers to your chapters and pages.
- It makes everything responsive for mobile devices.
There is a roadmap for TYPEMILL, so there will be a lot more useful features in near future.

View File

@@ -0,0 +1,13 @@
# Roadmap
There are a lot of plans for future releases of TYPEMILL, but it also follows the concept of simplicity. To prevent TYPEMILL from becomming a feature soup, it will strictly focus on the writers needs. These are some ideas:
- Image and media support.
- A dashboard for authors to create and edit content online.
- More themes for special publications like documentations, books or lyrics.
- Additional navigation based on the headlines of a content page.
- Extensibility (Plugins) and API design.
- Version controll and updates.
- Additional output format like mobi, epub, static html and more.
If you miss a feature or if you found a bug, please report it on GitHub.

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

View File

@@ -0,0 +1,3 @@
#About TYPEMILL
TYPEMILL is a simple tool to create a website like this. It transforms a bunch of **text files** (Markdown) into a **website** and generates a **navigation**. TYPEMILL is a perfect tool for web books, documentations or manuals.

View File

@@ -0,0 +1,15 @@
# System Requirements
TYPEMILL is a modern and lightweight software with nearly no requirements. All you need is:
- **A webserver** (to host TYPEMILL)
- **PHP 5.6+** (to run TYPEMILL)
- **FTP** (to upload your content files)
What you don't need:
- **A lot of space** (TYPEMILL is lightweight with less than 5MBs)
- **A database** (TYPEMILL uses files, not a database)
- **Technical skills** (TYPEMILL is easy to use for non-technical people)
Almost any hosting package provides a webserver with php. If you ever hosted a website with WordPress, then chances are high, that you can run TYPEMILL there without any problems.

View File

@@ -0,0 +1,68 @@
# Installation
The installation of TYPEMILL is as simple as that:
- Go to [typemill.net](http://www.typemill.net) and download the TYPEMILL files.
- Upload the files to your server.
- Go to `www.your-typemill-website.com/setup` and fill out the form.
You can also setup TYPEMILL manually with the `settings.yaml.example` file, that you can find in the root folder of TYPEMILL.
Don't forget to make some folders and files writable (set permission to `774`):
- `\cache` folder and files
- `\settings` folder and files
- `\content` folder and files
If you have any trouble to understand the instructions above, read the following detailed description.
## Download
There are two ways to copy TYPEMILL to your local computer:
1. Go to [typemill.net](http://www.typemill.net), download the zip-archive and unzip it.
2. **Or** use GitHub and Composer.
If you use GitHub, then you can find the repository of TYPEMILL on [github/trendschau/typemill](https://github/trendschau/typemill). Just open the command line (git-CLI) and type
````
git clone "https://github.com/trendschau/typemill.git"
````
TYPEMILL uses some nice frameworks and libraries, which can be found in the folder `\system\vendor`. Make sure, that all these libraries are completely downloaded. Run composer to update all libraries. If you don't have composer installed yet, head over to the [composer website](https://getcomposer.org/) and install it. After that, open your command line, go to your TYPEMILL folder and type:
````
composer update
````
The exact command might vary depending on your composer installation. If you face any problems, please check the documentation of composer.
That's it!
## Setup
There are three ways to setup your TYPEMILL website:
- **Recommended**: Copy the file `settings.yaml.example` in the root folder of TYPEMILL and rename it to `settings.yaml`. Fill out the settings directly in the file. It is human readable, so no problem for you!
- **Recommended**: If you run you website on your local machine, you can also go to `your-local-adress/setup` and fill out the setup form.
- **Be careful**: You can also upload TYPEMILL to a live server and fill out the form live. Just visit `your-website.com/setup`. But be aware, that everybody can visit this adress and setup your website easily. It is not a big deal, because you can always upload your own `settings.yaml` file with your ftp program.
If there is a valid `settings.yaml` file in your root folder, then the adress `your-website.com/setup` is not active anymore.
Read all details about the settings in the next chapter.
## Upload
To run a live website, simply upload TYPEMILL to your webserver (e.g. with ftp). You have to make some folders and files writable:
- `\cache`
- `\content`
To make the folders and files writable, use your ftp programm, click on the folder, choose `permissions` and change the permission to `744`. Use the recursive permission for all containing files and folders. If `744` does not work, try `774`.
To fill the website with your own content, just upload your folders and markdown files to the `content` folder of TYPEMILL (with ftp again). Visit your website and press `F5` to actualize the cache.
## Run Locally
If you are a developer and if you want to run TYPEMILL locally, then simply download TYPEMILL (zip or git) and visit your local folder like `localhost/typemill`. No additional work is required.

View File

@@ -0,0 +1,44 @@
# Settings
TYPEMILL offers some settings for customization. There are two ways to add settings:
1. Visit `your-website.com/setup` and use the setup form to customize the settings or
2. Rename the file `settings.yaml.example` to `settings.yaml` and edit the file manually. You will find the file in the settings folder of TYPEMILL.
More details are described in the previous chapter about the installation of TYPEMILL.
## Standard Settings
You will find six standard settings in the file `settings.yaml.example`:
````
title: MyWebsite
author: 'Your Name'
copyright: ©
year: '2017'
theme: typemill
startpage: true
````
The settings are written in YAML, a simple and human readable format. Simply add
- A title for your website. Keep it short, or it will destroy the design.
- An author name (or several author names)
- A licence or copyright like `©`, `cc-by` or whatever you want.
- A year. This should be the starting year. The theme will add a range to the present like 2015 - 2017.
- A theme. Add the name of the theme folder here.
- A startpage. Add `false` or `true`.
## Advanced settings
You can also add some advanced settings, if you really want.
````
themeFolder: themes
contentFolder: content
displayErrorDetails: false
````
It probably does not make much sence to change the theme folder or the content folder, but you can do so if you want.
If you are a developer and if you run TYPEMILL on your local machine, you can set `displayErrorDetails` to `true` for a detailed error reporting. Don't forget to set it back to `false` before you deploy the website live. It is not secure to show the world your internal errors and many hosters will turn off all public error reports by default.

View File

@@ -0,0 +1,3 @@
# Getting Started
Simply download TYPEMILL and immediately start publishing. TYPEMILL runs with **php5.6+** on most webservers. **No database** or any other additional technology is required.

View File

@@ -0,0 +1,11 @@
# Quick Start for Writers
You are a pro and don't want to read the whole manual? No problem, this is a quick overview:
- **Folders and files**: Organize your content in folders and markdown files and put them in the `\content` folder of TYPEMILL.
- **Naming conventions**: Use prefixes like `01-` or `aa_` to sort your folders and files.
- **Markdown**: Use the Markdown syntax for your content files. Markdown Extra (e.g. tables, footnotes) is supported, too.
- **Index files**: Add an `index.md` file to a folder to create content for the folder itself.
- **F5**: After some changes, use the `F5` key to refresh the navigation manually.
- **Settings**: Use the file `settings.yaml` in the root folder to change the theme or other settings.
- **Lean back** and let TYPEMILL create a nice website for you.

View File

@@ -0,0 +1,156 @@
# Markdown
Never heard of Markdown? Markdown is very similar to the markup used by Wikipedia. It is a simple syntax to format headlines, lists or paragraphs in a text file. Markdown files end with `.md`.
Today, Markdown is a standard formatting language used by a lot of technology platforms like GitHub or StackOverflow. And Markdown is also entering the non technical mainstream. The press releases of dpa are written in Markdown, for example.
Markdown uses some special chars like `#` or `-` to format a text. A short example:
````
# My first level headline
This is a paragraph and now we create an unordered list:
- Item
- Another item
- A last item
````
## Advantages of Markdown
There are some good reasons for the rise of Markdown:
- Different to proprietary formats like word.docx, the Markdown syntax is universal and not bound to a special text software.
- You can use the most simple text editor (e.g. the "editor" of microsoft office) or a special Markdown editor like Typora to create Markdown files.
- Markdown can be transformed into a valid HTML document easily.
- Compared to the well known WISYWIG HTML editors (e.g. used by WordPress), Markdown is less hacky and the content is more reusable.
There are also some disadvantages:
- You cannot use a text program like Microsoft Word to create Markdown files.
- Markdown is usually not WYSIWYG and the writing experience is a bit different from Word or WordPress. However, there are a lot of Markdown editors which provide a preview window. Some editors even provide a full WYSIWYG modus (e.g. Typora).
- Markdown is not totally unified and the rendering of Markdown files can be ambiguous. There are some variations and enhancements like CommonMark or Markdown Extra.
With the following basic Markdown reference, you can learn to write Markdown in less than 10 minutes!
## Basic Markdown Reference
You can read the full specification of Markdown at [Mark Guber](http://daringfireball.net/projects/markdown/syntax), the inventor of Markdown.
### Paragraph
Just write down some text and use the return key two times for a new paragraph:
````
To create a new paragraph, just press the return button two times.
Then proceed writing. It is really as simple as that!
````
### Emphasis and Strong
Embed text in a `_` or `*` to create an _emphasis_ or use a `__` or `**` to create **strong** text element:
````
This is an _emphasis_ and this is a __strong__ text.
You can use asterix for an *emphasis* or a **strong** text, too.
````
### Headlines
Just use the character `#` for headlines like this:
````
# Headline (1. level)
## Headline (2. level)
### Headline (3. level)
#### Headline (4. level)
##### Headline (5. level)
###### Headline (6. level)
````
### Lists
To create an unordered `-` or ordered `1.` list, just follow your intuition:
````
This is an unordered list:
- Item
- Another item
- Last item
And this is an ordred list:
1. Item 1
2. Item 2
3. Item 3
````
### Blockquote
Just use the `>` to create a blockquote:
````
This is a quote by a famous woman:
> If I stop to kick every barking dog I am not going to get where Im going.
````
### Horizontal Rule
To create a horizontal line, use `---`
````
This is a text followed by a horizontal line
---
And this is another text.
````
### Links
Use square brackets for the linked text followed by round clips for the url.
````
[Linked Text](http://url-to-a-website.com)
````
You can also use a shortcut for links `<http://www.yourlink.de>` and emails `<my@emailadress.net>`, but you cannot add a text for the links or emails with these shortcuts.
When rendered, Markdown will automatically obfuscate email adresses to help obscure your address from spambots.
### Images
Images look similar to links, simply add an ! like this:
````
![image alt text](/path/to/image.jpg)
````
### Code (inline)
To create a inline code, just use the ` sign like this:
````
Inline code `<?php echo 'hello world!'; ?>` within a sentence.
````
### Code (block)
To create a code block, just indent your text with four spaces or use four ```` like this:
````
This text is followed by a code-block:
````
<?php
$string = 'hello ';
$string .= 'world!';
echo $string;
?>
````
### Advanced Formats
With enhancements like Markdown Extra you can also create more complex formats like tables, abbreviations, footnotes and special attributes. TYPEMILL supports Markdown Extra, so just check the [specification of Markdown Extra](https://michelf.ca/projects/php-markdown/extra/) if you want to use these kind of formats.

View File

@@ -0,0 +1,19 @@
# Naming your Files and Folders
To create a clean website with TYPEMILL, you have to follow some naming conventions for your files and folders. A typcial structure for folders and file looks like this:
- 01_content_folder
- 01_markdown_file.md
- 02_another_markdown_file.md
- index.md
The rules are simple:
- **Keep it short**: The names of the files and folders are used to create the navigation, so it is essential to keep them really short!!
- **Use prefixes**: Please use some kind of sorting-prefix for your files and folders. You can use numbers `01-` or letters `aa-`. The part before the first separator (the prefix) is striped out by TYPEMILL.
- **Use Separators**: Please use separators like dashes `-` or underscores `_` to separate words or prefixes in your file names and folder names. Do not use space!!!
- **Use index.md**: You can use a file named `index.md` to create content for the folder itself. This is optional.
- **Avoid Language Specific Characters**: Use the english character set to name your files and folders. French, German, Russian or Turkish are beautiful languages, but right now it is not guarantied, that these characters are interpreted correctly. But you can use all character sets to write the content in your files of course.
When you name your files and folders, then always keep in mind, that the names are used to generate the navigation and the table of contents. So keep it short to keep the layout and design healthy.

View File

@@ -0,0 +1,5 @@
# Folder Structure
You can create any kind of folder structer with TYPEMILL. As long as you follow the naming conventions for folders and files, it will work.
However, if you create a very deep structure, then it might result in an odd design or even in usability errors. Similar to real live, it is always a good idea to keep the hierarchy as flat as possible.

View File

@@ -0,0 +1,3 @@
# Hello Writers!
If you love **simple text files** (Markdown) and if you like **distraction free websites** without fiddly technology, then TYPEMILL is for you!

View File

@@ -0,0 +1,40 @@
# Quick Start for Developers
So you are a pro and don't want to read the whole documentation? No problem, this is all you need to know to create your own theme for TYPEMILL.
## Theme Folder
You will find all themes in the `theme` folder of TYPEMILL. Change the theme in the `settings.yaml`.
## Theme Structure
There is no theme structure. There are only two files that are required:
- `index.twig`: All content files will be rendered with this template.
- `404.twig`: This is the template for a not found message.
There is another optional template:
- `cover.twig`: Use this name to create a template for a static startpage.
It is always a good idea to structure your files a bit more. For example, you can create a folder called `partials` with separate files for different layouts (maybe a folder and file layout?), a navigation, a header, a footer or whatever you want. But this decision is completely up to you. The same with css, JavaScript and other ressources: It is a good practice to create separate folders for that, but it is up to you.
## Twig
The template language for TYPEMILL is Twig. You are probably familiar with it. If not: Twig is a widespread template language, that is very easy to learn. It is shorter and safer to use than pure PHP.
## Template Variables
There are exactly six template variables to fill your templates with dynamic content. Just print the variables out to get some insights.
- `navigation`: This variable is a multidimensional array of objects. Each object represents a file or a folder. You can use a Twig-macro to create a navigation with this variable in your template. A macro in TWIG is the same as a recursive function in PHP.
- `content`: This variable holds the HTML content of the markdown file for a specific page.
- `breadcrumb`: This variable is an one dimensional array. It contains the breadcrumb of the page. Just use a loop like `{% for element in breadcrumb %}` to print it out.
- `item`: This variable is an object of the actual page. It contains all the details like name, url, path, chapter as well as the next and previous items for a pagination. And guess what? The `navigation` variable is just an array of these item-objects (with a bit less information).
- `settings`: You will find all the settings in this variable (like the navigation-title, the author, the theme and the copyright information).
- `description`: This are the first 150 characters of the content of a page. You can use this for the meta description.
If you did not understand everything, then please read the full developer manual. In less than one hour you can develop with TYPEMILL like a pro.
Happy coding!

View File

@@ -0,0 +1,208 @@
# Templates with Twig
Twig is a flexible, fast and secure template engine for PHP. If you have never used a template language before, then there are some good reasons to start with it today:
- The Twig syntax is **much shorter**, so your templates look cleaner and are easier to maintain.
- Twig produces **less errors**. An unknown variable produces an error in PHP, but it does not in Twig. Twig handles most of these cases, so you don't have to care about it.
- Twig is very **widespread**. Even Drupal switched to Twig in version 8.
The full Twig documentation for template designers is just one page long, so just head [over to Twig](http://twig.sensiolabs.org/doc/2.x/templates.html) and read it. You can learn the most important essentials for TYPEMILL in the following list.
## Basic Twig Syntax
In a Twig template, you can use ordinary HTML markup. Statements and expressions are written in curly brackets.
Twig uses two curly brackets **to print out** a variable or expression:
````
<p>{{ variable }}</p>
````
Twig uses one curly bracket with a procent sign **to execute** statements such as loops:
````
<ul>
{% for element in breadcrumb %}
<li> {{ element.output|e }} </li>
{% endfor %}
</ul>
````
As you can see, the Twig syntax is a cleaner and easier than pure PHP:
- You don't need the long `<?php echo something; ?>` introduction.
- You don't need the `$` to mark a variable.
- You don't need the `;` to finish a statement.
- You don't need the `->` or `['foo']` notation for objects and arrays, just use a dot-notation like `element.name` for everything.
- You don't need a lot of `()` like `foreach(a as b)`.
- You don't need a syntax like `<?php echo htmlspecialchars($element->output, ENT_QUOTES, 'UTF-8') ?>` for escaping, just use a filter with a pipe notation like this `{{ element.output|e }}`.
## References
These are some useful examples and snippets, that you can use for your templates.
### Simple Variable
Set a simple variable and print it out:
````
{% set content = "my content" %}
{{ content }}
````
### Array
Set an array and print out a value:
````
{% set content = ['first' => 'one value', 'second' => 'another value'] %}
{{ content.first }}
````
### Object
Set an object and print out a value:
````
{% set content = {'first' : 'first value', 'second' : 'another value'} %}
{{ content.first }}
````
### Loop
Loop over an object or array and print out the values:
````
{% for value in content %}
{{ value }}
{% endfor %}
````
Outputs:
- first value
- another value
### Filters
Set the first character of the words to uppercase:
````
<ul>
{% for value in content %}
<li>{{ value|title }}</li>
{% endfor %}
</ul>
````
Output:
- First Value
- Another Value
You can manipulate variables with filters. Fiters are used after a pipe notation. See a list of all filters in the [Twig documentation](http://twig.sensiolabs.org/doc/2.x/filters/index.html).
### Functions
Print out content that was created in the last 30 days:
```
{% if date(content.created_at) > date('-30days') %}
{{ content.title }}
{% endif %}
```
'created_at' could be a timestamp of the content file. See a list of all functions in the [Twig documentation](https://twig.sensiolabs.org/doc/2.x/functions/index.html).
### Include Template
To include a template, just write:
````
{{ include(sidebar.twig) }}
````
**Example usage**: Your layout-template includes other templates like header.twig, footer.twig or sidebar.twig.
### Extend Template
To extend a template, just write:
````
{% extends "partials/layout.twig" %}
````
**Example usage:** Your content template (e.g. index.twig) extends your layout template. This means, index.twig is rendered within the layout.twig, and the layout.twig includes a header.twig, a footer.twig and a sidebar.twig.
### Example: Include and Extend
If you extend a template with another template (e.g. if you extend `layout.twig` with `index.twig`), then you have to define some content areas in the "parent" template that get overwritten with the content of the "child" template. You can use the "block" statement to define such areas.
Your layout.twig looks like this:
````
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<article>{% block content %}{% endblock %}</article>
<nav>
{{ inlude 'navigation.twig' }}
</nav>
<footer>
{{ include 'footer.twig' }}
</footer>
</body>
</html>
````
Your index.twig looks like this:
````
{% extends "layout.twig" %}
{% block content %}
<ul>
{% for value in content%}
<li>{{ value }}</li>
{% endfor }
</ul>
{% endblock %}
````
Now, your template `index.twig` extends your template `layout.twig` and the `block content` in your layout template gets replaced by the `block content` defined in your index template. At the same time the layout template includes the navigation and the footer.
### Macros
Macros in Twig are like functions in PHP: You can use them for repeating tasks. A typical example is a navigation, where you loop over a complex array recursively. But you can also use macros to render forms and input fields.
This is an example for a navigation:
{% macro loop_over(navigation) %}
{% import _self as macros %}
{% for element in navigation %}
<li>
{% if element.elementType == 'folder' %}
<a href="{{ element.url }}">{{ element.name|title }}</a>
<ul>
{{ macros.loop_over(element.folderContent) }}
</ul>
{% else %}
<a href="{{ element.url }}">{{ element.name|title }}</a>
{% endif %}
</li>
{% endfor %}
{% endmacro %}
{% import _self as macros %}
<ul class="main-menu">
{{ macros.loop_over(navigation) }}
</ul>
These are only some small examples, how you can use Twig to create templates and themes for TYPEMILL. In fact, you can do a lot more complex stuff with Twig. Just read the [official documentation](https://twig.sensiolabs.org/doc).

View File

@@ -0,0 +1,38 @@
# Theme Structure
TYPEMILL requires a minimal structure and a small set of mandatory files:
- **/myThemeFolder**: A theme folder. The name of the folder is the name of the theme.
- **404.twig**: The template for a not found page. It is mandatory.
- **index.twig**: The template for all other pages. It is mandatory.
- **cover.twig**: The template for a static startpage. It is optional.
- **myThemeFolder.jpg**: A preview picture of your theme. It is mandatory. The file must be named exactly like the theme folder. Minimum width is 400px.
That's it.
## Recommendation
If you want to create a more complex structure, then you can do whatever you want, as long as you follow the basic structure and conventions described above.
However, if you don't have an idea how to start, then you can follow this example:
- css
- style.css
- another.css
- js
- javascript.js
- img
- icon.png
- favicon.ico
- themeLogo.jpg
- partials
- layoutStart.twig // layout for the static startpage.
- layout.twig // layout for all other pages, includes navigation, header and footer
- navigation.twig
- header.twig
- footer.twig
- cover.twig // template for the static startpage. Extends the layoutStart.twig.
- index.twig // template for all other pages. Extends the layout.twig
- 404.twig // template for not found page. Extends the layout.twig.
If you have not read the chapter about Twig templates yet, please read it now. It does not only describe the template language Twig, but also the template hierarchy (how templates can be included and extended).

View File

@@ -0,0 +1,7 @@
# Content
The content-variable holds the whole content of your Markdown file in HTML. To print out the content of the Markdown file, simply write:
{{ content }}
You can only use Twig filters to manipulate the content, but the possibilities are limited.

View File

@@ -0,0 +1,9 @@
# Description
The description variable extracts the first 150 characters of the content. You can print the description out with:
{{ description }}
You can use the description for the meta-tag in your HTML head, for example.

View File

@@ -0,0 +1,302 @@
# Item
The item variable is an object. It provides informations about the actual page, like the page title, the url, the slug or the next and the previous page.
Some informations are only available for the type `folder` while some other informations are specific to the type `file`. But most informations are shared by both.
## Example of the {{ item }} variable
This is an example of an item variable:
````
stdClass Object
(
[originalName] => 25-navigation.md
[elementType] => file
[fileType] => md
[order] => 25
[name] => navigation
[slug] => navigation
[path] => \3_for-developers\05-theme-variables\25-navigation.md
[key] => 4
[keyPath] => 3.3.4
[keyPathArray] => Array
(
[0] => 3
[1] => 3
[2] => 4
)
[chapter] => 4.4.5
[urlRel] => /typemill/developers/theme-variables/navigation
[urlAbs] => http://localhost/typemill/developers/theme-variables/navigation
[active] => 1
[thisChapter] => stdClass Object
(
[originalName] => 05-theme-variables
[elementType] => folder
[index] => 1
[order] => 05
[name] => theme variables
[slug] => theme-variables
[path] => \3_for-developers\05-theme-variables
[urlRel] => /typemill/developers/theme-variables
[urlAbs] => http://localhost/typemill/developers/theme-variables
[key] => 3
[keyPath] => 3.3
[keyPathArray] => Array
(
[0] => 3
[1] => 3
)
[chapter] => 4.4
[active] => 1
[activeParent] => 1
)
[prevItem] => stdClass Object
(
[originalName] => 15-breadcrumb.md
[elementType] => file
[fileType] => md
[order] => 15
[name] => breadcrumb
[slug] => breadcrumb
[path] => \3_for-developers\05-theme-variables\15-breadcrumb.md
[key] => 3
[keyPath] => 3.3.3
[keyPathArray] => Array
(
[0] => 3
[1] => 3
[2] => 3
)
[chapter] => 4.4.4
[urlRel] => /typemill/developers/theme-variables/breadcrumb
[urlAbs] => http://localhost/typemill/developers/theme-variables/breadcrumb
)
[nextItem] => stdClass Object
(
[originalName] => 30-settings.md
[elementType] => file
[fileType] => md
[order] => 30
[name] => settings
[slug] => settings
[path] => \3_for-developers\05-theme-variables\30-settings.md
[key] => 5
[keyPath] => 3.3.5
[keyPathArray] => Array
(
[0] => 3
[1] => 3
[2] => 5
)
[chapter] => 4.4.6
[urlRel] => /typemill/developers/theme-variables/settings
[urlAbs] => http://localhost/typemill/developers/theme-variables/settings
)
)
````
## Shared properties
The following informations (properties) are shared by folders and files. The examples are based on a simple file and folder structure like this:
- content
- 1.my-folder
- index.md
- 04.my-content-file.md
### {{ item.elementType }}
The type of the item. Possible values are:
- "file"
- "folder"
You can check the elementType and display a folder in a different way than a content file.
Example: `{% if item.elementType == 'folder' %}`
### {{ item.urlRel }}
The relative url of the item without the base url. This is useful if you want to set a link to another internal page.
Example: `/my-folder/my-content-file`
### {{ item.urlAbs }}
The absolute url of the item. This is useful for cannonical links, social media links or permalinks.
Example: `http://mydomain.com/my-folder/my-content-file`
### {{ item.slug }}
The slug of the file or folder. This is the last part of the url.
Example: `/my-content-file` in the url `www.mywebsite.com/my-folder/my-content-file`.
### {{ item.name }}
The human readable name of the file or folder.
Example: `my content file` for a Mardown file with a name like `01.my-content-file.md`.
### {{ item.originalName }}
The original name of the file or folder. You probably don't need it for your theme.
Example: `04.my-content-file.md` or `1.my-folder`.
### {{ item.path }}
The physical path to the item on your server. You probably don't need that, but TYPEMILL uses this information to map the urls with the content files and folders.
Example: `\1.my-folder\04.my-content-file.md`.
### {{ item.order }}
The prefix of the item for ordering. You probably don't need it for your theme.
Example: `1` for the folder and `04` for the file.
### {{ item.active }}
The item.active indicates, if the item is active or not. You probably don't need it in a page content, because the current page is always an active page, too. But you will need this in another context, for example, if you create a navigation.
### {{ item.key }}
The key of the item within the navigation array. You probably don't need that.
Example: `2`.
### {{ item.keyPath }}
The full key path of the item within the navigation array. You probably don't need that.
Example: `1.3.2`
### {{ item.keyPathArray }}
The full key path of the item within the navigation array as an array instead of a string.
Example: `array(0 => 1, 1 => 3, 2 => 2 )`
This might be useful if you want to determine the depth of the item within the content structure.
Example: `item.keyPathArray|length` returns `3`, so you know that the page exists in third level of the content structure.
### {{ item.chapter }}
The human readable key path of the item as a string. Different to the key path, it starts with `1` instead of `0`. You can use it to print out a chapter number.
Example: `2.4.3`
### {{ item.thisChapter }}
The parent chapter of the current item. If the current item is 1.3.2, then the parent chapter is 1.3.
The variable `item.thisChapter` is an item object again, so you have access to all the above informations. This way, you can display the parent chapter's name or create a link to the parent chapter on the page.
Example: `<a href="{{ item.thisChapter.urlRel }}">{{ item.thisChapter.name}}</a>`
### {{ item.nextItem}}
The next item. If the current item is 1.3.2, then the next item might be 1.3.3 or 1.4.
The `item.nextItem` is an item object again, so you have access to all the informations explained above. You can use the nextItem to create a pagination.
Example: `<a href="{{ item.nextItem.urlRel }}">{{ item.nextItem.name }}</a>`
### {{ item.prevItem}}
The previous item. If the current item is 1.3.2, then the previous item is 1.3.1. If the current item is 1.3, then the previous item might be 1.2.8.
The `item.prevItem` is an item object again, so you have access to all the informations explained above. You can use the prevItem to create a pagination.
Example: `<a href="{{ item.prevItem.urlRel }}">{{ item.prevItem.name }}</a>`
## Specific to Folders or Files
The following informations are specific to files or folders
### {{ item.fileType }}
This information is only available for **files**. The fileType is `md` for Markdown. You will probably not need it for your theme.
Example: `{% if item.elementType == 'file' %} {{ item.fileType}} {% endif %}`
### {{ item.index }}
This information is only available for **folders**. It indicates, if there exits an `index.md` file in the folder or not. If there is no index file with content for the folder, then you can display an alternative content.
The whole usecase might look like this:
```
{% if item.elementType == 'folder' %}
{% if item.index %}
{{ content }}
{% else %}
<h1>{{ item.name }}</h1>
<p>Your alternative static content for a folder.</p>
{% endif %}
{% endif %}
```
### {{ item.folderContent }}
This information is only available for **folders**. It contains the whole content of that folder, again as an multidimensional array of item objects. You can use it to list the content of a folder.
To do so, you have two options:
1. Display only the first level items in the current folder. This can be done with a simple for loop.
2. Display all nested items and folders within the current folder recursively. You have to write a Twig macro for that.
The simple solution with all first level items of the current folder looks like this:
````
{% if item.elementType == 'folder' %}
<ul>
{% for sub in item.folderContent %}
<li>{{ sub.itemName }}</li>
{% endfor %}
</ul>
{% endif %}
````
To display all items within the current folder you have to create a macro in a separate file like this first:
````
{% macro loop_over(folder) %}
{% for element in folder %}
{% if element.elementType == 'folder' %}
<a href="{{ element.urlRel }}">{{ element.name }}</a>
<ul>
{{ macros.loop_over(element.folderContent) }}
</ul>
{% else %}
<a href="{{ element.urlRel }}">{{ element.name }}</a>
{% endif %}
</li>
{% endfor %}
{% endmacro %}
````
Then you have to import the macro into your template and call it like this:
```
{% import 'folderMacro.twig' as macros %}
{% if item.elementType == 'folder' %}
<ul>
{{ macros.loop_over(item.folderContent) }}
</ul>
{% endif %}
```
You will learn more about macros in the chapter about the navigation variable.

View File

@@ -0,0 +1,11 @@
# Breadcrumb
The `{{ breadcrumb }}` variable contains the breadcrumb for the page as an one dimensional array. The array contains item objects. You can loop over the breadcrumb and print the elements out like this:
<ul class="breadcrumb">
{% for element in breadcrumb %}
<li><a href="{{ element.urlRel }}">{{ element.name }}</a></li>
{% endfor %}
</ul>
All informations of the items are available, so check the chapter about the item variable for more details.

View File

@@ -0,0 +1,102 @@
# Navigation
The variable `{{ navigation }}` represents the structure of the whole content folder and can be used to create a navigation.
The `{{ navigation }}` variable is a multidimensional array of item objects. So you have access to nearly all informations, that an item object provides. Only the following informations for the paging is not part of the item objects within the navigation variable:
- thisChapter
- nextItem
- prevItem
The chapter about the `{{ item }}` variable lists all informations, that are provided by the item object. Read it, if you haven't done it yet.
## Example of the {{ navigation }} variable
This is an example of the `{{ navigation }}` variable containing just one folder and a file:
Array(
[0] => stdClass Object(
[originalName] => 0_about-typemill
[elementType] => folder
[index] => 1
[order] => 0
[name] => about typemill
[slug] => about-typemill
[path] => \0_about-typemill
[urlRel] => /about-typemill
[urlAbs] => http://localhost/about-typemill
[key] => 0
[keyPath] => 0
[keyPathArray] => Array
(
[0] => 0
)
[chapter] => 1
[folderContent] => Array
(
[0] => stdClass Object(
[originalName] => 02-what-is-mardown.md
[elementType] => file
[fileType] => md
[order] => 02
[name] => what is mardown
[slug] => what-is-mardown
[path] => \0_about-robodoc\02-what-is-mardown.md
[key] => 0
[keyPath] => 0.0
[keyPathArray] => Array
(
[0] => 0
[1] => 0
)
[chapter] => 1.1
[urlRel] => /about-robodoc/what-is-mardown
[urlAbs] => http://localhost/about-robodoc/what-is-mardown
)
)
)
)
## Create a Navigation for Your Theme
To print out the navigation or a table of contents, you have to loop over `{{ navigation }}` recursively. In Twig, you can do this with a macro.
In the following example, the macro is integrated in a separate template called "navigation.twig". You can also create a separate file with the macro (e.g. "navMacro.twig") and import it into your navigation template.
The whole usecase with the macro and the navigation in one template looks like this:
{# define the macro #}
{% macro loop_over(navigation) %}
{% import _self as macros %}
{% for item in navigation %}
<li>
{% if item.elementType == 'folder' %}
{% if item.index %}
<a href="{{ item.urlRel }}">{{ item.name }}</a>
{% else %}
{{ item.name }}
{% endif %}
<ul>
{{ macros.loop_over(item.folderContent) }}
</ul>
{% else %}
<a href="{{ item.urlRel }}">{{ item.name }}</a>
{% endif %}
</li>
{% endfor %}
{% endmacro %}
{# import the macro and use it to create the navigation #}
{% import _self as macros %}
<nav>
<ul class="main-menu">
{{ macros.loop_over(navigation) }}
</ul>
</nav>
Just as a recommendation for your theme-structure: Typically you create a separate file like `navigation.twig` with all the code above. Then you place this template in a folder like `partials`. You can include this navigation.twig-file in a `layout.twig` file, so that the navigation is included in all websites of your theme. So the structure might look like this:
- theme
- partials
- layout.twig // includes navigation
- navigation.twig
- index.twig // extends layout.twig

View File

@@ -0,0 +1,62 @@
# Settings
The `{{ settings }}` variable is a simple array. It combines the default settings and the user specific settings of the `settings.yaml` file.
## Useful Settings
The following settings might be useful for your theme:
### {{ settings.title }}
The title of the website. The default value is `TYPEMILL`.
### {{ settings.author }}
Thee author of the website. The default value is `unknown`.
### {{ settings.copyright }}
The copyright of the website. The default value is `copyright`.
### {{ settings.startpage }}
Has a separate startpage or not. Default value is `true`.
### {{ settings.theme }}
The name of the theme that is in use. Default value is `typemill`.
### {{ settings.version }}
The version of TYPEMILL that is in use. A value of the format `0.0.1`.
## Additional Settings
There a some more settings that are probably not very useful for your theme:
### {{ settings.themeFolder }}
The folder of the theme. The default value is `theme`.
### {{ settings.contentFolder }}
The folder of the content. The default value is `content`.
### {{ settings.rootPath }}
The full path to the root of the website.
### {{ settings.themePath }}
The full path to the theme of the website.
### {{ settings.authorPath }}
The full path to the author theme. This theme is actually only in use for the setup path, but might hold an admin dashboard in future.
### {{ settings.displayErrorDetails }}
If the error display is off or on. Default value is `false`.
Some more informations are provided by the Slim framework, that runs under the hood of TYPEMILL. You will probably never use them.

View File

@@ -0,0 +1,3 @@
# Theme Variables
TYPEMILL provides **six variables** for your theme. They are easy to understand and simple to use.

View File

@@ -0,0 +1,3 @@
# Hello Developers!
If you love **lightweight systems**, stupid **simple theming** and the template language **Twig**, then TYPEMILL is for you!

View File

@@ -0,0 +1,16 @@
#Release Notes
This is the version history with some release notes.
## Version 1.0.0 (13.04.2017)
The first alpha version of typemill with all basic features for a simple website:
- **Content** with Markdown files and folders
- **Settings** with YAML and a setup page
- **Themes** with Twig and six theme variables
- {{ content }}
- {{ description }}
- {{ item }}
- {{ breadcrumb }}
- {{ navigation }}
- {{ settings }}

View File

@@ -0,0 +1,16 @@
# Usage and Licence
TYPEMILL is published under the MIT licence. This means, that you can do with it whatever you want.
You are always welcome to reference or link to TYPEMILL, to report bugs and to contribute to this project (e.g. share fixes, enhancements or ideas). If this software safed you a lot of time and money, then you are invited to donate some bucks, so I can save some money, too :-)
---
Copyright (c) 2017 Sebastian Schürmanns
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,12 @@
# Imprint
The owner of this website is
Sebastian Schürmanns
Stendaler Str. 15
10559 Berlin
<trendschau@gmail.com>

View File

@@ -0,0 +1,100 @@
# Test the Markdown-Styling
This is just a test file to check, if all the html elements created by the markdown syntax are styled correctly. If you create a new template, please use this page to check your css styling.
## Inline Elements
This is an ordinary paragraph containing only simple text.
This is an _emphasis_ and this is a **bold** text. You can use asterixes to create an *emphasis* or an **bold** text, too. You can _emphasis more than one word_, but if you use it in_the_middle_of_the_word, then no emphasis will appear.
This is a footnote [^1]. Please check at the end of this file, if two footnotes[^2] appear.
This is a [Link](http://writedown.net), you can also use a shortcut to create a <http://writedown.net> without a link text.
## Headlines
We already used some first and second level headlines, but check them in combination of other headlines. Now let us use a
### Third Level Headline
This headline is ligthly more decent and should be visibly lower prioritized than a second level headline.
#### Fourth Level Headline
The fourth level headline will probably not used too often in usual text works, but you should still provide a design for it.
##### Fifth Level Headline
Yes, this is a really low level headline, probably only used by very scientific works or studies with a deep logical structure.
###### Sixth Level Headline
Finally a sixth level headline, and yes: This is really really low. But get your brain around it and provide some nice style!
## Lists
This is an unordered List:
- One Item
- Another Item
- An Item again
This is an ordered List:
1. First Item
2. Second Item
3. Third Item
And this is a definition List:
Apple
: Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.
Orange
: The fruit of an evergreen tree of the genus Citrus.
## Blockquote
There always some women and men with wise words
> But I usually don't read them, to be honest.
## Tables
Tables are a feature of Markdown Extra. Tables are not mentioned in the original Markdown specification.
| Name | Usage |
| --------- | ------- |
| My Name | For Me |
| Your Name | For You |
## Abbreviations
This is part of Markdown Extra, too.
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification is maintained by the W3C.
## Code
Let us create some `<?php inlineCode(); ?>` and now let us check, if a codeblock works:
````
<?php
$welcome = 'Hello World!';
echo $welcome;
?>
````
[^1]: This is the first footnote
[^2]: This is the second footnote

3
content/4_info/index.md Normal file
View File

@@ -0,0 +1,3 @@
# Info
Some informations like version history, copyright, licence and imprint.

2
content/index.md Normal file
View File

@@ -0,0 +1,2 @@
TYPEMILL is a simple system to **publish** your **text-work** (markdown) as a **website**. Nearly no technical skills are required. Just download, learn and start.