Recreate current site

.gitignore

@@ -0,0 +1,119 @@
+temp/
+out/
+
+# ---> Python
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+

README.md

@@ -1,3 +1,27 @@
-# laborejo.org
+# Generator for laborejo.org 
 
 An assortment of scripts and programs that pulls in info from our repositories and puts out a website.
+Everything is a low-tech as possible while avoiding editing redundant information (e.g. copyright
+date on every individual page)
+
+This is specialized for our own website and *not* a general purpose CMS or static site generator.
+
+1. `generate.bash`
+2. get out/ into your public html
+3. ????
+4. profit
+
+
+## Directories
+
+`static` holds the base structure and all non-generated files such as css and images. These files
+do not get parsed, combined or modified but simply cp -r into `out`/. This is done as first step.
+If you have conflicting files names later they will overwrite static files.
+
+`modules` are parts of static html that is the same on every page.
+
+`directcontent` texts and content exclusively for the website, like a welcome, are also found here.
+These are not generated from projects but written directly in these files. Watch out for redundant
+information. Dates, version numbers etc. should not be in here.
+
+

directcontent/index

@@ -0,0 +1,24 @@
+<div id="main">
+    <div class="header">
+        <h1><img class="pure-img-responsive" src="/images/software-suite.png" alt="Welcome to Laborejo Software Suite!"></h1>        
+    </div> <!-- header -->
+
+<div class="content">                    
+    <p> 
+        Laborejo Software Suite is a group of programs to make music (and also the name of its main program).
+        Everything is free in every sense of the word: free of cost, free to share and use, free of 
+        spyware or ads, free-and-open-source.
+    </p>
+    <p>
+        The programs have very different target groups. For example: while Laborejo itself is made for 
+        advanced composers with classical background Patroneo is made specificially for beginners who 
+        only know the very basics about music. 
+    </p>    
+
+<p><h2 class="content-subhead">Help and Support</h2></p>
+    <p>Every program has a comprehensive user manual in multiple languages.</p>
+    <p>You can write an e-mail to <a href="mailto:info@laborejo.org">info@laborejo.org</a> for any comment or question.</p>
+    <p>For bugs and issues a <a href="https://www.laborejo.org/bugs/">service</a> has been set up that works without registration. Thank you for your help to make our software better by reporting bugs.</p>
+
+</div> <!-- content -->
+</div> <!-- main -->

generate.bash

@@ -0,0 +1,89 @@
+#!/bin/bash
+
+set -euf -o pipefail #exit on fail, unset variables, file-globs/expansion and piping problems
+
+function finish {    
+   read -n 1 -s -r -p "Press any key to continue" 
+}
+trap finish EXIT
+
+ROOTPATH="$( cd "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
+cd "$ROOTPATH"
+echo Running from "$ROOTPATH"
+
+#Create initial structure and data-set
+mkdir temp || true #in .gitignore . Make dir, ignore fail if exists for set -e
+mkdir -p "out/images" || true #in .gitignore . Make dir, ignore fail if exists for set -e
+rm -rf out/
+cp -r static out
+cd temp
+
+#We loop over all projects several times, each stage of the generation.
+#Instead of doing one project fully at a time, creating one giant nested loop.
+#Administration first, the processing!
+PROJECTS=(laborejo patroneo vico fluajho argodejo) #The order here is the order on the page. Each of these gets its own entry.
+
+#Gather and update data
+for PROJECT in ${PROJECTS[*]} template
+do
+    GIT="https://git.laborejo.org/lss/$PROJECT.git"
+    echo "$GIT"
+
+    if [ -d "$PROJECT" ]; then      
+      cd "$PROJECT"
+      git pull
+      cd ..      
+    else      
+      git clone "$GIT"      
+    fi
+done
+cd "$ROOTPATH" #reset for next step
+
+
+#Generate Menu. n^2 loop. For each project all projects
+for PROJECT in ${PROJECTS[*]} 
+do
+    echo "" > "temp/$PROJECT/module_menu" #empty file
+
+    #Index/Home is the same for all sub-pages. index is not included in the list so we do not care about the "this is the current page" highlight here.
+    echo "<li class='pure-menu-item'><a class='pure-menu-link' href='/'>Home</a></li>" >> "temp/$PROJECT/module_menu" #automatic newline                
+    
+    for EACH in ${PROJECTS[*]} 
+    do
+        TITLE=$(echo "$EACH" | sed 's/[^ ]\+/\L\u&/g')
+        if [ "$PROJECT" = "$EACH" ]; then
+            #Special line for ourselves                  
+            echo "<li class='pure-menu-item menu-item-divided pure-menu-selected'><a class='pure-menu-link' href='/$PROJECT/'>$TITLE</a></li>" >> "temp/$PROJECT/module_menu" #automatic newline    
+        else
+            echo "<li class='pure-menu-item'><a class='pure-menu-link' href='/$EACH/'>$TITLE</a></li>" >> "temp/$PROJECT/module_menu" #automatic newline                
+        fi 
+        
+    done        
+done
+
+for PROJECT in ${PROJECTS[*]} 
+do
+      echo "" > "temp/$PROJECT/module_page" #empty file      
+      
+done
+cd "$ROOTPATH" #reset for next step
+
+
+#Combine Modules to real html in out/
+for PROJECT in ${PROJECTS[*]}
+do
+    ./projectinfo2modulepage.py "$PROJECT" > "temp/$PROJECT/module_page"
+    cat "modules/10head" "temp/$PROJECT/module_menu" "modules/20aftermenu" "temp/$PROJECT/module_page" "modules/90foot" > "out/$PROJECT.html"
+done
+
+#Create Home/Welcome page
+#A bit of redundancy first. Generate a menu.
+echo "" > "temp/index_menu" #empty file
+echo "<li class='pure-menu-item menu-item-divided pure-menu-selected'><a class='pure-menu-link' href='/'>Home</a></li>" >> "temp/index_menu" #automatic newline
+for EACH in ${PROJECTS[*]} 
+do
+    TITLE=$(echo "$EACH" | sed 's/[^ ]\+/\L\u&/g')
+    echo "<li class='pure-menu-item'><a class='pure-menu-link' href='/$EACH/'>$TITLE</a></li>" >> "temp/index_menu" #automatic newline
+done
+#Home-Content
+cat "modules/10head" "temp/index_menu" "modules/20aftermenu" "directcontent/index" "modules/90foot" > "out/index.html"

modules/10head

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
+    <meta name="description" content="LSS is a group of programs to make music."> 
+    
+    <title>Laborejo Software Suite</title>    
+    
+    <link rel="stylesheet" href="css/pure-min.css">
+    <link rel="stylesheet" href="css/layouts/side-menu.css">        
+</head>
+<body>
+
+<div id="layout">
+    <!-- Menu toggle -->
+    <a href="#menu" id="menuLink" class="menu-link">
+        <!-- Hamburger icon -->
+        <span></span>
+    </a>    
+
+    <nav>
+        <div id="menu">
+            <div class="pure-menu">                
+                <p class="pure-menu-heading">MENU</p>                
+                <ul class="pure-menu-list">
+
+                    <!-- list of generated menu entries, with a selection-highlight for each page -->                       
+

modules/20aftermenu

@@ -0,0 +1,6 @@
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Page Start -->

modules/90foot

@@ -0,0 +1,9 @@
+    <!-- Page End -->
+
+
+</div>
+
+<script src="./js/ui.js "></script>
+
+</body>
+</html>

projectinfo2modulepage.py

@@ -0,0 +1,54 @@
+#! /usr/bin/env python3
+# -*- coding: utf-8 -*-
+
+"""
+This file is called by generate.bash and will put out part of our website.
+It pulls the info directly from the projects metada dict. Therefore we need this to be a python
+script.
+
+The projects themselves are oblivious to any html website format and style. We can change the website
+at any time as long as the data structures stay the same.
+
+Output is to stdout, we rely on bash piping in generate.bash to write a file.
+
+We expect a directory "temp" on our level with each project as lowercase name:
+temp/fluajho
+temp/patroneo
+etc.
+
+The image file is a static file. At this point in time manually copied into the static/ dir
+
+"""
+
+import sys
+
+project = sys.argv[1]
+config = __import__(f"temp.{project}.engine.config", fromlist=["METADATA"])
+META = config.METADATA
+
+assert META["shortName"] == project, (META["shortName"], project)
+
+htmlDescription = META["description"].replace("\n\n", "</p>\n\n<p>")
+
+template = f"""<div id="main">
+    <div class="header">
+        <h1><img class="pure-img-responsive" src="/images/{META["shortName"]}.png" alt="{META["name"]}"></h1>                        
+    </div> <!-- header -->
+    
+    <div class="content">                    
+        <p>{htmlDescription}</p>        
+        
+        <ul>
+            <li>Current Version: {META["version"]} ({META["year"]})</li>
+            <li>Multi-Language <a href="/documentation/{META["shortName"]}">Manual</a></li>
+            <li>Download: <a href="/downloads/{META["shortName"]}-{META["version"]}.tar.gz">Sourcecode</a> or <a href="/downloads">All Downloads</a></li>            
+            <li>Bugs and Issues: <a href="https://www.laborejo.org/bugs">https://www.laborejo.org/bugs</a>
+            <li>Git and Developers README: <a href="http://git.laborejo.org/lss/{META["shortName"]}.git">https://git.laborejo.org/lss/{META["shortName"]}.git</a></li>
+        </ul>
+        
+    </div> <!-- content -->
+</div> <!-- main -->
+"""
+
+print (template) #stdout. our job is done
+

static/.htaccess

@@ -0,0 +1,24 @@
+RewriteEngine On
+RewriteCond %{HTTPS} !=on
+RewriteCond %{ENV:HTTPS} !=on
+RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
+
+#Remove html extension.  
+#RewriteRule ^([^\.]+)$ $1.html [NC,L]
+
+#Remove extension and add trailing slash
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^([^/]+)/$ $1.html
+RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
+RewriteRule (.*)$ /$1/ [R=301,L]
+
+
+#Old URLs. Don't use them anymore publically.
+Redirect /patroneo.git https://git.laborejo.org/lss/patroneo
+Redirect /laborejo.git https://git.laborejo.org/lss/laborejo
+Redirect /fluajhjo.git https://git.laborejo.org/lss/fluajho
+Redirect /vico.git https://git.laborejo.org/lss/vico

static/css/layouts/side-menu.css

@@ -0,0 +1,248 @@
+body {
+    color: #777;
+}
+
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout {
+    position: relative;
+    left: 0;
+    padding-left: 0;
+}
+    #layout.active #menu {
+        left: 150px;
+        width: 150px;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+/*
+The content `<div>` is where all your content goes.
+*/
+.content {
+    margin: 0 auto;
+    padding: 0 2em;
+    max-width: 800px;
+    margin-bottom: 50px;
+    line-height: 1.6em;
+}
+
+.header {
+     margin: 0;
+     color: #333;
+     text-align: center;
+     padding: 2.5em 2em 0;
+     border-bottom: 1px solid #eee;
+ }
+    .header h1 {
+        margin: 0.2em 0;
+        font-size: 3em;
+        font-weight: 300;
+    }
+     .header h2 {
+        font-weight: 300;
+        color: #ccc;
+        padding: 0;
+        margin-top: 0;
+    }
+
+.content-subhead {
+    margin: 50px 0 20px 0;
+    font-weight: 300;
+    color: #888;
+}
+
+
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+
+#menu {
+    margin-left: -150px; /* "#menu" width */
+    width: 150px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000; /* so the menu or its navicon stays above all content */
+    background: #191818;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+    /*
+    All anchors inside the menu should be styled like this.
+    */
+    #menu a {
+        color: #999;
+        border: none;
+        padding: 0.6em 0 0.6em 0.6em;
+    }
+
+    /*
+    Remove all background/borders, since we are applying them to #menu.
+    */
+     #menu .pure-menu,
+     #menu .pure-menu ul {
+        border: none;
+        background: transparent;
+    }
+
+    /*
+    Add that light border to separate items into groups.
+    */
+    #menu .pure-menu ul,
+    #menu .pure-menu .menu-item-divided {
+        border-top: 1px solid #333;
+    }
+        /*
+        Change color of the anchor links on hover/focus.
+        */
+        #menu .pure-menu li a:hover,
+        #menu .pure-menu li a:focus {
+            background: #333;
+        }
+
+    /*
+    This styles the selected menu item `<li>`.
+    */
+    #menu .pure-menu-selected,
+    #menu .pure-menu-heading {
+        background: #1f8dd6;
+    }
+        /*
+        This styles a link within a selected menu item `<li>`.
+        */
+        #menu .pure-menu-selected a {
+            color: #fff;
+        }
+
+    /*
+    This styles the menu heading.
+    */
+    #menu .pure-menu-heading {
+        font-size: 110%;
+        color: #fff;
+        margin: 0;
+    }
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+    position: fixed;
+    display: block; /* show this only on small screens */
+    top: 0;
+    left: 0; /* "#menu width" */
+    background: #000;
+    background: rgba(0,0,0,0.7);
+    font-size: 10px; /* change this value to increase/decrease button size */
+    z-index: 10;
+    width: 2em;
+    height: auto;
+    padding: 2.1em 1.6em;
+}
+
+    .menu-link:hover,
+    .menu-link:focus {
+        background: #000;
+    }
+
+    .menu-link span {
+        position: relative;
+        display: block;
+    }
+
+    .menu-link span,
+    .menu-link span:before,
+    .menu-link span:after {
+        background-color: #fff;
+        width: 100%;
+        height: 0.2em;
+    }
+
+        .menu-link span:before,
+        .menu-link span:after {
+            position: absolute;
+            margin-top: -0.6em;
+            content: " ";
+        }
+
+        .menu-link span:after {
+            margin-top: 0.6em;
+        }
+
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+/*
+Hides the menu at `48em`, but modify this based on your app's needs.
+*/
+@media (min-width: 48em) {
+
+    .header,
+    .content {
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    #layout {
+        padding-left: 150px; /* left col width "#menu" */
+        left: 0;
+    }
+    #menu {
+        left: 150px;
+    }
+
+    .menu-link {
+        position: fixed;
+        left: 150px;
+        display: none;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+}
+
+@media (max-width: 48em) {
+    /* Only apply this when the window is small. Otherwise, the following
+    case results in extra padding on the left:
+        * Make the window small.
+        * Tap the menu to trigger the active state.
+        * Make the window large again.
+    */
+    #layout.active {
+        position: relative;
+        left: 150px;
+    }
+}

static/images/README.md

@@ -0,0 +1,8 @@
+#Logo Images Origin
+
+The original .svg sources are in a private repository for copyright reasons.
+See out/web , there.
+
+The websites logos and images are created statically and copied here, by hand.
+
+

static/js/ui.js

@@ -0,0 +1,46 @@
+(function (window, document) {
+
+    var layout   = document.getElementById('layout'),
+        menu     = document.getElementById('menu'),
+        menuLink = document.getElementById('menuLink'),
+        content  = document.getElementById('main');
+
+    function toggleClass(element, className) {
+        var classes = element.className.split(/\s+/),
+            length = classes.length,
+            i = 0;
+
+        for(; i < length; i++) {
+          if (classes[i] === className) {
+            classes.splice(i, 1);
+            break;
+          }
+        }
+        // The className is not found
+        if (length === classes.length) {
+            classes.push(className);
+        }
+
+        element.className = classes.join(' ');
+    }
+
+    function toggleAll(e) {
+        var active = 'active';
+
+        e.preventDefault();
+        toggleClass(layout, active);
+        toggleClass(menu, active);
+        toggleClass(menuLink, active);
+    }
+
+    menuLink.onclick = function (e) {
+        toggleAll(e);
+    };
+
+    content.onclick = function(e) {
+        if (menu.className.indexOf('active') !== -1) {
+            toggleAll(e);
+        }
+    };
+
+}(this, this.document));