Resurse digitale: Resurse.dev

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ă.

Quick note in 🇬🇧 English

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.

✅ Link-uri utile

1. 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)
2. Design-ul în Figma
3. 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 vs astro-compressor vs astro-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)

---

🕹️ Cum pornești proiectul?

Î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

🧞 Comenzile disponibile

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

🛑 Semnalează un bug sau contribuie

Dacă ai observat un bug și vrei să-l semnalezi, urmează documentația aferentă de aici: CONTRIBUTING.md.

🚀 Structura proiectului

Î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.

👋 Vrei să discuți cu noi?

Te așteptăm pe server-ul de Discord, canalul de YouTube sau grupul de Facebook cu drag!

Pe serverul de Discord sunt:

Pe canalul de YouTube am strâns până acum:

💸 Sponsorizează inițiativa

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! ❤️

Viorel Mocanu, Consultant digital și creator de conținut.

Resurse