diff --git a/docs/extras/extra.css b/docs/extras/extra.css index 8f103b52b5e655e96ac6dd871c262800956d8ee7..3b768c77a9dbeb7c8eaf7b699cafbe3bcbf89a99 100644 --- a/docs/extras/extra.css +++ b/docs/extras/extra.css @@ -55,6 +55,40 @@ text-decoration: underline dotted var(--md-accent-fg-color); } +/* Fix buttons */ +.md-content .md-button[href] { + text-decoration: none; +} + +.md-content .md-button[href]:hover { + text-decoration: none; + color: white; +} + +.md-content .md-button.md-button--primary[href]:hover { + background-color: var(--md-primary-fg-color--dark); + border-color: var(--md-primary-fg-color--dark); +} + +[data-md-color-scheme="slate"] .md-content .md-button[href] { + color: var(--md-accent-fg-color); +} + +[data-md-color-scheme="slate"] .md-content .md-button[href]:hover { + color: white; +} + +[data-md-color-scheme="slate"] .md-content .md-button.md-button--primary[href] { + color: white; + background-color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); +} + +[data-md-color-scheme="slate"] .md-content .md-button.md-button--primary[href]:hover { + background-color: #485079; + border-color: #485079; +} + /* make links in main dotted and invert color on hover */ .md-content a[href]:hover { color: var(--md-accent-fg-color-invert); @@ -66,6 +100,8 @@ content: url("../../img/schdesign_s_logo_red.svg"); } +/* YouTube iframe stuff */ + .youtube-16-9 { position: relative; width: 100%; diff --git a/docs/index.md b/docs/index.md index 7b8ee305dbda8b3ad208b621c1e767350332a5a5..cd5f0a3f5d81e7c8429dc817de08d007a490e986 100644 --- a/docs/index.md +++ b/docs/index.md @@ -37,10 +37,10 @@ Az oldal felépítésében próbáltunk arra törekedni, hogy a linkek szépek l ```text # Tutorial -https://roadmap.schdesign.hu/<divízió>/<tutorial>/<név>/<oldalszám?> +https://roadmap.schdesign.hu/<divízió>/tutorial/<név>/<oldalszám?> # Workshop -https://roadmap.schdesign.hu/<divízió>/<workshop>/<dátum>/ +https://roadmap.schdesign.hu/<divízió>/workshop/<dátum>/ ``` ### Header @@ -75,7 +75,7 @@ Elsődlegesen, lépj be [Slacken](https://schdesign.slack.com/archives/C019S43GN A projekthez való hozzájáruláshoz be kell lépned az [schdesign](https://git.sch.bme.hu/schdesign) csoportba GitLaben és megfelelő jogosultságokkal kell, hogy rendelkezz. -Bővebben a hozzájárulásról itt olvashatsz: *TODO: segédlet elkészítése és link iderakása* +Bővebben a hozzájárulásról itt olvashatsz: [Hozzájárulás](/schdesign/tutorial/hozzajarulas/) ### Markdown diff --git a/docs/schdesign/index.md b/docs/schdesign/index.md index 142ca38fb509117b1e626c2bee2d137e4feb0bec..eb3993c08440bd12ffb13fbd5ed1ef0a552024ff 100644 --- a/docs/schdesign/index.md +++ b/docs/schdesign/index.md @@ -22,9 +22,9 @@ a művészetet is be tudják emelni technológiai tudásuk mellé. Szakmai tevékenységünket három fő divízió mentén szervezzük: -- [web](https://roadmap.schdesign.hu/web/) -- [grafika](https://roadmap.schdesign.hu/grafika/) -- [3D](https://roadmap.schdesign.hu/3d/) +- [web](/web/) +- [grafika](/grafika/) +- [3D](/3d/) Ha kapcsolatba szeretnél lépni velünk, lenne egy projekted vagy bármilyen gondolatod számunkra, keress minket diff --git a/docs/schdesign/todo.md b/docs/schdesign/todo.md index 13ba0a801af0767dc73a06e98ccaf7b31af0bc60..5bdd15aa57527f570240e3bc5a45d58fe306025b 100644 --- a/docs/schdesign/todo.md +++ b/docs/schdesign/todo.md @@ -26,21 +26,21 @@ A közeljövőben igyekszem minél átláthatóbbá tenni a technológiai hátte - [x] CI-al automatikusan fellőni egy webszerverre. - [x] Material téma integrálása. - [x] Material téma felülírása (szín és footer). -- [ ] *WIP:* Extension-ök bekonfigurálása +- [x] *WIP:* Extension-ök bekonfigurálása ##### Tartalmi - [x] Az oldal általános struktúrájának kialakítása. -- [ ] *WIP:* Markdown segédlet kódokkal együtt. -- [ ] Oldal szerkesztéséhez segédlet megírása. +- [x] *WIP:* Markdown segédlet kódokkal együtt. +- [x] Oldal szerkesztéséhez segédlet megírása. - [ ] *WIP:* Webfejlesztős tartalmak feltöltése. - [x] Dani-féle Blender tutorial integrálása (első kész) - [ ] Webes projektjeinkről rendes leírás, link repóhoz, archiválás -- [ ] Grafikás anyagok +- [x] Grafikás anyagok - [ ] Újoncok számára hasznos tartalmak feltöltése. - [ ] Drive-on már meglévő hasznos doksit feltöltése. -- [ ] Kép feltöltése a *Rólunk* szekcióhoz. -- [ ] **"Rólunk" szöveg megírása.** +- [x] Kép feltöltése a *Rólunk* szekcióhoz. +- [x] **"Rólunk" szöveg megírása.** ##### Egyéb diff --git a/docs/schdesign/tutorial/hozzajarulas.md b/docs/schdesign/tutorial/hozzajarulas.md new file mode 100644 index 0000000000000000000000000000000000000000..6978c222b9f508ac3fd91ea274caa4bc7cbae532 --- /dev/null +++ b/docs/schdesign/tutorial/hozzajarulas.md @@ -0,0 +1,195 @@ +--- +Title: Hozzájárulás +Description: Elsőre nem is lehet olyan egyértelmű, hogy hogyan lehet tartalmilag bővíteni az oldalt. Ennek a lépésein megyünk végig. +Author: Radeczki Gergő István +--- + +# Hogyan járulhatok hozzá az oldalhoz? + +Nem feltétlenül kell egy workshop/tutorial ötlettel rendelkezned ahhoz, hogy hozzá tudjál járulni az oldalhoz. Már az is bőven megteszi, ha találtál egy elgépelést, vagy már egy meglévő irományban szeretnél módosítást végezni, mert valami nem lett elég jól leírva/helytelen. + +## Előkészületek + +### 1. GitLab hozzáférés + +#### Ha még nincs felhasználód + +Ez a GitLab példány a KSZK által van hosztolva a kollégiumból. Ahhoz, hogy be tudjál lépni, szükséged lesz egy [SCH Account](https://kszk.sch.bme.hu/szolgaltatasaink/sch-account/) felhasználóra. A linkelt oldalon olvashatsz róla bővebben, hogyan lehet létrehozni, mire jó stb. + +#### Ha már van felhasználód + +Az oldalra GitLaben keresztül történik a tartalom feltöltése. Ahhoz, hogy hozzá tudjál járulni az oldalhoz, először is hozzáférés fog kelleni vagy a [repo](https://git.sch.bme.hu/schdesign/roadmap)-hoz, vagy a [GitLab group](https://git.sch.bme.hu/schdesign)-hoz. + +GitLab grouphoz csak **owner** rangú személy tud hozzáadni, így érdemes a [csoport tagjai](https://git.sch.bme.hu/groups/schdesign/-/group_members) közt körbenézni, hogy kinek van ehhez joga. + +GitLab repohoz minimum **maintainer** joggal kell rendelkeznie a személynek, aki meg tud hívni. + +!!! tip + Lehet jobban megéri csoport tagnak lenni, mint sima repo tagnak, mert ekkor öröklésen keresztül más repokhoz is lesz automatikusan jogod. + +### 2. Docker letöltése + +Lokálisan lehet futtatni egy dev servert, amiben élőben láthatod a módosításaidat. Ehhez egy Docker Image-et fogunk letölteni és felkonfigurálni. + +https://docs.docker.com/get-docker/ + +Operációs rendszertől függően válaszd ki a neked kellő verziót. + +!!! danger + Windows esetén, ha **nem rendszergazda** vagy, akkor telepítést követően manuálisan hozzá kell adni a felhasználódat a `docker-users` csoporthoz. Ennek hiányában nem fogod tudni elindítani az alkalmazást. Jelentkezz ki és be, hogy érvényesüljön a csoport módosulás. + +### 3. Git kliens letöltése + +Mivel lokálisan fogunk dolgozni, így kelleni fog valami ami majd fel tudja tölteni a munkánkat. Erre tökéletes lesz egy Git kliens. + +https://git-scm.com/downloads + +### 4. SSH vagy HTTPS + +Munkánkat feltölteni két féle képpen tudjuk: SSH-n vagy HTTPS-en keresztül. Tetszés szerint válaszd ki a neked szimpatikusat. + +!!! tip + Ajánlott SSH-t használni, mert ekkor nem kell felhasználónév-jelszó párossal azonosítanod magadat. + +## Helyi példány elkészítése + +### 1. Klónozd a repot + +Vagy konzolon keresztül vagy grafikus kliensen keresztül másold le azt a példányt, ami a szerveren van. + +=== "SSH" + ```git + git clone git@git.sch.bme.hu:schdesign/roadmap.git + ``` +=== "HTTPS" + ```git + git clone https://git.sch.bme.hu/schdesign/roadmap.git + ``` + +### 2. Indítsd el a Docker példányodat + +Windows esetében először el kell indítani a `Docker Desktop` alkalmazást mielőtt ki tudnánk adni parancsokat neki. + +Star Menüből keressük ki és indítsuk el. + +### 3. Futtassuk a Buildrun scriptet + +Windows és Linux esetére kettő script fájl található meg a mappában. A megfelelő elindításával le fognak töltődni a virtualizációhoz szükséges fájlok és el fog indulni a developer server. + +Konzolba az alábbi parancsot kiadva is el tudjuk indítani a fájlt: + +=== "Windows" + ```powershell + .\buildrun.ps1 + ``` +=== "Linux" + ```bash + ./buildrun.sh + ``` + +Ezt követően elindul a developer server a http://localhost:8000/ címen. + +!!! tip + Nézd meg a gépednek milyen címe van a belső hálózatodon, mert ha engedélyezed tűzfalban, akkor pl. mobilon is megnézheted a webodoldalt. + +## Munka megkezdése + +Elméletben ezen a ponton már minden megvan ahhoz, hogy megkezdhesd a munkát. + +Először is válts egy új branch-re, mert a master az védett, arra nem tudsz majd feltölteni. + +```git +git checkout -b uj-branch-neve-ide +``` + +### a) Meglévő tartalom módosítása + +A mappák és fájlok hierarchiája a weboldal tagolódását követi. Minden dokumentumot a `docs` mappában fogsz megtalálni, innen tudsz a divíziók felé elnavigálni stb. + +Ha megtaláltad a neked kellő Markdown fájlt, akkor nyisd meg, keresed meg a módosítandó részt, végezd el a módosítást, majd mentsd el a fájlt. Ekkor a Dev Server újra fog töltődni, adj neki pár másodpercet. A módosításod automatikusan tükröződnia fog a lokális szervereden. + +### b) Új tartalmi bővítés + +Mindenek előtt gondold végig, hogy amit hozzá akarsz adni, az logikailag hova illene. + +- Melyik divízióhoz illene a tartalom? +- Workshop vagy inkább tutorial jellegű? +- Lesznek hozzá képek? + - Lehet kelleni fog egy új mappa is neki? +- Ki legyen a szerző? +- Van-e már hasonló témában tartalom? + +És ami a legfontosabb: **egy öregebbnek is kérd ki a véleményét**, ha nem vagy biztos magadban. + +#### Új fájl/mappa létrehozása + +Ha megvan, hogy hova, melyik mappába akarod elhelyezni az irományodat, akkor egész egyszerűen hozz létre egy Markdown fájlt. + +!!! danger + Ügyelj a helyes fájl elnevezésre! + + ```text + # Tutorial + https://roadmap.schdesign.hu/<divízió>/tutorial/<név>/<oldalszám?> + + # Workshop + https://roadmap.schdesign.hu/<divízió>/workshop/<dátum>/ + ``` + +!!! danger + Ügyelj a helyes mappa elnevezésre is! + +!!! tip + Nézd meg más mappában milyen struktúrába vannak a fájlok, használd te is ugyan azt a logikát. + +!!! note + Kérd ki egy öregebb véleményét ha nem vagy biztos magadban + +Használd a Markdown [alapok](/schdesign/tutorial/markdown-alapok/) és [cheatsheet](/schdesign/tutorial/markdown-cheatsheet/) doksit, hogy formailag helyes legyen amit írsz. + +#### Link hozzáadása a navigációs panelhez + +A projekt gyökerében találhatsz egy `mkdocs.yml` nevű fájlt. Ennek a fájlnak a végén tudod hozzáadni az oldaladat. + +!!! danger + Tájékozódj a többi link alapján, hogy milyen formában kéne ezt a listát bővítened. + +### Módosítások elmentése + +1\. Git-ben *stage*-eld a módosításaidat. + +```git +git add eleresi/utvonal/a/modositashoz +``` + +2\. *Commit*-old amit csináltál egy lényegre törő leírással, ami nem túl hosszú, de minden fontos információt tartalmaz. + +```git +git commit -m "Egy lényegre törő leírás" +``` + +3\. *Push*-old a *remot*-ra. + +!!! note + Ha először pusholsz, akkor be kell állítanod az *upstream*-et: + ```git + git push --set-upstream origin uj-branch-neve-ide + ``` + + Ha már beállítottad az upstreamet, akkor utána a rövidebb formában is tudsz majd pusholni. + + ```git + git push + ``` + +### Véglegesítés + +Ha lokálisan minden oké volt és már fel is töltötted a remote-ra a módosításodat, akkor a GitLab webes felületén nyisd meg a repot és kezdeményez a *merge request*-et. + +Valószínűleg az oldal tetején lesz egy gomb, amire rányomva ezt meg tudod tenni. + +#### Elfogadásra várás + +Ezt követően egy megfelelő jogosultsággal rendelkező személy majd átnézi, amit csináltál. Ha minden oké, akkor el fogja fogadni. Ha nem, akkor majd kapsz egy üzenetet, hogy mi a gond. + +Amennyiben el lett fogadva a módosításod, akkor kb. 2 percen belül már élesedni is fog az Roadmap oldalán a hozzájárulásod. \ No newline at end of file diff --git a/docs/schdesign/tutorial/markdown-alapok.md b/docs/schdesign/tutorial/markdown-alapok.md index ad4db9abae006604b407d2af2faf979e83b6dda0..84244343b0e2e4b8efa6458e3a6d445f9d74c6a2 100644 --- a/docs/schdesign/tutorial/markdown-alapok.md +++ b/docs/schdesign/tutorial/markdown-alapok.md @@ -1,205 +1,363 @@ --- title: Markdown szerkesztési segédlet -description: TODO +description: Végig megyünk a markdown alapjain, lényegretőrően bemutatva mi hogyan épül fel. --- -# Markdown szerkesztési segédlet +# Markdown alapok -!!! warning "Figyelmeztetés" - Ez a szekció még formázás alatt áll. Ennek ellenére hasznos információkat tartalmaz. +## Miért Markdown -## Fejlécek +WYSIWYG-nek hívjuk azt, amikor úgy szerkeszted a fájlt, hogy közben a végeredményt látod. Ennek az egyik legnagyobb hátránya akkor jelentkezik, amikor formázott szövegek közt kell oda-vissza lépkedned. Hányszor fordult elő, hogy be volt kapcsolva a **félkövér**/*dőlt* betűtípus, de te már egy új sorban elkezdtél gépelni, erre *minden amit leírtál az formázott lett*. Markdownban sokkal valószínűtlenebb, hogy ilyen előfordul, mert mindig látod milyen stílusnak mikor van vége. -!!! example "" +*[WYSIWYG]: What You See Is What You Get - === "Output" - ## h2 header - ### h3 header - #### h4 header - ##### h5 header - ###### h6 header - - === "Markdown" - ``` - ## h2 header - ### h3 header - #### h4 header - ##### h5 header - ###### h6 header - ``` +A HTML-hez hasonló szintaxisa van, de ez sokkal jobban le van egyszerűsítve. Ez azt jelenti, hogy elég lesz nekünk csak a szöveges tartalomra, annak a helyes formázására koncentrálni. A webes megjelenést majd egy másik eszköz fogja megoldani. !!! note - Jobb oldalon látható, hogy az egyes header-típusok szépen egymás alá ágyazódnak be a tartalomjegyzékben, fontossági sorrendben. + Nincs megtiltva az, hogy HTML-t használj a fájlban, sőt, ezt még ki is egészítheted a `style` attribútummal, ezzel is jobban személyre szabhatod a fájlt. -!!! warning - A **h1 headerek** furcsán viselkednek. Minden oldalon az első lesz az oldal címe, és onnantól kezdve minden további ugyanúgy jelenik meg, mint a cím, azonban **megtöri a jobb oldali linkeket**, ezért használatuk nem ajánlott. +### Markdown fájl: .md +Egy Markdown fájl létrehozásához elég egy `*.md` elnevezésű fájlt létrehoznod. -## Horizontal Rules +## Alap szintaxis -___ +A szintaxist 2 csoportra lehet bontani: *teljes sorra* és *sor egy kis részére* alkalmazódóra. ---- +Egész sorra kiható elemeket mindig egy üres sorral kell elválasztani a többitől. + +### Fejlécek + +Egy jól szervezett Markdown fájlnak a tartalmát fejlécek választják el. Ezek HTML-hez hasonlóan H1-től H6-ig terjednek, ahol H1 a legnagyobb. Általában egy darab H1-es fejléc szokott szerepelni egy dokumentumban, ami a dokumentum címét szokta viselni. + +=== "Kód" + ```markdown linenums="1" + # H1 + + ## H2 + + ### H3 -*** + #### H4 + ##### H5 -## Typographic replacements + ###### H6 + ``` +=== "Megjelenés" + Tönkre menne az aloldal, ha ide sima kódként lenne berakva a megjelenés. Szóval inkább néz körbe az oldalon. -Enable typographer option to see result. +### Új sor -(c) (C) (r) (R) (tm) (TM) (p) (P) +- +Néha nem akarsz új bekezdést kezdeni, de új sort viszont igen. Erre két megoldás van: -test.. test... test..... test?..... test!.... +**Simán új sorban kezded amit írsz.** -!!!!!! ???? ,, -- --- +Ennek az a hátránya, hogy lehet nincs támogatva, így egy sornak fogja tekinteni a program, ami HTML kódot generál belőle. -"Smartypants, double quotes" and 'single quotes' +**Használod a `<br>` HTML címkét** +Ez sokkal hatásosabb, látványosabb. Az ilyeneket 1:1-ben átemeli a HTML kódba a fordító. -## Emphasis +=== "Kód" + ```html linenums="1" + Ez az első sor + Ez a második -**This is bold text** + Ez az első sor<br> + Ez a második + ``` +=== "Megjelenés" + Ez az első sor + Ez a második -__This is bold text__ + Ez az első sor<br> + Ez a második -*This is italic text* +### Bekezdés -_This is italic text_ +Egy bekezdés egy sorból áll. Minden új bekezdést egy üres sorral kell elválasztani a többitől. -~~Strikethrough~~ +=== "Kód" + ```markdown linenums="1" + Ez az első bekezdés -## Blockquotes + Ez a második bekezdés + ``` +=== "Megjelenés" + Ez az első bekezdés + Ez a második bekezdés -> Blockquotes can also be nested... ->> ...by using additional greater-than signs right next to each other... -> > > ...or with spaces between arrows. +### Szöveg kiemelés -## Lists +Szerkesztőtől függ, de általában gyorsgombok támogatva vanna, így annyival kevesebb szintaxisra kell emlékezni. HTML-hez hasonlóan, ha valamira valamit alkalmazni akarunk, akkor azt körbe kell fogni valamivel. Gyorsgomb használatakor jelöljük ki a formázandó szöveget, majd meg fog jelenni az elején és a végén két jel. Ami ez a két jel között van, arra fog alkalmazódni a formázás. -Unordered +| Gyorsgomb | Szintaxis | Végeredmény | +|-----------|-----------|-------------| +| ++ctrl+i++ | `*dőlt*` | *dőlt* | +| ++ctrl+b++ | `**félkövér**` | **félkövér** | +| - | `***dőltfélkövér***` | ***dőltfélkövér*** | -+ Create a list by starting a line with `+`, `-`, or `*` -+ Sub-lists are made by indenting 2 spaces: - - Marker character change forces new list start: - * Ac tristique libero volutpat at - + Facilisis in pretium nisl aliquet - - Nulla volutpat aliquam velit -+ Very easy! +### Idézés + +Ha idézni szeretnél, akkor minden idézendő sort egy `>` jellel kell kezdened. + +=== "Kód" + ```markdown linenums="1" + > Ez egy több soros + > + > idézet. + ``` +=== "Megjelenés" + > Ez egy több soros + > + > idézet. + +!!! note + Egy idézeten belül is lehet formálni a szöveget. + +### Lista készítés + +Listából két fajta van: **számozott** és **számozatlan**. + +=== "Kód" + ```markdown linenums="1" + 1. Ez + 2. Egy + 3. Számozott + 1. Lista + 4. Amiben + 5. Van + 6. Beljebb kezdés + + - Ez + - Egy + - Számozatlan + - Lista + - Amiben + - Van + - Beljebb kezdés + ``` +=== "Megjelenés" + 1. Ez + 2. Egy + 3. Számozott + 1. Lista + 4. Amiben + 5. Van + 6. Beljebb kezdés + + Lista lista utánt nem szeret a program, így kell ide valamilyen elválasztó szöveg 😢. + + - Ez + - Egy + - Számozatlan + - Lista + - Amiben + - Van + - Beljebb kezdés + + +!!! danger + Indentálásnál **4 darab** ++space++-t kell használni. + +!!! note + Számozott és számozatlan listát lehet egymásba ágyazni. -Ordered +### Kód beillesztés -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa +Kódot lehet teljes vagy részleges formában beilleszteni. +=== "Kód" + ```markdown + Ebben a mondatban van egy `function()` kód, ami nem fut le. + ``` -1. You can use sequential numbers... -1. ...or keep all the numbers as `1.` + <div> + <span>Ez egy többsoros kód, amit beljebb kezdéssel érek el, hogy ne fusson le</span> + </div> +=== "Megjelenés" + Ebben a mondatban van egy `function()` kód, ami nem fut le. -Start numbering with offset: + <div> + <span>Ez egy többsoros kód, amit beljebb kezdéssel érek el, hogy ne fusson le</span> + </div> -57. foo -1. bar +### Linkek -## Code +Linkeket is sokféleképpen lehet beilleszteni. -Inline `code` +=== "Kód" + ```markdown + Lehet egy szövegrésznek [a link](https://google.com). + ``` -Indented code + Lehet hivatkozni is rá, pl. ha sok link van, sok helyen újra felhasználnád. - // Some comments - line 1 of code - line 2 of code - line 3 of code + ```markdown + Ez egy [hivatkozás][id] egy linkre, amit valahol máshol definiálok. + ... + [id]: https://google.com + ``` +=== "Megjelenés" + Lehet egy szövegrésznek [a link](https://google.com). -Block code "fences" + Lehet hivatkozni is rá, pl. ha sok link van, sok helyen újra felhasználnád. -``` -Sample text here... -``` + Ez egy [hivatkozás][id] egy linkre, amit valahol máshol definiálok. -Syntax highlighting + [id]: https://google.com -``` js -var foo = function (bar) { - return bar++; -}; +### Képek -console.log(foo(5)); -``` +=== "Kód" + ```markdown +  + ``` +=== "Megjelenés" +  -## Tables +### További olvasmány -| Option | Description | -| ------ | ----------- | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | +Ez csak egy gyors összefoglalója az alap Markdown szintaxisnak, ennél bővebb útmutatók találhatóak szertemenően az interneten. -Right aligned columns +Forrás: https://www.markdownguide.org/basic-syntax/ -| Option | Description | -| ------:| -----------:| -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | +## Kibővített szintaxis -## Tabok +Ha a fenti feature-ökön végignézünk, akkor az elég szegényes. Nem is volt a célja a nyelvnek, hogy újra feltalálja a kereket, de ettől függetlenül néhány dolog még mindig hiányzik a nyelvől, amit jó volna, ha tudna. Ennek az lett az eredménye, hogy ki lett egészítve a nyelv. -!!! example "Tabok példa" +Az itt leírtak már nem biztos hogy mindenhol, ahol Markdownt használnak, működni fog. Lehet egy kicsit módosítani kell majd rajta, de a *"nagyoknál"* működik. - === "Output" - === "Tab 1" - Markdown **content**. +### Táblázatok - Multiple paragraphs. +=== "Kód" + ```markdown linenums="1" + | Valami | Más | + | ------ | --- | + | 1 | 2 | + | 3 | 4 | + ``` +=== "Megjelenés" + | Valami | Más | + | ------ | --- | + | 1 | 2 | + | 3 | 4 | - === "Tab 2" - More Markdown **content**. +### Határolt kódblokk - - list item a - - list item b +Eddig beljebb kellett kezdeni minden sort, amiben kód volt és nem szerettük volna, hogy lefusson. - === "Markdown" - ``` - === "Tab 1" - Markdown **content**. +Most már elég lesz körbehatárolni azt. - Multiple paragraphs. +=== "Kód" + ````markdown linenums="1" + ```javascript + function add(a, b) { + return a + b; + } + ``` + ```` +=== "Megjelenés" + ```javascript + function add(a, b) { + return a + b; + } + ``` - === "Tab 2" - More Markdown **content**. +Emellett az első sornak a végén meg lehet adni, hogy milyen kódról van szó, így ha támogatva van a szintaxis felismerés, akkor már helyes színek mellett fog megjelenni a kód. - - list item a - - list item b - ``` +### Lábjegyzet +=== "Kód" + ```markdown linenums="1" + Ez egy átvett szöveg, aminek a végén van egy lábjegyzet[^1] -## Links + [^1]: Link vagy valami. + ``` +=== "Megjelenés" + Ez egy átvett szöveg, aminek a végén van egy lábjegyzet[^1] -[link text](http://dev.nodeca.com) + [^1]: Link vagy valami. -[link with title](http://nodeca.github.io/pica/demo/ "title text!") +### Definíciós lista -Autoconverted link https://github.com/nodeca/pica (enable linkify to see) +=== "Kód" + ```markdown linenums="1" + First Term + : This is the definition of the first term. + Second Term + : This is one definition of the second term. + : This is another definition of the second term. + ``` +=== "Megjelenés" + First Term + : This is the definition of the first term. -## Images + Second Term + : This is one definition of the second term. + : This is another definition of the second term. - - +### Áthúzott szöveg -Like links, Images also have a footnote style syntax +=== "Kód" + ```markdown + ~~Ez át van húzva~~, ez már nem. + ``` +=== "Megjelenés" + ~~Ez át van húzva~~, ez már nem. + +### Feladat lista + +=== "Kód" + ```markdown linenums="1" + - [x] Write the press release + - [ ] Update the website + - [ ] Contact the media + ``` +=== "Megjelenés" + - [x] Write the press release + - [ ] Update the website + - [ ] Contact the media + +### Emoji + +Unicode vagy *shortcode* használatával. + +=== "Kód" + ```markdown linenums="1" + :apple: + + :cheese: + + :fontawesome-brands-facebook: + + 😍☺️👀✅➡️😕 + ``` +=== "Megjelenés" + :apple: + + :cheese: + + :fontawesome-brands-facebook: + + 😍☺️👀✅➡️😕 + +!!! note + Vegyük észre, hogy a shortcode-dal beillesztett `:apple:` vagy más emoji igazából egy kép, unicode karakter meg egy... nos... karakter. Ez akkor lehet igazán fontos, ha szöveget szeretnénk másolni. -![Alt text][id] +### Automatikus URL felismerés -With a reference later in the document defining the URL location: +Ha csak egy gyors linket szeretnél beilleszteni, akkor nem kell formázással törődnöd, elég csak a linket beilleszteni, amiből automatikusan kattintható változat lesz. -[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" +### További olvasmány +Ez csak egy gyors összefoglalója a kibővített Markdown szintaxisnak, ennél bővebb útmutatók találhatóak szertemenően az interneten. +- Forrás: https://www.markdownguide.org/extended-syntax/ +- [Markdown Cheatsheet](/schdesign/tutorial/markdown-cheatsheet/) \ No newline at end of file diff --git a/docs/schdesign/tutorial/markdown-cheatsheet.md b/docs/schdesign/tutorial/markdown-cheatsheet.md index 25cfc8649a064ec86aa5616bfeb478a7bef3943a..366596ae6d0fa629bd151b2a965bb40db9b5e6ed 100644 --- a/docs/schdesign/tutorial/markdown-cheatsheet.md +++ b/docs/schdesign/tutorial/markdown-cheatsheet.md @@ -1,15 +1,17 @@ --- title: Markdown Cheatsheet -description: Az MCDocs Materialban rengeteg új dologgal egészül ki az, amit egy markdown fájlba leírhatsz. Ezeken megy gyorsan végig ez a cheatsheet, rövid kódrészlet mellett megmutatja hogyan fog inézni amit csinálsz +description: Az MkDocs Materialban rengeteg új dologgal egészül ki az, amit egy markdown fájlba leírhatsz. Ezeken megy gyorsan végig ez a cheatsheet, rövid kódrészlet mellett megmutatja hogyan fog kinézni amit csinálsz author: Radeczki Gergő István date: June 12, 2021 --- -# Hogyan szerkeszd az oldalt +# Markdown cheatsheet + +Az oldalon használt markdown az alapokon kívül is ki van egészítve extra feature-ökkel, amikről lentebb tudsz tájékozódni. ## Abbreviatioins -Ismeretlen szavakra ha ráviszed a kurzort, akkor megmutatja a jelentésüket. Mobilon nincs értelme, mert nem műküdik úgy, mint PC-n. +Ismeretlen szavakra ha ráviszed a kurzort, akkor megmutatja a jelentésüket. Mobilon egy kicsit bugos, de működik. !!! note === "példa kód" @@ -20,7 +22,7 @@ Ismeretlen szavakra ha ráviszed a kurzort, akkor megmutatja a jelentésüket. M *[W3C]: World Wide Web Consortium ``` === "megjelenés" - The HTML specification is maintained by the W3C. + The HTML specification is maintained by the W3C.<br><br> *[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium @@ -235,7 +237,7 @@ Ha linkek helyett inkább menő gombokat szeretnél használni, akkor azt így t [Subscribe to our mailing list](#){ .md-button .md-button--primary } ``` === "megjelenés" - [Subscribe to our mailing list](){ .md-button .md-button--primary } + [Subscribe to our mailing list](#){ .md-button .md-button--primary } !!! note "Kitöltött gomb ikonnal" === "példa kód" @@ -251,7 +253,7 @@ A `(#)`-ben a *#* helyére kell írnod a webcímet. ### Forráskód szövegkiemeléssel -Ha forráskódot szeretnél megosztani, szövegkiemeléssel. +Ha forráskódot szeretnél megosztani szövegkiemeléssel. !!! note "Python kód szövegkiemeléssel" === "példa kód" @@ -461,11 +463,13 @@ Idk miért, de nem működik 😢 | `PUT` | :material-check-all: Update resource | | `DELETE` | :material-close: Delete resource | -A táblázatok első sorára kattintva, az adott oszlop szerint lehet rendezni a sorokat. +!!! tip "" + A táblázatok első sorára kattintva, az adott oszlop szerint lehet rendezni a sorokat. ## Diagram -Nem értem miért nem működik 😢 +!!! warning "" + Nem értem miért nem működik 😢 !!! note "Diagram készítése" === "példa kód" diff --git a/docs/theme/main.html b/docs/theme/main.html index e7ec61d40bd6ebb8b586b36c1f32208fd1e733a9..22d424d8c6d0366088fcf6505988cb3fc3a38fce 100644 --- a/docs/theme/main.html +++ b/docs/theme/main.html @@ -22,9 +22,11 @@ <meta property="og:image:height" content="540" /> <!-- Twitter stuff --> <meta name="twitter:card" content="summary_large_image" /> - <meta name="twitter:site" content="schdesign" /> - <meta name="twitter:creator" content="schdesign" /> + <meta name="twitter:site" content="@schdesign" /> + <meta name="twitter:creator" content="@schdesign" /> <meta name="twitter:title" content="{{ title }}" /> <meta name="twitter:description" content="{{ description }}" /> <meta name="twitter:image" content="https://logotar.schdesign.hu/assets/database/Simonyi/schdesign/schdesign.png" /> + <meta name="twitter:image:alt" content="Schönherz Design Studio" /> + <!-- Other stuff --> {% endblock %} \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 1e4af6b88874c5313040313a5d4f5e8a80e344c1..82327901b5af5e9edd47b8294c10dc67829dd354 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -1,5 +1,5 @@ # Project information -site_name: schdesign roadmap +site_name: Roadmap site_url: https://roadmap.schdesign.hu/ site_author: schdesign site_description: >- @@ -138,6 +138,7 @@ nav: - Markdown: - Alapok: schdesign/tutorial/markdown-alapok.md - Cheatsheet: schdesign/tutorial/markdown-cheatsheet.md + - Hozzájárulás: schdesign/tutorial/hozzajarulas.md - Rólunk: schdesign/index.md - Web: - web/index.md