Add ImageRow Component

.gitignore

@@ -1,2 +1,3 @@
 .next
 node_modules
+.env.local

README.md

@@ -20,6 +20,14 @@ Some key documents that would be good to look through are:
 - [Markdown](https://nextra.site/docs/guide/markdown)
 - [Custom Doc Components](https://nextra.site/docs/guide/built-ins)
 
+### Editing locally
+
+The docs repo sits on top of the pelican repo to take the content in the docs repo and turn it into a website. To 
+set up the docs repo to sit on top of your local instance of pelican edit the `PELICAN_PATH` variable in `env.local` to 
+point to the root of your local pelican repo. 
+
+Once this is done you can run `npm run dev` at root to see your website.
+
 ### Adding Images
 
 All images should be added to the `/public` folder. You can add them into the documentation by using the markdown image
@@ -29,7 +37,24 @@ syntax. All the images are served from website root so make sure not to let the
 ![Image Description](/image-path)
 ```
 
-## Example 
+## Recipes
+
+Below is a list of all the components available to use in your markdown. Let Cannon know if you want access to any
+others.
+
+### ImageRow
+
+![ImageRow View](.github/images/ImageRow.png)
 
-Let's say that I want to add some documentation for some website changes I just made. 
+```jsx
+// At the top of your markdown file
+import ImageRow from "@/components/ImageRow";
 
+// Whereever you want a row with image on the left 50% with text on the right 50%
+<ImageRow alt={"Pelican and OSDF"} src={"/pelican/pelican-and-osdf.png"}>
+	A Pelican data federation provides an access layer that helps the origin
+	distribute datasets in the repositories.  A client wanting an object contacts
+	the manager to find the closest cache which either serves the objects from
+	local storage or streams it through the origin.
+</ImageRow>
+```

components/ImageRow.tsx

@@ -0,0 +1,30 @@
+import {Box, Grid} from "@mui/material";
+import Image from "next/image";
+
+
+interface ImageRowProps {
+	src: string;
+	alt: string;
+	imageContainerProps?: any;
+	textContainerProps?: any;
+	containerProps: any;
+	children?: any;
+}
+
+const ImageRow = ({src, alt, imageContainerProps, textContainerProps, containerProps, children}: ImageRowProps ) => {
+
+	return (
+		<Box bgcolor={"#e8f6ff"} px={2} pb={2} borderRadius={3} mt={5} {...containerProps}>
+			<Grid	container spacing={2} alignItems="center">
+				<Grid item xs={12} md={6} {...imageContainerProps}>
+					<Image width={1000} height={1000} src={src} alt={alt} />
+				</Grid>
+				<Grid item xs={12} md={6} {...textContainerProps}>
+					{children}
+				</Grid>
+			</Grid>
+		</Box>
+	)
+}
+
+export default ImageRow

next.config.js

@@ -9,15 +9,24 @@ const withNextra = require('nextra')({
 
 const config = (phase, { defaultConfig }) => {
 
-  // Set up the pages symlink to whatever pelican repo is desired
+  // Set up the pages symlink to point at pelican repo identified by PELICAN_PATH
   fs.rmSync('./pages', { recursive: true, force: true })
   fs.symlink(
-    process.env.PELICAN_PATH + '/docs/pages',
+    path.resolve(process.env.PELICAN_PATH) + '/docs/pages',
       './pages',
     'dir',
     (err) => console.log(err)
   )
 
+  // Set up the public symlink to point at pelican repo identified by PELICAN_PATH
+  fs.rmSync('./public/pelican', { recursive: true, force: true })
+  fs.symlink(
+      path.resolve(process.env.PELICAN_PATH) + '/docs/public',
+      './public/pelican',
+      'dir',
+      (err) => console.log(err)
+  )
+
   return {
     ...withNextra(),
     eslint: {