Site Architecture

Site Architecture

Pages

Home page

Purpose: current home page that will be the landing page at site launch

Path: src/pages/Home

Structure:

• index.js is the parent file that contains its own style section and Home, MarketingSection, and CallToAction components
• sections subdirectory contains NotableUsersSection.js and TrendingTopicsSection.js components
• There is a notableUsers list that is defined in NotableUsersSection.js that contains info for CTI contributor orgs
• index.js imports NotableUsersSection and TrendingTopicsSection. It also imports GetStartedCard from src/components
• Home component contains all of the home page and displays the following components from top to bottom: MarketingSection, CallToActionSection, NotableUsersSection, TrendingTopicsSection, GetStartedCard

How to Add Your Project

Purpose: It shows the steps how to add topic tags to your project.

Path: src/pages/HowToAdd

Structure:

• HowToAdd component in the main file index.js, which contains its own style section and ImageComponent component, SettingsGearIcon component.
• ImageComponent component in src/components uses CardMedia Material UI component for displaying the images.
• SettingGearIcon component in src/components uses svg which is used to define vector-based-graphics and path is an element in svg library which defines a path that starts from a position and ends to a particular position. The path element uses attribute d which uses M which is used for moving a point to a certain location.

About page

Purpose: provides information on the organization's project

Path: src/pages/About

Structure:

• About is the parent component that is exported to App.js to render this page in the DOM.
• index.js is the parent file containing formatting and an object for mapping the images of the page
• A Grid component contains an iframe slideshow explaining various aspects of the project
• styles.js contains the styling for the page

Header component

Purpose: provides site navigation Links and subLinks in two display sizes

Path: src/components/Header

Structure:

• Header is the parent component exported from the index.js file contained within the Header folder.
• Header is imported into to the index.js file of the components folder where it is exported to the Layout component found under src/components/common/Layout.js where it is exported using withRouter from react-router-dom. The Layout component wraps the Switch component imported from the react-router-dom package in the App component which handles the routing in src/App.js.
• The Header component is broken down into several smaller components with separate files: index, HeaderLarge, HeaderSmall, DropdownList, SearchContainer, NavLink and NavSublink. Several files make use of the navigation array exported from the src/navigation.js file. The Header folder also contains a separate styles.js sheet which provides styling to each of the components.
• index.js exports the Header component and is also where the switch between large and small displays is handled utilizing the Hidden component from the mui library.
• HeaderLarge feeds the values to the NavLink and NavSublink components via the .map method. It also houses the image link of the CTI logo to the landing page and a button link to the Search Projects screen.
• HeaderSmall contains the same links to search and the landing page as HeaderLarge, as well as passing values using the navigation array, but handles the display via a hamburger button allowing for visible or hidden links.
• SearchContainer is a component that exports a button link to Search Projects screen.
• DropdownList utilizes several mui packages to handle the functionality and display of the sublinks under each page heading.
• NavLink is a component built off the Link component from mui and the NavLink component (imported as 'NaviLink') from react-router-dom. The styling is built using hooks from the material-ui-popup-state package.
• The NavSublink component decides between external and internal links, with internal links being handled by a modified Link component (imported as RouterLink) from react-router-dom. Styling of the hover state of links in the large display dropdown menus are handled in this file.