Browse Source

Recreate current site

master
Nils 1 year ago
parent
commit
867171ceaf
18 changed files with 693 additions and 2 deletions
  1. +119
    -0
      .gitignore
  2. +26
    -2
      README.md
  3. +24
    -0
      directcontent/index
  4. +89
    -0
      generate.bash
  5. +29
    -0
      modules/10head
  6. +6
    -0
      modules/20aftermenu
  7. +9
    -0
      modules/90foot
  8. +54
    -0
      projectinfo2modulepage.py
  9. +24
    -0
      static/.htaccess
  10. +248
    -0
      static/css/layouts/side-menu.css
  11. +11
    -0
      static/css/pure-min.css
  12. +8
    -0
      static/images/README.md
  13. BIN
      static/images/fluajho.png
  14. BIN
      static/images/laborejo.png
  15. BIN
      static/images/patroneo.png
  16. BIN
      static/images/software-suite.png
  17. BIN
      static/images/vico.png
  18. +46
    -0
      static/js/ui.js

+ 119
- 0
.gitignore View File

@@ -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/


+ 26
- 2
README.md View File

@@ -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.


An assortment of scripts and programs that pulls in info from our repositories and puts out a website.

+ 24
- 0
directcontent/index View File

@@ -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 -->

+ 89
- 0
generate.bash View File

@@ -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"

+ 29
- 0
modules/10head View File

@@ -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 -->


+ 6
- 0
modules/20aftermenu View File

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

<!-- Page Start -->

+ 9
- 0
modules/90foot View File

@@ -0,0 +1,9 @@
<!-- Page End -->


</div>

<script src="./js/ui.js "></script>

</body>
</html>

+ 54
- 0
projectinfo2modulepage.py View File

@@ -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


+ 24
- 0
static/.htaccess View File

@@ -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

+ 248
- 0
static/css/layouts/side-menu.css View File

@@ -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;
}
}

+ 11
- 0
static/css/pure-min.css
File diff suppressed because it is too large
View File


+ 8
- 0
static/images/README.md View File

@@ -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.



BIN
static/images/fluajho.png View File

Before After
Width: 319  |  Height: 85  |  Size: 8.7KB

BIN
static/images/laborejo.png View File

Before After
Width: 365  |  Height: 127  |  Size: 12KB

BIN
static/images/patroneo.png View File

Before After
Width: 389  |  Height: 80  |  Size: 11KB

BIN
static/images/software-suite.png View File

Before After
Width: 308  |  Height: 83  |  Size: 9.5KB

BIN
static/images/vico.png View File

Before After
Width: 247  |  Height: 80  |  Size: 7.3KB

+ 46
- 0
static/js/ui.js View File

@@ -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));

Loading…
Cancel
Save