From f1dba670bffcca51ec8db2b993385eac5fbd514b Mon Sep 17 00:00:00 2001 From: Panayiotis Lipiridis Date: Tue, 13 Feb 2018 12:50:53 +0200 Subject: [PATCH] Github -> GitHub and javascript -> JavaScript --- cms/generators/blog/advantages_of_static_serving.js | 6 +++--- .../blog/personal-portfolio-website-with-endurojs.js | 10 +++++----- cms/generators/docs/endurojs-for-managers.js | 6 +++--- cms/generators/docs/netlify.js | 8 ++++---- cms/generators/docs/object-control-type.js | 4 ++-- cms/generators/docs/templates.js | 4 ++-- cms/generators/docs/themes.js | 4 ++-- cms/global/features.js | 10 +++++----- components/layout/footer.hbs | 4 ++-- pages/themes.hbs | 2 +- 10 files changed, 29 insertions(+), 29 deletions(-) diff --git a/cms/generators/blog/advantages_of_static_serving.js b/cms/generators/blog/advantages_of_static_serving.js index b4677a0..622e233 100644 --- a/cms/generators/blog/advantages_of_static_serving.js +++ b/cms/generators/blog/advantages_of_static_serving.js @@ -6,10 +6,10 @@ published: true, $doc_markdown: true, $doc_type: 'textarea', - doc: '> Wouldn\'t it be easier to just build the page once?\n\nLet\'s talk about a website, say a simple blog such as this very page you are reading right now. It has a logo, menu, title, each blog entry has its own title, some images, date of creation and some text. All this content is usually stored in a database and **each time somebody visits**, the server gathers all this content, builds the page and serves it to the visitor.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1483429231_database_queries-min.png)\n\n## What is static serving?\n\nWith enduro.js, the page is built only on content change. When visitors come and request the page it\'s already in a form of a prebuilt .html page and ready to be served.\n\n### Cheaper hosting\nThe static website can be served by a very simple and cheap server, in some cases even for free(such as [github pages](https://pages.github.com/)).\n\n### Blazing speeds\nHaving ready-made .html pages means there is no processing needed to serve the page. It\'s just a matter of requesting a file and sending the file. Moreover, the file can be located on a CDN network for even faster delivery.\n\n### Consistent delivery\nBy not using any of the server\'s resources there is less chance of a lag on the server causing inconsistent delivery times. Random traffic peak can cause many users to have to wait for your page to be delivered.\n\n### Simplicity\nBuilding the page each time somebody requests it allows errors to creep in anytime. When you pre-build the page you know each user will always receive this exact page. Every time.\n\n## Drawbacks\n\nObviously this approach works only for websites that should serve the same thing to all users, such as this one you are reading right now.\n\n* Displaying personalized content is more difficult.\n* Logging in is an absolute no-go with this approach\n* Time-related information such as \'10 minutes ago\' is harder to do.\n\n### Using javascript to fill these use cases\nIn most cases, javascript can be used to add personalized content or content that is dependant on something dynamic. Enduro.js can and is used to make web-apps that load dynamic content after the initial page load, which is still pregenerated. When users can log into a website, using one-page web apps such as gmail is a modern way to approach this anyways.\n\n## enduro.js is not just a static page generator\nEnduro.js is built on top of node.js and [express](http://expressjs.com/). It is absolutely ok and easy to build a dynamic page with enduro. This way, enduro.js allows you to mix static and dynamic pages to achieve maximum efficiency.\n\n## Cache\nMost of the speed penalty dynamic serving causes can be mitigated by using caching. For example, for Wordpress there is a [cache plugin].(https://wordpress.org/plugins/w3-total-cache/). This however adds complexity by having a dynamically built pages and then adding a layer that is trying to save the pages instead of just pre-building the pages in the first place.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1485523121_spongebob.jpg)\n\n## Further reading\n\nNoah Veltman explains static vs dynamic serving as a vending machine vs a restaurant. Very clever, read it here: http://noahveltman.com/static-dynamic/', + doc: '> Wouldn\'t it be easier to just build the page once?\n\nLet\'s talk about a website, say a simple blog such as this very page you are reading right now. It has a logo, menu, title, each blog entry has its own title, some images, date of creation and some text. All this content is usually stored in a database and **each time somebody visits**, the server gathers all this content, builds the page and serves it to the visitor.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1483429231_database_queries-min.png)\n\n## What is static serving?\n\nWith enduro.js, the page is built only on content change. When visitors come and request the page it\'s already in a form of a prebuilt .html page and ready to be served.\n\n### Cheaper hosting\nThe static website can be served by a very simple and cheap server, in some cases even for free(such as [github pages](https://pages.github.com/)).\n\n### Blazing speeds\nHaving ready-made .html pages means there is no processing needed to serve the page. It\'s just a matter of requesting a file and sending the file. Moreover, the file can be located on a CDN network for even faster delivery.\n\n### Consistent delivery\nBy not using any of the server\'s resources there is less chance of a lag on the server causing inconsistent delivery times. Random traffic peak can cause many users to have to wait for your page to be delivered.\n\n### Simplicity\nBuilding the page each time somebody requests it allows errors to creep in anytime. When you pre-build the page you know each user will always receive this exact page. Every time.\n\n## Drawbacks\n\nObviously this approach works only for websites that should serve the same thing to all users, such as this one you are reading right now.\n\n* Displaying personalized content is more difficult.\n* Logging in is an absolute no-go with this approach\n* Time-related information such as \'10 minutes ago\' is harder to do.\n\n### Using JavaScript to fill these use cases\nIn most cases, JavaScript can be used to add personalized content or content that is dependant on something dynamic. Enduro.js can and is used to make web-apps that load dynamic content after the initial page load, which is still pregenerated. When users can log into a website, using one-page web apps such as gmail is a modern way to approach this anyways.\n\n## enduro.js is not just a static page generator\nEnduro.js is built on top of node.js and [express](http://expressjs.com/). It is absolutely ok and easy to build a dynamic page with enduro. This way, enduro.js allows you to mix static and dynamic pages to achieve maximum efficiency.\n\n## Cache\nMost of the speed penalty dynamic serving causes can be mitigated by using caching. For example, for Wordpress there is a [cache plugin].(https://wordpress.org/plugins/w3-total-cache/). This however adds complexity by having a dynamically built pages and then adding a layer that is trying to save the pages instead of just pre-building the pages in the first place.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1485523121_spongebob.jpg)\n\n## Further reading\n\nNoah Veltman explains static vs dynamic serving as a vending machine vs a restaurant. Very clever, read it here: http://noahveltman.com/static-dynamic/', $abstracted_content_hidden: true, abstracted_content: { - marked_doc: '
\n

Wouldn't it be easier to just build the page once?

\n
\n

Let's talk about a website, say a simple blog such as this very page you are reading right now. It has a logo, menu, title, each blog entry has its own title, some images, date of creation and some text. All this content is usually stored in a database and each time somebody visits, the server gathers all this content, builds the page and serves it to the visitor.

\n

\n

What is static serving?

\n

With enduro.js, the page is built only on content change. When visitors come and request the page it's already in a form of a prebuilt .html page and ready to be served.

\n

Cheaper hosting

\n

The static website can be served by a very simple and cheap server, in some cases even for free(such as github pages).

\n

Blazing speeds

\n

Having ready-made .html pages means there is no processing needed to serve the page. It's just a matter of requesting a file and sending the file. Moreover, the file can be located on a CDN network for even faster delivery.

\n

Consistent delivery

\n

By not using any of the server's resources there is less chance of a lag on the server causing inconsistent delivery times. Random traffic peak can cause many users to have to wait for your page to be delivered.

\n

Simplicity

\n

Building the page each time somebody requests it allows errors to creep in anytime. When you pre-build the page you know each user will always receive this exact page. Every time.

\n

Drawbacks

\n

Obviously this approach works only for websites that should serve the same thing to all users, such as this one you are reading right now.

\n\n

Using javascript to fill these use cases

\n

In most cases, javascript can be used to add personalized content or content that is dependant on something dynamic. Enduro.js can and is used to make web-apps that load dynamic content after the initial page load, which is still pregenerated. When users can log into a website, using one-page web apps such as gmail is a modern way to approach this anyways.

\n

enduro.js is not just a static page generator

\n

Enduro.js is built on top of node.js and express. It is absolutely ok and easy to build a dynamic page with enduro. This way, enduro.js allows you to mix static and dynamic pages to achieve maximum efficiency.

\n

Cache

\n

Most of the speed penalty dynamic serving causes can be mitigated by using caching. For example, for Wordpress there is a [cache plugin].(https://wordpress.org/plugins/w3-total-cache/). This however adds complexity by having a dynamically built pages and then adding a layer that is trying to save the pages instead of just pre-building the pages in the first place.

\n

\n

Further reading

\n

Noah Veltman explains static vs dynamic serving as a vending machine vs a restaurant. Very clever, read it here: http://noahveltman.com/static-dynamic/

\n', + marked_doc: '
\n

Wouldn't it be easier to just build the page once?

\n
\n

Let's talk about a website, say a simple blog such as this very page you are reading right now. It has a logo, menu, title, each blog entry has its own title, some images, date of creation and some text. All this content is usually stored in a database and each time somebody visits, the server gathers all this content, builds the page and serves it to the visitor.

\n

\n

What is static serving?

\n

With enduro.js, the page is built only on content change. When visitors come and request the page it's already in a form of a prebuilt .html page and ready to be served.

\n

Cheaper hosting

\n

The static website can be served by a very simple and cheap server, in some cases even for free(such as github pages).

\n

Blazing speeds

\n

Having ready-made .html pages means there is no processing needed to serve the page. It's just a matter of requesting a file and sending the file. Moreover, the file can be located on a CDN network for even faster delivery.

\n

Consistent delivery

\n

By not using any of the server's resources there is less chance of a lag on the server causing inconsistent delivery times. Random traffic peak can cause many users to have to wait for your page to be delivered.

\n

Simplicity

\n

Building the page each time somebody requests it allows errors to creep in anytime. When you pre-build the page you know each user will always receive this exact page. Every time.

\n

Drawbacks

\n

Obviously this approach works only for websites that should serve the same thing to all users, such as this one you are reading right now.

\n\n

Using JavaScript to fill these use cases

\n

In most cases, JavaScript can be used to add personalized content or content that is dependant on something dynamic. Enduro.js can and is used to make web-apps that load dynamic content after the initial page load, which is still pregenerated. When users can log into a website, using one-page web apps such as gmail is a modern way to approach this anyways.

\n

enduro.js is not just a static page generator

\n

Enduro.js is built on top of node.js and express. It is absolutely ok and easy to build a dynamic page with enduro. This way, enduro.js allows you to mix static and dynamic pages to achieve maximum efficiency.

\n

Cache

\n

Most of the speed penalty dynamic serving causes can be mitigated by using caching. For example, for Wordpress there is a [cache plugin].(https://wordpress.org/plugins/w3-total-cache/). This however adds complexity by having a dynamically built pages and then adding a layer that is trying to save the pages instead of just pre-building the pages in the first place.

\n

\n

Further reading

\n

Noah Veltman explains static vs dynamic serving as a vending machine vs a restaurant. Very clever, read it here: http://noahveltman.com/static-dynamic/

\n', contents: [ { heading: 'What is static serving?', @@ -42,7 +42,7 @@ link: 'drawbacks' }, { - heading: 'Using javascript to fill these use cases', + heading: 'Using JavaScript to fill these use cases', level: '3', link: 'using-javascript-to-fill-these-use-cases' }, diff --git a/cms/generators/blog/personal-portfolio-website-with-endurojs.js b/cms/generators/blog/personal-portfolio-website-with-endurojs.js index 880ad26..dbf16d3 100644 --- a/cms/generators/blog/personal-portfolio-website-with-endurojs.js +++ b/cms/generators/blog/personal-portfolio-website-with-endurojs.js @@ -6,10 +6,10 @@ published: true, $doc_markdown: true, $doc_type: 'textarea', - doc: '![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487950080_themes_intro.jpg)\n\n>Whether you are a freelancer, photographer or maybe just looking for job, having a personal portfolio website can\'t hurt, can it? I will try to walk you through creating your own personal portfolio in under **5 minutes**. No javascript/html/css knowledge necessary!\n\n## Prerequisites\nYou have to have [node.js installed](https://nodejs.org/en/download/) with enduro.js installed globally (just run `npm i enduro -g`).\n\n## Creating new project\nNext up, we are going to create a new project from an **mirror** theme. Open up your terminal window, cd into the directory where you would want your project to be stored in and run:\n\n```bash\n$ enduro theme mirror\n```\n\nYou will be asked to provide a name for your portfolio as well as a admin login username and password.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487950357_theme_cli_screenshot.png)\n\nOnce your project is created, a browser window opens automatically! To edit content just click the **edit this page** button.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487950530_cp.png)\n\n## Access admin interface\nClicking the **edit this page** button will open the enduro.js admin interface. Just login with the credentials you\'ve put in previously in the terminal window.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487950755_cp.png)\n\n## Changing content\nUsing the admin interface is quite self-explanatory. You can copy-paste images by clicking the image or just putting public links to the images by clicking the link icon. You\'ll get it.\n\n## Publishing your website\nIf you open the folder where you created this project just find a $$/_generated folder. Just upload this whole folder somewhere and your website is online!\n\n![](https://www.netlify.com/img/press/logos/full-logo-light.svg)\n\n### Publishing your portfolio with Netlify\n\nNetlify offers probably the simplest way to get your portfolio online. Good news is that the **mirror** theme comes preconfigured to work with Netlify out of the box. Just install netlify cli by running `npm install netlify-cli -g`. After that all you need to do is `enduro render && netlify deploy -p _generated`. You can also hook it up to a GitHub repository - read more about this in the [docs](/docs/netlify).\n\n### Publish your portfolio on Github pages\n[Github pages](https://pages.github.com/) offers a free way to host your static page. For this to work you have to put the generated files in a `gh-pages` branch.\n\nYou can just use github\'s website user interface to upload the files from the $$/_generated folder. Other option is to use git to get this done. Follow this instructions to get your enduro.js generated personal portfolio online with Github pages:\n\n1. [Sign up](https://github.com/join) for a free Github account if you don\'t already have one\n2. Create new repository on github.com and copy its **.git** link\n3. Use the terminal to **cd into the project\'s folder** and do `git init`, `git add .` and `git commit -m \'first commit\'`\n4. Link your folder with Github\'s repository by running `git remote add origin <.git link you got from github>`\n5. Put the files on Github by running `git push --set-upstream origin master`\n6. Now all the source files are on Github, but we need to push the **generated files** into a separate branch named **gh-pages**, which Github recognizes and serves as a static page.\n7. `git checkout -b gh-pages`\n7. `git add -f _generated`\n7. `git commit -m \'publishing gh pages\'`\n7. `git push --set-upstream origin gh-pages`\n8. `git push origin $(git subtree split --prefix _generated):gh-pages --force`\n\nIf everything went well, your portfolio should be live at **https://.github.io//**', + doc: '![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487950080_themes_intro.jpg)\n\n>Whether you are a freelancer, photographer or maybe just looking for job, having a personal portfolio website can\'t hurt, can it? I will try to walk you through creating your own personal portfolio in under **5 minutes**. No JavaScript/html/css knowledge necessary!\n\n## Prerequisites\nYou have to have [node.js installed](https://nodejs.org/en/download/) with enduro.js installed globally (just run `npm i enduro -g`).\n\n## Creating new project\nNext up, we are going to create a new project from an **mirror** theme. Open up your terminal window, cd into the directory where you would want your project to be stored in and run:\n\n```bash\n$ enduro theme mirror\n```\n\nYou will be asked to provide a name for your portfolio as well as a admin login username and password.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487950357_theme_cli_screenshot.png)\n\nOnce your project is created, a browser window opens automatically! To edit content just click the **edit this page** button.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487950530_cp.png)\n\n## Access admin interface\nClicking the **edit this page** button will open the enduro.js admin interface. Just login with the credentials you\'ve put in previously in the terminal window.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487950755_cp.png)\n\n## Changing content\nUsing the admin interface is quite self-explanatory. You can copy-paste images by clicking the image or just putting public links to the images by clicking the link icon. You\'ll get it.\n\n## Publishing your website\nIf you open the folder where you created this project just find a $$/_generated folder. Just upload this whole folder somewhere and your website is online!\n\n![](https://www.netlify.com/img/press/logos/full-logo-light.svg)\n\n### Publishing your portfolio with Netlify\n\nNetlify offers probably the simplest way to get your portfolio online. Good news is that the **mirror** theme comes preconfigured to work with Netlify out of the box. Just install netlify cli by running `npm install netlify-cli -g`. After that all you need to do is `enduro render && netlify deploy -p _generated`. You can also hook it up to a GitHub repository - read more about this in the [docs](/docs/netlify).\n\n### Publish your portfolio on GitHub pages\n[GitHub pages](https://pages.github.com/) offers a free way to host your static page. For this to work you have to put the generated files in a `gh-pages` branch.\n\nYou can just use github\'s website user interface to upload the files from the $$/_generated folder. Other option is to use git to get this done. Follow this instructions to get your enduro.js generated personal portfolio online with GitHub pages:\n\n1. [Sign up](https://github.com/join) for a free GitHub account if you don\'t already have one\n2. Create new repository on github.com and copy its **.git** link\n3. Use the terminal to **cd into the project\'s folder** and do `git init`, `git add .` and `git commit -m \'first commit\'`\n4. Link your folder with GitHub\'s repository by running `git remote add origin <.git link you got from github>`\n5. Put the files on GitHub by running `git push --set-upstream origin master`\n6. Now all the source files are on GitHub, but we need to push the **generated files** into a separate branch named **gh-pages**, which GitHub recognizes and serves as a static page.\n7. `git checkout -b gh-pages`\n7. `git add -f _generated`\n7. `git commit -m \'publishing gh pages\'`\n7. `git push --set-upstream origin gh-pages`\n8. `git push origin $(git subtree split --prefix _generated):gh-pages --force`\n\nIf everything went well, your portfolio should be live at **https://.github.io//**', $abstracted_content_hidden: true, abstracted_content: { - marked_doc: '

\n
\n

Whether you are a freelancer, photographer or maybe just looking for job, having a personal portfolio website can't hurt, can it? I will try to walk you through creating your own personal portfolio in under 5 minutes. No javascript/html/css knowledge necessary!

\n
\n

Prerequisites

\n

You have to have node.js installed with enduro.js installed globally (just run npm i enduro -g).

\n

Creating new project

\n

Next up, we are going to create a new project from an mirror theme. Open up your terminal window, cd into the directory where you would want your project to be stored in and run:

\n
$ enduro theme mirror\n
\n

You will be asked to provide a name for your portfolio as well as a admin login username and password.

\n

\n

Once your project is created, a browser window opens automatically! To edit content just click the edit this page button.

\n

\n

Access admin interface

\n

Clicking the edit this page button will open the enduro.js admin interface. Just login with the credentials you've put in previously in the terminal window.

\n

\n

Changing content

\n

Using the admin interface is quite self-explanatory. You can copy-paste images by clicking the image or just putting public links to the images by clicking the link icon. You'll get it.

\n

Publishing your website

\n

If you open the folder where you created this project just find a /_generated folder. Just upload this whole folder somewhere and your website is online!

\n

\n

Publishing your portfolio with Netlify

\n

Netlify offers probably the simplest way to get your portfolio online. Good news is that the mirror theme comes preconfigured to work with Netlify out of the box. Just install netlify cli by running npm install netlify-cli -g. After that all you need to do is enduro render && netlify deploy -p _generated. You can also hook it up to a GitHub repository - read more about this in the docs.

\n

Publish your portfolio on Github pages

\n

Github pages offers a free way to host your static page. For this to work you have to put the generated files in a gh-pages branch.

\n

You can just use github's website user interface to upload the files from the /_generated folder. Other option is to use git to get this done. Follow this instructions to get your enduro.js generated personal portfolio online with Github pages:

\n
    \n
  1. Sign up for a free Github account if you don't already have one
    2. \n
  2. Create new repository on github.com and copy its .git link
    3. \n
  3. Use the terminal to cd into the project's folder and do git init, git add . and git commit -m 'first commit'
    4. \n
  4. Link your folder with Github's repository by running git remote add origin <.git link you got from github>
    5. \n
  5. Put the files on Github by running git push --set-upstream origin master
    6. \n
  6. Now all the source files are on Github, but we need to push the generated files into a separate branch named gh-pages, which Github recognizes and serves as a static page.
    7. \n
  7. git checkout -b gh-pages
    8. \n
  8. git add -f _generated
    9. \n
  9. git commit -m 'publishing gh pages'
    10. \n
  10. git push --set-upstream origin gh-pages
    11. \n
  11. git push origin $(git subtree split --prefix _generated):gh-pages --force
    12. \n
\n

If everything went well, your portfolio should be live at https://<your_github_username>.github.io/<project_name>/

\n', + marked_doc: '

\n
\n

Whether you are a freelancer, photographer or maybe just looking for job, having a personal portfolio website can't hurt, can it? I will try to walk you through creating your own personal portfolio in under 5 minutes. No JavaScript/html/css knowledge necessary!

\n
\n

Prerequisites

\n

You have to have node.js installed with enduro.js installed globally (just run npm i enduro -g).

\n

Creating new project

\n

Next up, we are going to create a new project from an mirror theme. Open up your terminal window, cd into the directory where you would want your project to be stored in and run:

\n
$ enduro theme mirror\n
\n

You will be asked to provide a name for your portfolio as well as a admin login username and password.

\n

\n

Once your project is created, a browser window opens automatically! To edit content just click the edit this page button.

\n

\n

Access admin interface

\n

Clicking the edit this page button will open the enduro.js admin interface. Just login with the credentials you've put in previously in the terminal window.

\n

\n

Changing content

\n

Using the admin interface is quite self-explanatory. You can copy-paste images by clicking the image or just putting public links to the images by clicking the link icon. You'll get it.

\n

Publishing your website

\n

If you open the folder where you created this project just find a /_generated folder. Just upload this whole folder somewhere and your website is online!

\n

\n

Publishing your portfolio with Netlify

\n

Netlify offers probably the simplest way to get your portfolio online. Good news is that the mirror theme comes preconfigured to work with Netlify out of the box. Just install netlify cli by running npm install netlify-cli -g. After that all you need to do is enduro render && netlify deploy -p _generated. You can also hook it up to a GitHub repository - read more about this in the docs.

\n

Publish your portfolio on GitHub pages

\n

GitHub pages offers a free way to host your static page. For this to work you have to put the generated files in a gh-pages branch.

\n

You can just use github's website user interface to upload the files from the /_generated folder. Other option is to use git to get this done. Follow this instructions to get your enduro.js generated personal portfolio online with GitHub pages:

\n
    \n
  1. Sign up for a free GitHub account if you don't already have one
    2. \n
  2. Create new repository on github.com and copy its .git link
    3. \n
  3. Use the terminal to cd into the project's folder and do git init, git add . and git commit -m 'first commit'
    4. \n
  4. Link your folder with GitHub's repository by running git remote add origin <.git link you got from github>
    5. \n
  5. Put the files on GitHub by running git push --set-upstream origin master
    6. \n
  6. Now all the source files are on GitHub, but we need to push the generated files into a separate branch named gh-pages, which GitHub recognizes and serves as a static page.
    7. \n
  7. git checkout -b gh-pages
    8. \n
  8. git add -f _generated
    9. \n
  9. git commit -m 'publishing gh pages'
    10. \n
  10. git push --set-upstream origin gh-pages
    11. \n
  11. git push origin $(git subtree split --prefix _generated):gh-pages --force
    12. \n
\n

If everything went well, your portfolio should be live at https://<your_github_username>.github.io/<project_name>/

\n', contents: [ { heading: 'Prerequisites', @@ -42,19 +42,19 @@ link: 'publishing-your-portfolio-with-netlify' }, { - heading: 'Publish your portfolio on Github pages', + heading: 'Publish your portfolio on GitHub pages', level: '3', link: 'publish-your-portfolio-on-github-pages' } ] }, teaser: { - doc: 'Whether you are a freelancer, photographer or maybe just looking for job, having a personal portfolio website can\'t hurt, can it? I will try to walk you through creating your own personal portfolio in under **5 minutes**. No javascript/html/css knowledge necessary!', + doc: 'Whether you are a freelancer, photographer or maybe just looking for job, having a personal portfolio website can\'t hurt, can it? I will try to walk you through creating your own personal portfolio in under **5 minutes**. No JavaScript/html/css knowledge necessary!', $image_type: 'image', image: 'https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1488182689_7be3lfd7wegucxj62yb9.png', $abstracted_content_hidden: true, abstracted_content: { - marked_doc: '

Whether you are a freelancer, photographer or maybe just looking for job, having a personal portfolio website can't hurt, can it? I will try to walk you through creating your own personal portfolio in under 5 minutes. No javascript/html/css knowledge necessary!

\n', + marked_doc: '

Whether you are a freelancer, photographer or maybe just looking for job, having a personal portfolio website can't hurt, can it? I will try to walk you through creating your own personal portfolio in under 5 minutes. No JavaScript/html/css knowledge necessary!

\n', contents: [] } }, diff --git a/cms/generators/docs/endurojs-for-managers.js b/cms/generators/docs/endurojs-for-managers.js index 7b2520d..460f8d9 100644 --- a/cms/generators/docs/endurojs-for-managers.js +++ b/cms/generators/docs/endurojs-for-managers.js @@ -2,14 +2,14 @@ title: 'Enduro.js for managers', $doc_markdown: true, $doc_type: 'textarea', - doc: 'To get an idea of what enduro.js is and how you might use it, let\'s compare it to market leader - wordpress.\n\n### Easy vs fast?\nWith wordpress, it is __easy__ to build a website.\nWith enduro.js, it is __fast__ to build a website.\n\nenduro.js is not necessary easy to use. It has great, easy-to-use admin interface, but to create a web project in enduro.js you will need a professional node.js developers.\n\n### CMS vs framework\nWordpress is a __content management software__.\nEnduro.js is a __web development framework__.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1470398313_wordcloud_small.png)\n\nEnduro.js has all these tools built in and is ready to be deployed in a web scale cloud delivery service of your choice.\n\n### Isomorphic javascript\nWordpress splits it\'s code to __frontend__ and __backend__.\nEnduro.js has only one language - __javascript__ all over the stack.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1470385144_isojavascript_small.png)\n\nWith the technological advances of javascript and node.js, it is crazy efficient to use only one language instead of using two.\n\n### Click or code\nWith wordpress, you have __graphical__ interface to set up the project.\nWith enduro.js, you have __command line__ interface to set up the project.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1470383901_Aug-05-2016%2009-58-06.gif)\n\nLook, clicking is lame and slow. I don\'t want to waste my time clicking on things, do you? If you have professionals at your company they prefer typing.', + doc: 'To get an idea of what enduro.js is and how you might use it, let\'s compare it to market leader - wordpress.\n\n### Easy vs fast?\nWith wordpress, it is __easy__ to build a website.\nWith enduro.js, it is __fast__ to build a website.\n\nenduro.js is not necessary easy to use. It has great, easy-to-use admin interface, but to create a web project in enduro.js you will need a professional node.js developers.\n\n### CMS vs framework\nWordpress is a __content management software__.\nEnduro.js is a __web development framework__.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1470398313_wordcloud_small.png)\n\nEnduro.js has all these tools built in and is ready to be deployed in a web scale cloud delivery service of your choice.\n\n### Isomorphic JavaScript\nWordpress splits it\'s code to __frontend__ and __backend__.\nEnduro.js has only one language - __javascript__ all over the stack.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1470385144_isojavascript_small.png)\n\nWith the technological advances of JavaScript and node.js, it is crazy efficient to use only one language instead of using two.\n\n### Click or code\nWith wordpress, you have __graphical__ interface to set up the project.\nWith enduro.js, you have __command line__ interface to set up the project.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1470383901_Aug-05-2016%2009-58-06.gif)\n\nLook, clicking is lame and slow. I don\'t want to waste my time clicking on things, do you? If you have professionals at your company they prefer typing.', $marked_doc_hidden: true, marked_doc: '', contents: [], $contents_hidden: true, $abstracted_content_hidden: true, abstracted_content: { - marked_doc: '

To get an idea of what enduro.js is and how you might use it, let's compare it to market leader - wordpress.

\n

Easy vs fast?

\n

With wordpress, it is easy to build a website.\nWith enduro.js, it is fast to build a website.

\n

enduro.js is not necessary easy to use. It has great, easy-to-use admin interface, but to create a web project in enduro.js you will need a professional node.js developers.

\n

CMS vs framework

\n

Wordpress is a content management software.\nEnduro.js is a web development framework.

\n

\n

Enduro.js has all these tools built in and is ready to be deployed in a web scale cloud delivery service of your choice.

\n

Isomorphic javascript

\n

Wordpress splits it's code to frontend and backend.\nEnduro.js has only one language - javascript all over the stack.

\n

\n

With the technological advances of javascript and node.js, it is crazy efficient to use only one language instead of using two.

\n

Click or code

\n

With wordpress, you have graphical interface to set up the project.\nWith enduro.js, you have command line interface to set up the project.

\n

\n

Look, clicking is lame and slow. I don't want to waste my time clicking on things, do you? If you have professionals at your company they prefer typing.

\n', + marked_doc: '

To get an idea of what enduro.js is and how you might use it, let's compare it to market leader - wordpress.

\n

Easy vs fast?

\n

With wordpress, it is easy to build a website.\nWith enduro.js, it is fast to build a website.

\n

enduro.js is not necessary easy to use. It has great, easy-to-use admin interface, but to create a web project in enduro.js you will need a professional node.js developers.

\n

CMS vs framework

\n

Wordpress is a content management software.\nEnduro.js is a web development framework.

\n

\n

Enduro.js has all these tools built in and is ready to be deployed in a web scale cloud delivery service of your choice.

\n

Isomorphic JavaScript

\n

Wordpress splits it's code to frontend and backend.\nEnduro.js has only one language - javascript all over the stack.

\n

\n

With the technological advances of JavaScript and node.js, it is crazy efficient to use only one language instead of using two.

\n

Click or code

\n

With wordpress, you have graphical interface to set up the project.\nWith enduro.js, you have command line interface to set up the project.

\n

\n

Look, clicking is lame and slow. I don't want to waste my time clicking on things, do you? If you have professionals at your company they prefer typing.

\n', contents: [ { heading: 'Easy vs fast?', @@ -22,7 +22,7 @@ link: 'cms-vs-framework' }, { - heading: 'Isomorphic javascript', + heading: 'Isomorphic JavaScript', level: '3', link: 'isomorphic-javascript' }, diff --git a/cms/generators/docs/netlify.js b/cms/generators/docs/netlify.js index d9838c2..11666ef 100644 --- a/cms/generators/docs/netlify.js +++ b/cms/generators/docs/netlify.js @@ -2,14 +2,14 @@ title: 'Deploying with Netlify', $doc_markdown: true, $doc_type: 'textarea', - doc: 'The awesome [Netlify service](https://app.netlify.com/) is ideal for enduro.js workflow. It is ready to host your enduro.js static website for an unbeatable price (or even for free, check out their [pricing](https://www.netlify.com/pricing/)) and the deployment process could not be easier.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1488293175_netlify_feelsgood_horizontal.png)\n\n## Getting ready\n\nYou only need two things for this to work:\n* Enduro.js project (pssst, you can just `enduro theme mirror`)\n* [Netlify cli tools](https://www.netlify.com/docs/#quickstart) (`npm install netlify-cli -g`)\n\n## Deploying your website\n\n### Manual deploy\n\nThis is shockingly easy: Just do `enduro render && netlify deploy -p _generated` and your website is live.\n\nTo break this down:\n* `enduro render` will generate all the static files and stage everything into a $$_generated subfolder.\n* `netlify deploy` will create a new Netlify app\n* `-p _generated` will specify that you will be wanting to upload the $$_generated folder.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1488353875_cp.png)\n\n### Doing this properly with Github\n\nNetlify can be linked to a Github repository. This way, Netlify will rebuild the static website each time you update your git repository. This is the proper way to do this.\n\nAll you need to do is initiate `netlify init` command. Notice, that you have to have an origin set up **with ssh**.\n\nWhen the cli process prompts you, just input these values.\n\n| Prompt | Value |\n|--------------------- |-------------- |\n| Directory to deploy | _generated |\n| Build command | enduro build |\n\nThen it just takes about a minute for Netlify to build your website.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1488355577_cp.png)\n\n### No cli approach\n\nJust for the sake of providing all options, you can also just drag the $$_generated folder into Netlify web user interface and it will work awesomely. Whatever. It is dead simple and it works.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1488356406_cp.png)\n\n\n## Limitations\nNetlify offers purely static hosting. If your project has some api functionality or you\'ve set up some pages to be dynamic you\'ll have to use node.js hosting such as [heroku](http://www.endurojs.com/docs/heroku). With Netlify you won\'t be able to use admin interface to change your website. You\'ll have to use localhost:5000/admin or just change the files manually.', + doc: 'The awesome [Netlify service](https://app.netlify.com/) is ideal for enduro.js workflow. It is ready to host your enduro.js static website for an unbeatable price (or even for free, check out their [pricing](https://www.netlify.com/pricing/)) and the deployment process could not be easier.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1488293175_netlify_feelsgood_horizontal.png)\n\n## Getting ready\n\nYou only need two things for this to work:\n* Enduro.js project (pssst, you can just `enduro theme mirror`)\n* [Netlify cli tools](https://www.netlify.com/docs/#quickstart) (`npm install netlify-cli -g`)\n\n## Deploying your website\n\n### Manual deploy\n\nThis is shockingly easy: Just do `enduro render && netlify deploy -p _generated` and your website is live.\n\nTo break this down:\n* `enduro render` will generate all the static files and stage everything into a $$_generated subfolder.\n* `netlify deploy` will create a new Netlify app\n* `-p _generated` will specify that you will be wanting to upload the $$_generated folder.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1488353875_cp.png)\n\n### Doing this properly with GitHub\n\nNetlify can be linked to a GitHub repository. This way, Netlify will rebuild the static website each time you update your git repository. This is the proper way to do this.\n\nAll you need to do is initiate `netlify init` command. Notice, that you have to have an origin set up **with ssh**.\n\nWhen the cli process prompts you, just input these values.\n\n| Prompt | Value |\n|--------------------- |-------------- |\n| Directory to deploy | _generated |\n| Build command | enduro build |\n\nThen it just takes about a minute for Netlify to build your website.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1488355577_cp.png)\n\n### No cli approach\n\nJust for the sake of providing all options, you can also just drag the $$_generated folder into Netlify web user interface and it will work awesomely. Whatever. It is dead simple and it works.\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1488356406_cp.png)\n\n\n## Limitations\nNetlify offers purely static hosting. If your project has some api functionality or you\'ve set up some pages to be dynamic you\'ll have to use node.js hosting such as [heroku](http://www.endurojs.com/docs/heroku). With Netlify you won\'t be able to use admin interface to change your website. You\'ll have to use localhost:5000/admin or just change the files manually.', $marked_doc_hidden: true, marked_doc: '', contents: [], $contents_hidden: true, $abstracted_content_hidden: true, abstracted_content: { - marked_doc: '

The awesome Netlify service is ideal for enduro.js workflow. It is ready to host your enduro.js static website for an unbeatable price (or even for free, check out their pricing) and the deployment process could not be easier.

\n

\n

Getting ready

\n

You only need two things for this to work:

\n
    \n
  • Enduro.js project (pssst, you can just enduro theme mirror)
    • \n
  • Netlify cli tools (npm install netlify-cli -g)
    • \n
\n

Deploying your website

\n

Manual deploy

\n

This is shockingly easy: Just do enduro render && netlify deploy -p _generated and your website is live.

\n

To break this down:

\n
    \n
  • enduro render will generate all the static files and stage everything into a _generated subfolder.
    • \n
  • netlify deploy will create a new Netlify app
    • \n
  • -p _generated will specify that you will be wanting to upload the _generated folder.
    • \n
\n

\n

Doing this properly with Github

\n

Netlify can be linked to a Github repository. This way, Netlify will rebuild the static website each time you update your git repository. This is the proper way to do this.

\n

All you need to do is initiate netlify init command. Notice, that you have to have an origin set up with ssh.

\n

When the cli process prompts you, just input these values.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PromptValue
Directory to deploy_generated
Build commandenduro build
\n

Then it just takes about a minute for Netlify to build your website.

\n

\n

No cli approach

\n

Just for the sake of providing all options, you can also just drag the _generated folder into Netlify web user interface and it will work awesomely. Whatever. It is dead simple and it works.

\n

\n

Limitations

\n

Netlify offers purely static hosting. If your project has some api functionality or you've set up some pages to be dynamic you'll have to use node.js hosting such as heroku. With Netlify you won't be able to use admin interface to change your website. You'll have to use localhost:5000/admin or just change the files manually.

\n', + marked_doc: '

The awesome Netlify service is ideal for enduro.js workflow. It is ready to host your enduro.js static website for an unbeatable price (or even for free, check out their pricing) and the deployment process could not be easier.

\n

\n

Getting ready

\n

You only need two things for this to work:

\n
    \n
  • Enduro.js project (pssst, you can just enduro theme mirror)
    • \n
  • Netlify cli tools (npm install netlify-cli -g)
    • \n
\n

Deploying your website

\n

Manual deploy

\n

This is shockingly easy: Just do enduro render && netlify deploy -p _generated and your website is live.

\n

To break this down:

\n
    \n
  • enduro render will generate all the static files and stage everything into a _generated subfolder.
    • \n
  • netlify deploy will create a new Netlify app
    • \n
  • -p _generated will specify that you will be wanting to upload the _generated folder.
    • \n
\n

\n

Doing this properly with GitHub

\n

Netlify can be linked to a GitHub repository. This way, Netlify will rebuild the static website each time you update your git repository. This is the proper way to do this.

\n

All you need to do is initiate netlify init command. Notice, that you have to have an origin set up with ssh.

\n

When the cli process prompts you, just input these values.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PromptValue
Directory to deploy_generated
Build commandenduro build
\n

Then it just takes about a minute for Netlify to build your website.

\n

\n

No cli approach

\n

Just for the sake of providing all options, you can also just drag the _generated folder into Netlify web user interface and it will work awesomely. Whatever. It is dead simple and it works.

\n

\n

Limitations

\n

Netlify offers purely static hosting. If your project has some api functionality or you've set up some pages to be dynamic you'll have to use node.js hosting such as heroku. With Netlify you won't be able to use admin interface to change your website. You'll have to use localhost:5000/admin or just change the files manually.

\n', contents: [ { heading: 'Getting ready', @@ -27,7 +27,7 @@ link: 'manual-deploy' }, { - heading: 'Doing this properly with Github', + heading: 'Doing this properly with GitHub', level: '3', link: 'doing-this-properly-with-github' }, @@ -46,4 +46,4 @@ meta: { last_edited: 1501680325 } -} \ No newline at end of file +} diff --git a/cms/generators/docs/object-control-type.js b/cms/generators/docs/object-control-type.js index da78d72..339a666 100644 --- a/cms/generators/docs/object-control-type.js +++ b/cms/generators/docs/object-control-type.js @@ -2,14 +2,14 @@ title: 'Object control type', $doc_markdown: true, $doc_type: 'textarea', - doc: 'Object control type is the most simple control that is created by a simple javascript object:\n```\nblog_article: {}\n```\nWill result in this:\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1473411617_cp.png)\n\n## Available terminations\n* noframe\n* expander\n\n### Noframe\nCompletely removes the frame around the object.\n\nUsage:\n```\n$blog_article_noframe: true,\nblog_article: {}\n```\n\n### Expander\nMakes the object collapsible in the admin interface. Good for deeply nested or large objects.\n\nUsage:\n```\n$blog_article_expander: true,\nblog_article: {}\n```', + doc: 'Object control type is the most simple control that is created by a simple JavaScript object:\n```\nblog_article: {}\n```\nWill result in this:\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1473411617_cp.png)\n\n## Available terminations\n* noframe\n* expander\n\n### Noframe\nCompletely removes the frame around the object.\n\nUsage:\n```\n$blog_article_noframe: true,\nblog_article: {}\n```\n\n### Expander\nMakes the object collapsible in the admin interface. Good for deeply nested or large objects.\n\nUsage:\n```\n$blog_article_expander: true,\nblog_article: {}\n```', $marked_doc_hidden: true, marked_doc: '', contents: [], $contents_hidden: true, $abstracted_content_hidden: true, abstracted_content: { - marked_doc: '

Object control type is the most simple control that is created by a simple javascript object:

\n
blog_article: {}\n

Will result in this:

\n

\n

Available terminations

\n
    \n
  • noframe
    • \n
  • expander
    • \n
\n

Noframe

\n

Completely removes the frame around the object.

\n

Usage:

\n
$blog_article_noframe: true,\nblog_article: {}\n

Expander

\n

Makes the object collapsible in the admin interface. Good for deeply nested or large objects.

\n

Usage:

\n
$blog_article_expander: true,\nblog_article: {}\n
', + marked_doc: '

Object control type is the most simple control that is created by a simple JavaScript object:

\n
blog_article: {}\n

Will result in this:

\n

\n

Available terminations

\n
    \n
  • noframe
    • \n
  • expander
    • \n
\n

Noframe

\n

Completely removes the frame around the object.

\n

Usage:

\n
$blog_article_noframe: true,\nblog_article: {}\n

Expander

\n

Makes the object collapsible in the admin interface. Good for deeply nested or large objects.

\n

Usage:

\n
$blog_article_expander: true,\nblog_article: {}\n
', contents: [ { heading: 'Available terminations', diff --git a/cms/generators/docs/templates.js b/cms/generators/docs/templates.js index 1836418..2359900 100644 --- a/cms/generators/docs/templates.js +++ b/cms/generators/docs/templates.js @@ -2,11 +2,11 @@ title: 'Working with templates', $doc_markdown: true, $doc_type: 'textarea', - doc: '## Handlebars\nEnduro is built around [http://handlebarsjs.com/](handlebars) templates.\n\n## Templates\nTo include a variable in your template, wrap it in two sets of curly braces. Like this:\n```\n
\n

{{title}}

\n

{{text}}

\n
\n```\n\n## Context\nSo where does the title and text come from? For every page in the $$pages folder there is a javascript object file in $$cms folder. For this case, the context file will look like this\n```js\n{\n title: \'enduro\',\n text: \'everybody loves enduro\'\n}\n```\n\n## Components\nOne good idea is to split up the page into smaller parts - components. For example, let\'s create a footer component and save it in the `components` folder:\n```\n
\n 2016 enduro.js\n
\n```\n\nNow you can comfortably include it in the homepage by adding `{{>footer}}`.\n\nNote: whatever folder structure there is in the components directory, components are registered by the file name only.\n\n## Block components\nAnother option is to create a block component, which wraps around whatever is inside. Let\'s create a body component that looks like this:\n```\n
\n 2016 enduro.js\n
\n\n{{>@partial-block}}\n\n
\n 2016 enduro.js\n
\n```\n\nNow it\'s ready to be used like this:\n```html\n{{#>body}}\n Content goes here\n{{/body}}\n```\n\n## Helpers\nHandlebars is logicless templating engine - so no mixing in code. Only way to built complex templates are using helpers.\n\nFor example: `{{lorem 20}}` will print random 20 lorem words.\n\nHandlebars itself has some built-in helpers such as {{#if}} {{#each}} - Checkout the list here: [Handlebars helpers](http://handlebarsjs.com/builtin_helpers.html)\n\n### Built in helpers\nI decided to include some handy helpers directly in enduro. Check out the list here: [Built-in helpers](/docs/built-in-helpers)\n\n### Custom helpers\nYou can, and probably will have to write your own helpers. Just add .js files in assets/hbs_helpers.\n\nCheck out this slug helper:\n\n```\n// * ———————————————————————————————————————————————————————— * //\n// * slug helper\n// * ———————————————————————————————————————————————————————— * //\n\n__templating_engine.registerHelper("slug", function (input) {\n return input.toString().toLowerCase()\n .replace(/s+/g, \'-\') // Replace spaces with -\n .replace(/[^w-]+/g, \'\') // Remove all non-word chars\n .replace(/--+/g, \'-\') // Replace multiple - with single -\n .replace(/^-+/, \'\') // Trim - from start of text\n .replace(/-+$/, \'\') // Trim - from end of text\n});\n```', + doc: '## Handlebars\nEnduro is built around [http://handlebarsjs.com/](handlebars) templates.\n\n## Templates\nTo include a variable in your template, wrap it in two sets of curly braces. Like this:\n```\n
\n

{{title}}

\n

{{text}}

\n
\n```\n\n## Context\nSo where does the title and text come from? For every page in the $$pages folder there is a JavaScript object file in $$cms folder. For this case, the context file will look like this\n```js\n{\n title: \'enduro\',\n text: \'everybody loves enduro\'\n}\n```\n\n## Components\nOne good idea is to split up the page into smaller parts - components. For example, let\'s create a footer component and save it in the `components` folder:\n```\n
\n 2016 enduro.js\n
\n```\n\nNow you can comfortably include it in the homepage by adding `{{>footer}}`.\n\nNote: whatever folder structure there is in the components directory, components are registered by the file name only.\n\n## Block components\nAnother option is to create a block component, which wraps around whatever is inside. Let\'s create a body component that looks like this:\n```\n
\n 2016 enduro.js\n
\n\n{{>@partial-block}}\n\n
\n 2016 enduro.js\n
\n```\n\nNow it\'s ready to be used like this:\n```html\n{{#>body}}\n Content goes here\n{{/body}}\n```\n\n## Helpers\nHandlebars is logicless templating engine - so no mixing in code. Only way to built complex templates are using helpers.\n\nFor example: `{{lorem 20}}` will print random 20 lorem words.\n\nHandlebars itself has some built-in helpers such as {{#if}} {{#each}} - Checkout the list here: [Handlebars helpers](http://handlebarsjs.com/builtin_helpers.html)\n\n### Built in helpers\nI decided to include some handy helpers directly in enduro. Check out the list here: [Built-in helpers](/docs/built-in-helpers)\n\n### Custom helpers\nYou can, and probably will have to write your own helpers. Just add .js files in assets/hbs_helpers.\n\nCheck out this slug helper:\n\n```\n// * ———————————————————————————————————————————————————————— * //\n// * slug helper\n// * ———————————————————————————————————————————————————————— * //\n\n__templating_engine.registerHelper("slug", function (input) {\n return input.toString().toLowerCase()\n .replace(/s+/g, \'-\') // Replace spaces with -\n .replace(/[^w-]+/g, \'\') // Remove all non-word chars\n .replace(/--+/g, \'-\') // Replace multiple - with single -\n .replace(/^-+/, \'\') // Trim - from start of text\n .replace(/-+$/, \'\') // Trim - from end of text\n});\n```', $contents_hidden: true, $abstracted_content_hidden: true, abstracted_content: { - marked_doc: '

Handlebars

\n

Enduro is built around http://handlebarsjs.com/ templates.

\n

Templates

\n

To include a variable in your template, wrap it in two sets of curly braces. Like this:

\n
<div>\n    <h2>{{title}}</h2>\n    <h2>{{text}}</h2>\n</div>\n

Context

\n

So where does the title and text come from? For every page in the pages folder there is a javascript object file in cms folder. For this case, the context file will look like this

\n
{\n    title: 'enduro',\n    text: 'everybody loves enduro'\n}\n
\n

Components

\n

One good idea is to split up the page into smaller parts - components. For example, let's create a footer component and save it in the components folder:

\n
<footer>\n    2016 enduro.js\n</footer>\n

Now you can comfortably include it in the homepage by adding {{>footer}}.

\n

Note: whatever folder structure there is in the components directory, components are registered by the file name only.

\n

Block components

\n

Another option is to create a block component, which wraps around whatever is inside. Let's create a body component that looks like this:

\n
<header>\n    2016 enduro.js\n</header>\n\n{{>@partial-block}}\n\n<footer>\n    2016 enduro.js\n</footer>\n

Now it's ready to be used like this:

\n
{{#>body}}\n    Content goes here\n{{/body}}\n
\n

Helpers

\n

Handlebars is logicless templating engine - so no mixing in code. Only way to built complex templates are using helpers.

\n

For example: {{lorem 20}} will print random 20 lorem words.

\n

Handlebars itself has some built-in helpers such as {{#if}} {{#each}} - Checkout the list here: Handlebars helpers

\n

Built in helpers

\n

I decided to include some handy helpers directly in enduro. Check out the list here: Built-in helpers

\n

Custom helpers

\n

You can, and probably will have to write your own helpers. Just add .js files in assets/hbs_helpers.

\n

Check out this slug helper:

\n
// * ———————————————————————————————————————————————————————— * //\n// *    slug helper\n// * ———————————————————————————————————————————————————————— * //\n\n__templating_engine.registerHelper("slug", function (input) {\n    return input.toString().toLowerCase()\n        .replace(/s+/g, '-') // Replace spaces with -\n        .replace(/[^w-]+/g, '') // Remove all non-word chars\n        .replace(/--+/g, '-') // Replace multiple - with single -\n        .replace(/^-+/, '') // Trim - from start of text\n        .replace(/-+$/, '') // Trim - from end of text\n});\n
', + marked_doc: '

Handlebars

\n

Enduro is built around http://handlebarsjs.com/ templates.

\n

Templates

\n

To include a variable in your template, wrap it in two sets of curly braces. Like this:

\n
<div>\n    <h2>{{title}}</h2>\n    <h2>{{text}}</h2>\n</div>\n

Context

\n

So where does the title and text come from? For every page in the pages folder there is a JavaScript object file in cms folder. For this case, the context file will look like this

\n
{\n    title: 'enduro',\n    text: 'everybody loves enduro'\n}\n
\n

Components

\n

One good idea is to split up the page into smaller parts - components. For example, let's create a footer component and save it in the components folder:

\n
<footer>\n    2016 enduro.js\n</footer>\n

Now you can comfortably include it in the homepage by adding {{>footer}}.

\n

Note: whatever folder structure there is in the components directory, components are registered by the file name only.

\n

Block components

\n

Another option is to create a block component, which wraps around whatever is inside. Let's create a body component that looks like this:

\n
<header>\n    2016 enduro.js\n</header>\n\n{{>@partial-block}}\n\n<footer>\n    2016 enduro.js\n</footer>\n

Now it's ready to be used like this:

\n
{{#>body}}\n    Content goes here\n{{/body}}\n
\n

Helpers

\n

Handlebars is logicless templating engine - so no mixing in code. Only way to built complex templates are using helpers.

\n

For example: {{lorem 20}} will print random 20 lorem words.

\n

Handlebars itself has some built-in helpers such as {{#if}} {{#each}} - Checkout the list here: Handlebars helpers

\n

Built in helpers

\n

I decided to include some handy helpers directly in enduro. Check out the list here: Built-in helpers

\n

Custom helpers

\n

You can, and probably will have to write your own helpers. Just add .js files in assets/hbs_helpers.

\n

Check out this slug helper:

\n
// * ———————————————————————————————————————————————————————— * //\n// *    slug helper\n// * ———————————————————————————————————————————————————————— * //\n\n__templating_engine.registerHelper("slug", function (input) {\n    return input.toString().toLowerCase()\n        .replace(/s+/g, '-') // Replace spaces with -\n        .replace(/[^w-]+/g, '') // Remove all non-word chars\n        .replace(/--+/g, '-') // Replace multiple - with single -\n        .replace(/^-+/, '') // Trim - from start of text\n        .replace(/-+$/, '') // Trim - from end of text\n});\n
', contents: [ { heading: 'Handlebars', diff --git a/cms/generators/docs/themes.js b/cms/generators/docs/themes.js index 57aab06..4450bf4 100644 --- a/cms/generators/docs/themes.js +++ b/cms/generators/docs/themes.js @@ -2,14 +2,14 @@ title: 'Enduro themes', $doc_markdown: true, $doc_type: 'textarea', - doc: 'Enduro.js themes are the best way to get you up and running as fast as possible. They are also great first contact to enduro.js since you get to see the finished product, which you can then just tweak to your liking.\n\nTo see which themes are available, just visit [Theme manager homepage](/themes).\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487880073_themes_intro.jpg)\n\n## Getting started with enduro.js themes\nFirst you have to make sure you have node.js installed on your machine. Second prerequisite is having enduro.js installed globally (just run `npm i enduro -g`).\n\n## Create a project out of a theme\nTo start just run:\n\n```bash\n$ enduro theme mirror\n```\n\nThis will find a **mirror** theme, download it, install its npm and bower dependencies and start enduro.js. Then you can just go to localhost:5000/admin to put in your content and make finished website\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487936465_theme_cli_screenshot.png)\n\n## How to deploy your page\nOnce you fill you content there are two ways you can make the page accessible:\n\n### Static hosting\nenduro.js [pregenerates static html files](/docs/static-pages), which you can just upload to a server and serve statically. No node.js required. Some providers even allows you to host a static page for free - check out [github pages](https://pages.github.com/)\n\n### Node.js dynamic hosting\nThis will run enduro on a server and provide you with same admin functionality as if you were using localhost. I suggest you use heroku for this [Heroku](/docs/heroku). It\'s affordable and easy to use.\n\n## Creating enduro.js themes\nenduro.js theme is just an enduro.js project made in a general enough way so it can be used by other people just by changing the content. Everybody is more than welcome to contribute by creating a pull request to [Github repository](https://github.com/Gottwik/enduro_website/blob/master/cms/global/theme_manager/themes.js) of this website. The file is quite self-explanatory.', + doc: 'Enduro.js themes are the best way to get you up and running as fast as possible. They are also great first contact to enduro.js since you get to see the finished product, which you can then just tweak to your liking.\n\nTo see which themes are available, just visit [Theme manager homepage](/themes).\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487880073_themes_intro.jpg)\n\n## Getting started with enduro.js themes\nFirst you have to make sure you have node.js installed on your machine. Second prerequisite is having enduro.js installed globally (just run `npm i enduro -g`).\n\n## Create a project out of a theme\nTo start just run:\n\n```bash\n$ enduro theme mirror\n```\n\nThis will find a **mirror** theme, download it, install its npm and bower dependencies and start enduro.js. Then you can just go to localhost:5000/admin to put in your content and make finished website\n\n![](https://s3-eu-west-1.amazonaws.com/enduro.website/direct_uploads/1487936465_theme_cli_screenshot.png)\n\n## How to deploy your page\nOnce you fill you content there are two ways you can make the page accessible:\n\n### Static hosting\nenduro.js [pregenerates static html files](/docs/static-pages), which you can just upload to a server and serve statically. No node.js required. Some providers even allows you to host a static page for free - check out [github pages](https://pages.github.com/)\n\n### Node.js dynamic hosting\nThis will run enduro on a server and provide you with same admin functionality as if you were using localhost. I suggest you use heroku for this [Heroku](/docs/heroku). It\'s affordable and easy to use.\n\n## Creating enduro.js themes\nenduro.js theme is just an enduro.js project made in a general enough way so it can be used by other people just by changing the content. Everybody is more than welcome to contribute by creating a pull request to [GitHub repository](https://github.com/Gottwik/enduro_website/blob/master/cms/global/theme_manager/themes.js) of this website. The file is quite self-explanatory.', $marked_doc_hidden: true, marked_doc: '', contents: [], $contents_hidden: true, $abstracted_content_hidden: true, abstracted_content: { - marked_doc: '

Enduro.js themes are the best way to get you up and running as fast as possible. They are also great first contact to enduro.js since you get to see the finished product, which you can then just tweak to your liking.

\n

To see which themes are available, just visit Theme manager homepage.

\n

\n

Getting started with enduro.js themes

\n

First you have to make sure you have node.js installed on your machine. Second prerequisite is having enduro.js installed globally (just run npm i enduro -g).

\n

Create a project out of a theme

\n

To start just run:

\n
$ enduro theme mirror\n
\n

This will find a mirror theme, download it, install its npm and bower dependencies and start enduro.js. Then you can just go to localhost:5000/admin to put in your content and make finished website

\n

\n

How to deploy your page

\n

Once you fill you content there are two ways you can make the page accessible:

\n

Static hosting

\n

enduro.js pregenerates static html files, which you can just upload to a server and serve statically. No node.js required. Some providers even allows you to host a static page for free - check out github pages

\n

Node.js dynamic hosting

\n

This will run enduro on a server and provide you with same admin functionality as if you were using localhost. I suggest you use heroku for this Heroku. It's affordable and easy to use.

\n

Creating enduro.js themes

\n

enduro.js theme is just an enduro.js project made in a general enough way so it can be used by other people just by changing the content. Everybody is more than welcome to contribute by creating a pull request to Github repository of this website. The file is quite self-explanatory.

\n', + marked_doc: '

Enduro.js themes are the best way to get you up and running as fast as possible. They are also great first contact to enduro.js since you get to see the finished product, which you can then just tweak to your liking.

\n

To see which themes are available, just visit Theme manager homepage.

\n

\n

Getting started with enduro.js themes

\n

First you have to make sure you have node.js installed on your machine. Second prerequisite is having enduro.js installed globally (just run npm i enduro -g).

\n

Create a project out of a theme

\n

To start just run:

\n
$ enduro theme mirror\n
\n

This will find a mirror theme, download it, install its npm and bower dependencies and start enduro.js. Then you can just go to localhost:5000/admin to put in your content and make finished website

\n

\n

How to deploy your page

\n

Once you fill you content there are two ways you can make the page accessible:

\n

Static hosting

\n

enduro.js pregenerates static html files, which you can just upload to a server and serve statically. No node.js required. Some providers even allows you to host a static page for free - check out github pages

\n

Node.js dynamic hosting

\n

This will run enduro on a server and provide you with same admin functionality as if you were using localhost. I suggest you use heroku for this Heroku. It's affordable and easy to use.

\n

Creating enduro.js themes

\n

enduro.js theme is just an enduro.js project made in a general enough way so it can be used by other people just by changing the content. Everybody is more than welcome to contribute by creating a pull request to GitHub repository of this website. The file is quite self-explanatory.

\n', contents: [ { heading: 'Getting started with enduro.js themes', diff --git a/cms/global/features.js b/cms/global/features.js index e51284b..7509aa7 100644 --- a/cms/global/features.js +++ b/cms/global/features.js @@ -59,18 +59,18 @@ icon: 'magnet', title: 'Shared templates', $text_type: 'textarea', - text: 'Html components written for backend are accessible to frontend\'s javascript as well. Amazing.', + text: 'Html components written for backend are accessible to frontend\'s JavaScript as well. Amazing.', $linkified_text_hidden: true, - linkified_text: 'Html components written for backend are accessible to frontend\'s javascript as well. Amazing.' + linkified_text: 'Html components written for backend are accessible to frontend\'s JavaScript as well. Amazing.' }, { $icon_type: 'fa', icon: 'bolt', - title: 'Isomorphic javascript', + title: 'Isomorphic JavaScript', $text_type: 'textarea', - text: 'Using javascript for both frontend and backend is just a great idea. With enduro.js, all your javascript modules can now be loaded by page generation, api and frontend code.', + text: 'Using JavaScript for both frontend and backend is just a great idea. With enduro.js, all your JavaScript modules can now be loaded by page generation, api and frontend code.', $linkified_text_hidden: true, - linkified_text: 'Using javascript for both frontend and backend is just a great idea. With enduro.js, all your javascript modules can now be loaded by page generation, api and frontend code.' + linkified_text: 'Using JavaScript for both frontend and backend is just a great idea. With enduro.js, all your JavaScript modules can now be loaded by page generation, api and frontend code.' }, { $icon_type: 'fa', diff --git a/components/layout/footer.hbs b/components/layout/footer.hbs index 2d610d8..aabea85 100644 --- a/components/layout/footer.hbs +++ b/components/layout/footer.hbs @@ -25,8 +25,8 @@
  • Open source
    • diff --git a/pages/themes.hbs b/pages/themes.hbs index 80ca29f..d3cc539 100644 --- a/pages/themes.hbs +++ b/pages/themes.hbs @@ -28,7 +28,7 @@ $ enduro theme {{name}} - Github + GitHub
    {{/each}}