kaspar-naaber · March 3, 2016 11:08
diff --git a/gistfile1.txt b/gistfile1.txt
 # Edicy -> Voog migration tasklist

 ## Basic stuff
 * Let Mathias do the magic from clientbase side.
 * Wait until the site is running on Voog...

 If site is running on Voog, proceed with the following tasks.

 * Pull template to your computer and make it a git repo **(optional but reccomended)**.
 * Make an *"initial commit"* to save the current stage (if you decided to pull the template).
    * **Note**: Push after each modification so it is easy to fall back into earlier version if something goes terribly wrong.

 ## Add common JS and styles
 ### Common JS
 * Add `{% sitejs_include %}` to each layout:
    * **Note**: It is probably a good idea to add it into a **JS component** in **components** folder which in most cases is included into each layout. The component is usally named: **JS**, **javascripts**, **site-javascripts**, **template-javascripts** or something like that.

 ### Common styles
 * Add the following **CSS** to each template that has editable content area:
    * **Note**: This will add the default styles for content area images (margins for positioning, visible title etc).
    * **Note**: In most cases it should be added into the main css file whic is usually named: **stylseheet.css**, **main.css**, **application.css** or something like that.
    * **Note**: If template uses ***.min.css** instead, then you should also update the minified stylesheet.

 ```
 /* Image container styles */
 .edy-positionable-container-center:first-child,
 .edy-positionable-container-left-block:first-child,
 .edy-positionable-container-right-block:first-child,
 .edy-texteditor-container-wrapper-center:first-child,
 .edy-texteditor-container-wrapper-left-block:first-child,
 .edy-texteditor-container-wrapper-right-block:first-child {
  margin-top: 0;
 }

 .edy-positionable-container-center:last-child,
 .edy-positionable-container-left-block:last-child,
 .edy-positionable-container-right-block:last-child,
 .edy-texteditor-container-wrapper-center:last-child,
 .edy-texteditor-container-wrapper-left-block:last-child,
 .edy-texteditor-container-wrapper-right-block:last-child {
  margin-bottom: 0;
 }

 .edy-positionable-container-center,
 .edy-positionable-container-left-block,
 .edy-positionable-container-right-block,
 .edy-texteditor-container-wrapper-center,
 .edy-texteditor-container-wrapper-left-block,
 .edy-texteditor-container-wrapper-right-block {
  margin-top: 20px;
  margin-bottom: 20px;
 }

 .edy-positionable-container-left,
 .edy-texteditor-container-wrapper-left {
  margin-right: 20px;
 }

 .edy-positionable-container-right,
 .edy-texteditor-container-wrapper-right {
  margin-left: 20px;
 }

 .edy-image-container-with-title:after {
  display: block;
  padding: 4px;
  font-size: 12px;
  line-height: 1.3em;
  content: attr(data-title);
 }
 ```

 * Replace `http://static.edicy.com` URL-s with `{{ site.static_asset_host }}` (if there's any).

 ## Search updates
 If site has search box enabled then do the following:

 * Add the following code into each template's `<head>` tag:
    * **Note**: In most cases it is a good idea to add it into **head component** which might be named: **html-head**, **siteheader**, **header** (or something like that).
    * **Note**: Make sure that you are updating the component that is included into `<head>` tag in layouts, not the visible header itself.

 ```
 {% if site.search.enabled %}
  <link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-search/latest/edicy-search.css">
 {% endif %}
 ```

 * Test if search box is using the Voog's default search with its styles.
    * If not then test if search input is wrapped into a `<form>` with `class="edys-search"`
    * If it still doesn't work then it need a deeper debugging. Debug or ask for help. :)

 * Index the content:
 By default the search indexes the entire page. So you might see the site's main menu items in the search results. Adding `data-search-indexing-allowed="true"` to the content area wrappers will fix that problem. `data-search-indexing-allowed="false"` will help to unindex some content inside the wrapper that is indexed. Some examples:

 ```
 <html>
 <head>
  <!-- Nothing to index inside the head tag. ;) -->
 </head>

 <body>
  <div>This div shouldn't be indexed</div>
  <div data-search-indexing-allowed="true">{% content %}</div>
 </body>
 </html>
 ```

 ```
 <html>
 <head>
  <!-- Nothing to index inside the head tag. ;) -->
 </head>

 <body>
  <div>This div shouldn't be indexed</div>
  <div data-search-indexing-allowed="true">
    <div>{% content %}</div>
    
    <div data-search-indexing-allowed="false">This element here is not indexed but the sibling elments are.</div>
    
    <div>{% content name="important_stuff" %}</div>
  </div>
 </body>
 </html>
 ```

 ## Final steps
 * Check out each page (or at least one page for each layout) to see if it gives any **server errors**, **JS errors** or something is visually broken. Debug and fix if needed. Common problems are:
    * **CMS add buttons are positioned badly:** horizontal menus are mostly messed up beacause of the  `floating <li>` elements. Replacing it with `display: inline-block;` might help.
    * **Custom sliders are broken**: They probably try to read data from the content area gallery which class names might differ and the JS is not finding the proper data.
    * **Image drop areas are not working:** In Edicy they used to save the data into content area and hide it. JS might not find the proper element. Try to fix the current system or convert data saving to **custom data** if it seems to be a quicker way to fix it.
    * **Content area image styles are messed up**: Edicy content areas used the ```<img>``` element. Voog converts them to more complicated ```<picture>``` tag that has the ```<img>``` somewhere inside it. Edicy templates images are ofter styled with ```img {}``` selector. These styles should be converter to ```.image-container {}```. 
 * Pray that the site keeps working ant the client is not going to give us an angry call. ;)
	# Edicy -> Voog migration tasklist

	## Basic stuff
	* Let Mathias do the magic from clientbase side.
	* Wait until the site is running on Voog...

	If site is running on Voog, proceed with the following tasks.

	* Pull template to your computer and make it a git repo (optional but reccomended).
	* Make an "initial commit" to save the current stage (if you decided to pull the template).
	* Note: Push after each modification so it is easy to fall back into earlier version if something goes terribly wrong.

	## Add common JS and styles
	### Common JS
	* Add `{% sitejs_include %}` to each layout:
	* Note: It is probably a good idea to add it into a JS component in components folder which in most cases is included into each layout. The component is usally named: JS, javascripts, site-javascripts, template-javascripts or something like that.

	### Common styles
	* Add the following CSS to each template that has editable content area:
	* Note: This will add the default styles for content area images (margins for positioning, visible title etc).
	* Note: In most cases it should be added into the main css file whic is usually named: stylseheet.css, main.css, application.css or something like that.
	* Note: If template uses *.min.css instead, then you should also update the minified stylesheet.

	```
	/* Image container styles */
	.edy-positionable-container-center:first-child,
	.edy-positionable-container-left-block:first-child,
	.edy-positionable-container-right-block:first-child,
	.edy-texteditor-container-wrapper-center:first-child,
	.edy-texteditor-container-wrapper-left-block:first-child,
	.edy-texteditor-container-wrapper-right-block:first-child {
	margin-top: 0;
	}

	.edy-positionable-container-center:last-child,
	.edy-positionable-container-left-block:last-child,
	.edy-positionable-container-right-block:last-child,
	.edy-texteditor-container-wrapper-center:last-child,
	.edy-texteditor-container-wrapper-left-block:last-child,
	.edy-texteditor-container-wrapper-right-block:last-child {
	margin-bottom: 0;
	}

	.edy-positionable-container-center,
	.edy-positionable-container-left-block,
	.edy-positionable-container-right-block,
	.edy-texteditor-container-wrapper-center,
	.edy-texteditor-container-wrapper-left-block,
	.edy-texteditor-container-wrapper-right-block {
	margin-top: 20px;
	margin-bottom: 20px;
	}

	.edy-positionable-container-left,
	.edy-texteditor-container-wrapper-left {
	margin-right: 20px;
	}

	.edy-positionable-container-right,
	.edy-texteditor-container-wrapper-right {
	margin-left: 20px;
	}

	.edy-image-container-with-title:after {
	display: block;
	padding: 4px;
	font-size: 12px;
	line-height: 1.3em;
	content: attr(data-title);
	}
	```

	* Replace `http://static.edicy.com` URL-s with `{{ site.static_asset_host }}` (if there's any).

	## Search updates
	If site has search box enabled then do the following:

	* Add the following code into each template's `<head>` tag:
	* Note: In most cases it is a good idea to add it into head component which might be named: html-head, siteheader, header (or something like that).
	* Note: Make sure that you are updating the component that is included into `<head>` tag in layouts, not the visible header itself.

	```
	{% if site.search.enabled %}
	<link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-search/latest/edicy-search.css">
	{% endif %}
	```

	* Test if search box is using the Voog's default search with its styles.
	* If not then test if search input is wrapped into a `<form>` with `class="edys-search"`
	* If it still doesn't work then it need a deeper debugging. Debug or ask for help. :)

	* Index the content:
	By default the search indexes the entire page. So you might see the site's main menu items in the search results. Adding `data-search-indexing-allowed="true"` to the content area wrappers will fix that problem. `data-search-indexing-allowed="false"` will help to unindex some content inside the wrapper that is indexed. Some examples:

	```
	<html>
	<head>
	<!-- Nothing to index inside the head tag. ;) -->
	</head>

	<body>
	<div>This div shouldn't be indexed</div>
	<div data-search-indexing-allowed="true">{% content %}</div>
	</body>
	</html>
	```

	```
	<html>
	<head>
	<!-- Nothing to index inside the head tag. ;) -->
	</head>

	<body>
	<div>This div shouldn't be indexed</div>
	<div data-search-indexing-allowed="true">
	<div>{% content %}</div>

	<div data-search-indexing-allowed="false">This element here is not indexed but the sibling elments are.</div>

	<div>{% content name="important_stuff" %}</div>
	</div>
	</body>
	</html>
	```

	## Final steps
	* Check out each page (or at least one page for each layout) to see if it gives any server errors, JS errors or something is visually broken. Debug and fix if needed. Common problems are:
	* CMS add buttons are positioned badly: horizontal menus are mostly messed up beacause of the `floating <li>` elements. Replacing it with `display: inline-block;` might help.
	* Custom sliders are broken: They probably try to read data from the content area gallery which class names might differ and the JS is not finding the proper data.
	* Image drop areas are not working: In Edicy they used to save the data into content area and hide it. JS might not find the proper element. Try to fix the current system or convert data saving to custom data if it seems to be a quicker way to fix it.
	* Content area image styles are messed up: Edicy content areas used the ```<img>``` element. Voog converts them to more complicated ```<picture>``` tag that has the ```<img>``` somewhere inside it. Edicy templates images are ofter styled with ```img {}``` selector. These styles should be converter to ```.image-container {}```.
	* Pray that the site keeps working ant the client is not going to give us an angry call. ;)