Homepage changes

.yarnrc.yml

@@ -7,3 +7,12 @@ pnpFallbackMode: all
 pnpMode: loose
 
 yarnPath: .yarn/releases/yarn-4.2.2.cjs
+
+packageExtensions:
+  debug@*:
+    dependencies:
+      supports-color: "*"
+
+  vite@*:
+    dependencies:
+      supports-color: "*"

package.json

@@ -13,7 +13,8 @@
     "format": "prettier --write src packages",
     "server:prod": "NODE_NO_WARNINGS=1 NODE_ENV=production yarn run server",
     "dev:storybook": "yarn workspace @macrostrat/storybook run dev",
-    "start": "yarn run build && yarn run server"
+    "start": "yarn run build && yarn run server",
+    "test": "vitest"
   },
   "workspaces": [
     "deps/web-components/packages/*",
@@ -35,13 +36,16 @@
     "@macrostrat/revision-info-webpack": "^1.0.0",
     "@macrostrat/storybook": "workspace:*",
     "@mdx-js/rollup": "^2.3.0",
+    "@types/esprima": "^4",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "@yarnpkg/sdks": "^3.1.0",
     "prettier": "^2.7.1",
     "sass": "^1.49.0",
     "stylus": "^0.55.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite-plugin-rewrite-all": "^1.0.1",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
     "@blueprintjs/core": "^5.10.2",
@@ -107,6 +111,7 @@
     "d3-selection": "^1.0.0",
     "d3-shape": "^3.2.0",
     "esbuild": "^0.20.0",
+    "esprima": "^4.0.1",
     "express": "^4.18.2",
     "hex-to-css-filter": "^5.4.0",
     "history": "^5.3.0",

src/base.test.ts

@@ -0,0 +1,8 @@
+/** Basic tests with Vitest */
+import { test, expect } from "vitest";
+
+test("should pass", () => {
+  expect(true).toBe(true);
+});
+
+// Load the URL of the main testing page

src/components/page-header.ts

@@ -29,3 +29,29 @@ export function PageHeader(props) {
     children,
   ]);
 }
+
+
+export function Icon(props) {
+  const {
+    title = "",
+    showSiteName = true,
+    children,
+    className,
+  } = props;
+  const siteName = "";
+  let _showSiteName = showSiteName;
+  if (title == siteName) {
+    _showSiteName = false;
+  }
+
+  return h("h1.page-title", { className }, [
+    h(MacrostratIcon, { size: 24 }),
+    h.if(_showSiteName)([
+      h(Link, { href: "/", className: "site-name" }, siteName),
+      " ",
+    ]),
+    h("span.title", title),
+    " ",
+    children,
+  ]);
+}

src/pages/+Page.mdx

@@ -3,7 +3,6 @@ import { macrostratInstance } from "@macrostrat-web/settings";
 import { PageHeader } from "~/components";
 import { LinkCard } from "~/components/cards";
 
-
 <PageHeader title="Macrostrat">
   <span className="subtitle">
     <span className="secondary">v2</span>{" "}

src/pages/dev/+Page.mdx

@@ -10,5 +10,7 @@ import { PageBreadcrumbs } from "~/renderer";
 - [User interface tests](/dev/ui-tests)
 - [Feedback](/dev/feedback)
 - [Map filter](/dev/filtering)
-- [Main Page](/dev/main-page)
 - [Concept apps](/dev/concepts)
+- [Built with Macrostrat](/dev/apps)
+- [Test Site](/dev/test-site/main-page)
+

src/pages/dev/lexicon/+Page.mdx

@@ -0,0 +1,58 @@
+import { PageHeader } from "~/components";
+import { PageBreadcrumbs } from "~/renderer";
+import "./main.styl";
+import { Image } from "./index";
+import { MacrostratIcon } from "~/components";
+
+<div class="main">
+
+[//]: # "Nav Bar"
+<div class="nav">
+  <ul>
+    <li><a href="/dev/main-page"><MacrostratIcon></MacrostratIcon></a></li>
+    <li><a href="/dev/about">About</a></li>
+    <li><a href="/dev/publications">Publications</a></li>
+    <li><a href="/dev/people">People</a></li>
+    <li><a href="/dev/donate">Donate</a></li>
+  </ul>
+</div>
+\
+\
+
+[//]: # "Lithologies"
+<div id="lith">
+</div>
+
+[//]: # "Stratigraphic Names"
+<div id="strat">
+</div>
+
+
+[//]: # "Footer"
+<div class="footer">
+    <div class="footer-container">
+    <div class="col-sm-4" id="who-made-it">
+        <Image className="logo_white" src="logo_white.png" width="100px"></Image>
+        <p class="f1-text">Produced by the <a href="http://strata.geology.wisc.edu" target="_blank">UW Macrostrat Lab</a> <a href="https://github.com/UW-Macrostrat" target="_blank"><Image className="git_logo" src="git-logo.png" width="18px"></Image></a></p>
+    </div>
+    <div class="col-sm-4" id="bottom-nav">
+        <ul class="footer-nav">
+        <li><a href="/dev/about">About</a></li>
+        <li><a href="/dev/publications">Publications</a></li>
+        <li><a href="/dev/people">People</a></li>
+        <li><a href="/dev/donate">Donate</a></li>
+        </ul>
+    </div>
+    <div class="col-sm-4 funding">
+        <Image className="funding-logo" src="nsf.png" width="100px"></Image>
+        <div class="funding-line">
+        Current support: \
+        EAR-1948843 \
+        ICER-1928323 \
+        UW-Madison Dept. Geoscience
+        </div>
+    </div>
+    </div>
+</div>
+
+</div>

src/pages/dev/lexicon/main.styl

@@ -0,0 +1,152 @@
+.htnl, .body, .main
+    background-color: white
+    color: black
+
+a:hover
+    text-decoration: none
+.nav
+  position: fixed
+  width: 100%
+  z-index: 10000
+  top: 0
+
+  ul 
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #015eab;
+
+  li 
+    float: left;
+    font-size: 15px
+
+  li a 
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none
+
+.big
+    color: #E0E1E6
+    text-align: left
+    font-size: 75px
+    font-family: "Maven Pro", sans-serif
+    margin: 0
+    margin-left: 20%
+    margin-top: 30px
+
+.line
+  border-bottom: 3px solid #E0E1E6;
+  width: 60%
+  margin: 20px 20% 
+
+
+.people
+    color: white
+
+.left
+    float: left
+    width: 30%
+    margin-left: 20%
+
+.right
+    float: left
+    width: 30%
+    margin-right: 20%
+
+.person-info
+    height: 30vh
+    width: 90%
+    position: relative
+    margin: 5%
+
+.text
+    text-align: right
+    position:absolute
+    padding: 5px 20px
+    z-index: 100
+    background-color: rgba(0, 0, 0, 0.2)
+    bottom:0
+    right: 0
+
+    a
+        color: white
+
+    a:hover
+        color: white
+
+.back-img
+    position:absolute
+    z-index: 0
+    height: 30vh
+    object-fit: cover
+    width: 100%
+
+n
+    font-size: 25px
+    font-weight: 200px
+
+t
+    font-weight: 400px
+
+e 
+    font-size: 14px
+    font-weight: 200px
+
+.footer 
+  width: 100%
+  background-color: #015EAB
+  margin-top: 280vh
+
+.footer-container
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 auto;
+  width: 60%
+
+.col-sm-4
+  color: white
+  width: 33.333%
+  color: #E0E1E6;
+  font-weight: 200;
+  text-align: center;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+  font-weight: bold
+
+.nav-logo
+  padding-top: 5px
+
+.funding-logo
+  padding: 10px
+
+.footer-nav
+  list-style-type: none
+  padding-right: 40px
+
+  li
+    padding: 5px 0
+
+  a
+    color: white
+
+  a:hover
+    text-decoration: none
+
+.git_logo
+  vertical-align: sub
+
+.f1-text
+  a
+    color: white
+
+#who-made-it
+  padding-top: 25px
+
+.subtitle
+  margin-left: 20%
+  color: #E0E1E6;