getting started content refresh

ProjectEvergreen · Sep 30, 2024 · 1b5e8de · 1b5e8de
1 parent bf2b22a
commit 1b5e8de
Show file tree

Hide file tree

Showing 15 changed files with 577 additions and 424 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,11 +33,8 @@
     "url": "https://github.com/ProjectEvergreen/greenwood-getting-started/issues"
   },
   "homepage": "https://github.com/ProjectEvergreen/greenwood-getting-started#readme",
-  "overrides": {
-    "wc-compiler": "^0.14.0"
-  },
   "devDependencies": {
-    "@greenwood/cli": "~0.29.1",
+    "@greenwood/cli": "~0.30.0-alpha.6",
     "@ls-lint/ls-lint": "^1.10.0",
     "eslint": "^8.4.0",
     "stylelint": "^13.8.0",

diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
@@ -11,19 +11,21 @@ export default class FooterComponent extends HTMLElement {
             position: fixed;
             bottom: 0;
             width: 100%;
-            background-color: #192a27;
+            background-color: var(--color-bg);
             min-height: 30px;
             padding-top: 10px;
-          }
-          .footer a {
-            color: #efefef;
-            text-decoration: none;
-          }
-          .footer h4 {
-            width: 90%;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
+
+            & a {
+              color: #efefef;
+              text-decoration: none;
+            }
+
+            & h4 {
+              width: 90%;
+              margin: 0 auto;
+              padding: 0;
+              text-align: center;
+            }
           }
         </style>
         <footer class="footer">

diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -6,45 +6,34 @@ export default class HeaderComponent extends HTMLElement {
       template.innerHTML = `
         <style>
           .header {
-            background-color: #192a27;
+            background-color: var(--color-bg);;
             min-height: 30px;
             padding: 10px;
             font-size: 1.2rem;
-          }
-
-          .header h4 {
-            margin: 0 auto;
-            padding: 4px 0 0 10px;
-            display: inline-block;
-            color: #efefef;
-          }
-
-          .head-wrap {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-          }
-
-          .brand {
-            justify-items: left;
-            padding: 10px;
-          }
-
-          .brand img {
-            float:left;
-            height: 30px;
-            width: 30px;
-          }
 
-          .header .social {
-            margin-left:auto;
-            text-align: right;
-          }
-
-          .header img.github-badge {
-            display: inline-block;
-            width: 90px;
-            height: 20px;
+            & h4 {
+              margin: 0 auto;
+              padding: 4px 0 0 10px;
+              display: inline-block;
+              color: #efefef;
+            }
+
+            & .head-wrap {
+              display: flex;
+              align-items: center;
+              flex-wrap: wrap;
+            }
+
+            & .brand {
+              justify-items: left;
+              padding: 10px;
+            }
+
+            & .brand img {
+              float:left;
+              height: 30px;
+              width: 30px;
+            }
           }
         </style>
 
@@ -53,15 +42,7 @@ export default class HeaderComponent extends HTMLElement {
             <div class="brand">
               <a href="/">
                 <img src="/assets/greenwood-logo.png" alt="Greenwood logo"/>
-                <h4>My Personal Blog</h4>
-              </a>
-            </div>
-            <div class="social">
-              <a href="https://github.com/ProjectEvergreen/greenwood">
-                <img 
-                  src="https://img.shields.io/github/stars/ProjectEvergreen/greenwood.svg?style=social&logo=github&label=github" 
-                  alt="Greenwood GitHub badge"
-                  class="github-badge"/>
+                <h4>My Blog</h4>
               </a>
             </div>
           </div>

diff --git a/src/templates/app.html → src/layouts/app.html b/src/templates/app.html → src/layouts/app.html
@@ -1,7 +1,7 @@
 <html>
   <head>
-    <title>My Personal Website</title>
-    <meta name="description" content="My person website repo built with Greenwood.">
+    <title>My Blog</title>
+    <meta name="description" content="My personal blog built with Greenwood.">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="/favicon.ico">
@@ -10,12 +10,17 @@
     <script type="module" src="../components/footer/footer.js" data-gwd-opt="static"></script>
     <script type="module" src="../components/header/header.js" data-gwd-opt="static"></script>
 
-    <link rel="stylesheet" href="../styles/theme.css"></link>
-    <link rel="stylesheet" href="../styles/home.css"></link>
+    <link rel="stylesheet" href="../styles/theme.css"/>
   </head>
 
   <body>
-    <page-outlet></page-outlet>
+    <app-header></app-header>
+
+    <main>
+      <page-outlet></page-outlet>
+    </main>
+
+    <app-footer></app-footer>
   </body>
 
 </html>
diff --git a/src/layouts/blog.html b/src/layouts/blog.html
@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../styles/blog.css" />
+  </head>
+  <body>
+
+    <article>
+      <content-outlet></content-outlet>
+    </article>
+
+    <hr />
+
+    <div class="more-posts">
+      <h4>More Posts</h4>
+      <ul>
+        <li><a href="/blog/first-post/">My First Post</a></li>
+        <li><a href="/blog/second-post/">My Second Post</a></li>
+      </ul>
+    </div>
+
+  </body>
+</html>
diff --git a/src/pages/blog/first-post.md b/src/pages/blog/first-post.md
@@ -1,10 +1,7 @@
 ---
-template: 'blog'
+layout: blog
 ---
 
-## My First Blog Post
-Aliquam molestie dapibus sem ut aliquet. Curabitur lacinia risus sed est eleifend ornare. Quisque ac tincidunt nisi, in facilisis nisl. Mauris pellentesque non quam ut condimentum. Sed convallis suscipit elementum. Donec et tincidunt leo. Aenean nec dolor eu erat egestas convallis. Pellentesque ut lectus enim. Suspendisse nisi lorem, blandit ut tellus sed, pulvinar ultrices ligula. Proin at quam quis risus sollicitudin malesuada eget vel urna. Aliquam feugiat purus aliquam tempor malesuada. Maecenas placerat elit et rhoncus molestie. Ut lobortis ligula vitae dolor ultricies cursus. Aliquam cursus neque a vestibulum vulputate. Proin tristique gravida euismod. Nullam fermentum ipsum eget lectus facilisis, vel fermentum magna bibendum.
+# My First Blog Post
 
-Donec maximus dapibus est sed viverra. Sed sed nisi justo. Donec vel enim scelerisque, ultrices sapien et, maximus turpis. Nam lobortis felis non velit placerat suscipit. Aliquam faucibus nibh ut mi vestibulum, dignissim molestie eros viverra. Vestibulum tincidunt convallis urna eu dignissim. Curabitur venenatis ligula in rhoncus facilisis. Suspendisse auctor nunc nulla, vel pellentesque magna placerat bibendum. Nunc dictum consequat magna nec ultrices. Aliquam quis mattis arcu.
-
-[back](/)
+Aliquam molestie dapibus sem ut aliquet. Curabitur lacinia risus sed est eleifend ornare. Quisque ac tincidunt nisi, in facilisis nisl. Mauris pellentesque non quam ut condimentum. Sed convallis suscipit elementum. Donec et tincidunt leo. Aenean nec dolor eu erat egestas convallis. Pellentesque ut lectus enim. Suspendisse nisi lorem, blandit ut tellus sed, pulvinar ultrices ligula. Proin at quam quis risus sollicitudin malesuada eget vel urna. Aliquam feugiat purus aliquam tempor malesuada. Maecenas placerat elit et rhoncus molestie. Ut lobortis ligula vitae dolor ultricies cursus. Aliquam cursus neque a vestibulum vulputate. Proin tristique gravida euismod. Nullam fermentum ipsum eget lectus facilisis, vel fermentum magna bibendum.
diff --git a/src/pages/blog/second-post.md b/src/pages/blog/second-post.md
@@ -1,10 +1,7 @@
 ---
-template: 'blog'
+layout: blog
 ---
 
-## My Second Blog Post
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia urna nec ipsum suscipit sollicitudin. Aenean eu scelerisque libero, ac posuere sem. Maecenas dignissim tempus augue sit amet viverra. Morbi nibh tellus, iaculis in nisi eget, consequat fringilla augue. Fusce eu eros id neque pharetra sagittis eu at leo. Cras volutpat massa neque, non maximus risus lobortis eget. Etiam accumsan lacus mi, eleifend iaculis magna mattis in. Ut dui risus, molestie in turpis ut, commodo dignissim nulla.
+# My Second Blog Post
 
-Aliquam molestie dapibus sem ut aliquet. Curabitur lacinia risus sed est eleifend ornare. Quisque ac tincidunt nisi, in facilisis nisl. Mauris pellentesque non quam ut condimentum. Sed convallis suscipit elementum. Donec et tincidunt leo. Aenean nec dolor eu erat egestas convallis. Pellentesque ut lectus enim. Suspendisse nisi lorem, blandit ut tellus sed, pulvinar ultrices ligula. Proin at quam quis risus sollicitudin malesuada eget vel urna. Aliquam feugiat purus aliquam tempor malesuada. Maecenas placerat elit et rhoncus molestie. Ut lobortis ligula vitae dolor ultricies cursus. Aliquam cursus neque a vestibulum vulputate. Proin tristique gravida euismod. Nullam fermentum ipsum eget lectus facilisis, vel fermentum magna bibendum.
-
-[back](/)
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia urna nec ipsum suscipit sollicitudin. Aenean eu scelerisque libero, ac posuere sem. Maecenas dignissim tempus augue sit amet viverra. Morbi nibh tellus, iaculis in nisi eget, consequat fringilla augue. Fusce eu eros id neque pharetra sagittis eu at leo. Cras volutpat massa neque, non maximus risus lobortis eget. Etiam accumsan lacus mi, eleifend iaculis magna mattis in. Ut dui risus, molestie in turpis ut, commodo dignissim nulla.
diff --git a/src/pages/index.html b/src/pages/index.html
@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../styles/home.css" >
+  </head>
+
+  <body>
+    <h1>Welcome</h1>
+
+    <p>Thanks for visiting my site, I hope you like it!</p>
+
+    <h2>My Posts</h2>
+    <ul>
+      <li><a href="/blog/first-post/">My First Post</a></li>
+      <li><a href="/blog/second-post/">My Second Post</a></li>
+    </ul>
+
+  </body>
+</html>
diff --git a/src/pages/index.md b/src/pages/index.md
diff --git a/src/styles/blog.css b/src/styles/blog.css
@@ -1,22 +1,33 @@
-.content {
+article {
   flex: 1;
   max-width: 50em;
   height: 100%;
   margin: auto;
   font-size: 1.2rem;
   padding: 2rem;
-}
 
-.content h2 {
-  color: #0b6623;
+  & h1 {
+    margin: 5px auto;
+  }
 }
 
-.content h2,
-.content h3 {
-  font-size: 2rem;
-  margin: 5px 0;
+hr {
+  display: block;
+  width: 30%;
+  margin: 5px auto;
 }
 
-.content a {
-  color: #1d337a;
+.more-posts {
+  max-width: 50em;
+  margin: 0 auto 20px;
+  font-size: 1.2rem;
+  padding: 2rem;
+
+  & h4 {
+    text-decoration: underline;
+  }
+
+  & li {
+    margin: 0 0 0 1.2rem;
+  }
 }
diff --git a/src/styles/home.css b/src/styles/home.css
@@ -1,23 +1,16 @@
-.content {
+main {
   flex: 1;
   max-width: 50em;
   height: 100%;
   margin: auto;
   font-size: 1.2rem;
   padding: 2rem;
-}
 
-.content h3 {
-  color: #0b6623;
-  font-size: 2rem;
-  margin: 5px 0;
-}
+  & h1, h2 {
+    margin: 10px 0;
+  }
 
-.content a {
-  color: #1d337a;
-}
-
-.content ul li {
-  margin: 0 0 0 20px;
-  padding: 5px 0;
+  & ul li {
+    margin: 0 0 0 20px;
+  }
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -11,3 +11,19 @@ body {
   font-family: 'Source Sans Pro', sans-serif;
   line-height: 1.4;
 }
+
+:root {
+  --color-accent: #016341;
+  --color-link: #1d337a;
+  --color-bg: #192a27;
+}
+
+h2 {
+  color: var(--color-accent);
+  font-size: 2rem;
+  margin: 5px 0;
+}
+
+a {
+  color: var(--color-link);
+}
diff --git a/src/templates/blog.html b/src/templates/blog.html
diff --git a/src/templates/page.html b/src/templates/page.html