Regressiotestaus, Lorem Ipsum ja ohjeet itselle

Tässä kirjoituksessa ei ole yleisölle juuri mitään mielenkiintoista, mutta laitan itselleni talteen kaiken tärkeän:

• Itseäni tuntien on kovin mahdollista että kirjoittamiseen tulee pitkiä taukoja, joten helpottaa kun ohjeet on käsillä niitä tarvitessa
• Kun kokeilen uusia asioita, on kätevää yhden sivun toiminnan kautta katsoa, etten rikkonut mitään ennestään toiminutta
• Kun harvoin käyttää, niin ei ole ihan itsestään selvää kaikki syntaksi siitä, miten kannattaa vaikkapa videoita/kuvia/sitaatteja tekstiin upottaa
• Tästä samasta sivusta on tarkoitus olla myös toinen versio, joka ei ole blogikirjoitus. Blogikirjoitukset menevät mdsvex käännöksen läpi ja toimivat hiukan erilailla kuin puhtaat svelte-sivut. Mun on hyvä kokeilla, että osaan molempia käyttää.

Ensin blogitemplaatin ohjeista validit osuudet:

All blog posts are located inside the src/routes/(blog-article) folder. Each folder inside it represents a blog post, and each folder has a +page.md file, which is the file that contains the post’s content.

This way, the URL for each blog post is generated with the folder’s name. For example, the folder src/routes/(blog-article)/how-blog-posts-work will generate the URL https://mysite.com/how-blog-posts-work.

All posts are Markdown files, which means you can use the Markdown syntax in them, and it will work out of the box. However, since this projects uses MDsveX to parse Markdown, you can also use Svelte components inside them! This means that the components used in other pages can also be used in blog posts.

#Markdown syntaksi / esimerkkejä

Italic, bold ja italic bold onnistuu tähdin tai alaviivoin. Tähdet lauseen keskellä parempia.

_Italic_, **bold** ja **_italic bold_**
onnistuu tähdin tai alaviivoin.
Tähdet lauseen keskellä parempia.

Blockquote onnistuu kulmasulkeella alussa. Olisikohan sillä onnistunut äskeisen CodeBlockin (Svelte-komponentti, mutta esimerkkejä paljon tässä) sisällön toteutus?

Blockquote onnistuu kulmasulkeella alussa. Olisikohan sillä onnistunut äskeisen CodeBlockin sisällön toteutus? Ja ei olisi, koska formatointi onnistuu koodiblokin sisällä.

Peräkkäiset blokit on erotettava tyhjällä rivillä.

Ja useampi kappale onnistuu jos tyhjälle riville laittaa kulman kanssa.

Ja tuplakulmilla syvyyttä lisää

• Jotkut asiat toimivat myös sisäkkäin.

Sisentämällä tehdyt koodiblokit eivät toimi, mutta kolmoistaikahipsut ennen ja jälkeen toimivat.

Sisentämällä tehdyt
koodiblokit
eivät toimi, mutta kolmoistaikahipsut (`) ennen ja jälkeen toimivat.
Silloin ei formatoida: _Italic_, **bold** ja **_italic bold_**

Viivoja pystyy myös tekemään. Niitä saa kolmella tähdellä tai viivalla.

Kuvat upotetaan näin:

![Emacs ruutukaappaus. Eli esimerkkikuva alt-text tähän.](images/posts/emacs-linux-console.png

HTML toimii tässä suoraan myös. Videoita upotin sillä näin:

<div style="display:inline-block;max-width:47%;">
	<video autoplay loop no_controls>
		<source src="xxxxx" type="video/mp4" autoplay="autoplay" loop="loop" />
	</video>
</div>

Jos linkin laittaa kulmasulkeisiin, siitä tulee linkki (esim. http://youtube.com). Jos haluaa linkin piilottaa niin hakasulkeisiin teksti ja perään tavan sulkeisiin linkki. Näin:

<linkki> tai [teksti](youtube.com)

Kommentoiminen näissä markdown tiedostoissa on tosin helpompaa ihan vaan html-tagein…

Latex / matemaattinen koodi ei vielä toimi. Sitä voisi tutkia myöhemmin lisää.

#Svelte komponentteja

Svelte-komponentit voin upottaa suoraan näihin myös.

<Callout type="info">Infolaatikko!</Callout>

Koodiblokkikomponentti on hiukan ongelmallinen, ainakin html sen sisältä tahtoo tulla renderöidyksi, vaikka haluaisi näyttää pelkkää koodia. EDIT: Ovelasti pitääkin vaan MD-tiedostossa olla CodeBlock-tagien sisässä yhdet tyhjät rivit ennenkuin laittaa itse koodia, niin toimii. 👍

Seuraava pull quote on sikäli poikkeuksellinen komponentti, että se ei tullut templaatissa mukana, vaan sen tein ihan itse. Ensimmäinen oma komponentti 😃 Se hajoaa myös hienosti eri riveille, jos selaimen ikkunaa kaventaa tai kokeilee kännykällä:

Kimaltelevaa tekstiä on myös mahdollista tehdä:

Kuvia varten on myös komponentti. Sitä tarvinnee ainakin jos haluaa kuvia, jotka ylittävät blogipostin marginaalit:

#Ohjeita itselle

Prosessi on tällä hetkellä tällainen:

1. Luo copy/pastella uusi kansio blogi-kirjoitukselle. Ja kirjoittele +page.mdtiedostoon juttuja
2. Tallenna kuvat static/images/posts-kansioon
3. Kun tarvii, käynnistä dev-ympäristö ihasteluun: npm run dev
4. Kehitysversiota voi ihastella osoitteesta http://localhost:5173
5. Kun kirjoitus on valmis git status kertoo muuttuneet tiedostot
6. git add -A lisää ne kaikki staging alueelle
7. git commit -m "Muutosviesti" jotta tulee “tallennettua”
8. git push origin synkkaa Githubin pilveen ja käynnistää Netlify deployn

Tällä selityksellä asiana joko täysin triviaali tai ei mitenkään ymmärrettävissä, mutta mun mielestä vaan ihan tosi mahtavaa! :) Joskus sitten tarkemmin.

Edit 7.9.2024 - Toisen kerran käytän aikaa git autentikaatioon komentoriviltä, niin nyt ohjeet talteen:

• Käytössä on Personal Access Token. Vanhentuneen tilalle voi uuden tehdä github.com —> Settings —> Developer Settings
• git remote set-url origin https://<USER>:<TOKEN>@github.com/<USER>/<REPO>.git autentikoi tokenilla taas pätkän eteenpäin.

#p5.js

p5-kirjastoa olen käyttänyt blogista irralliseen pikkuohjelmointiin, mutta nyt senkin saa tänne. Vielä vaatii uudelleen käytettävyys ihmettelyä, mutta toimii kuitenkin:

Tämä on omasta mielestä ehkä hienointa sitten ikinä. Taivas rajana kaikelle mitä pystyisi tekemään. 🤩

Uh oh! Eipä toimikaan tuotantoon deployattuna. Huomiselle ihmeteltävää =) Huomenna alkoi toimimaan, vaikka vaati ihmettelyä. Yksi import rivi oli lisättävä javascriptiin. Vielä en tiedä, että miksi.

#Lorem Ipsum

Luulin, että tulisi lorem ipsumia komponenttien esittelyyn, mutta olin väärässä. Ei tarvinut. Otsikossa on luvattu, niin tähän loppuun ihan vähän:

Mauris eget gravida leo. Nullam tempor, urna id interdum vestibulum, ligula ligula hendrerit nisi, sit amet vulputate risus odio nec libero. Etiam felis nulla, posuere in efficitur ut, tincidunt quis tortor. Ut lacus ante, mattis id orci et, tristique blandit lacus. Curabitur hendrerit lorem sit amet orci luctus, sed mollis nisi vestibulum. Suspendisse a commodo dolor. Integer at sagittis urna, nec tincidunt elit. Donec at mattis ligula, sit amet pellentesque est. Phasellus convallis sapien at ante sagittis, id facilisis ante vehicula. In vel eleifend elit.