rebrand, initial documentation

README.md

@@ -2,7 +2,7 @@
 
 The documentations is located at <https://svg-stencils.github.io/documentation/>.
 
-<center><img src="static/logo-banner.svg" width=40% /></center>
+<center><img src="static/logo.png" /></center>
 
 ## Contribute
 

config.yaml

@@ -47,7 +47,7 @@ params:
 
   # (Optional, default none) Set the path to a logo for the book. If the logo is
   # /static/logo.png then the path would be logo.png
-  BookLogo: /logo-nav.svg
+  BookLogo: /logosquare.png
 
   # (Optional, default none) Set leaf bundle to render as side menu
   # When not specified file structure and weights will be used

content/_index.md

@@ -4,9 +4,11 @@ type: docs
 xbookToc: false
 ---
 
-<center><img src="/booklarge.png" width=200px /></center>
+<center><img src="/documentation/logo.png" /></center>
 
 # SVG Stencils Documentation
 
+SVG Stencils is a Community Driven Stencil Library.
+
 This documentation assists developers and designers in working with SVG
 Stencils and contributing to SVG Stencils.

content/docs/10-getting-started/01.howtouse/_index.md

@@ -0,0 +1,14 @@
+---
+title: How To Use
+weight: 10
+---
+
+## How to use
+
+Using SVG Stencils is easy.
+
+- Place your browser window next to your design app.
+- Open [svg-stencils.github.io](svg-stencils.github.io) in the browser.
+- Select a stencil with components you'd like to use.
+- Drag components from your browser directly into the canvas of your design app. The components are in SVG format, so your can change texts, element sizes etc.
+- If for some reason you cannot drag and drop, right click the component and choose copy SVG.

content/docs/10-getting-started/02.create_stencil_mannually/_index.md

@@ -0,0 +1,18 @@
+---
+weight: 20
+title: Create Stencil Manually
+---
+
+## How to create a stencil library manually
+
+A minimal directory structure of a stencil is:
+
+```
+./stencil-components.json
+./stencil-meta.json
+./component1.svg
+./component2.svg
+./component3.svg
+```
+
+Use [other published stencils](https://github.com/svg-stencils/svg-stencils.github.io/blob/main/public/stencils.json) as example.

content/docs/10-getting-started/03.create_stencil_with_inkscape_plugin/_index.md

@@ -0,0 +1,20 @@
+---
+weight: 30
+title: Create Stencil With Inkscape Extension
+---
+
+## How to create a stencil library with the SVG Stencil Inkscape Extension
+
+We created an [Inkscape
+Extension](https://github.com/svg-stencils/inkscape-svg_stencil_export) which
+helps with the creations of new stencils.
+
+1. Install the extension
+2. Open your svg file with reusable components
+3. Move all single components to a separate layer
+4. Move all stuff you don not want to share to a hidden layer
+5. Open de extension from the extension menu
+6. Choose an newly created output directory as export path
+6. Fill in all fields on the first 3 tabs.
+7. You can use this extension multiple times, but the first time, make sure to check `write stencil-components.json` and `write -stencil-meta.json`
+

content/docs/10-getting-started/04.test_stencil/_index.md

@@ -0,0 +1,28 @@
+---
+weight: 40
+title: Test your Stencil
+---
+
+## Test your stencil
+
+If you can run a (local) webserver you can test your stencil in the SVG
+Stencils Web App. Your stencil URL is the url pointing to the parent directory
+of stencil-meta.json and stencil-components.json. Add this URL as query
+parameter to the svg-stencils-url.
+
+```
+# Mac
+open https://svg-stencils.github.io/?stencil=http://localhost:8080
+
+# Linux
+xdg-open https://svg-stencils.github.io?stencil=http://localhost:8080
+```
+
+Not all local webservers work. `http.server` with cors enabled has been proven to work from a
+local address.
+
+```
+cd my-stencil-directory
+npm exec http-server -- --cors
+```
+

content/docs/10-getting-started/05.publish_your_stencil/_index.md

@@ -0,0 +1,31 @@
+---
+weight: 50
+title: Publish your stencil
+---
+
+## How to publish a stencil on Github Pages
+
+**Use the [Inkscape
+Extension](https://github.com/svg-stencils/inkscape-svg_stencil_export) to create your stencil-directory**. Make sure to check `Create GitHub Pages Workflow` and also create `index.html` and `readme.md`.
+
+![githubpages](settings_inkscape_extension.png)
+
+On Github [create a new repository](https://github.com/new) and follow instructions to add the contents of your stencil directory to the new repository.
+
+**Make sure to add .github**
+
+```
+cd my-repo
+git add .github
+git commit -m "add github workflow"
+git push
+```
+
+When the repo is pushed **setup github pages**.
+
+![githubpages](settings_github.png)
+
+1. Go to the repo settings
+2. Go to the pages section
+3. Choose the root of the main branch as pages source
+4. Thats it, after a few minutes you can click the link and a preview of your stencil should be visible.

content/docs/10-getting-started/06.add_stencil_to_our_library/_index.md

@@ -0,0 +1,36 @@
+---
+weight: 50
+title: Submit a stencil to the SVG Stencil Library
+---
+
+## How to add a stencil to the SVG-Stencils library
+
+- Fork the the svg-stencil project ( https://github.com/svg-stencils/svg-stencils.github.io/fork )
+- Create your stencil-addition branch (`git checkout -b my-new-stencil`)
+- Add your the name and url of your extension to `public/stencils.json`. The files stencil-components.json and stencil-meta.json should exist.
+
+```json
+  {
+        "name": "My new stencil",
+        "url": "https://mipmip.pages.gitlab.gnome.org/my-new-stencil"
+  }
+```
+
+The the above example implies the existance of these two files:
+
+```
+- https://mipmip.pages.gitlab.gnome.org/my-new-stencil/stencil-components.json
+- https://mipmip.pages.gitlab.gnome.org/my-new-stencil/stencil-meta.json
+```
+
+- Make sure the json is correct, you can test the syntax of the json here: https://jsonlint.com/
+- Commit your changes (`git commit -am 'Add new stencil'`)
+- Push to the branch (`git push origin my-new-stencil`)
+- Create a new Pull Request
+
+**Note**
+
+Only open source stencils are added. We apply a quality check. We preserve the
+right to remove stencils from the library at any time. Make sure your are the
+author or you are sure the components are allowed to be shared as open source
+components.

content/docs/99-about-this-book/_index.md

@@ -1,5 +1,5 @@
 ---
-title: About this book
+title: About this documentation
 weight: 99
 aliases:
     - /about/
@@ -26,13 +26,13 @@ Some examples include text with placeholders. Placeholders indicate where you
 should substitute the appropriate information. For example:
 
 ```
-$ cat ~/Quiqr Data/config.<site_name>.json
+$ cat <stencil name>/stencil-meta.json
 ```
 
 This means you need to substitute the text `<site_name>` with the actual site
 name.
 
 ### Contributing
 
-We welcome contributions to this book. Please read our [Contributing
+We welcome contributions to this documentation. Please read our [Contributing
 Guidelines](https://github.com/svg-stencils/documentation/blob/main/CONTRIBUTING.md).