add templating
This commit is contained in:
ledocool
parent
1670a34e0b
commit
a83368596c
9 changed files with 1585 additions and 1 deletions
47
README.md
47
README.md
|
|
@ -1,3 +1,48 @@
|
||||||
# fedizine
|
# fedizine
|
||||||
|
|
||||||
Fediverse Fanzine
|
Fediverse Fanzine
|
||||||
|
|
||||||
|
## Using the template engine
|
||||||
|
|
||||||
|
For template engine (bash-tpl)[https://github.com/TekWizely/bash-tpl] is used. Bash-tpl template engine allows for bash injections into templates. I hope that most of options required are displayed in the example, since I have no idea what kind of design is coveted for fedizine.
|
||||||
|
|
||||||
|
Templating is split into 3 stages.
|
||||||
|
0. Template and files preparation
|
||||||
|
1. Template script generation
|
||||||
|
2. Template population
|
||||||
|
|
||||||
|
### Template and files preparation
|
||||||
|
As an example a file (fedizine_template_example.html)[fedizine_template_example.html] is provided. For now there's nothing fancy, it is just a modified index.html page.
|
||||||
|
|
||||||
|
The template expects a folder named "contestants" in the same directory as itself. Contestants folder would hold a bunch of other directories, one per contestant. Names of those folders are not used in templating, but imagine you'd want something readable.
|
||||||
|
|
||||||
|
Every contestant folder should contain a `bio.txt` file. File's full name would be `contestants\%some_folder%\bio.txt`.
|
||||||
|
|
||||||
|
Such file should have following lines in following order:
|
||||||
|
1. Contestant name
|
||||||
|
2. Contestant bio written in a single line (no line breaks allowed); sorry it is scuffed for the first version
|
||||||
|
3. A line describing an artwork
|
||||||
|
4. A line describing an artwork
|
||||||
|
5. A line describint an artwork
|
||||||
|
6. ....
|
||||||
|
|
||||||
|
An amount of artworks isn't actually limited to just two.
|
||||||
|
`A line describing an artwork` would be broken up by `"` delimiter. Which means it sould look somewhat like this: `"ref1.webp" "Short description" "Alt text"`
|
||||||
|
1. First entry is file name. **Note that the file not listed in bio.txt will not be displayed in the final html**
|
||||||
|
2. Second entry is short visible description. It will be written next to the file.
|
||||||
|
3. Third entry is the image alt text.
|
||||||
|
|
||||||
|
### Template script generation
|
||||||
|
Once template file is sufficiently prepared, you can create a generation script with this command:
|
||||||
|
```
|
||||||
|
./bash-tpl fedizie_template.html > fedizine_generate.sh && chmod +x fedizine_generate.sh
|
||||||
|
```
|
||||||
|
This script doesn't require `bash-tpl` or template file and can be transferred elsewhere at will.
|
||||||
|
|
||||||
|
### Template population
|
||||||
|
Once folder structure and data are prepared and template script is generated, put template script in the same directory where `contestants` folder would be and execute command:
|
||||||
|
```
|
||||||
|
./fedizine_generate.sh > generated.html
|
||||||
|
```
|
||||||
|
|
||||||
|
This will create `generated.html` file which should be served to the end user.
|
||||||
4
contestants/contestant1/bio.txt
Normal file
4
contestants/contestant1/bio.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
Contestant name
|
||||||
|
Contestant bio written in a signle string without any line breaks.
|
||||||
|
ref1.webp"Short description" "Alt text"
|
||||||
|
ref2.webp"Short description 2" "Alt text 2"
|
||||||
BIN
contestants/contestant1/ref1.webp
Normal file
BIN
contestants/contestant1/ref1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
contestants/contestant1/ref2.webp
Normal file
BIN
contestants/contestant1/ref2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 976 KiB |
4
contestants/contestant2/bio.txt
Normal file
4
contestants/contestant2/bio.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
Contestant name
|
||||||
|
Contestant bio written in a signle string without any line breaks.
|
||||||
|
ref3.webp "Short description" "Alt text"
|
||||||
|
ref4.webp "Short description 2" "Alt text 2"
|
||||||
BIN
contestants/contestant2/ref3.webp
Normal file
BIN
contestants/contestant2/ref3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 627 KiB |
BIN
contestants/contestant2/ref4.webp
Normal file
BIN
contestants/contestant2/ref4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
96
fedizine_template_example.html
Normal file
96
fedizine_template_example.html
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Fedizine - A Fanzine on the Fediverse</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: sans-serif; margin: 2em auto; max-width: 700px; line-height: 1.6; background: #fafafa; color: #222; }
|
||||||
|
h1 { font-size: 2.5em; margin-bottom: 0.2em; color: #6b46c1; }
|
||||||
|
h2 { margin-top: 1.5em; color: #444; border-bottom: 2px solid #ddd; padding-bottom: 0.3em; }
|
||||||
|
p, li { font-size: 1em; }
|
||||||
|
ul { margin-top: 0.5em; }
|
||||||
|
a { color: #6b46c1; text-decoration: none; }
|
||||||
|
a:hover { text-decoration: underline; }
|
||||||
|
.highlight { background: #fef3c7; padding: 0.2em 0.4em; border-radius: 4px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Fedizine</h1>
|
||||||
|
<p>A monthly multi‑page fanzine made on the fedi and for the fedi.</p>
|
||||||
|
|
||||||
|
<h2>How It Works</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Two monthly A4 artworks per artist</li>
|
||||||
|
<li>Artwork 1: A set theme decided by poll or popular demand</li>
|
||||||
|
<li>Artwork 2: Free space, up to you</li>
|
||||||
|
<li>Any kind of art or photography is welcome</li>
|
||||||
|
<li><strong>No AI-generated images</strong></li>
|
||||||
|
<li>Released both as a catalogue (on this page) and as a downloadable document</li>
|
||||||
|
</ul>
|
||||||
|
<h2>Status</h2>
|
||||||
|
<p>If you're interested in participating, reach out before starting to draw, and share your ideas. Release date is TBD, but you'll have a few weeks to work. More updates will be posted soon.</p>
|
||||||
|
<h2>September Theme</h2>
|
||||||
|
<p><strong>A foxgirl milf Pleroma‑tan</strong></p>
|
||||||
|
|
||||||
|
<h2>Attempt at making a template</h2>
|
||||||
|
%
|
||||||
|
CONTESTANT_DIRECTORY="./contestants/*"
|
||||||
|
for CONTESTANT in $CONTESTANT_DIRECTORY
|
||||||
|
do
|
||||||
|
%
|
||||||
|
<div class="contestant-box">
|
||||||
|
%
|
||||||
|
CONTESTANT_BIO="${CONTESTANT}/bio.txt"
|
||||||
|
readarray -t CONTESTANT_DATA < ${CONTESTANT_BIO}
|
||||||
|
%
|
||||||
|
<div>
|
||||||
|
<h3><% ${CONTESTANT_DATA[0]} %><h3>
|
||||||
|
<small><% ${CONTESTANT_DATA[1]} %></small>
|
||||||
|
%
|
||||||
|
CONTESTANT_DATA_LENGTH=${#CONTESTANT_DATA[@]}
|
||||||
|
for (( j=2; j<${CONTESTANT_DATA_LENGTH}; j++ ));
|
||||||
|
do
|
||||||
|
readarray -t IMAGE_LINES < <( sed -r 's/"+ *"?/\n/g' <<< ${CONTESTANT_DATA[$j]} | sed -r '/^\s*$/d' | sed -r '/^ +/d' )
|
||||||
|
IMAGE_PATH="$CONTESTANT/${IMAGE_LINES[0]}"
|
||||||
|
IMAGE_ALT="${IMAGE_LINES[2]}"
|
||||||
|
IMAGE_DESCRIPTION="${IMAGE_LINES[1]}"
|
||||||
|
%
|
||||||
|
<div class="contestant-image">
|
||||||
|
<img src="<% $IMAGE_PATH %>" alt="<% $IMAGE_ALT %>" width="300" />
|
||||||
|
<span class="image-title"><b><% $IMAGE_DESCRIPTION %></b></span>
|
||||||
|
</div>
|
||||||
|
%
|
||||||
|
done;
|
||||||
|
%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="<% $image %>" alt="Reference 4" width="300">
|
||||||
|
%
|
||||||
|
done;
|
||||||
|
%
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Guidelines</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Nothing illegal in the USA or Argentina</li>
|
||||||
|
<li>No politics</li>
|
||||||
|
<li>No slurs</li>
|
||||||
|
<li>No overly violent or sexual content</li>
|
||||||
|
<li>Submissions must pass a basic quality standard (editor’s discretion)</li>
|
||||||
|
</ul>
|
||||||
|
<p>Attempts to get around these rules will be ignored.</p>
|
||||||
|
|
||||||
|
<h2>Specs</h2>
|
||||||
|
<p>Page size: A4 (210 × 297 mm)<br>
|
||||||
|
Resolution: 300 ppi<br>
|
||||||
|
2552 × 3578 px<br>
|
||||||
|
Preferred format: PNG</p>
|
||||||
|
|
||||||
|
<h2>Contact</h2>
|
||||||
|
<p>Email: <a href="mailto:waifuism@tutanota.com">waifuism@tutanota.com</a><br>
|
||||||
|
Misskey: <a href="https://mai.waifuism.life/@waifu">@waifu@mai.waifuism.life</a></p>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue