Salutare!
Bine-ai venit în proiectul de resurse digitale, prin care transformăm link-urile din Google Doc-ul făcut de mine acum mai mult timp într-un website funcțional care să ajute oamenii să parcurgă resursele de învățare mai eficient.
Vezi toată seria de video-uri 🔴LIVE de pe YouTube în care am generat codul pentru acest proiect în playlist-ul Resurse.dev de aici →.
Proiectul e abia la început, și dacă vrei să te implici, orice contribuție de-a ta este binevenită! Citește regulile și ghidul despre cum să contribui și ajută-ne să facem proiectul ăsta cel mai bun loc din care să alegi ce resurse să folosești pentru învățare! Contribuitorii majori vor fi menționați în humans.txt
.
Documentul curent este momentan în 🇷🇴 Română, însă cel mai probabil la finalul v1.0 va fi bilingv (inclusiv în 🇬🇧 Engleză) pentru a stimula oameni din toate colțurile lumii să se alăture pentru a contribui la proiect și a semnala potențiale probleme. Restul documentației și task-urile din GitHub Project-ul unde poți vedea statusul tuturor issue-urilor create vor fi exclusiv în 🇬🇧 Engleză.
This project began in a 🇷🇴 Romanian community, so please excuse the almost entirely Romanian content in this README.md
- we will translate this document in 🇬🇧 English by the end of v1.0.
- Lista de resurse generale - 1600 link-uri pe care le transformăm din Google Docs în website (bonus: Lista de resurse de JS pentru cine vrea să învețe Vue)
- Design-ul în Figma
- Inspirația de design
Ne-am mai inspirat de aici ca să facem proiectul curent:
- Tutorial oficial al Astro 3.0
- Componente: https://github.com/markteekman/accessible-astro-starter + https://www.accessible-astro.dev/accessible-components/ + https://github.com/markteekman/accessible-astro-components + https://github.com/shaunchander/astro-pwa-starter
- Integrări din care vrem să testăm:
-
@astrojs/mdx
-
@astrojs/sitemap
-
astro-compress
vsastro-compressor
vsastro-html-minifier
-
astro-seo
-
astro-seo-meta
-
astro-seo-schema
-
astro-robots-txt
-
vite-plugin-pwa
+astro-webmanifest
-
@astrojs/partytown
-
astro-i18next
-
typescript
+@typescript-eslint/eslint-plugin
+@typescript-eslint/parser
-
eslint
+eslint-plugin-astro
+eslint-plugin-jsx-a11y
-
sass
-
svgo
-
@astro-community/astro-embed-youtube
+@astro-community/astro-embed-twitter
-
astro-purgecss
-
@astrojs/vercel
vs@astrojs/netlify
vs@astrojs/cloudflare
vs@astrojs/deno
pentru deploy -
astro-icon
(optional) testat? -
@sendgrid
(optional) pentru email? -
accessible-astro-components
(optional) ca să „furăm” cod de aici? -
@astrojs/tailwind
+tailwindcss
(optional) -
prettier
+prettier-plugin-astro
+prettier-plugin-tailwindcss
(optional)
-
Întâi, clonează repository-ul curent:
git clone https://github.com/ViorelMocanu/digital-resources.git
BONUS: dacă ești pe Winblows Windows, asigură-te că faci pașii următori într-o consolă cu drepturi de Administrator. Fie deschide VSCode sau IDE-ul tău preferat cu consolă atașată cu click dreapta > Run as Administrator
fie rulează cmd.exe
sau powershell.exe
cu drepturi de Admin.
Asigură-te că ai ultima versiune de Node instalată de pe site-ul oficial Node.js. Ideal e să ai minim versiunea 18.18.0
. Poți verifica versiunea instalată cu comanda:
node -v
Mai asigură-te că ai instalat și ultima variantă de PNPM, urmând instrucțiunile de pe site-ul PNPM, sau rulează una din comenzile următoare.
Pentru Windows:
iwr https://get.pnpm.io/install.ps1 -useb | iex
Pentru POSIX / Mac / Linux / *nix cu librăria curl
disponibilă:
curl -fsSL https://get.pnpm.io/install.sh | sh -
Ideal e să ai minim versiunea de PNPM 8.8.0
. Poți verifica versiunea instalată cu comanda:
pnpm -v
Apoi, instalează dependințele din package.json
:
pnpm install
Apoi, pornește proiectul local:
pnpm dev
Deschide browser-ul la adresa: http://localhost:4321 ca să vezi proiectul rulând la tine local.
Dacă faci schimbări în arhitectura informațională din ./content
în special în ./content/config.ts
asigură-te că se re-construiește referința de TypeScript pentru conținut rulând:
pnpm astro sync
Dacă vrei să compilezi o variantă deployabilă a proiectului care generează toate rutele statice și fișierele necesare pentru deploy, rulează:
pnpm build
Toate comenzile sunt rulate din root-ul proiectului, dintr-un terminal:
Command | Action |
---|---|
pnpm install |
Instalează dependințele |
pnpm dev |
Pornește serverul local de Astro la localhost:4321 |
pnpm start |
Pornește serverul local de Astro la localhost:4321 |
pnpm build |
Construiește site-ul de producție la ./dist/ |
pnpm preview |
Fă un preview al site-ului local înainte de deploy |
pnpm astro ... |
Rulează comenzi CLI cum ar fi astro add , astro check |
pnpm astro -- --help |
Afișează comenzile disponibile în Astro CLI |
pnpm format |
Validează codul local folosind Prettier și prettier-plugin-astro |
pnpm format:fix |
Validează și corectează codul folosind Prettier (atenție: poate fi distructiv) |
pnpm lint:js |
Validează fișierele JavaScript, TypeScript și Astro locale folosind ESLint |
pnpm lint:md |
Validează fișierele Markdown locale folosind MarkdownLint |
pnpm lint:fix |
Validează și corectează fișierele JavaScript, TypeScript și Markdown locale |
pnpm lint |
Validează fișierele JavaScript, TypeScript, Astro și Markdown cu ESLint / MarkdownLint |
pnpm typecheck |
Validează type-urile de TypeScript folosind TSC și tsconfig.json |
Dacă ai observat un bug și vrei să-l semnalezi, urmează documentația aferentă de aici: CONTRIBUTING.md.
Înăuntrul proiectului Astro, vei vedea următoarele foldere și fișiere:
/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ └── Header.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
└── package.json
Astro caută fișiere cu extensia .astro
sau .md
în interiorul folder-ului src/pages/
și le randează. Fiecare pagină este expusă ca o rută bazată pe numele fișierului.
Nu e nimic special cu folder-ul src/components/
, doar că acolo ne punem în mod uzual componentele de tip Astro/React/Vue/Svelte/Preact.
Toate resursele statice în afară de imagini ar trebui puse în directorul public/
, iar imaginile ar trebui puse în src/img/
pentru a folosi noile componente <Image />
și <Picture />
din Astro 3.0.
Te așteptăm pe server-ul de Discord, canalul de YouTube sau grupul de Facebook cu drag!
Pe canalul de YouTube am strâns până acum:
Dacă simți că poți contribui financiar la această inițiativă, inclusiv să susții video-urile lui Viorel și materialele ajutătoare pe care le produce, îl poți sponsoriza aici:
Contribuțiile voastre vor ajuta la crearea de mai mult conținut pentru voi și la finalizarea mai rapidă a proiectului actual. Toți banii din investiții se întorc la comunitate, indirect, prin sprijinul acordat lui Viorel.
Merci! ❤️