import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax } from '/scripts/import.js';

const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");

heading.append(addTitle("Building Modern Projects with React"));
heading.append(addParagraph("Shaun Wassell - LinkedIn Learning - November 2024"));
heading.append(addParagraph("Conclusion"));

main.append(addSubHeader("Next Steps for Building with React"));


addSidebar("webdev");
sidebar.append(addSubHeader("Some useful links:"));
sidebar.append(addParagraph("A link to <a href='https://www.linkedin.com/learning/building-modern-projects-with-react-24955170'>this course</a>."));
sidebar.append(addParagraph("<a href='https://www.dhiwise.com/post/react-build-tools-create-react-app-with-vite-vs-cra-tool'>React Build Tools: Create React App with Vite Vs. CRA</a>."));
sidebar.append(addSubHeader("Documentation and Guides"));
sidebar.append(addParagraph("<a href='https://webpack.js.org/concepts/'>Webpack Documentation</a>."));
sidebar.append(addParagraph("<a href='https://webpack.js.org/guides/'>Webpack Guides</a>."));
sidebar.append(addParagraph("<a href='https://devdocs.io/vite/'>Vite Documentation</a>."));
sidebar.append(addParagraph("<a href='https://www.tatvasoft.com/outsourcing/2024/07/vite-vs-create-react-app.html'>Getting Started with Vite</a>."));
sidebar.append(addParagraph("<a href='https://nextjs.org/docs'>Next.js Documentation</a>."));
sidebar.append(addParagraph("<a href='https://remix.run/docs/en/main'>Remix Documentation</a>."));
sidebar.append(addParagraph("<a href='https://remix.run/guides/templates'>Remix Templates</a>."));
sidebar.append(addSubHeader("Related Courses on LinkedIn"));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/databases-for-node-js-developers-2021'>Databases for node.js Developers</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/learning-node-js-2017'>Learning node.js</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/advanced-express'>Advanced Express</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/node-js-securing-restful-apis-2'>Securing Restfuk APIs</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/mongodb-essential-training'>MongoDB Essential Training</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/next-js-creating-and-hosting-a-full-stack-site'>Next.js: Creating and Hosting a Full-Stack Site</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/react-creating-and-hosting-a-full-stack-site-24928483'>React: Creating and Hosting a Full-Stack Site</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/remix-essential-training'>Remix Essential Training</a>."));
sidebar.append(addParagraph("<a href='https://www.linkedin.com/learning/emerging-web-frameworks'>Emerging Web Frameworks</a>."));