✨ feat: Add usage instructions through IntroMsg component

Author: HarshKapadia2

repo-img/component-structure.png

@@ -6,6 +6,7 @@ import CommitSelector from "../CommitSelector/CommitSelector";
 import Loader from "../Loader/Loader";
 import RawDataDisplay from "../RawDataDisplay/RawDataDisplay";
 import BackToTop from "../BackToTop/BackToTop";
+import IntroMsg from "../IntroMsg/IntroMsg";
 import getObjects from "../../util/generateObjects";
 import formatObjects from "../../util/formatObjects";
 import getConnections from "../../util/generateConnections";
@@ -203,7 +204,7 @@ function App() {
 						objectData={objectData}
 						sendRawObjDetails={handleRawDataObjDetails}
 					/>
-				) : null}
+				) : isLoading ? null : <IntroMsg />}
 
 				{showCommitSelector && (
 					<CommitSelector

src/components/App/App.jsx

@@ -0,0 +1,26 @@
+.intro-msg {
+	margin: 5em 1em;
+}
+
+.intro-msg p {
+	margin-bottom: 1em;
+}
+
+.intro-msg li {
+	margin-bottom: 1em;
+	list-style: inside;
+	padding-left: 0.5em;
+}
+
+.intro-msg h2 {
+	margin: 1.5em 0 1em 0;
+}
+
+.intro-msg ul ul {
+	margin-left: 3em;
+	margin-top: 1em;
+}
+
+.intro-msg ul ul li {
+	list-style: circle;
+}

src/components/IntroMsg/IntroMsg.css

@@ -0,0 +1,76 @@
+import "./IntroMsg.css";
+
+const IntroMsg = () => {
+	return (
+		<div className="intro-msg">
+			<p>
+				A visualizer for the Directed Acyclic Graph that Git creates to
+				connect{" "}
+				<a
+					href="https://git.harshkapadia.me/#_git_objects"
+					target="_blank"
+					rel="noreferrer"
+				>
+					Commit, Tree and Blob objects
+				</a>{" "}
+				internally.
+			</p>
+			<p>
+				<a
+					href="https://www.youtube.com/watch?v=sLDDaPDXB8s"
+					target="_blank"
+					rel="noreferrer"
+				>
+					Learn the internals of Git.
+				</a>
+			</p>
+
+			<h2>Usage Instructions</h2>
+			<ul>
+				<li>
+					Select the <code>.git</code> directory of a repository for
+					the graph to render.
+				</li>
+				<li>
+					Once the graph is rendered, one can
+					<ul>
+						<li>
+							Use the Commit Selector to highlight one or more
+							Commits and their corresponding Trees and Blobs.
+						</li>
+						<li>
+							Hover over the objects and click on the 'Raw' button
+							to view the contents of that Git Object.
+						</li>
+					</ul>
+				</li>
+			</ul>
+
+			<h2>Note</h2>
+			<ul>
+				<li>
+					If the <code>.git</code> directory is not visible in the
+					directory picker, please enable hidden file viewing on the
+					local machine.
+				</li>
+				<li>
+					Extremely huge repositories might not load due to browser
+					memory constraints.
+				</li>
+				<li>
+					Please report errors and bugs by{" "}
+					<a
+						href="https://github.com/HarshKapadia2/git-graph/issues"
+						target="_blank"
+						rel="noreferrer"
+					>
+						raising issues
+					</a>
+					.
+				</li>
+			</ul>
+		</div>
+	);
+};
+
+export default IntroMsg;