diff --git a/README.md b/README.md index 5c6b5d1..425c488 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ The documentations is located at . -
+
## Contribute diff --git a/config.yaml b/config.yaml index 8b1892b..46ff74b 100644 --- a/config.yaml +++ b/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 diff --git a/content/_index.md b/content/_index.md index cae8f44..f2666b6 100644 --- a/content/_index.md +++ b/content/_index.md @@ -4,9 +4,11 @@ type: docs xbookToc: false --- -
+
# 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. diff --git a/content/docs/10-getting-started/01.howtouse/_index.md b/content/docs/10-getting-started/01.howtouse/_index.md new file mode 100644 index 0000000..44f12ba --- /dev/null +++ b/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. diff --git a/content/docs/10-getting-started/01.installation/_index.md b/content/docs/10-getting-started/01.installation/_index.md deleted file mode 100644 index 303a599..0000000 --- a/content/docs/10-getting-started/01.installation/_index.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Install Quiqr Desktop -weight: 10 ---- - -# Install Quiqr - -Download the latest version of Quiqr for your operating system. - - -## macOS - -[Quiqr for Mac](https://quiqr-app-releases.s3.eu-west-1.amazonaws.com/quiqrmac_x64.dmg) - -## Windows - -[Quiqr for Windows](https://quiqr-app-releases.s3.eu-west-1.amazonaws.com/quiqrwin.exe) - -After download execute the .exe-file to install Quiqr. - -## Linux - -[Quiqr for Linux AppImage](https://quiqr-app-releases.s3.eu-west-1.amazonaws.com/quiqrlinux_x86_64.AppImage) - -[Quiqr for Linux Deb](https://quiqr-app-releases.s3.eu-west-1.amazonaws.com/quiqrlinux_amd64.deb) - -[Quiqr for Linux RPM](https://quiqr-app-releases.s3.eu-west-1.amazonaws.com/quiqrlinux_x86_64.rpm) - -You can also find the [Quiqr App in the Snapcraft Store](https://snapcraft.io/quiqr). diff --git a/content/docs/10-getting-started/02.create_stencil_mannually/_index.md b/content/docs/10-getting-started/02.create_stencil_mannually/_index.md new file mode 100644 index 0000000..7666424 --- /dev/null +++ b/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. diff --git a/content/docs/10-getting-started/02.import-quiqr-hugo-site/_index.md b/content/docs/10-getting-started/02.import-quiqr-hugo-site/_index.md deleted file mode 100644 index 9ee2be3..0000000 --- a/content/docs/10-getting-started/02.import-quiqr-hugo-site/_index.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -weight: 20 -title: Import Quiqr Hugo template ---- - -todo diff --git a/content/docs/10-getting-started/03.create_stencil_with_inkscape_plugin/_index.md b/content/docs/10-getting-started/03.create_stencil_with_inkscape_plugin/_index.md new file mode 100644 index 0000000..7467960 --- /dev/null +++ b/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` + diff --git a/content/docs/10-getting-started/04.test_stencil/_index.md b/content/docs/10-getting-started/04.test_stencil/_index.md new file mode 100644 index 0000000..67c39df --- /dev/null +++ b/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 +``` + diff --git a/content/docs/10-getting-started/05.publish_your_stencil/_index.md b/content/docs/10-getting-started/05.publish_your_stencil/_index.md new file mode 100644 index 0000000..c831335 --- /dev/null +++ b/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. diff --git a/content/docs/10-getting-started/05.publish_your_stencil/settings_github.png b/content/docs/10-getting-started/05.publish_your_stencil/settings_github.png new file mode 100644 index 0000000..2cd0706 Binary files /dev/null and b/content/docs/10-getting-started/05.publish_your_stencil/settings_github.png differ diff --git a/content/docs/10-getting-started/05.publish_your_stencil/settings_inkscape_extension.png b/content/docs/10-getting-started/05.publish_your_stencil/settings_inkscape_extension.png new file mode 100644 index 0000000..4063fe1 Binary files /dev/null and b/content/docs/10-getting-started/05.publish_your_stencil/settings_inkscape_extension.png differ diff --git a/content/docs/10-getting-started/06.add_stencil_to_our_library/_index.md b/content/docs/10-getting-started/06.add_stencil_to_our_library/_index.md new file mode 100644 index 0000000..ce50918 --- /dev/null +++ b/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. diff --git a/content/docs/99-about-this-book/_index.md b/content/docs/99-about-this-book/_index.md index e59cb0e..d6a0358 100644 --- a/content/docs/99-about-this-book/_index.md +++ b/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,7 +26,7 @@ Some examples include text with placeholders. Placeholders indicate where you should substitute the appropriate information. For example: ``` -$ cat ~/Quiqr Data/config..json +$ cat /stencil-meta.json ``` This means you need to substitute the text `` with the actual site @@ -34,5 +34,5 @@ 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). diff --git a/static/booklarge.png b/static/booklarge.png deleted file mode 100644 index 6f9d35b..0000000 Binary files a/static/booklarge.png and /dev/null differ diff --git a/static/favicon.png b/static/favicon.png index 0c74895..5fcc7b1 100644 Binary files a/static/favicon.png and b/static/favicon.png differ diff --git a/static/logo-banner.svg b/static/logo-banner.svg deleted file mode 100644 index b7bd06c..0000000 --- a/static/logo-banner.svg +++ /dev/null @@ -1,198 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/logo.png b/static/logo.png new file mode 100644 index 0000000..6d9d7d2 Binary files /dev/null and b/static/logo.png differ diff --git a/static/logosquare.png b/static/logosquare.png new file mode 100644 index 0000000..9eedf31 Binary files /dev/null and b/static/logosquare.png differ