diff --git a/README.md b/README.md index e2e01801..a0e616a0 100644 --- 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 deleted file mode 100644 index a35a378c..00000000 Binary files a/posts/html-opas/image.png and /dev/null differ diff --git a/posts/html-opas/kurre.jpeg b/posts/html-opas/kurre.jpeg deleted file mode 100644 index dea5dbfd..00000000 Binary files a/posts/html-opas/kurre.jpeg and /dev/null differ diff --git a/posts/html-opas/post.mdx b/posts/html-opas/post.mdx deleted file mode 100644 index 488d1067..00000000 --- a/posts/html-opas/post.mdx +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Suuri HTML-opas -category: Oppaat -feature_image: image.png -excerpt: Nyt merkitään menemään! Hypertekstin merkintäkieli HTML on web-ohjelmoinnin peruspilareita. -authors: -- ts:61d8b737a16588f423624ed5 -datetime: 2024-07-07T18:00:00+03:00 ---- - - -Moi **tää** on testi! Moi **tää** on testi! Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! -Moi **tää** on testi! Moi **tää** on testi! - - - - diff --git a/posts/syslog-ohje/github-clone.png b/posts/syslog-ohje/github-clone.png new file mode 100644 index 00000000..34cd8ced Binary files /dev/null and b/posts/syslog-ohje/github-clone.png differ diff --git a/posts/syslog-ohje/image.png b/posts/syslog-ohje/image.png new file mode 100644 index 00000000..93a27e3a Binary files /dev/null and b/posts/syslog-ohje/image.png differ diff --git a/posts/syslog-ohje/kansiorakenne.png b/posts/syslog-ohje/kansiorakenne.png new file mode 100644 index 00000000..a4aab384 Binary files /dev/null and b/posts/syslog-ohje/kansiorakenne.png differ diff --git a/posts/syslog-ohje/komento.mp4 b/posts/syslog-ohje/komento.mp4 new file mode 100644 index 00000000..a429460b Binary files /dev/null and b/posts/syslog-ohje/komento.mp4 differ diff --git a/posts/syslog-ohje/npm-run-dev.png b/posts/syslog-ohje/npm-run-dev.png new file mode 100644 index 00000000..5a5b8b3b Binary files /dev/null and b/posts/syslog-ohje/npm-run-dev.png differ diff --git a/posts/syslog-ohje/post.mdx b/posts/syslog-ohje/post.mdx new file mode 100644 index 00000000..93ec73e7 --- /dev/null +++ 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: + + +
  • git clone https://github.com/Testausserveri/testausserveri.fi
    • +     + +
    + + +Aja komento asentaaksesi npm-paketit: + +
  • npm install --save-dev
    • +     + +Kopioi tiedosto juuressa sijaitseva tiedosto `.example.env` tiedostoon `.env`. + +Käynnistä kehityspalvelin: + +
  • npm run dev
    • +     + +
    + + +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. + + + +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:`. + +