{"id":16278375,"url":"https://github.com/238samixd/onwelo-recruitment","last_synced_at":"2026-04-09T11:02:04.137Z","repository":{"id":127736661,"uuid":"485144602","full_name":"238SAMIxD/onwelo-recruitment","owner":"238SAMIxD","description":"Własna wersja strony dokumentacji https://man7.org/linux/man-pages/man1/ls.1.html","archived":false,"fork":false,"pushed_at":"2022-05-19T20:08:08.000Z","size":1644,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-31T08:21:20.601Z","etag":null,"topics":["bootstrap","css","html","javascript","node","npm"],"latest_commit_sha":null,"homepage":"https://zgrajsie.com/onwelo-recruitment/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/238SAMIxD.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-24T21:29:03.000Z","updated_at":"2022-05-09T16:37:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"876c9d58-a1c5-4b65-ab32-d3147ae43833","html_url":"https://github.com/238SAMIxD/onwelo-recruitment","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/238SAMIxD/onwelo-recruitment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/238SAMIxD%2Fonwelo-recruitment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/238SAMIxD%2Fonwelo-recruitment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/238SAMIxD%2Fonwelo-recruitment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/238SAMIxD%2Fonwelo-recruitment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/238SAMIxD","download_url":"https://codeload.github.com/238SAMIxD/onwelo-recruitment/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/238SAMIxD%2Fonwelo-recruitment/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272294121,"owners_count":24908766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-27T02:00:09.397Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","html","javascript","node","npm"],"created_at":"2024-10-10T18:58:18.134Z","updated_at":"2025-12-30T21:36:12.556Z","avatar_url":"https://github.com/238SAMIxD.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zadanie Rekrutacyjne Onwelo\n\nWłasna wersja strony dokumentacji https://man7.org/linux/man-pages/man1/ls.1.html  \nStworzone przez **Samuela Jędrzejewskiego**  \n*samijedrzejewski@gmail.com*\n\n## Zadanie\n\nStworzenie własnej wersji strony dokumentacji https://man7.org/linux/man-pages/man1/ls.1.html  \nkorzystając z jednego z dowolnych frameworków CSS: (n.p. https://bulma.io/, https://getbootstrap.com/docs/5.0/getting-started/introduction/)\n\n## Opis\n\nZaimplementowałem autorską wersję strony manula Linuxa `ls(1)`.  \nUżyłem do tego frameworka CSS Bootstrap 5 oraz JavaScriptu.\n\n![Nagłówek](./img/header.png)\n\n### Dane\n\nWszystkie dane zostały zapożyczone ze strony [manuala](https://man7.org/linux/man-pages/man1/ls.1.html), a także z wersji manuala z terminala `man ls` oraz pomocy komendy `ls --help`.\n\n![Terminal](./img/terminal.gif)\n\n### Wygląd\n\nInspirację wyglądu strony czerpałem bezpośrednio z kali linuxowego terminla, to jest każdy wpis podzieliłem na dwie części. Po jednej stronie znajduje się funkcja oraz jej opis, po drugiej zaś widoczny jest terminal z przykładowym wywołaniem komendy wraz z przykładowymi plikami.\n\n![Wygląd](./img/look.png)\n\nPoniżej znajduje się przykładowy kod obrazujący implementację kolorów w wirtualnym terminalu:\n\n```html\n\u003cdiv class=\"col-lg-6 text-white showcase-img sandbox\"\u003e\n  \u003ccode class=\"terminal\"\u003e\n    \u003cspan class=\"arrow\"\u003e└─\u003c/span\u003e\u003cspan class=\"dollar\"\u003e$\u003c/span\u003e\n    \u003cspan class=\"cmd\"\u003els\u003c/span\u003e \u003cspan class=\"opts\"\u003e-a\u003c/span\u003e\u003cbr /\u003e\n    \u003cspan class=\"dir\"\u003e.\u003c/span\u003e\n    \u003cspan class=\"dir\"\u003e..\u003c/span\u003e\n    \u003cspan class=\"audio\"\u003eexample_audio_file.mp3\u003c/span\u003e\n    \u003cspan\u003eexample_backup_file~\u003c/span\u003e\n    \u003cspan class=\"compressed\"\u003eexample_compressed_file.tgz\u003c/span\u003e\n    \u003cspan class=\"dir\"\u003eexample_dir\u003c/span\u003e\n    \u003cspan class=\"exec\"\u003eexample_exec_file.sh\u003c/span\u003e\n    \u003cspan class=\"fifo\"\u003eexample_fifo_file\u003c/span\u003e\n    \u003cspan\u003eexample_file\u003c/span\u003e\n    \u003cspan\u003e'example file with spaces'\u003c/span\u003e\n    \u003cspan class=\"dir\"\u003e.example_hidden_dir\u003c/span\u003e\n    \u003cspan\u003e.example_hidden_file\u003c/span\u003e\n    \u003cspan class=\"image\"\u003eexample_image_file.jpg\u003c/span\u003e\n    \u003cspan class=\"link\"\u003eexample_link_file\u003c/span\u003e\n    \u003cspan class=\"socket\"\u003eexample_socket_file\u003c/span\u003e\n    \u003cspan\u003eexample_text_file.txt\u003c/span\u003e\n  \u003c/code\u003e\n\u003c/div\u003e\n```\n\n```css\n.sandbox {\n  --terminal-bg-clr: #0c0c0c;\n  --terminal-text-clr: #ccc;\n  --terminal-dir-clr: #3b78ff;\n  /* (...) */\n  background-color: var(--terminal-bg-clr);\n  display: flex;\n  align-items: center;\n}\n\n.terminal {\n  display: block;\n  color: var(--terminal-text-clr);\n  background-color: var(--terminal-bg-clr);\n  width: 100%;\n  height: max-content;\n  padding: 1rem;\n}\n.terminal span {\n  display: inline-flex;\n  flex-wrap: nowrap;\n}\n\n.terminal .arrow {\n  color: var(--terminal-arrow-clr);\n}\n\n.terminal .dollar {\n  color: var(--terminal-dollar-clr);\n}\n\n.terminal .cmd {\n  color: var(--terminal-cmd-clr);\n}\n\n.terminal .opts {\n  color: var(--terminal-opts-clr);\n}\n\n.terminal .dir {\n  color: var(--terminal-dir-clr);\n}\n/* (...) */\n```\n\nWszystkie style terminala znajdują się w oddzielnym pliku _CSS_ `terminal.css`.\n\n![Podgląd terminala](./img/terminal.png)\n\n### Linki zewnętrzne\n\nWszystkie linki użyte na stronie prowadzą do oryginalnych odnośników i otwierają się w nowej karcie `target=\"_blank\"`.\n\n![Stopka](./img/footer.png)\n\n### Wyszukiwanie\n\nPodobnie jak powyżej jest w przypadku wyszukiwarki. Prosty skrypt wykonuje zapytanie w Google i otwiera je w nowej karcie.\n\n![Wyszukiwarka](./img/search.png)\n\n```js\ndocument.querySelector(\"[type=submit]\").addEventListener(\"click\", search);\n\nfunction search(e) {\n  e.preventDefault();\n\n  const input = document.querySelector(\"#q\");\n  const url = \"https://www.google.com/search\";\n  const params = new URLSearchParams({\n    q: input.value,\n    sitesearch: \"man7.org/linux/man-pages\",\n    sa: \"Search online pages\",\n  });\n\n  window.open(`${url}?${params}`, \"_blank\").focus();\n}\n```\n\n### Nawigacja\n\nZ racji iż strona jest długa ze względu na dużą liczbę opcji komendy, dostępna jest łatwa nawigacja do poszczególnych rozdziałów.\n\n![Nawigacja](./img/nav.png)\n\nUżytkownik może w każdej chwili powrócić na górę strony, klikając przycisk w prawym dolnym rogu ekranu.\n\n![Do góry](./img/top.png)\n\n### Responsywność\n\nStrona oczywiście jest w pełni responsywna dzięki użyciu stylów z _Bootstrapa_ oraz `media queries`.\n\n![Podląd z telefonu](./img/mobile.png)\n\n![Podląd z telefonu](./img/mobile2.png)\n\n### Tryb ciemny\n\nW ramach dostępności na stronie dostępna jest zmiana trybu kolorów z jasnego na ciemny i na odwrót. Ponadto skrypt wykrywa, kiedy użytkownik ma ustawioną preferencję trybu ciemnego i automatycznie zmienia kolory.\n\n![Tryb ciemny](./img/dark.png)\n\n![Tryb ciemny](./img/dark2.png)\n\n```js\nconst switchIcon = document.querySelector(\".mode\");\n\nswitchIcon.addEventListener(\"click\", changeMode);\n\nif (window.matchMedia(\"(prefers-color-scheme: dark)\").matches) {\n  const e = {};\n\n  e.target = switchIcon;\n\n  changeMode(e);\n}\n```\n\nFuncja `changeMode(e)` jest również w pliku skryptowym `dark.js`.\n\n## Uruchomienie własnej aplikacji\n\nDzięki _NodeJS_ jest możliwość hostowania aplikacji internetowej na własnym urządzeniu.\n\n### Instalacja\n\nDo uruchomienia środowiska potrzebny jest _NPM_. Aby pobrać moduły należy użyć komendy:\n\n```bash\nnpm install\n```\n\nPobrane zostaną następujące zależności:\n\n```json\n\"dependencies\": {\n\"express\": \"^4.17.3\",\n\"nodejs\": \"0.0.0\",\n\"open\": \"^8.4.0\",\n\"path\": \"^0.12.7\"\n}\n```\n\n### Włączanie\n\nSkrypt jest prosty do włączenia za pomocą komendy `start` poprzez _npm_. Można użyć jednej z następujących komend:\n\n```bash\nnpm start\nnpm run start\nnode index.js\n```\n\n![Podgląd konsoli](./img/host.png)\n\nDomyślny `host` i `port` są przechowywane w stałych.\n\n```js\nconst host = \"localhost\";\nconst port = 3000;\n```\n\n### Aplikacja\n\nAplikacja działa dzięki modułowi _expressjs_ oraz użyciu statycznej strony. Paczka `open` otwiera przeglądarkę ze wskazanym adresem.\n\n```javascript\napp.use(express.static(path.join(__dirname, \"public\")));\napp.listen(port, host, () =\u003e {\n  console.log(`App running on ${host}:${port}/`);\n  open(`http://${host}:${port}`);\n});\n```\n\n### Podgląd strony online\n\nAby przyspieszyć ogląd zadania, rozwiązanie wysłałem na swój serwer, dzięki czemu można obejrzeć stronę pod adresem https://zgrajsie.com/onwelo-recruitment/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F238samixd%2Fonwelo-recruitment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F238samixd%2Fonwelo-recruitment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F238samixd%2Fonwelo-recruitment/lists"}