slimak-www

slimak-www

Slimak webpage

Name Last Update
content Loading commit data...
style Loading commit data...
themes/slimak Loading commit data...
.gitignore Loading commit data...
COPYING Loading commit data...
Makefile Loading commit data...
README.md Loading commit data...
develop_server.sh Loading commit data...
fabfile.py Loading commit data...
pelicanconf.py Loading commit data...
publishconf.py Loading commit data...

Slimak WWW

1. Hacking

1.1. Zawartość i zależności

Materiały publikowane na stronie WWW pisane są w Markdown i znajdują się w katalogu ./content/.

Wygląd strony w HTML/CSS znajduje się w plikach w ./themes/slimak/.

W celu generowania HTML ze źródeł w Markdown należy zainstalować Pelican, na przykład sudo pip2 install pelican. Na Debianie jest w repo, więc lepiej sudo aptitude install pelican.

Aby wygenerować docelowe statyczne strony WWW należy w katalogu repo odpalić pelican content lub make html. Wynik wyląduje w katalogu ./output/

1.2. Wdrażanie

Aby wdrożyć nowe statyczne strony WWW należy odpalić make ssh_upload

1.3. LOLWUT - Look out, learn with us this

  1. Nie commitować HTML katalogu ./output/

  2. Nie commitować media (grafika, dźwięk, filmy, pdf)

  3. Commitować każde przydatne poprawki za pomocą merge requestów

  4. Publikując nowy ./content/ należy pamiętać o kilku rzeczach:

  • Dostarczyć w pliku Markdown nagłówek z metadanymi (patrz inne teksty): Title, Date, Category, Slug, Author(Authors)

  • Dla artykułu i posta na blogu dodatkowo obowiązkowy nagłówek Tags

  • Slug jest to alias, pod którym dana strona będzie dostępna na witrynie. W naszym modelu aliasy są absolutne, tzn. nie dbają o hierarchię strony. Ma to pewne następstwa, na przykład łatwiej jest o kolizję aliasów. W związku z tym zalecane jest stosować pewne proste reguły przy tworzeniu slugów. W idealnym przypadku slug jest tożsamy z tytułem, dlatego zaleca się stosować te reguły również dla tytułów:

    • Dla postów na blogu należy wybrać tytuł, który brzmi jak komunikat, na przykład Title: Ruszają zajęcia w semestrze letnim, Slug: ruszaja-zajecia-w-semestrze-letnim
    • Dla stron i materiałów należy używać krótkich nazw, np. Title: O nas, Slug: o-nas, Title: MCU2014, Slug: mcu2014
    • Dla artykułów sprawa jest raczej dowolna, ale należy oczywiście unikać reguł z pozostałych kategorii

W miarę rozrostu contentu (np wydarzenie ma drugą edycję) slug można zmienić a pierwotny slug nadać nowej stronie, która kumuluje odnośniki do poprzedniej (poprzednich) i następnej edycji. W ten sposób uzyskujemy czytelny slug na czas wydarzenia, mechanizm porządkowania treści oraz dbamy o to, by odnośniki w Internecie nie rzuczały 404-ek.

  • Dobrze jest dodać do artykułu zdjęcie, które ma zachęcać do przeczytania tekstu. Służą do tego nowe metadane:

    • picture - nazwa pliku ze zdjęciem (najlepiej 2560px szerokości, JPEG z kompresją 50% jakości)
    • picture_x, picture_y - procentowe przesunięcie obrazka na tle (w zdecydowanej większości przypadków używa się tylko picture_y)
    • picture_author - imię i nazwisko lub pseudonim autora zdjęcia
    • picture_url - URL do źródła ze zdjęciem (najlepiej wiarygodnego i zawierającego informację o licencji i autorze)
    • picture_license - pełna nazwa licencji pracy
    • picture_license_url - URL do tej licencji

2. Style CSS

Stylistyka strony podzielona jest na dwa pliki:

  • style/slimak-style.css Technical Style CSS
  • style/slimak-theme.css Theme CSS

2.1. Techniczny Style CSS

Te reguły opisują techniczną stylistykę strony www.

Visual properties -- podstawowe własności standardowych tagów/pudełek takich jak html, body, a, p.

Technical classes -- klasy, które modyfikują techniczne właściwości pudełkom np. height, padding, font-size, background-position, background-size. Za pomocą tych klas można strukturalnie dekorować pudełka na takiej zasadzie jak w index.html.

Height manipulations -- klasy modyfikują padding-top i padding-bottom.

Specific divs -- specjalne pudełka takie jak .banner, .note czy .description

Location-dependent -- niektóre tagi mają reguły zależne od lokalizacji

ID-dependent -- unikalne elementy i ich własności. Np. pudełka-wiersze dla pudełka #dzialalnosc.

2.2. Theme CSS

W tym pliku znajduje się paleta kolorów, którymi można dekorować pudełka (sl-bg-*) oraz tekst (sl-color-*).

Location-dependent -- np. linki a mają jasny kolor tekstu w belce (która nie jest biała).

ID-dependent -- np. pudełka-wiersze w pudełku #dzialalnosc mają nieprzeźroczyste tła i muszą mieć ciemniejszą czcionkę.

3. Przenośniość

Największą przenośniość ma plik style/slimak-theme.css. Może działać jak paleta kolorów motywu. Motywy można w założeniu zmieniać.

Można popracować nad przenośniością pliku style/slimak-style.css. Powinien zawierać domyślne tagi html, takie jakie chcemy opisywać stylem, np. html, body, a, p. Własnym tworom, które mogą konfliktować z innymi stylami należy nadać nowe nazwy lub w ostateczności odseparować do oddzielnego stylu.

4. License | Licencja

Website content

Everything in ./content/ directory is licenced under Creative Commons Attribution-ShareAlike 3.0 Poland License and is Copyright (C) 2015 Software Liberation Maniacs Cracow.

Static site generator source code

Separate license for everything except ./content/ directory: GNU Affero General Public License (AGPL)


Slimak WWW - Software Liberation Maniacs Krakow official website Copyright (C) 2015 Software Liberation Maniacs Krakow

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see http://www.gnu.org/licenses/.

See ./COPYING for more information.