cesko-digital / app Goto Github PK

Technologie: React, TypeScript, Styled Components, Gatsby

Opravit font-weight pro link typu Small pro hover a focus stav na 500. Task na pár minut, nutní změna v tomto místě kódu (ne změna hodnoty, vyjímka z CSS selektoru).

Figma: link

Technologie: React, TypeScript, Gatsby

V rámci #64

Vytvořit stateless komponentu dle designu s předpokládaným vstupem:

• Název
• Popis
• Cover
• Odkaz na Slack

Komponenta by měla využít komponentu tlačítka z #65.

Na co nezapomenout:

• Komponenta by neměla mít žádný stav
• Přidat dokumentaci (story) do Storybooku
• Odklonit se od větve rework

Figma: link

V případě nejasností nebojte se na mne obrátit. 🙂

Vytvoření homepage pomocí hotových komponent.

Layout dostupný: https://www.figma.com/file/8YdGIHXLPo8zt4ZN8KJ4Hy/%3EC.D-%2F-Web?node-id=1%3A2 / homepage

Seznam potřebných komponent:

• Blok "Hlavička" #76
• Blok "Hero" #129
• Blok "Čísla" #130
• Blok "Galerie projektů" #128
• Blok "Zapojte se" #120
• Blok "Mám nápad na projekt"
• Blok "Naše hodnoty" #131
• Blok "Galerie fotografií" #132
• Blok "Spolupráce" #133
• Blok "Patička" #75
• Blok "Cookies"

Vytvoření detailu projektu pomocí hotových komponent.

Layout dostupný: https://www.figma.com/file/8YdGIHXLPo8zt4ZN8KJ4Hy/%3EC.D-%2F-Web?node-id=1%3A2 / detail-projektu-v1

Seznam potřebných komponent:

Blok "Hlavička" #76
Blok "Navigace na podstránce" #93
Blok "Projektová fotografie" #125
Blok "O projektu" #126
Blok "Stav projektu" #127
Blok "Galerie projektů" #128
Blok "Patička" #75

Technologie: React, TypeScript, Gatsby

Vytvořit stateless komponentu pro kartu projektu pro stránku přehled projektů (#64). Komponenta by měla využít tlačítko z #65.

Předpokládaný vstup:

• Název projektu
• Popis
• Cover
• Logo
• Odkaz na detail
• Tagy (zatím pouze jako text)

Na co nezapomenout:

• Komponenta by neměla mít žádný stav
• Přidat dokumentaci (story) do Storybooku
• Odklonit se od větve rework

Figma: link

V případě nejasností nebojte se na mne obrátit. 🙂

Zatím issue pro brainstorming. Možné položky:

• Komponenty ve Storybooku
• Správně strukturované HTML (headings, odstavce atd.)
• Velikost nových závislostí
• Testy
• Obrázky jako React SVG komponenta (správná lokace)
• Čistá git historie
• Design odpovídá Figmě
• Test v Chrome, Safari, další?
• ...

Technologie: React, TypeScript, Cypress

Napojení API newsletteru na formulář v patičce

Na co nezapomenout:

• udělat test v cypressu

Náhled komponenty

V případě nejasností se nebojte zeptat zde pod issue nebo na Slacku jednoho z techleadů (@tuanphungcz nebo @HormCodes ). Jeden z nich vám bude k dispozici po celou dobu vývoje. 🙂

Velký nápis „147 Commitů“ mě zaujal, chtěl jsem se na ně podívat. Jenže jsem nikde na webu nenašel odkaz na Github (nebo jakékoli jiné repository), který bych tam určitě někde čekal. (OK, OK, našel jsem ho i bez toho… snad.)

Technologie: Gatsby, TypeScript, React

Požadavky na vývoj:

• Veškeré změny by měly být víceméně v rámci gatsby-node.ts
• /projekty/ucime-online a /en/projects/online-teaching (dávat pozor, aby se negenerovali mutace typu /en/projekty/ucime-online)
• GQL query by mělo být minimální a sloužit pouze pro generování (všechny české projekty nebo všechny anglické projekty), očekává se druhé query s filtrem na slug v rámci šablony
• Stávající pluginy pro překlady rozšířit, měnit, odstranit v případě nutnosti, ale měl by být zachován vícejazyčný routing a překlady
• Implementace by měla obsahovat jednoduchý Cypress test využívající mock data, který bude testovat existenci stránky pro projekty

Mnoho dat pro >Česko.Digital držíme v AirTable a dává smysl data o projektech, partnerech atd. držet na stejném místě.

Chceme pro web využívat kopii dat a mít tuto kopii v repozitáři, aby nedocházelo k nechtěným úpravám webu.

Jakým způsobem by měla být provázená synchronizace?
Jednou za čas? Na požádání?

Technologie: Express, TypeScript, Gatsby, Vercel

V rámci vytvoření stránky projektů (#64)

Při implementaci patičky jsme narazili (#75), že potřebujeme volat API ecomailu pro přidávání emailů do newsletteru. Pro zakrytí API klíče je nutné vytvořit jednoduchý endpoint, který bude volán po submitování formuláře na klientské straně.

Navrhované rozhraní:

{
   name: "Jan Novák", // Optional
   email: "[email protected]"
}

Inspirace: Lze se inspirovat zde, jen nasazení bude provedeno přes Vercel.

V případě nejasností nebojte se na mne obrátit. 🙂

Technologie: React, Gatsby, TypeScript, Styled-components

Vytvořit komponentu která zobrazuje sekci o projektu. Data lze mít pouze jako mock a napojení na AirTable vyřešíme odděleně.

Jak by komponenta měla fungovat:

• Vytvořit lokalizovaný text header a text description pro 'O projektu' a '8 zapálených dobrovolníku'.
• Vytvořit grid s Avatarama dobrovolníků

Jak by měla komponta Avatar vypadat:

• Kompontat by měla brát img. V případě že není, komponenta by měla zobrazit šedý background
• Měla by brát name a position dobrovolníka, které se na základě propu pozicuje vedla nebo pod Avatarem

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

V případě nejasností se nebojte zeptat zde pod issue nebo na Slacku jednoho z techleadů (@tuanphungcz nebo @HormCodes ). Jeden z nich vám bude k dispozici po celou dobu vývoje. 🙂

Storybook využíváme pro dokumentaci komponent. Bylo by užitečné mít Storybook někde nasazený.

Zkusit prozkoumat, zda se nedá využít Vercel, který využíváme už pro hostování webu. Nastavení subdomény vhodny-nazev.cesko.digital zatím není potřeba.

Přidat GitHub actions a nastavit automatickou kontrolu pro:

1. TSLint (součástí je i Prettier)
2. Jest testy

Závisí na #42, ale lze vytvořit branch na současném kódu - Jest i TSlint bude zachován.

Cílem je zabránit aplikování změn a jejich nasazení na produkci, které nejsou správně naformátované nebo neprochází testy.

Nasazování webu bude řešené automaticky přes Netlify.

Na hlavní stránce bychom pomocí pár fotografií dokreslili informace o fungování a hodnotách Česko.Digital. To na aktuálním webu chybí a nový web by to měl obsahovat.

Základní info

Technologie: React, TypeScript, Gatsby, Storybook

Požadavky na výsledné řešení:

• Komponenty by neměly obsahovat žádný stav
• Obrázky budou vkládány jako URL (i ilustrace, zabarvení bude řešeno v rámci obrázku)
• Obrázky budou lazy loaded (lze vytvořit něco jako univerzální komponentu pro obrázek, která bude využívat lazy loading by default)
• Rozhraní by mělo být srozumitelné pokud jde o umístění (pojmenování místa, indexace, rozdělení na třetiny atd.)
• Komponentu rovnou využít na hlavní stránce (pages/index.ts)

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

V případě nejasností se nebojte zeptat zde pod issue nebo na Slacku jednoho z techleadů. Jeden z nich vám bude k dispozici po celou dobu vývoje. 🙂

Základní info

Technologie: React, TypeScript, Gatsby, Storybook

Požadavky na výsledné řešení:

• Komponent by neměla obsahovat žádný stav
• Rovnou použít na stránce s projekty
• Fotka bude vložena jako URL (např. https://via.placeholder.com/768x287)
• Ilustrace na pozadí bude jako React komponenta (viz existující ikony a ilustrace)

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

V případě nejasností se nebojte zeptat zde pod issue nebo na Slacku jednoho z techleadů. Jeden z nich vám bude k dispozici po celou dobu vývoje. 🙂

Lighthouse je nástroj pro kontrolu rychlosti webu, přístupnosti, SEO atd. Bylo by fajn mít kontrolu těchto vlastností webu automatizovanou jako GitHub action.

Co je nutné vyřešit:

• Jaké nastavit "tresholds" pro začátek?
• Jak by měla kontrola ovlivnit přispívání do repozitáře? Např. je v pořádku, že nová funkcionalita bude blokována kvůli performance?

Technologie: Datové modelování, AirTable, JSON

V rámci #64

AirTable budeme využívat jako CMS. Je potřeba namyslet strukturu tabulky projektů a JSONu, který bude použit při buildu webu a bude synchronizován pomocí synchronizační služby. Tedy:

• Jaké vlastnosti projektu pro stránku potřebujeme?
• Jak informace strukturovat v AirTable a v JSON?

Pro vývoj doporučuji založit si vlastní AirTable účet a workspace, produkční nasazení vyřešíme poté (tabulka projektů už existuje a jen ji rozšíříme).

Synchronizační službu si lze představit jako package.json script generate:data a build. Ten bude spouštěn manuálně pomocí GitHub Action a bude generovat obsah webu např. do ignorované složky content.

Figma pro vizuální představu: link

V případě nejasností nebojte se na mne obrátit. 🙂

Technologie: React, TypeScript, Gatsby

V rámci #64

Implementovat navigaci pro podstránky. Nutné vymyslet způsob zisku cesty z konkrétní URL včetně názvy stránek. Výsledkem by měla být univerzální komponenta, která se použije v Layout komponentě nebo samostatně.

Je nutné počítat s překlady (#68). Komponenta by měla využít existující komponenty tlačítka (#65).

Figma: link

V případě nejasností nebojte se na mne obrátit. 🙂

Storybook pomůže vývojáři se rozkoukat, jaké možnosti při sestavování stránek má. Více na https://storybook.js.org/

Bylo by dobré připravit Storybook tak, aby vývojářovi bylo zcela jasné, jaké rozhraní komponenta má a jaké všechny způsoby použití jsou možné.

Předpokládaná struktura by mohla být:

• Typografie
• Barvy
• Tlačítka
• ...

Design komponent ještě není hotový, ale postup lze sledovat ve Figmě

Technologie: React, TypeScript, Gatsby, Styled-components

V rámci #128

Vytvořit komponentu dle designu. Komponenta bude brát pole projektů s informacemi, která bude rendrovat karticky komponent (#69).

Komponenta by měla využít komponentu karta projektu z #69.

V případě nejasností nebojte se na mne obrátit. 🙂

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

Je potřeba:
– přidat sekci Hodnoty a Projekty,
– aktualizovat informace o dalším meetupu,
– skrýt sekci pro média (?),
– aktualizovat navigaci v hlavičce a patičce (odstranit Kdo jsme a Média, přidat Hodnoty a Projekty),
– aktualizovat počet členů,
– odrazit c2a odkazy na nové řádky v sekci "Co je Česko.Digital".

Technologie: React, Gatsby, TypeScript, Formik

V rámci implementace stránky projektů (#64) jsme měli issue na implementaci patičky (#75). Nicméně task narostl a dokonce začal být závislý na implementaci API endpointu pro Newsletter (#107), takže jsme zamergovali část bez newsletter sekce a tento task má cíl dokončit tuto sekci.

Zdrojové kódy se styly pro patičku, které lze a není potřeba využít, jsou k dispozici v backup/rework/newsletter_footer.

Pár požadavků na výsledné řešení:

• Využít Formik.
• Logika formu by měla být oddělená do jednotného rozhraní pro komponentu, viz příklad v následujícím komentáři.

Figma: link

V případě nejasností se nebojte na mne obrátit na Slacku. 🙂

Technologie: React, TypeScript, Gatsby

V rámci #64

Web od začátku bude mít všechny texty v AirTable a bude pracovat s překlady. V rámci tohoto issue je nutné navrhnout systém překladů v AirTable (jedna nebo více tabulek), výsledné struktuře pro web (JSON) a systém použití v komponentách (využití Gatsby nástrojů, vlastní nástroj?).

Datová služba pro zisk dat bude volána před samotným buildem a bude převádět AirTable data do JSON. Zatím není jasná podoba, ale lze si představit package.json script generate:data a build, který pak bude spouštěn manuálně pomocí GitHub Action.

Řešením by ideálně měla být dokumentace pomocí Storybooku/README a použití překladu v nějaké komponentě (datový script, pokud neexistuje, může vytvořit jednoduchý JSON v ignorované složce).

Figma pro vizuální představu: link

V případě nejasností nebojte se na mne obrátit. 🙂

Přidat na stávající web stuhu s informací o tom, že jsme dostali cenu Sustainable Development Goals. Stužka by měla být klikatelná a odkazovat sem.

Představa layoutu v přiložených souborech - je možné, že bude nutné ladit velikost stuhy. Potřebné soubory přiloženy též.

Součástí našeho vizuálního stylu je stylizovaná ikonka. Měla by odrážet počet lidí v Česko.Digitál, kteří už přispěli kusem svého času a práce.

Kvůli tomu bychom chtěli dynamicky generovat číslo v přiloženém SVG (a rozšiřovat tu červenou bublinku notifikace v závislosti na počtu číslic).

Zadání: pro API call (ve formátu GET http://api.cesko.digital/icon?input=123 vygeneruj ikonku s číslem 123.

Cesko-Digital_ikona.svg.zip

Jedná se o překlad textů tady:

https://github.com/cesko-digital/web/blob/master/src/index.pug#L88-L134

Klidně můžete dodat i jen samotné texty a do stránek je zadá někdo další.

Viz Figma

Popis bude vylepšen.

Technologie: React, TypeScript, Gatsby

V rámci #64

Vytvořit komponentu dle designu. Komponenta nemusí mít žádný vstup, ale je nutné počítat s překlady (#68), tj. zatím lze texty odkazů extrahovat do JSON (viz patička).

Komponenta by měla využít existující komponenty tlačítka (#65) a layoutu (#67).

Figma: link

V případě nejasností nebojte se na mne obrátit. 🙂

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

Popis bude rozšířen

Technologie: React, TypeScript, Styled Components, Gatsby

Upravit mobilní menu, aby mělo mít tlačítka s výškou a šířkou definovanou ve Figmě (odkaz bude klikatelný přes celou šířku displeje).

Figma: link

Viz Figma, využít stávající komponenty

Popis bude vylepšen.

Technologie: React, TypeScript, Gatsby

V rámci #64

Vytvořit stateless komponentu dle designu s předpokládaným vstupem:

• Název
• Popis
• Ikona
• Odkaz na Slack

Komponenta by měla využít komponentu tlačítka z #65.

Na co nezapomenout:

• Komponenta by neměla mít žádný stav
• Přidat dokumentaci (story) do Storybooku
• Odklonit se od větve rework

Figma: link

V případě nejasností nebojte se na mne obrátit. 🙂

• Vizuálně i obsahově stejně jako na blogu.
• Pro verzi v master (ne rework)

Technologie: TypeScript, Gatsby, AirTable

V rámci #64

AirTable bude použit jako CMS pro web. Zde data budou uložena v určité struktuře (#70). Je potřeba implementovat synchronizační službu, která bude schopná získat data z AirTable a převést je do určité JSON struktury pro build webu.

Cílem tohoto issue je hlavně nalezení, jakým způsobem bude prováděna synchronizace a následný build webu. Samotná konverze AirTable tabulky do JSON struktury není tak důležitá.

Nápady na možná řešení (nutno prozkoumat pro a proti):

• package.json scripty get:data a build spouštějící gatsby build tak jak je, data budou importována přímo v komponentách
• vytvořit GraphQL model za použití existujících Gatsby pluginů
• vlastní Gatsby plugin

Figma pro vizuální představu: link

V případě nejasností nebojte se na mne obrátit. 🙂

Technologie: React, TypeScript, Gatsby

V rámci #64

Vytvořit komponentu dle designu. Komponenta nemusí mít žádný vstup, ale je nutné počítat s překlady (#68).

Komponenta by měla využít komponentu tlačítka z #65.

Figma: link

V případě nejasností nebojte se na mne obrátit. 🙂

Technologie: React, Gatsby, TypeScript, Styled-components

Vytvořit komponentu která zobrazuje seznam log partnerů.

Jak by komponenta měla fungovat:

• Komponent bere pole obrázků a použitím map je vyzobrazí
• Komponent by měla být responzivní na základě designu.
• Lokalizovaný header s nadpisem

V případě nejasností se nebojte zeptat zde pod issue nebo na Slacku jednoho z techleadů. Jeden z nich vám bude k dispozici po celou dobu vývoje. 🙂

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

Link na Figmu

Jakým způsobem reprezentovat data, aby byly editovatelná v CMS?

Jaké informace držíme v AirTable?

Jaký je výhled?

Jaká je MVP cesta?

EDIT - Výstupy:

• Data o projektech budou v repozitáři, budou asynchronně získávány s AirTable
• Synchronizace dat s AirTable řešena v #50

Během dnešní diskuse s @radkoa jsme narazili na téma GDPR. Výhledově bychom na web (i blog) chtěli přidat solidní dialog ohledně nastavení cookies. Issue je tu, aby myšlenka nezapadla a pro tvorbu základní specifikace.

Technologie: React, Gatsby, TypeScript, Styled-components

Vytvořit komponentu která zobrazuje stav projektu.

Komponenta se bude zkládat z několika menších komponent:

• Progress line u právě probíhá - Komponenta bude brát jako prop procento dokocení projektu například percent={50}
• Použít nebo vyrobit Avatar komponetu 👉 #126
• U odkazů vyrobit komponentu pro social media. Komponenta by měla brát jako props logo, url a name
• Button je už vytvořený zde 👉 #65

V případě nejasností se nebojte zeptat zde pod issue nebo na Slacku jednoho z techleadů (@HormCodes nebo @tuanphungcz). Jeden z nich vám bude k dispozici po celou dobu vývoje. 🙂

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

Na úzkých displejích už se tlačítka pod projekty nevejdou.

Vytvoření stránky pro seznam projektů s odsouhlaseným vzhledem napojenou na zdroj dat z API. Základní potřeby stránky shrnují potřeby:

Abych se jako dobrovolník mohl přidat k projektům, chci vidět seznam dokončených a aktivních projektů.

Abych se jako novinář mohl dozvědět více informací o činnosti na projektech, chci vidět seznam dokončených a aktivních projektů.

Scénáře:

Vlastnost: Uživatelé webové stránky vidí aktivní a dokončené projekty

Scénář: Aktivní a dokončené projekty jsou zobrazeny
Scénář: Aktivní projekty mají jiné šablony než dokončené
Scénář: Projekty lze zobrazit s omezeným množstvím informací
Scénář: Data o projektech jsou načteny
Scénář: Změny v datech jsou propagovány do webu
Scénář: Jednotlivé prvky webu odpovídají vizuální identitě
Scénář: Celkový vzhled stránky odpovídá vizuální identitě
Scénář: Stránka seznamu projektů využívá jednotných komponent

Nápad na vylepšení.

Nebylo by od věci nainstalovat Huskyho a nastavit pre-commit hook pro scripty format (a případně i lint:fix).

Stává se, že člověk zapomene před commitem spustit příkazy ručně a CI pak zbytečně failuje.

Ušetřilo by to zbytečnou práci a v kombinaci s lint-staged by to ani tolik neprotahovalo dobu commitění.

Technologie: React, TypeScript, Gatsby

V rámci #64

Vytvořit stateless komponentu pro základní responzivní layout. Na větších rozlišeních by se obsah stránky měl vycentrovat, na nižších naopak získat co nejvíce prostoru.

Co je nutné vyřešit:

• Kostra by měla sloužit pro obsah, hlavičku i patičku. Tyto sekce (i sekce obashu) mohou mít rozdílné barvy pozadí.
• Navrhnou vhodné rozhraní pro komponentu a její použití. (Dají se očekávat komponenty typu pages/{main,projects}, {header,footer,content}, seo atd.)

Na co nezapomenout:

• Komponenta by neměla mít žádný stav
• Přidat dokumentaci (story) do Storybooku
• Odklonit se od větve rework

Figma pro představu rozdílných barevných pozadí: link

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

Popis bude rozšířen

Technologie: React, Gatsby, TypeScript, Styled-components

Vytvořit komponentu která je bere img a zobrazuje fotografii projektu a zakomponovat na stránku Detail projektu včetně nadpisu a tagline.

Specifikace implementace:

• Komponent by měla být responzivní na základě designu.
• Nastylovat na základě designu v Figmě
• Obrázek by měl být lazy loaded (použít nativní atribut)
• Nezapomenout na mobilní verzi (cover přes celou šířku - viz Figma)
• Data (odkaz na cover, jméno a tagline projektu) by měly pocházet z GQL query

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

V případě nejasností se nebojte zeptat zde pod issue nebo na Slacku jednoho z techleadů (@tuanphungcz nebo @HormCodes ). Jeden z nich vám bude k dispozici po celou dobu vývoje. 🙂

Technologie: GitHub Actions, Vercel, AirTable
V rámci #64

AirTable bude sloužit jako CMS a budeme mít k dispozici datovou službu pro synchronizaci dat (#71). Je potřeba najít způsob, jakým bude možné spustit build webu a nasadit nová data na produkci.

Web je/bude hostován pomocí Vercel.

Nápady na nástroje, které by se daly použít:

• GitHub Actions
• Vercel Deploy Hook
• AirTable Automations
• Slack Identity

Požadavky:

• Trigger by měl být za autentizací
• Editace dat v AirTable budou provádět i lidé bez znalosti Gitu, bylo by dobré na to pamatovat

Figma pro vizuální představu: link

V případě nejasností nebojte se na mne obrátit. 🙂

Technologie: React, TypeScript, Gatsby

V rámci #64

Vytvořit stateless komponentu pro tlačítko podle vizuálního stylu >Č.D. Rozhraní komponenty je otevřené, ale představuji si mít něco jako:

<Button>
   type={ButtonTypes.Normal}
   size={...}
   disabled={false}
   onClick={() => console.log('Hello!')}
<Button>
   Click Here!
</Button>

Na co nezapomenout:

• Komponenta by neměla mít žádný stav
• Přidat dokumentaci (story) do Storybooku
• Odklonit se od větve rework

Figma: link

V případě nejasností nebojte se na mne obrátit. 🙂

Link na Figmu

Jakým způsobem reprezentovat data, aby byly editovatelná v CMS?

Jaké informace držíme v AirTable?

Jaký je výhled?

Jaká je MVP cesta?

EDIT - Výstupy:

• Krátké texty budou blízko v šablonách přímo nebo jako datový objekt v komponentě stránky
• V první verzi budou vše statické (dynamická počítadla, info o projektech z AirTable atd. bude implementováno v druhém běhu)
• Anglická verze bude custom stránka
• Synchronizace dat s AirTable řešena v #50

Na hlavní stránce bychom měli mít sekci hodnotách Česko.Digital. Aktuální web sice něco obdobného obsahuje, ale rádi bychom to rozšířili.

Základní info

Technologie: React, TypeScript, Gatsby, Storybook

Požadavky na výsledné řešení:

• Komponenty by neměly obsahovat žádný stav
• Ikony budou vkládány jako React komponenta
• Komponentu rovnou využít na hlavní stránce (pages/index.ts)
• Komponenta by měla mít datový vstup (seznam hodnot)

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

V případě nejasností se nebojte zeptat zde pod issue nebo na Slacku jednoho z techleadů. Jeden z nich vám bude k dispozici po celou dobu vývoje. 🙂