Merge pull request #15 from matmair/content

refactor and style updates

_config.yml

@@ -12,7 +12,7 @@ description: >-
   InvenTree is an open-source inventory management system which provides intuitive parts management and stock control.
   It is at the center of an ecosystem of addins for EDA tools, API wrapper, deeply integrated plugins and 3rd party tools.
 
-baseurl: "/home.invenhost.com"
+baseurl: "/inventree-website"
 url: ""
 
 collections:

_data/for_edu.yml

@@ -10,8 +10,3 @@ features:
     subtitle: Stay independed of big vendors
     text: Free software of big vendors helps the budget. But how about your students?
     extend: Don’t teach tools – teach process and competence. InvenTree is MIT licensed and free forever.<br>Also, we are open to contribution from all ages!
-
-  - title: lorem ipsum title
-    subtitle: lorem ipsum subtitle
-    text: lorem ipsum description
-    link: https://example.com/

_data/functions/general.yml

@@ -1,6 +1,6 @@
 title: InvenTree builds it vast functions on top of a few core workflows
 link:
-  internal: functions/index.md
+  internal: functions.md
 text:
 functions:
   - title: Organize Parts

_data/general/footer.yml

@@ -1,6 +1,6 @@
-- title: Websites
+- title: Quick
   cats:
-  - name: Documentation
+  - name: Docs
     site: doc-link
   - name: Demo
     site: demo-link
@@ -8,46 +8,39 @@
     internal: plugins.html
 
 - title: Contribute
+  link:
+    internal: contribute/index.md
   cats:
   - name: Translate
-    link: https://crowdin.com/project/inventree
+    internal: contribute/translate.md
   - name: Code
-    link: https://github.com/inventree/InvenTree/blob/master/CONTRIBUTING.md
+    internal: contribute/code/index.md
-  - name: Report
+  - name: Community
     link: https://github.com/inventree/InvenTree/issues/new/choose
-  - name: Discuss
+    internal: contribute/community.md
-    link: https://github.com/inventree/InvenTree/issues
+  - name: Sponsor
-  - name: Document
+    internal: contribute/sponsor.md
-    link: https://github.com/inventree/inventree-docs
-  - name: Fund
-    link: https://inventree.readthedocs.io/en/latest/contribute/#donate
 
-- title: Extend
+- title: Ecosystem
+  link:
+    internal: extend/index.md
   cats:
   - name: API
-    link: https://inventree.readthedocs.io/en/latest/extend/python/
+    internal: extend/api.md
   - name: Plugins
-    internal: plugins.html
+    internal: extend/plugin/index.md
   - name: KiCad
-    link: https://github.com/sparkmicro/Ki-nTree/
+    internal: extend/integrate/kntree.md
-  - name: Fusion360
+  - name: Integrate
-    link: https://github.com/matmair/F360-InvenTree/
+    internal: extend/integrate/index.md
-  - name: Python
-    link: https://inventree.readthedocs.io/en/latest/extend/python/
-  - name: More
-    link: https://github.com/topics/inventree
 
 - title: Sitemap
   cats:
-  - name: Home
-    home: true
-  - name: For Maker
-    internal: use/maker.md
-  - name: For Business
-    internal: use/business.md
-  - name: For Education
-    internal: use/education.md
   - name: About
     internal: about/index.md
+  - name: Compare
+    internal: alternatives/index.md
   - name: Blog
     internal: blog.html
+  - name: Deploy
+    internal: deploy/index.md

_includes/base/footer.html

@@ -1,5 +1,5 @@
 <footer class="cm-gray-2 body-font">
-    <div class="container px-5 py-8 mx-auto flex md:flex-row md:flex-nowrap flex-wrap flex-col">
+  <div class="container px-5 pt-8 mx-auto flex md:flex-row md:flex-nowrap flex-wrap flex-col">
     <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
       <a class="flex title-font font-medium items-center md:justify-start justify-center cm-gray-1">
         <img src="{{ '/assets/logo.png' | relative_url }}" alt="logo" height="32" width="32" class="h-8">
@@ -8,22 +8,20 @@
       <p class="mt-2 text-sm cm-gray-3">{{ site.tagline }}</p>
     </div>
 
-      <div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
+    <div class="flex-grow flex flex-wrap md:pl-10 mb-1 md:mt-0 mt-10 md:text-left text-center md:justify-left justify-center">
-      
     {% assign footer  = footer|default: site.data.general.footer %}
     {% for cat in footer %}
-        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
+      <div class="md:w-1/4 px-4">
-          <h2 class="footer-categorie title-font">{{ cat.title }}</h2>
+        <h2 class="footer-categorie title-font">
+          {% if cat.link %}<a href="{% include fnc/link.html item=cat.link %}">{% endif %}{{cat.title}}{% if cat.link %}</a>{% endif %}
+        </h2>
         <nav class="list-none mb-10"><ul>
           {% for item in cat.cats %}
-            <li>
+          <li><a href="{% include fnc/link.html item=item%}" class="footer-link">{{ item.name }}</a></li>
-              <a href="{% include fnc/link.html item=item%}" class="footer-link">{{ item.name }}</a>
-            </li>
           {% endfor %}
         </ul></nav>
       </div>
     {% endfor %}
-
     </div>
   </div>
 
@@ -33,10 +31,10 @@
         <a href="https://github.com/matmair" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@matmair</a>
       </p>
       <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
-          <a href="https://github.com/inventree/InvenTree" alr="officail github repo" class="ml-3 cm-gray-3">
+        <a href="https://github.com/inventree/inventree-website" alr="github repo" class="ml-3 cm-gray-3">
-            <svg class="h-5 w-5 cm-gray-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"></path></svg>
+          <img class="h-5 w-5" src="{{ '/assets/github.svg' | relative_url }}" />
         </a>
       </span>
     </div>
   </div>
-  </footer>
+</footer>

_includes/base/header.html

@@ -1,11 +1,13 @@
 <header class="cm-gray-2 body-font sticky top-0 z-50 bg-gradient-to-r from-white to-secondary">
-    <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
+    <div class="container mx-auto flex flex-wrap p-5 flex-row items-center">
-      <a class="flex title-font font-medium items-center cm-gray-1 mb-4 md:mb-0" href="{{ '/' | relative_url }}">
+      <a class="flex title-font font-medium items-center cm-gray-1 mb-0 mr-2" href="{{ '/' | relative_url }}">
         <img src="{{ '/assets/logo.png' | relative_url }}" alt="logo" height="32" width="32" class="h-8">
         <span class="ml-3 text-xl">{{ site.title }}</span>
       </a>
 
-      <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
+      <div class="flex-grow xs:flex-none"></div>
+
+      <nav class="md:mr-auto md:py-1 xs:ml-4 xs:pl-4 xs:border-l xs:border-gray-400	flex flex-wrap items-center text-base justify-center">
         <a class="mr-5 hover:cm-gray-1" href="{% include fnc/link.html item=site.blog-link %}">Blog</a>
         <a class="mr-5 hover:cm-gray-1" href="{% include fnc/link.html item=site.plugin-link %}">Plugins</a>
         <a class="mr-5 hover:cm-gray-1" href="{% include fnc/link.html item=site.doc-link %}">Docs</a>
@@ -17,9 +19,9 @@
         <a class="mr-2 hover:cm-gray-1" href="#business">for <strong>business</strong></a>
         <a class="mr-2 hover:cm-gray-1" href="#edu">for <strong>edu</strong></a>
       </nav>
-      {% endif %}
       <a href="{{site.demo-link}}" class="inline-flex items-center bg-gray-100 ml-2 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
         Open demo
       </a>
+      {% endif %}
     </div>
 </header>

_includes/block/features.html

@@ -7,7 +7,7 @@
             <h1 class="header-text title-font mb-2 cm-gray-1">{{ include.data.title }}</h1>
             {% if include.link %}
             {% assign link=include.data.link|default:include.link %}
-            <a href="{% include fnc/link.html item=link %}" alt="learn more">{% include fnc/learn_more.html %}</a>
+            <a href="{% include fnc/link.html item=link %}" alt="learn more"><img class="w-4 h-4 ml-2" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
             {% endif %}
           </div>
           <div class="h-1 w-20 bg-secondary rounded"></div>
@@ -25,7 +25,7 @@
               {% if include.extend and item.extend %}<br><br>{{ item.extend }}{% endif %}
             </p>
             {% if item.link %}
-            <a class="text-secondary inline-flex items-center" href="{% include fnc/link.html item=item.link %}" alt="learn more">Learn More {% include fnc/learn_more.html %}</a>
+            <a class="text-secondary inline-flex items-center" href="{% include fnc/link.html item=item.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
             {% endif %}
           </div>
         </div>

_includes/block/functions.html

@@ -11,7 +11,7 @@
       {% if include.data.title %}<h1 class="header-text title-font mb-4 cm-gray-1">{{ include.data.title }}</h1>{% endif %}
       {% if include.data.text %}<p class="lg:w-2/3 mx-auto leading-relaxed text-base">{{ include.data.text }}</p>{% endif %}
       {% if include.data.link and include.no_link != true %}
-      <a class="text-secondary inline-flex items-center justify-center" href="{% include fnc/link.html item=include.data.link %}" alt="learn more">Learn More {% include fnc/learn_more.html %}</a>
+      <a class="text-secondary inline-flex items-center justify-center" href="{% include fnc/link.html item=include.data.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
       {% endif %}
     </div>
     {% endif %}
@@ -25,7 +25,7 @@
           {% if include.extend and item.extend %}<br><br>{{ item.extend }}{% endif %}
         </p>
         {% if item.link %}
-        <a class="text-secondary inline-flex items-center" href="{% include fnc/link.html item=item.link %}" alt="learn more">Learn More {% include fnc/learn_more.html %}</a>
+        <a class="text-secondary inline-flex items-center" href="{% include fnc/link.html item=item.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
         {% endif %}
       </div>
       {% endfor %}

_includes/fnc/learn_more.html

@@ -1,3 +0,0 @@
-<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
-    <path d="M5 12h14M12 5l7 7-7 7"></path>
-</svg>

_includes/partial/alert.html

@@ -1,7 +1,7 @@
 <div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md" role="alert">
     <div class="flex">
         {% if include.style == 'info' %}
-            <svg class="fill-current h-6 w-6 text-teal-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
+            <img class="fill-current h-6 w-6 text-teal-500 mr-4" src="{{ '/assets/info.svg' | relative_url }}" />
         {% endif %}
         <div>
             <p class="font-bold">{{ include.title }}</p>

_layouts/alternatives.html

@@ -1,7 +1,7 @@
 ---
 layout: content
 ---
-<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto min-h-screen">
+<article>
     {% include partial/alert.html
         style='info'
         title='caveat'

_layouts/content.html

@@ -2,11 +2,7 @@
 layout: default
 ---
 
-<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto min-h-screen"
+<article{% if layout.fullwith %} class="max-w-p90"{% endif %}>
-{% if layout.fullwith %}
-style="max-width: 90%"
-{% endif %}
->
     {% if layout.notitle != true %}
     <h2>{{ page.title }}</h2>
     {% endif %}

_layouts/default.html

@@ -5,12 +5,16 @@
     {% include base/head.html %}
 </head>
 
-<body class="antialiased cm-gray-1 min-h-screen">
+<body class="flex flex-col antialiased cm-gray-1 min-h-screen">
+    <div class="flex-none">
     {% include base/header.html %}
-
     {{ content }}
+    </div>
 
+    <div class="flex-grow"></div>
+    <div class="flex-none">
     {% include base/footer.html %}
+    </div>
 </body>
 
 </html>

_layouts/plugin_highlight.html

@@ -1,7 +1,7 @@
 ---
 layout: content
 ---
-<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto min-h-screen">
+<article>
     <h2>{{ page.title }}</h2>
     {{ content }}
     {% if page.plugin %}

_layouts/post.html

@@ -5,17 +5,13 @@ layout: default
 <header>
     {% if page.backLink or page.backLink == nil %}
     <a href="{{ '/blog' | relative_url }}" class="flex items-center m-5 text-xl hover:underline">
-        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <img class="w-6 h-6" src="{{ '/assets/back.svg' | relative_url }}" />
-            <path fill-rule="evenodd"
-                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                clip-rule="evenodd"></path>
-        </svg>
         <span>Back</span>
     </a>
     {% endif %}
 </header>
 
-<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto min-h-screen">
+<article>
     <h1>{{ page.title }}</h1>
     <p>
       {{ page.date | date_to_string }}

assets/back.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>

assets/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"></path></svg>

assets/index.css

@@ -8,6 +8,10 @@ layout: empty
 
 
 @layer components {
+    article {
+        @apply prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto
+    }
+
     .custom-underline-blue {
         @apply border-b-4 border-blue-400;
     }
@@ -70,4 +74,8 @@ layout: empty
         position: initial;
         @apply list-none
     }
+
+    .max-w-p90 {
+        max-width: 90%
+    }
 }

assets/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>

assets/learn.svg

@@ -0,0 +1 @@
+<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>

blog.html

@@ -3,7 +3,7 @@ layout: default
 title: Blog
 permalink: /blog
 ---
-  <section class="cm-gray-2 body-font min-h-screen">
+  <section class="cm-gray-2 body-font">
     <div class="pt-3 pb-1 section-container">
       <h1 class="header-text title-font mb-4 cm-gray-2">InvenTree Blog</h1>
       <div class="flex flex-wrap">

deploy/index.md

@@ -12,4 +12,4 @@ There are multiple methods to deploy InvenTree. The most popular (and by the dev
 
 ### Other Options
 
-The core InvenTree server is built using the widely used python-based framework [Django](https://django.org/). Therefore there are  deployment methods for nearly all plattforms and architectures. If you want to read more about InvenTree's structure and a typical installation read the [architecture overview](../contribute/code/architecture).
+The core InvenTree server is built using the widely used python-based framework [Django](https://djangoproject.com/). Therefore there are  deployment methods for nearly all plattforms and architectures. If you want to read more about InvenTree's structure and a typical installation read the [architecture overview](../contribute/code/architecture).

extend/index.md

@@ -8,5 +8,6 @@ InvenTree is designeds to be part of a larger system of tools to support both ho
 - [API](api)
 - [Integrate](integrate) into other tools
 - Tools for [migrating to InvenTreen](migrate)
+- Python [package](https://inventree.readthedocs.io/en/latest/extend/python/) 
 
 # TODO

functions.md

@@ -1,5 +1,6 @@
 ---
 layout: default
+permalink: /functions
 ---
 
 {% include block/hero.html title='A wealth of functions' title_2='is provided' image='https://dummyimage.com/860x600' color='by default with InvenTree' detail='By default InvenTree ships with a lot of functions in the area of part, inventory, supplier, manufacturer, machine and BOM managment.

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "home.invenhost.com",
+  "name": "inventree-website",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

tailwind.config.js

@@ -5,6 +5,7 @@
 *
 * Run '$ npm run css:dev' to compile changes in this file.
 */
+const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
     purge: {
@@ -17,6 +18,10 @@ module.exports = {
             colors: {
               'primary':'#90A8D8',
               'secondary':'#DDBC91',
+            },
+            screens: {
+                'xs': '470px',
+                ...defaultTheme.screens
             }
         },
     },