From 64e20e9fc1870aca02943fe5e02655e55e2ac073 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Wed, 18 Jan 2023 16:19:21 +0400 Subject: [PATCH] Add links to roadmaps from FAQs on the frontend roadmap --- package.json | 1 + pnpm-lock.yaml | 33 +++++++++++++++++++++++++++++++- src/components/FAQs/Answer.astro | 2 +- src/components/FAQs/FAQs.astro | 5 ++++- src/roadmaps/frontend/faqs.astro | 4 ++-- 5 files changed, 40 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index e6d13a187..5f5164739 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@tailwindcss/typography": "^0.5.9", "gh-pages": "^4.0.0", "json-to-pretty-yaml": "^1.2.2", + "markdown-it": "^13.0.1", "prettier": "^2.8.3", "prettier-plugin-astro": "^0.7.2" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f43e6d400..a4683cf96 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,6 +9,7 @@ specifiers: astro-compress: ^1.1.27 gh-pages: ^4.0.0 json-to-pretty-yaml: ^1.2.2 + markdown-it: ^13.0.1 node-html-parser: ^6.1.4 npm-check-updates: ^16.6.2 prettier: ^2.8.3 @@ -33,6 +34,7 @@ devDependencies: '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.4 gh-pages: 4.0.0 json-to-pretty-yaml: 1.2.2 + markdown-it: 13.0.1 prettier: 2.8.3 prettier-plugin-astro: 0.7.2 @@ -937,7 +939,6 @@ packages: /argparse/2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} - dev: false /array-iterate/2.0.1: resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==} @@ -1777,6 +1778,11 @@ packages: once: 1.4.0 dev: false + /entities/3.0.1: + resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==} + engines: {node: '>=0.12'} + dev: true + /entities/4.4.0: resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==} engines: {node: '>=0.12'} @@ -2993,6 +2999,12 @@ packages: resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==} engines: {node: '>=10'} + /linkify-it/4.0.1: + resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==} + dependencies: + uc.micro: 1.0.6 + dev: true + /load-yaml-file/0.2.0: resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==} engines: {node: '>=6'} @@ -3136,6 +3148,17 @@ packages: - supports-color dev: false + /markdown-it/13.0.1: + resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==} + hasBin: true + dependencies: + argparse: 2.0.1 + entities: 3.0.1 + linkify-it: 4.0.1 + mdurl: 1.0.1 + uc.micro: 1.0.6 + dev: true + /markdown-table/3.0.3: resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==} dev: false @@ -3301,6 +3324,10 @@ packages: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} dev: false + /mdurl/1.0.1: + resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==} + dev: true + /merge-stream/2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} dev: false @@ -5293,6 +5320,10 @@ packages: hasBin: true dev: false + /uc.micro/1.0.6: + resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==} + dev: true + /unherit/3.0.1: resolution: {integrity: sha512-akOOQ/Yln8a2sgcLj4U0Jmx0R5jpIg2IUyRrWOzmEbjBtGzBdHtSeFKgoEcoH4KYIG/Pb8GQ/BwtYm0GCq1Sqg==} dev: false diff --git a/src/components/FAQs/Answer.astro b/src/components/FAQs/Answer.astro index d28a283c4..fe60d9748 100644 --- a/src/components/FAQs/Answer.astro +++ b/src/components/FAQs/Answer.astro @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/src/components/FAQs/FAQs.astro b/src/components/FAQs/FAQs.astro index cd6a54f89..ce97d8ec6 100644 --- a/src/components/FAQs/FAQs.astro +++ b/src/components/FAQs/FAQs.astro @@ -1,7 +1,10 @@ --- +import MarkdownIt from 'markdown-it'; import Answer from './Answer.astro'; import Question from './Question.astro'; +const md = new MarkdownIt(); + export type FAQType = { question: string; answer: string[]; @@ -30,7 +33,7 @@ if (faqs.length === 0) { {faq.answer.map((answer, index) => ( -

{answer}

+ ))} diff --git a/src/roadmaps/frontend/faqs.astro b/src/roadmaps/frontend/faqs.astro index 3b30e9b43..716cbdfc0 100644 --- a/src/roadmaps/frontend/faqs.astro +++ b/src/roadmaps/frontend/faqs.astro @@ -5,7 +5,7 @@ export const faqs: FAQType[] = [ { question: 'What is Frontend Development?', answer: [ - "Front-end development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and JavaScript, where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity.", + "Front-end development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and [JavaScript](/javascript), where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity.", "As a front-end developer, you'll be responsible for creating the user interface of a website, to ensure it looks good and is easy to use, with great focus on design principles and user experience. You'll be working closely with designers, back-end developers, and project managers to make sure the final product meets the client's needs and provides the best possible experience for the end-users.", ], }, @@ -19,7 +19,7 @@ export const faqs: FAQType[] = [ { question: 'How to become a Frontend Developer?', answer: [ - "Start with learning HTML and CSS; don't wait to fully master these and start building simple projects as soon as possible. You could try rebuilding the frontend of your favorite websites using HTML and CSS to start with. Do as many of these projects as possible as you keep learning. Once you are somewhat comfortable with HTML and CSS, start learning some basic JavaScript (DOM manipulation, making AJAX calls etc) and learn how to add interactivity to your websites. While you are at it learn some basics of Git and GitHub. At this point you should be able to get an entry level frontend development job. Keep revisiting this roadmap and try to fill the gaps in your knowledge.", + "Start with learning HTML and CSS; don't wait to fully master these and start building simple projects as soon as possible. You could try rebuilding the frontend of your favorite websites using HTML and CSS to start with. Do as many of these projects as possible as you keep learning. Once you are somewhat comfortable with HTML and CSS, start [learning some basic JavaScript](/javascript) (DOM manipulation, making AJAX calls etc) and learn how to add interactivity to your websites. While you are at it learn some basics of Git and GitHub. At this point you should be able to get an entry level frontend development job. Keep revisiting this roadmap and try to fill the gaps in your knowledge.", ], }, {