crunk/distribusi-verse
2
0
Fork 1
Code Issues Pull Requests Projects Releases 1 Wiki Activity

help page where distribusi is explained a bit

Browse Source
This commit is contained in:
crunk 2022-03-27 14:18:28 +02:00
parent 36039fceed
commit fd32d87509
3 changed files with 85 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
verse/static/css/style.css
View File

@ -251,6 +251,17 @@ div.maincontent{
visibility: visible;
opacity: 1;
}
.code-example {
width: 100%;
color: black;
padding: 1em;
box-sizing: border-box;
background: #E0B0FF;
outline: none;
font-family: Courier, sans-serif;
font-size: 16px;
}
/*
Project colors so far.
light

79
verse/templates/help.html
View File

@ -1,6 +1,11 @@
{% extends "base.html" %}
{% block main %}
<div id="buttons">
<div class="overview">
<a href="/">
<input type="button" name="button" value="Main page"></input>
</a>
</div>
{% if not current_user.is_authenticated %}
<div class="signin">
<a href="/login">
@ -39,12 +44,74 @@
{% endif %}
<div class="maincontent">
<h2>Distribusi-verse</h2>
<h3>Zipfiles become websites</h3>
<h3>Folders become links and pages</h3>
<h3>Media files become visible</h3>
<h3>Text files become readable</h3>
<h3>Use Css to style your page</h3>
<h3>1. Zipfiles become websites</h3>
<p>Distribusi is a content management system for the web that produces static
index pages based on folders in the files system. For distrubisverse this means
that you can upload a zip file <em>(".zip file extension")</em> with content and have
distrubsi turn it into a webpage for you. Making a zip file is very easy for all
desktop operating systems (Windows, Mac OS and Linux)</p>
<h4>Windows 10</h4>
<h4>Mac OS</h4>
<hr>
<h3>2. Media files become visible</h3>
<p>Whenever Distribusi discovers media files in your zipfile it turns them
into the appropriate html tags. image files become img tags, audio files become
audio tags and so on. Currently distribusi supports images, videos, audio,
pdf and textfiles <em>(only ".txt" see 4. Text files become readable)</em>
</p>
<h4>Example:</h4>
<p>If your zipfile contains the image <strong>"cover.png"</strong> it becomes
the following html in your distribusi page:</p>
<pre class="code-example">&lt;div&nbsp;id=&quot;cover&quot;&nbsp;class=&quot;png&quot;&gt;
&nbsp;&nbsp;&lt;figure&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;class=&quot;image&quot;&nbsp;src=&quot;cover.png&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;figcaption&gt;cover.png&lt;/figcaption&gt;
&nbsp;&nbsp;&lt;/figure&gt;
&lt;/div&gt;</pre>
<p>The encapsulating <strong>div</strong> tag gets an id that is the same as the
<em>file name.</em> The <strong>img</strong> tag gets a class attribute <em>image</em>
This is handy for styling your files with css (See 5.)</p>
<hr>
<h3>3. Folders become links and pages</h3>
<p>When you make your zipfile, this zipfile can contain folders with more
content. Distribusi turns these automatically into links and behind those links
a new page! These pages look identical to your main page because they share the
same style. </p>
<h4>Example:</h4>
<pre class="code-example">&lt;div&nbsp;id=&quot;folder&quot;&nbsp;class=&quot;dir&quot;&gt;
&nbsp;&nbsp;&lt;a&nbsp;href=&#39;new_folder/index.html&#39;&gt;new_folder&lt;/a&gt;
&lt;/div&gt;</pre>
<p>The encapsulating <strong>div</strong> tag gets an id
<em>folder.</em> and a class attribute <em>dir</em>
This is handy for styling your files with css (See 5.)</p>
<p>the anchor <em>(a)</em> tag will get an href attribute pointing to the
subfolder</p>
<hr>
<h3>4. Text files become readable</h3>
<p>When distribusi discovers a text file <em>(".txt file extension")</em> it
turns it into a pre tag with the text from the file in it. This enables users to
add simple text elements to their pages.</p>
<h4>Example:</h4>
<pre class="code-example">&lt;div&nbsp;id=&quot;my_textfile&quot;&nbsp;class=&quot;plain&quot;&gt;
&nbsp;&nbsp;&lt;pre&gt;
&nbsp;&nbsp;&nbsp;&nbsp;contents&nbsp;of&nbsp;my_textfile.txt&nbsp;gets&nbsp;rendered&nbsp;inside&nbsp;a&nbsp;pre&nbsp;tag.
&nbsp;&nbsp;&lt;/pre&gt;
&nbsp;&nbsp;&lt;span&nbsp;class=&quot;filename&quot;&gt;my_textfile.txt&lt;/span&gt;
&lt;/div&gt;</pre>
<p>The encapsulating <strong>div</strong> tag gets an id that is the same as the
<em>file name.</em> and a class attribute <em>plain</em>
This is handy for styling your files with css (See 5.)</p>
<hr>
<h3>5. Use Css to style your page</h3>
<p>Distribusi offers almost full support for styling your page with CSS.
Because all content is auto generated your Distribusi Css will be places in a
style tag in the head of each HTML file.</p>
<p>Distrbusi-verse allows its users to skip this step by just selecting a basic
theme or by selecting one of the themes other users have made <em>public.</em>
<p>Alternatively a user can opt to make their own custom theme, either in a
simple online editor or by uploading their own Css file.</p>
</p>
<hr>
</div>
<!-- a div with all the distribusis listed in the distribusiverse -->
{% endblock %}

2
verse/templates/index.html
View File

@ -48,7 +48,7 @@
</p>
<hr>
<p>
This particular work in progress project is an attempt to make distribusi into a webinterface that can be operated remotely without any knowlegde of CLI. Trying to combine the ideas of distribusi with the ideas of a <a href="https://tildeverse.org/">Tildeverse</a> and <a href="https://tilde.club/">Tilde club</a>, but also be neither of these ideas. See a full list of tildeverse members <a href="https://tildeverse.org/members/">here</a>.</p>
This particular work in progress project <strong>Distribusi-verse</strong> is an attempt to make distribusi into a webinterface that can be operated remotely without any knowlegde of CLI. Attempting to combine the ideas of distribusi with the ideas of a <a href="https://tildeverse.org/">Tildeverse</a> and <a href="https://tilde.club/">Tilde club</a>, but also be neither of these ideas. See a full list of tildeverse members <a href="https://tildeverse.org/members/">here</a>.</p>
<hr>
<p>This project is made for <a href="https://www.wdka.nl/practices/autonomous-practices/">Autonomous Practices </a>at the <a href="https://www.wdka.nl/">WDKA</a> in Rotterdam.</p>
</div>