Setting up front page

The-Menagerie.md → docs/The-Menagerie.md

@@ -6,7 +6,7 @@ url: https://riskfirst.org/The-Menagerie
 featured: 
   class: bg1
   element: '<big-image imgsrc="/public/templates/risk-first/posts/book-grey.png" />'
-categories: 
+tags: 
  - Front
 order: 4
 ---
@@ -17,7 +17,7 @@ The software development world is crowded with different practices, metrics, met
 
 Volume one of the Risk-First series argues the case for viewing _all_ of the activities on a software project through the lens of _managing risk_.  It introduces the menagerie of different risks you're likely to meet on a software project, naming and classifying them so that we can try to understand them better.
 
-![Risk-First Software Development: Volume 1, The Menagerie](images/Cover_Book_image.jpg)
+![Risk-First Software Development: Volume 1, The Menagerie](/img/Cover_Book_image.jpg)
 
 The book aims to develop a _Pattern Language_ for understanding software risk, and develop a practical framework for discussing how the activities we take on a project change the balance of the risks we are exposed to.
 

src/css/custom.css

@@ -1,35 +1,5 @@
-
-@font-face {
-	font-family: 'Lexend';
-	font-style: normal;
-	font-display: swap;
-	font-weight: 300;
-	src: url(/fonts/lexend/lexend-latin-300-normal.woff2) format('woff2');
-}
-
-@font-face {
-	font-family: 'Lexend';
-	font-style: normal;
-	font-display: swap;
-	font-weight: 400;
-	src: url(/fonts/lexend/lexend-latin-400-normal.woff2) format('woff2');
-}
-
-@font-face {
-	font-family: 'Lexend';
-	font-style: normal;
-	font-display: swap;
-	font-weight: 600;
-	src: url(/fonts/lexend/lexend-latin-600-normal.woff2) format('woff2');
-}
-
-@font-face {
-	font-family: 'Lexend';
-	font-style: normal;
-	font-display: swap;
-	font-weight: 700;
-	src: url(/fonts/lexend/lexend-latin-700-normal.woff2) format('woff2');
-}
+@import "/fonts/geomanist/stylesheet.css";
+@import "/fonts/lexend/stylesheet.css";
 
 /**
  * Any CSS included here will be global. The classic template
@@ -57,6 +27,8 @@
 	--ifm-footer-title-color: #bbb;
 	--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.2)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
 	--docusaurus-tag-list-border: #eee;
+	--ifm-heading-font-family: Geomanist, sans-serif;
+	--ifm-heading-font-weight: 400;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -72,74 +44,39 @@
 	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
-html[data-theme='light'] .footer-strap {
-	font-weight: bold;
-	color: #ffffff;
-}
-
-html[data-theme='light'] .navbar-sidebar__item {
-	background-color: white;
-}
-
-html[data-theme='light'] .footer-copyright {
-	color: #dddddd;
-	font-size: smaller;
-}
-
-#__docusaurus>footer {
-	border-top: 1px solid #ccc;
-}
-
-/** 
- * Due to : https://github.com/facebook/docusaurus/issues/2692
+/**
+ * For presentations
  */
-html[data-theme='dark'] footer--dark {
-  background-color: #0a0a0a;
-}
-html[data-theme='light'] footer-dark {
-  background-color: #fdfdfd;
-}
-
-html[data-theme='light'] .footer__title {
-  color: #333;
-}
-html[data-theme='light'] .footer__link-item {
-  color: #333;
-}
-
-/* Layout for simple output 
-   ========================================================================== */
-
 .slide {
-  padding: 2em 0;
+	padding: 2em 0;
 }
 
 .slide-image {
-  margin-bottom: 2em;
+	margin-bottom: 2em;
 }
 
 .slide .slide-notes p:first-child {
-  margin-top: 0;
+	margin-top: 0;
 }
 
 @media (min-width: 800px) {
 
-  .slide {
-    display: flex;
-    justify-content: space-between;
-  }
+	.slide {
+		display: flex;
+		justify-content: space-between;
+	}
 
-  .slide .slide-image {
-    width: 48%;
-    margin-bottom: 0;
-  }
+	.slide .slide-image {
+		width: 48%;
+		margin-bottom: 0;
+	}
 
-  .slide .slide-notes {
-    width: 48%;
-  }
+	.slide .slide-notes {
+		width: 48%;
+	}
 
 }
 
 .credits {
-  opacity: 0.5;
-}
+	opacity: 0.5;
+}

src/pages/index.md

@@ -0,0 +1,21 @@
+---
+title: Welcome to Risk First!
+hide_table_of_contents: true
+---
+
+import styles from './index.module.css';
+
+<h1 className={styles.siteHeader}>Risk-First</h1>
+<p className={styles.lead}> Exploring the risks that ruin software projects </p>
+
+
+<div className={styles.frontPageContent}>
+  <BoxOut title="Start Here"  image="/img/R1_logo_grue.svg">
+   <TagList tag="Front" />
+  </BoxOut>
+
+  <BoxOut title="Popular" image="/img/R1_logo_grue.svg">
+    <TagList tag="Popular" />
+  </BoxOut>
+
+</div>

src/pages/index.module.css

@@ -21,3 +21,29 @@
   align-items: center;
   justify-content: center;
 }
+
+.siteHeader {
+	font-family: Geomanist;
+	font-weight: 600;
+    color: rgb(245, 62, 121);
+    font-size: 6rem;
+    text-transform: uppercase;
+}
+
+.lead {
+	font-family: Geomanist;
+	font-weight: 400;
+	font-size: 1.5rem;
+}
+
+.frontPageContent {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	align-items: flex-start;
+}
+
+.frontPageContent>div {
+	flex-basis: 30rem;
+	flex-grow: 1;
+}

src/theme/BoxOut/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styles from './styles.module.css'
+
+export default ({children, image, link, linkText, title, className = ''}) => {
+	const id = title.replace(/[^\w\s\']|_/g, "")
+         		.replace(/\s+/g, "-")
+         		.toLowerCase();
+    return <div className={`${styles.boxout} ${className}`}>
+    	<div className={styles.header}>
+	        <img className={styles.icon} src={image} alt={title} />
+	        {
+				(link) ? <a href={link}><h3 id={id}> {title} </h3></a> : <h3 id={id}> {title} </h3>
+			}
+    	</div>
+        <div className={styles.contents}>
+            {children}
+        </div>
+        <div className={styles.footer}> 
+        { 
+        	(link) ? <p><a href={link} className={styles.link}>{linkText}</a></p> : ""
+        }
+        </div>
+
+    </div>
+}

src/theme/BoxOut/styles.module.css

@@ -0,0 +1,60 @@
+.boxout {
+	border: 1px solid lightgray;
+	border-radius: 1rem;
+	margin: 2rem 0rem;
+}
+
+.header {
+	display: flex;
+	padding-bottom: 1rem;
+	align-items: center;
+	margin: 0.3rem;
+	border-top-left-radius: 0.9rem;
+	border-top-right-radius: 0.9rem;
+	padding: 2rem;
+	background-color: #1d1d1d;
+}
+
+
+html[data-theme='light'] .header {
+	background-color: #fcfcfc;
+}
+
+.header h3 {
+	padding: 0;
+	padding-left: 2rem;
+	margin: 0;
+}
+
+.contents {
+	padding: 1rem 2rem;
+}
+
+
+.footer {
+	padding-right: 1rem;
+	padding-bottom: 0.5rem;
+}
+
+.icon {
+	width: 5rem;
+	padding: 0rem;
+	margin: 0rem;
+}
+
+.footer p {
+	text-align: right;
+}
+
+.link {
+	padding: 1rem;
+	border-radius: 1rem;
+	text-decoration: underline;
+	background-color: #1d1d1d;
+
+}
+
+html[data-theme='light'] .link {
+	background-color: #fdfdfd;
+	color: black;
+}

src/theme/MDXComponents/index.js

@@ -1,8 +1,10 @@
 import MDXComponents from '@theme-original/MDXComponents';
 import TagList from '../TagList';
+import BoxOut from '../BoxOut';
 
 
 export default {
   ...MDXComponents,
   TagList,
+  BoxOut
 };

src/theme/TagList/index.js

@@ -7,7 +7,8 @@ import styles from './styles.module.css'
 
 function DocItemImage({ doc }) {
 	const pl = doc.permalink
-	const imageLink = "/img/generated/single/" + pl + ".png"
+	const stripped = pl.endsWith('/') ? pl+"index" : pl
+	const imageLink = "/img/generated/single/" + stripped + ".png"
 
 	return (
 		<Link key={doc.permalink} to={doc.permalink}>
@@ -42,13 +43,15 @@ export default function TagList(props) {
 	const location = useLocation().pathname;
 
 	oneTag.sort((a, b) => a.order - b.order);
+
+	console.log(oneTag[0].permalink.indexOf(location))
 
 	return (
 		<div className={styles.tagList}>
 			{
 				oneTag
 					.filter(d => d.permalink.indexOf(filter) > -1)
-					.filter(d => d.permalink.indexOf(location) == -1)
+					.filter(d => d.permalink != location)
 					.map(d => <DocItemImage key={d} doc={d} />)
 			}
 		</div>