cesko-digital / app Goto Github PK
View Code? Open in Web Editor NEWKomunitní aplikace Česko.Digital
Home Page: https://app.cesko.digital
License: BSD 3-Clause "New" or "Revised" License
Komunitní aplikace Česko.Digital
Home Page: https://app.cesko.digital
License: BSD 3-Clause "New" or "Revised" License
Zatím issue pro brainstorming. Možné položky:
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?
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. 🙂
Přidat GitHub actions a nastavit automatickou kontrolu pro:
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.
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):
get:data
a build
spouštějící gatsby build
tak jak je, data budou importována přímo v komponentáchFigma pro vizuální představu: 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:
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:
Avatarama
dobrovolníkůJak by měla komponta Avatar vypadat:
img
. V případě že není, komponenta by měla zobrazit šedý backgroundname
a position
dobrovolníka, které se na základě propu pozicuje vedla nebo pod Avatarem
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 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:
Design komponent ještě není hotový, ale postup lze sledovat ve Figmě
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í:
Figma: link
V případě nejasností se nebojte na mne obrátit na Slacku. 🙂
Technologie: React, TypeScript, Gatsby
V rámci #64
Vytvořit stateless komponentu dle designu s předpokládaným vstupem:
Komponenta by měla využít komponentu tlačítka z #65.
Na co nezapomenout:
rework
Figma: link
V případě nejasností nebojte se na mne obrátit. 🙂
Na úzkých displejích už se tlačítka pod projekty nevejdou.
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
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.)
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:
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:
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. 🙂
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ší.
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
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:
Požadavky:
Figma pro vizuální představu: link
V případě nejasností nebojte se na mne obrátit. 🙂
Technologie: React, TypeScript, Cypress
Napojení API newsletteru na formulář v patičce
Na co nezapomenout:
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: 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, TypeScript, Gatsby
V rámci #64
Vytvořit stateless komponentu dle designu s předpokládaným vstupem:
Komponenta by měla využít komponentu tlačítka z #65.
Na co nezapomenout:
rework
Figma: link
V případě nejasností nebojte se na mne obrátit. 🙂
master
(ne rework
)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, 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
Popis bude vylepšen.
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: 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. 🙂
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, 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:
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. 🙂
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.
Technologie: React, TypeScript, Gatsby, Storybook
Požadavky na výsledné řešení:
pages/index.ts
)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. 🙂
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, 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. 🙂
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, 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. 🙂
Aktuální verze se nachází ve Figmě
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:
rework
Figma: link
V případě nejasností nebojte se na mne obrátit. 🙂
Viz Figma, využít stávající komponenty
Popis bude vylepšen.
Technologie: React, TypeScript, Gatsby, Storybook
Požadavky na výsledné řešení:
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. 🙂
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:
Na co nezapomenout:
rework
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:
map
je vyzobrazí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. 🙂
Aktuální verze se nachází ve Figmě
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.
Technologie: React, TypeScript, Gatsby, Storybook
Požadavky na výsledné řešení:
pages/index.ts
)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. 🙂
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:
pages/{main,projects}
, {header,footer,content}
, seo
atd.)Na co nezapomenout:
rework
Figma pro představu rozdílných barevných pozadí: link
Technologie: Gatsby, TypeScript, React
Požadavky na vývoj:
gatsby-node.ts
/projekty/ucime-online
a /en/projects/online-teaching
(dávat pozor, aby se negenerovali mutace typu /en/projekty/ucime-online
)slug
v rámci šablonyPř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.
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?
Technologie: React, Gatsby, TypeScript, Styled-components
Vytvořit komponentu která zobrazuje stav projektu.
Komponenta se bude zkládat z několika menších komponent:
percent={50}
Avatar
komponetu 👉 #126logo
, url
a name
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. 🙂
Aktuální verze se nachází ve Figmě
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.