feat(posts): syslog-ohje (draft)

Testausserveri · Sep 21, 2024 · 5439507 · 5439507
1 parent 4ac9c0f
commit 5439507
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 242 deletions.
diff --git a/README.md b/README.md
@@ -15,44 +15,6 @@ Paikallisen kehitysympäristön saa pystytettyä seuraavilla ohjeilla. Oletuksen
 1. Kopioi tiedosto `.example.env` tiedostoon `.env`
 1. `npm run dev` 
 
-### postaukset
-
-Testausserverin verkkoblogia kutsutaan Syslogiksi (https://testausserveri.fi/syslog). Uuden postauksen Syslogiin saa julkaistua seuraavilla ohjeilla. 
-
-Mikäli haluat julkaista autoihin liittyvää, voit ottaa yhteyttä [Testausauton toimitukseen](https://testausauto.fi/tietoja-meista/).
-
-1. Noudata ensiksi ylempiä verkkosivut-osion ohjeita kehitysympäristön pystyttämiseksi.
-1. Postaukset ovat kansiossa [/posts/](https://github.com/Testausserveri/testausserveri.fi/tree/coal/posts). Luo sinne uusi tiedosto, jonka nimeksi tulee haluamasi postauksen lyhytnimi (esim. hei-maailma, tanaan-on-hyva-paiva) ja perään .mdx. Lyhytnimi tulee näkymään postauksen URL-osoitteessa, joten:
-      - sen ei kannata olla hirveän pitkä;
-      - ei ääkkösiä; ja
-      - välilyönnit on korvattava väliviivoilla.
-    1. Lisää postauksen lähdekoodin alkuun seuraava otsake:
-        ```
-        ---
-        title: Postauksen otsikko
-        category: Oppaat
-        feature_image: postauksen-kuva.png
-        excerpt: Tässä postauksessa on pelkkää asiaa!
-        authors: 
-        - ts:61d8b737a16588f423624ed5
-        - Mörökölli
-        datetime: 2024-07-07T18:00:00+03:00
-        ---
-        ```
-        Kenttien selitteet:
-        |kenttä|selite|
-        |---|---|
-        |title|Otsikko|
-        |category|Vapaamuotoinen teksti. Kannattaa katsoa muista olemassaolevista postauksista, liittyykö postaus johonkin jo käytettyyn kategoriaan, mutta jos ei, niin voi keksiä uuden. Esim. Oppaat, Ajankohtaista, Tapahtumat, Kilpailut, Haastattelut, Arvostelut.
-        |feature_image|Postauksen kuva. Siirrä kuvatiedosto kansioon [/public/syslog/assets/](https://github.com/Testausserveri/testausserveri.fi/tree/coal/public/syslog/assets/) ja anna tämän kentän arvoksi sen tiedostonimi (esim. hei-maailma.jpg).|
-        |excerpt|Lyhyt kuvaus|
-        |authors|Kirjoittajat. Luetteloidaan ranskalaisin viivoin. Arvo voi olla joko vapaamuotoinen teksti tai viite Testausserverin jäseneen, jolloin arvo alkaa `ts:`. Kun käytetään viitettä Testausserverin jäseneen, niin postauksessa näkyy profiilikuva ja ajantasainen nimi. Viitteen saa haluamastaan jäsenestä käyttämällä Discord-palvelimella komentoa `/whois [jäsen]` ja lisäämällä `ts:` saadun tunnisteen eteen.|
-        |datetime|Aikaleima ISO 8601 -muodossa. Esim. `2024-07-07T18:00:00+03:00`.|
-    1. Otsakkeen jälkeen voit kirjoittaa postauksesi sisällön helpossa Markdown-muodossa. Lue lisää syntaksista osoitteessa https://www.markdownguide.org/basic-syntax/.
-1. Työnnä muutoksesi Githubiin ja tee Pull Request.
-
-Vinkki: Voit ottaa mallia jo olemassaolevien postausten lähdekoodeista.
-
 ### react-komponenttien kehitys
 
 Voit käynnistää paikallisen [Storybook](https://storybook.js.org)-palvelimen seuraavalla komennolla. Storybookin avulla on kätevä esikatsella projektin React-komponentteja, jotka ovat projektin kansiossa [/components/](https://github.com/Testausserveri/testausserveri.fi/tree/coal/components).

diff --git a/posts/html-opas/image.png b/posts/html-opas/image.png
diff --git a/posts/html-opas/kurre.jpeg b/posts/html-opas/kurre.jpeg
diff --git a/posts/html-opas/post.mdx b/posts/html-opas/post.mdx
diff --git a/posts/syslog-ohje/github-clone.png b/posts/syslog-ohje/github-clone.png
diff --git a/posts/syslog-ohje/image.png b/posts/syslog-ohje/image.png
diff --git a/posts/syslog-ohje/kansiorakenne.png b/posts/syslog-ohje/kansiorakenne.png
diff --git a/posts/syslog-ohje/komento.mp4 b/posts/syslog-ohje/komento.mp4
diff --git a/posts/syslog-ohje/npm-run-dev.png b/posts/syslog-ohje/npm-run-dev.png
diff --git a/posts/syslog-ohje/post.mdx b/posts/syslog-ohje/post.mdx
@@ -0,0 +1,114 @@
+---
+title: Syslogiin julkaiseminen
+category: Oppaat
+feature_image: image.png
+excerpt: Opi postaamaan Testausserverin blogiin käyttäen tuttua Markdown-formaattia ja GitHubia! Helppoa kuin heinänteko.
+authors: 
+- ts:61d8b737a16588f423624ed5
+datetime: 2024-09-21T18:00:00+03:00
+---
+
+Testausserverin verkkoblogia kutsutaan Syslogiksi ([testausserveri.fi/syslog](https://testausserveri.fi/syslog)). Syslogin sisältöä voi muokata kuka tahansa avoimen lähdekoodin periaatteella GitHubissa. Lopullinen julkaisu edellyttää hyväksymistä, jossa repositorion ylläpitäjä tarkastaa muutokset ennen julkaisua verkkosivuille.
+
+Näillä helpoilla ohjeilla opit, miten Syslogiin luodaan sisältöä ja miten se annetaan julkaistavaksi. 
+
+## Paikallinen kehitysympäristö
+
+Ensiksi laitetaan omalle tietokoneelle pystyyn paikallinen kopio Testausserveri.fi:stä, jotta voidaan:
+- esikatsella, miltä postauksemme näyttää; ja
+- valmistella kaikki tarvittava materiaali valmiiksi julkaisua varten.
+
+Oletuksena koneellasi on oltava Node.js v20, Npm ja Git asennettuna.
+
+Kloonaa [`https://github.com/Testausserveri/testausserveri.fi`](https://github.com/Testausserveri/testausserveri.fi). Helppo tapa on Githubissa painaa vihreää *Code* nappulaa ja sieltä *Open with GitHub Desktop* (kuva alla), joka opastaa kloonaamisen kanssa. Tai nappaa tästä komento:
+
+<Terminal>
+<li>git clone https://github.com/Testausserveri/testausserveri.fi</li>
+</Terminal>
+
+<br />
+<Image src="github-clone.png" />
+
+Aja komento asentaaksesi npm-paketit:
+<Terminal>
+<li>npm install --save-dev</li>
+</Terminal>
+
+Kopioi tiedosto juuressa sijaitseva tiedosto `.example.env` tiedostoon `.env`.
+
+Käynnistä kehityspalvelin:
+<Terminal>
+<li>npm run dev</li>
+</Terminal>
+
+<br />
+<Image src="npm-run-dev.png" caption="Palvelin käynnistyi onnistuneesti." />
+
+Avaa [http://localhost:3000](http://localhost:3000) selaimessa.
+
+## Postauksen luonti
+
+Postaukset ovat kansiossa [/posts/](https://github.com/Testausserveri/testausserveri.fi/tree/coal/posts). Luo sinne uusi kansio, jonka nimeksi tulee haluamasi postauksen lyhytnimi (esim. hei-maailma, tanaan-on-hyva-paiva). Lyhytnimi tulee näkymään postauksen URL-osoitteessa, joten:
+
+* sen ei kannata olla hirveän pitkä;
+* ei ääkkösiä; ja
+* välilyönnit on korvattava väliviivoilla.
+
+Kansiorakenne näyttää seuraavalta. *Posts*-kansiossa on kansio jokaiselle postaukselle. Jokaisen kansion sisällä on oltava vähintään `posts.mdx`. 
+
+Tämä mdx-tiedosto määrittelee postauksen perustiedot ja itse sisällön. Kansioon voi laittaa muita mediatiedostoja mukaan, joita haluaa sisällyttää postaukseen. Haluat kuitenkin postaukselle vähintään yhden kuvan sen pääkuvaksi.
+
+<Image src="kansiorakenne.png" />
+
+Mdx-tiedostoon voi kirjoittaa perinteistä Markdownia, mutta lisäksi tiettyjä erikoiskomponentteja, joista kerrotaan alempana. Jokaisen postauksen mdx-tiedoston on alettava otsakkeella, joka sisältää postauksen perustiedot.
+
+Luo luomaasi kansioon `posts.mdx`. Lisää sen alkuun seuraava otsake:
+```
+---
+title: Postauksen otsikko
+category: Oppaat
+feature_image: postauksen-kuva.png
+excerpt: Tässä postauksessa on pelkkää asiaa!
+authors: 
+- ts:61d8b737a16588f423624ed5
+- Mörökölli
+datetime: 2024-07-07T18:00:00+03:00
+---
+```
+
+Otsakkeen kentät ovat kuvattu alla ja kaikki ovat pakollisia:
+
+|Kenttä|Selite|
+|---|---|
+|title|Otsikko|
+|category|Vapaamuotoinen teksti. Kannattaa katsoa muista olemassaolevista postauksista, liittyykö postaus johonkin jo käytettyyn kategoriaan, mutta jos ei, niin voi keksiä uuden. Esim. Oppaat, Ajankohtaista, Tapahtumat, Kilpailut, Haastattelut, Arvostelut.|
+|feature_image|Postauksen pääkuva. Siirrä kuvatiedosto samaan kansioon kuin post.mdx ja anna tämän kentän arvoksi sen tiedostonimi (esim. hei-maailma.jpg). Vähimmäiskoko 1920px x 1080px.|
+|excerpt|Lyhyt kuvaus|
+|authors|Kirjoittajat. Luetteloidaan ranskalaisin viivoin. Arvo voi olla joko vapaamuotoinen teksti tai viite Testausserverin jäseneen, jolloin arvo alkaa `ts:`. Kun käytetään viitettä Testausserverin jäseneen, niin postauksessa näkyy profiilikuva ja ajantasainen nimi. Viitteen saa haluamastaan jäsenestä käyttämällä Discord-palvelimella komentoa `/whois [jäsen]` ja lisäämällä `ts:` saadun tunnisteen eteen.|
+|datetime|Aikaleima ISO 8601 -muodossa. Esim. `2024-07-07T18:00:00+03:00`.|
+
+Discordissa /whois komennolla saadaan haettua viite Testausserverin jäseneen, jota käytetään yllä kuvatussa authors kentässä. Viitteeseen pitää lisätä eteen `ts:`.
+
+<Video src="komento.mp4" />
+
+Otsakkeen jälkeen voit kirjoittaa postauksesi sisällön. 
+
+Muotoiluihin käytetään Markdownia, johon voit tutustua täällä: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.
+
+Lisäksi käytössä ovat seuraavat komponentit. Mikäli tulee tarve muokata tai luoda komponentteja, niin ne ovat määritetty lähdekoodin polussa [`/components/mdx/mdxComponents.tsx`](https://github.com/Testausserveri/testausserveri.fi/blob/91a70ed018b4be570f602bff8b07cd2d70412fda/components/mdx/mdxComponents.tsx). MDX:stä voit lukea lisää: https://mdxjs.com. 
+
+|Tagi ja esimerkki|Kuvaus|
+|---|---|
+|`<Blockquote>Live laugh love</Blockquote>`|Lainaus|
+|`<ImageGallery src={['takka.jpeg', 'saunaevas.jpeg', 'makkara.jpeg', 'evaat.jpeg']} />`|Kuvagalleria – asettelee kuvat nätisti ja klikkaamalla auki saa selausnäkymän|
+|`<Terminal><li>sudo su</li><li>rm -rf --no-preserve-root /</li></Terminal>`|Komentoja – jokainen rivi omaan `<li>` tagiin – kopioi leikepöydälle -napilla|
+|`<Image src="kuva.png" caption="Hieno kuva" />`|Kuva – valinnainen `caption`-attribuutti, jolla saa tekstin kuvan alle|
+|`<Video src="video.mp4" />`|Video|
+
+Siinä se vaikein osuus! Apua tekemiseen saa aina tarvittaessa Testausserveriltä. 
+
+## Julkaiseminen
+
+Julkaiseminen = Pull Requestin tekeminen GitHubiin ja malttaminen, että se hyväksytään läpi.
+
+keskenvielä
diff --git a/styles/globals.css b/styles/globals.css
@@ -21,6 +21,16 @@ p, ul, ol {
   color: rgba(255,255,255, 0.64);
 }
 
+table {
+  border-collapse: collapse;
+  color: rgba(255,255,255, 0.64);
+}
+table td, table th {
+  padding: 0.3rem;
+  border: 1px solid #222;
+
+}
+
 a {
   position: relative;
   color: inherit;