EDIT: Pahoittelen ison kuvan rumaa nimeämistä. Se johtui siitä, että mulla oli ohjelmointiongelmia ja aloin kiroilemaan - se auttoi, buustasi kai adrenaliinia vereen.
Mulla on oma itse REBOL:lla ohjelmoitu julkaisujärjestelmä, jolla ylläpidän sivustoa: https://petke.info/kaupunkiseikkailu/
Lähden ulos, meen minne huvittaa ja otan valokuvia. Tulen takaisin kotiin ja lisään kunkin kuvan kohdalle koodiin kommentteja:
rebol[]
; --- MUOKATTAVAT TIEDOT ---
otsikko: "Kaupunkiseikkailu #4"
kuvaus: "Lyhyt aamukävely Porolahdessa"
ogkuva: "seikailu.png"
url: "https://petke.info/kaupunkiseikkailu4/index.html"
; --- TEKSTIT ---
teks: [
"Harmittaa kun parveekkeeltani ennen näkyneet Porolahden puiston poropatsaat on poistettu."
"Lähdin suurinpiirtein auringonousun aikaan liikenteeseen. Jaa, katsotaas tarkemmin: kuva on otettu 07:02:28.00 ja aurinko on noussut 06:46 eli on se jo reilun vartin ollut näkysällä."
"Perjantaina tässä oli vielä kaatunut puu, nyt onneksi katki sahattu siten, että ei ulotu kevyen liikenteen väylälle."
"Tällaiselle huonokuntoiselle on hvyä, että Porolahdessa piisaa penkkejä - tosin vain kun lähden kävelemään itään päin. Lännen suunnassa ei ole yhtä ainoata penkkiä Tammisalon sillan ja kotini välillä."
"Vielä meren pinnalla näkyy siellä täällä lumisohjokasoja"
"Onkohan tässä ollut joskus laituri?"
"Tänne ollaan näköjään istutettu jotain uutta ja kiviäkin laitettu koristeeksi."
"Oudot portaat! Tuosta pääis uimaan kesällä, jos olisin bikinikunnossa - en ole!"
"Tämä on mun suosikkilaituri!"
"Harvoin maltan ohittaa sitä menemättä istumaan sinne."
"Taidanpa laiskurina palata jo takaisin. Tämä oli vaan tällainen pikainen kävely. Kuntoani hoidan iltapäivällä kävelykaverini kansssa. Vaihtelun virkistämiseksi käännyn tuonne oikealle"
"Sillalta on kiva näkymä sekä etelään."
"Että pohjoiseen - ja mikäs se siellä häämöttää oikeassa yläkulmassa? Roihuvuoren linssilude!"
"Harvinaista kyllä! Ohitin tuon penkin istumatta siihen."
]
html: make string! 20000
emit: func [code] [repend html code]
lmrk: to-char 34
newline: to-char 10
; --- HEAD ---
emit [
"<!DOCTYPE html>" newline
"<html>" newline
"<head>" newline
"ISO-8859-1">
"<meta name=" lmrk "viewport" lmrk " content=" lmrk "width=device-width, initial-scale=1.0" lmrk ">" newline
"<meta property=" lmrk "og:title" lmrk " content=" lmrk otsikko lmrk ">" newline
"<meta property=" lmrk "og:description" lmrk " content=" lmrk kuvaus lmrk ">" newline
"<meta property=" lmrk "og:image" lmrk " content=" lmrk ogkuva lmrk ">" newline
"<meta property=" lmrk "og:type" lmrk " content=" lmrk "article" lmrk ">" newline
"<meta property=" lmrk "og:url" lmrk " content=" lmrk url lmrk ">" newline
"<meta name=" lmrk "twitter:card" lmrk " content=" lmrk "summary_large_image" lmrk ">" newline
"<title>" otsikko "</title>" newline
"<link rel="stylesheet" href="/kaupunkiseikkailu/style.css">
"</head>" newline
"<body>" newline
]
emit ["<div id="menu-container"></div>"]
; --- SISÄLTÖ ---
for i 1 length? teks 1 [
emit [
"<div class=" lmrk "item" lmrk ">" newline
"<a href=" lmrk "vittu" i ".jpg" lmrk " target=" lmrk "_blank" lmrk ">" newline
"<img src=" lmrk "seikailu" i ".jpg" lmrk ">" newline
"</a>" newline
"<div class=" lmrk "teksti" lmrk ">" fix-utf8 teks/(i) "</div>" newline
"</div>" newline
]
]
; --- LOPPU ---
emit [
"</body>" newline
"</html>"
]
write %index.html html
haltLaitan kunkin seikkailun menee omaan kansioonsa petke.info:ssa:
https://petke.info/kaupunkiseikkailu/
https://petke.info/kaupunkiseikkailu2/
https://petke.info/kaupunkiseikkailu3/
https://petke.info/kaupunkiseikkailu4/
menu.html sijaitsee petke.info:ssa:
<div class="topbar" onclick="toggleMenu()">
<span class="menu-btn">☰ Kaupunkiseikkailut MENU</span>
<div class="dropdown" id="menu">
<a href="/kaupunkiseikkailu/">Seikkailu 1 Malmin lentokenttä</a>
<a href="/kaupunkiseikkailu2/">Seikkailu 2 Itäkeskus, Cafe Ekspresso</a>
<a href="/kaupunkiseikkailu3/">Seikkailu 3 Aron Soitin Postiasiamies ja Kakkugalleria</a>
<a href="/kaupunkiseikkailu4/">Seikkailu 4 Aamukävely Porolahden puistossa</a>
</div>
</div>style.css sijaitsee sijaitsee tiedostossa https://petke.info/kaupunkiseikkailu/style.css Se on tietysti kaikille sama, joten jos haluan muuttaa ulkoasua, riittää, että muutan yhdestä paikkaa.
/* ===== PERUS ===== */
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: auto;
background: #f5f5f5;
padding: 10px;
}
/* ===== SISÄLTÖ ===== */
.item {
margin-bottom: 40px;
background: white;
padding: 10px;
border-radius: 8px;
}
img {
width: 100%;
height: auto;
border-radius: 6px;
}
.teksti {
margin-top: 10px;
font-size: 16px;
line-height: 1.5;
}
/* ===== STICKY MENU ===== */
.topbar {
position: sticky;
top: 0;
z-index: 9999;
background: #222;
color: white;
padding: 10px;
}
/* MENU NAPPI */
.menu-btn {
cursor: pointer;
display: inline-block;
font-weight: bold;
}
/* DROPDOWN */
.dropdown {
display: none;
background: #222;
margin-top: 10px;
}
/* LINKIT */
.dropdown a {
display: block;
color: white;
padding: 10px;
text-decoration: none;
}
.dropdown a:hover {
background: #444;
}
#menu-container {
position: sticky;
top: 0;
z-index: 9999;
background: #222;
}
.topbar {
position: sticky;
top: 0;
z-index: 9999;
background: #222;
color: white;
padding: 10px;
cursor: pointer; /* ?? TÄMÄ PUUTTUU */
}Näin saan näppärästi aina lisättyä uuden seikkailun. Käyn kuvat läpi, lisään kuvatekstin, painan REBOL-kuvaketta ja saan .html tiedoston, minkä siirrän kuvien kanssa palvelimelle ja lisään menu.html tiedostoon uuden seikkaiun.
On kiva pohtia kokemaansa sen jälkeen kotona tuoreeltaan, kun on kävelyllä käynyt.
(PS: REBOL-koodi ei ollut ihan ajantasalla, kun laitoin tänne. Editoin käsin, mutta idea lienee tullut selväksi...)