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
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: 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. 🙂
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
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ší.
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.
Na úzkých displejích už se tlačítka pod projekty nevejdou.
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, 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ě
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. 🙂
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.
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. 🙂
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. 🙂
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: 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. 🙂
Viz Figma
Popis bude vylepšen.
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. 🙂
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á 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. 🙂
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ě
Viz Figma, využít stávající komponenty
Popis bude vylepšen.
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. 🙂
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".
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, 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
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
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, 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
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. 🙂
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?
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
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. 🙂
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. 🙂
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: 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. 🙂
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, 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, 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ě
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éž.
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: 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. 🙂
master
(ne rework
)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. 🙂
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ě
Zatím issue pro brainstorming. Možné položky:
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: 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 šablonyA 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.