Update gifs and broken links

README.md

@@ -44,7 +44,7 @@ My DIYbio project is about **open hardware** and **citizen science**.
 
 The _front matter_ includes several `key: value` pairs that render into different elements in the webpage. The `Avocado Lab` is an example entry for pedagogical purposes. You can check out the raw file [raw file](https://raw.githubusercontent.com/DIYbiosphere/sphere/master/docs/tutorials/AvocadoLab/AvocadoLab.md) rendered into [this webpage](http://sphere.diybio.org/docs/tutorials/AvocadoLab). See the rendered image below, and by its side the different elements of the page labeled.
 
-![](http://sphere.diybio.org/docs/tutorials/AvocadoLab/side-by-side.png)
+![](http://sphere.diybio.org/docs/tutorials/AvocadoLab/side-by-side.png){:.ui.fluid.image}
 
 
 ## Contribute

_data/elements.yml

@@ -4,4 +4,4 @@ images:
   sphere_logo_circle: <div><img src="/assets/img/sphere-logo-compact.png"><br><a href="https://raw.githubusercontent.com/DIYbiosphere/sphere/master/_assets/img/sphere-logo-compact.png" download>png</a><a href="https://raw.githubusercontent.com/DIYbiosphere/sphere/master/_assets/svg/sphere-logo-compact.svg" download>svg</a></div>
   sphere_logo_coded: <div><img src="/assets/img/sphere-logo-compact.png"><br><a href="https://raw.githubusercontent.com/DIYbiosphere/sphere/master/_assets/img/sphere-logo-compact.png" download>png</a><a href="https://raw.githubusercontent.com/DIYbiosphere/sphere/master/_assets/svg/sphere-logo-compact.svg" download>svg</a></div>
 buttons:
-  dataset_json: <a href="assets/data/dataset.json" download><button class="ui button"><i class="fas fa-arrow-alt-to-bottom"></i> JSON dataset</button></a>
+  dataset_json: <a href="assets/data/dataset.json" download><button class="ui blue button"><i class="fas fa-arrow-alt-to-bottom"></i> JSON dataset</button></a>

_references.md

@@ -1,7 +1,7 @@
 
 [Avocado Lab]: /docs/tutorials/AvocadoLab/
-[DIYbiosphere]: /projects/DIYbiosphere/
-[DIYbio.org]: /networks/DIYbiosphere/
+[DIYbiosphere]: /projects/diybiosphere/
+[DIYbio.org]: /networks/diybio.org/
 
 
 [slack]: https://diybiosphere.slack.com/ "DIYbiosphere Slack"
@@ -38,6 +38,6 @@
 [github eli5]: /docs/guides/github-eli5
 [add]: /docs/tutorials/add-entry "How to add an entry"
 [edit]: /docs/tutorials/edit-entry "How to edit an entry"
-[install locally]: /docs/tutorials/install-locally 
+[install locally]: /docs/tutorials/install-locally
 [entry template]: /docs/entrytemplate
 [complete template]: /docs/completetemplate

docs/CompleteTemplate.md

@@ -1,42 +1,52 @@
 ---
-title:
-subtitle:
-predecessor:
-successor:
-start-date:
-end-date:
-type-org:
-hosts:
-  -
-  -
-partners:
-  -
-  -
-address:
-directions:  
-city:
-state:
-country:
-website:
-email:
-twitter:
-facebook:
-# more brand links see: the writing guide
+#BASIC INFO
+title: # Name of initiative
+subtitle: # Short description. 200 characters max!
+predecessor: # the previous name of the entry
+successor: # the initiative that evolved from the initiative
+type-org: # type is the social/legal organization, e.g.: company, university, museum, community, local government, etc.
+#ACTIVITY
+start-date: #ISO format: 'YYYY-MM-DD hh:mm', 'YYYY-MM-DD', 'YYYY-MM', or 'YYYY'
+end-date: # ISO format: 'YYYY-MM-DD hh:mm', 'YYYY-MM-DD', 'YYYY-MM', or 'YYYY'
+status: # add or let be AUTOMATIC!! 'active' by default, unless `end-date` in the past then 'inactive', or unless `start-date` in future then 'planned'. Useful when it is neither 'active', 'inactive', or 'planned'
+#RELATIONSHIPS. Must either exist in the sphere repository, or have an external link in markdown
+hosts: # Is the space or organization behind the initiative, e.g. a university or a makerspace
+  -  # host. Use the exact 'title' of another entry to automatically display as a linked item
+  - # another host
+partners: # collaborators, partners, or affiliations worth mentioning
+  -  # partner. If rendering a markdown link wrap in "" or ''
+  - # another partner
+#LOCATION
+address: # street and number
+directions: # specific directions to find location
+city: # city name in english
+state: # state, province, canton name in english
+country: # country name in english
+_geoloc: # Geolocation coordinates for mapping
+  lat: # latitude number
+  lng: # longitude number
+#LINKS. Check the Writing Guide for all the brand icons available
+website: # URL to main external website
+email: # email
+twitter: # Twitter URL
+facebook: # Facebook URL
 links:
-  - URL:
-    tooltip:
-  - URL:
-    tooltip:
+  - URL: # URL to external link
+    tooltip: # when mouse hovers, what the pop over tool tip will say
+  - URL: # Adding more link icons
+    tooltip: # Popover tip
+#TAGS
 tags:
-  -
-  -
+  - # tag
+  - # another tag
+#PROMOTIONS
 promotions:
-  - text:
-    button:
-    URL:
-    image:
-  - text:
-    button:
-    URL:
-    color:  
+  - text: # write here your promotion
+    button: # text in the button
+    URL: # link for the button
+    image: # path to the image in the background
+  - text: # second promotion starts with another dash
+    button: # text in the button
+    URL: # link for the button
+    color: #specify a background color instead of an image. wrap the color in '', e.g. '#43BB7A'    
 ---

docs/introduction/getting-started.md

@@ -6,55 +6,57 @@ toc: true
 ---
 
 
-# Quick search
-The search bar in the navigation menu at the top is to **quick search** for entries. Search by `title:` and/or location (`city:` and `country:`). The query will also display and search the _hosts_ of an entry if any. The search will try to autocomplete the query as five suggestions are listed below the search bar.
+# Searching for entries
+## Quick search
+The search bar in the navigation menu at the top is to **quick search** for entries. Search by `title:` and/or location (`city:` and `country:`). The query will also display and search the `hosts:` of an entry if any. The search will try to autocomplete the query as five suggestions are listed below the search bar.
 
-# Advanced search (browse)
+## Advanced search (browse)
 Select the `BROWSE` dropdown in the top navigation menu. Select either to view all entries (`everything`), or narrow by _collection_.
 
-Once in the _browse_ page, there are three main sections: the _query statistics_ the _browse menu_ and the _displayed results_.
+Once in the _browse_ page, there are three main sections: the **query statistics** the **browse menu** and the **displayed results**.
 
-## Query statistics
-The number of entries found is displayed, as well as any additional _text search_ or _filter_ setting. The filters can be removed by selecting them, or select the `Erase all` to remove all filters.
+### Query statistics
+The number of entries found is displayed, as well as any additional **text search** or **filter results** **view settings**. The filters can be removed by selecting each, or select the `Erase all` to remove all filters.
 
-![](/docs/introduction/filter-query.png){:.ui.image }
+![](/docs/introduction/filter-query.png){:.ui.bordered.centered.image }
 
-## Browse menu
+### Browse menu
 A dropdown grey menu unfolds to display the various configuration options to browse entries.
 
-- _Text search_ unfolds automatically. The query will search for _text_ inside the entries, as well as data such as `title:`, `city:`, `state:`, `state:`
+- **Text search** unfolds automatically. The query will search for _text_ inside the entries, as well as data such as `title:`, `city:`, `state:`, etc.
 
-![](/docs/introduction/query-menu.png){:.ui.large.image }
+![](/docs/introduction/query-menu.png){:.ui.large.bordered.centered.image }
 
-### Text search
+- **Filter results** by `status:`, `collection:`, `type:`, `country:`, and `tags:`. Each filter selection works with an OR selection.
 
 
-### Filter results
+![](/docs/introduction/filter-results.png){:.ui.huge.bordered.centered.image }
 
-![](/docs/introduction/filter-results.png){:.ui.huge.image }
 
+_ **View Settings** to select _number of page_, _results per page_, _sorting_, and _view format_
 
-### View settings
+![](/docs/introduction/view-query.png){:.ui.big.bordered.centered.image }
 
-![](/docs/introduction/view-query.png){:.ui.big.image }
+### Displayed results
+See the results in two formats: as a _list_, or a _table_
 
-## Displayed results
-See the results
-
-![](/docs/introduction/list-hit.png){:.ui.large.image }
-
-![](/docs/introduction/table-hit.png){:.ui.huge.image }
+![](/docs/introduction/list-hit.png){:.ui.large.bordered.centered.image }
 
+![](/docs/introduction/table-hit.png){:.ui.huge.bordered.centered.image }
 
 
 {% include messages/star.html title="Future hit map" text="The API for displaying results (Algolia instantsearch.js) is currently developing a GeoSearch widget, we are waiting for its release" %}
 
 
-# Contributing to entries
-ee our [Contributing Guide] for how to submit issues, and pull-requests.
+# Contributing to the project
+## Writing Entries
+Following the tutorials you can [add] a new entry: whether it's your initiative or someone else's,  or [edit] content: misspellings, outdated or wrong information, help us maintain the project. The [Writing Guide] is a good reference material for writing awesome entries.
+
+Don't forget to review the [Contributing Guide] for best practices.
 
-# Contributing to the development
+## Participate in the development
 
+- **Resolving our [GitHub Issues]** submit an issue yourself with a suggestion or report a bug. Help by answering, or voting on issues. Tackle issues yourself and commit changes to the repo!
 
 # Downloading the dataset
 Go to the [sphere repository] and select `Clone or Download`, and then select `Download ZIP`. Only the `.md` files in the collection folders are part of the dataset

docs/tutorials/AvocadoLab/AvocadoLab.md

@@ -1,26 +1,19 @@
 ---
-layout: entry-example
-collection: lab
-lab: true
 draft: true
-permalink: /docs/tutorials/AvocadoLab/
 title: Avocado Lab
 subtitle: A fake entry for pedagogy
-logo: /docs/tutorials/AvocadoLab/AvocadoLab-logo.png
-header: /docs/tutorials/AvocadoLab/AvocadoLab-header.png
-website: http://www.avocadolab.com
-predecessor: Avocado fans
-successor: Avocado empire
+predecessor: Avocado fans # the previous name of the entry
+successor: Avocado empire # the initiative that evolved from the initiative
 start-date: 2001-06-02 20:00
 end-date: 2017
 hosts:
-  - DIYbiosphere
-  - Fake entry
-  - '[sphere](/projects/diybiosphere)'
+  - DIYbiosphere # Exact `title: `of DIYbiosphere
+  - Fake entry # Does not render
+  - "[sphere](/projects/diybiosphere)" # link to a local page in markdown link wrapped in ""
 partners:
-  - '[Tree Labs](http://treelabs.com)'
+  - '[Tree Labs](http://treelabs.com)' # link to external website in markdown link wrapped in ''
 type-org: community
-address: Calle Verde Canario, 4
+address: Verde Canario Street, 4
 directions: second floor, red door
 city: Morelia
 state: Michoacan
@@ -29,6 +22,7 @@ tags:
   - food lab
   - citizen science
   - fruits
+website: http://sphere.diybio.org/docs/tutorials/AvocadoLab/  
 blog: /docs/tutorials/AvocadoLab/
 email: /docs/tutorials/AvocadoLab/
 twitter: /docs/tutorials/AvocadoLab/
@@ -39,57 +33,15 @@ promotions:
   - button: Go to recipe
     text: Learn how to make the yummiest avocado toast! And to top it off with a nice poached egg
     URL: http://gimmedelicious.com/2016/07/10/how-to-make-the-best-avocado-toast-with-eggs/
-    image: http://gimmedelicious.com/wp-content/uploads/2016/07/avocado-toast-7-of-13.jpg
+    image: /docs/tutorials/AvocadoLab/halves-of-avocado.jpg
   - button: Yes yummy!
     text: Make an authentic guacamole to impress friends and foes
     URL: http://www.thekitchn.com/recipe-guacamole-8649
     color: '#43BB7A'  
 ---
 
-The Avocado lab is a fictitious lab created for educational purposes. Below is a detailed explanation of the _front matter_ that renders this page.
-
-```yaml
----
-title: Avocado Lab
-subtitle: A fake entry for pedagogy
-type-org: community
-predecessor: Avocado fans # the previous name of the entry
-successor: Avocado empire # the initiative that evolved from the initiative
-start-date: 2001-11-02 20:00
-end-date: 2017
-hosts:
-  - DIYbiosphere # Exact `title: `of DIYbiosphere
-  - Fake entry # Does not render
-  - "[sphere](/projects/diybiosphere)" # link to a local page in markdown link wrapped in ""
-partners:
-  - '[Tree Labs](http://treelabs.com)' # link to external website in markdown link wrapped in ''
-address: Calle Verde Canario, 4
-directions: second floor, red door
-city: Morelia
-state: Michoacan
-country: Mexico
-tags:
-  - food lab
-  - citizen science
-  - fruits
-website: http://www.avocadolab.com
-blog: http://www.avocadolab.com/blog
-email: info@avocadolab.com
-links:
-  - URL: http://www.something.com/avocadolab
-    tooltip: something
-promotions:
-  - button: Go to recipe
-    text: Learn how to make the yummiest avocado toast! And to top it off with a nice poached egg
-    URL: http://gimmedelicious.com/2016/07/10/how-to-make-the-best-avocado-toast-with-eggs/
-    image: /docs/tutorials/AvocadoLab/halves-of-avocado.jpg
-  - button: Yes yummy!
-    text: Make an authentic guacamole to impress friends and foes
-    URL: http://www.thekitchn.com/recipe-guacamole-8649
-    color: '#43BB7A'      
----
+The Avocado lab is a fictitious lab created for educational purposes.
 
-The Avocado lab is a fictitious lab created for educational purposes. Below is a detailed explanation of the front matter that renders this page.
 ```
 CODE IS HERE
 ```

docs/tutorials/AvocadoLab/RenderedExample.md

@@ -82,7 +82,7 @@ promotions:
   - button: Go to recipe
     text: Learn how to make the yummiest avocado toast! And to top it off with a nice poached egg
     URL: http://gimmedelicious.com/2016/07/10/how-to-make-the-best-avocado-toast-with-eggs/
-    image: http://gimmedelicious.com/wp-content/uploads/2016/07/avocado-toast-7-of-13.jpg
+    image: /docs/tutorials/AvocadoLab/halves-of-avocado.jpg
   - button: Yes yummy!
     text: Make an authentic guacamole to impress friends and foes
     URL: http://www.thekitchn.com/recipe-guacamole-8649

docs/tutorials/add-entry.md

@@ -10,7 +10,11 @@ Good reference materials are the [Writing Guide] and the example entry of the [A
 1. **Open Collection Folder:** inside the [sphere repository] (first determine in which [collection][collections] your initiative belongs to)
 2. **Select Create New File:** If you are not a member, Github will let you know you don't have 'write' access to the project. A new file will be saved under _your copy of the project_ ('fork') and can later be merged with a 'pull request'.
 3. **Name your new file**: Add a folder first, preferably with the same name of your initiative using `CamelCase` and specify the format at the end as `.md`, e.g. 'AvocadoLab/AvocadoLab.md' (the name of the file will be the URL of the entry, so don't use a long name!)
-4. **Copy and Paste EntryTemplate:** open the [EntryTemplate](https://raw.githubusercontent.com/DIYbiosphere/sphere/master/docs/EntryTemplate.md), select all, copy, and paste into your new file. Alternatively, use the [CompleteTemplate](https://raw.githubusercontent.com/DIYbiosphere/sphere/master/docs/CompleteTemplate.md)
+
+![](/docs/tutorials/name.gif){:.ui.huge.bordered.centered.image}
+
+{:start="4"}
+4. **Copy and Paste EntryTemplate:** open the [EntryTemplate](https://raw.githubusercontent.com/DIYbiosphere/sphere/master/docs/EntryTemplate.md), select all, copy, and paste into your new file. Alternatively, use the [CompleteTemplate](https://raw.githubusercontent.com/DIYbiosphere/sphere/master/docs/CompleteTemplate.md), or base off the [AvocadoLabFile](https://raw.githubusercontent.com/DIYbiosphere/sphere/master/docs/tutorials/AvocadoLab/AvocadoLab.md) as a more concrete example
 5. **Edit content:** Fill in the _front matter_ (data keys in between `---`) and write the rest of the entry in _markdown text_. The `Preview` markdown will only render the text and the front matter will be inside a two row table.
 6. **Select Propose new file** at the bottom of the page, when you are finished editing
 
@@ -20,10 +24,10 @@ Good reference materials are the [Writing Guide] and the example entry of the [A
 7. **Select Create Pull Request** if you are able to merge. You can add additional comments to your pull request
 8. **Wait for Merge** A member will revise your Pull Request (PR), request additional edits from you, or approve the PR and merge your changes to the master branch. Members can approve their own PR or edit directly into the _master_ branch
 
+![](/docs/tutorials/edit.gif){:.ui.huge.bordered.centered.image}
+
 **Rejoice!** your new entry is now part of DIYbiosphere! :clap: :clap:
 
 Thank you for your contribution! :heart:
 
 {% include messages/info.html title="Changes are not immediate" text="Changes to the files trigger a _Travis Build_ which can take up to 10 minutes " %}
-
-{% include elements/labeled-media.html media="video" class="massive centered" path="/assets/videos/add-entry-users.mp4" label="Tutorial on adding a new entry" %}

docs/tutorials/edit-entry.md

@@ -10,19 +10,25 @@ Good reference materials are the [Writing Guide] and the example entry of the [A
 1. **Go to page you want to edit:** Above the title of the entry click the <i class="far fa-edit"></i> icon, which will take you to GitHub.
 2. **Select edit button:** The pencil icon <i class="fas fa-pencil"></i>.
 If you are not a member, Github will let you know you don't have 'write' access to the project. A new file will be saved under _your copy of the project_ (i.e. a 'fork') and can later be merged with a 'pull request'.
+
+![](/docs/tutorials/editing.gif){:.ui.huge.bordered.centered.image}
+
+{:start="3"}
 3. **Edit content:** Make changes to the _front matter_ (data keys in between `---`) and update the entry in _markdown text_. The `Preview` markdown will only render the text and the front matter will be inside a two row table
-4. **Select Propose new file** at the bottom of the page, when you are finished editing,
+4. **Select Propose file change** at the bottom of the page, when you are finished editing,
 
 {% include messages/exclamation.html title="Add changes in large batches if possible" text="Make all the changes you want, even to other files, in your own 'fork' or 'branch' and merge them all at once" %}
 
 {:start="5"}
 5. **Select Create Pull Request** if you are able to merge. You can add additional comments to your pull request
 6. **Wait for Merge** A member will revise your Pull Request (PR), request additional edits from you, or approve the PR and merge your changes to the master branch. Members can approve their own PR or edit directly into the _master_ branch
 
+
+![](/docs/tutorials/changes.gif){:.ui.huge.bordered.centered.image}
+
+
 **Rejoice!** your new entry is now part of DIYbiosphere! :clap: :clap:
 
 Thank you for your contribution! :heart:
 
 {% include messages/info.html title="Changes are not immediate" text="Changes to the files trigger a _Travis Build_ which can take up to 10 minutes " %}
-
-{% include elements/labeled-video.html media="video" class="massive centered" path="/assets/videos/add-entry-users.mp4" label="Tutorial on editing a new entry"%}

index.html

@@ -20,7 +20,7 @@ <h1 class="ui header"><div class="ui big inverted header">DIYbiosphere</div></h1
         </div>
       </div>
     </div>
-    <img class="ui image owl-img" src="/projects/DIYbiosphere/header.jpg">
+    <img class="ui image owl-img" src="/projects/diybiosphere/header.jpg">
   </div>
 
   {% for files in site.collections %}