added jobs, news, contact; added site.json backend; lazy loading images

package-lock.json

@@ -13,6 +13,7 @@
         "eleventy-sass": "^1.3.1",
         "esm": "^3.2.25",
         "gsap": "^3.10.4",
+        "rss-parser": "^3.12.0",
         "webpack": "^5.72.1"
       },
       "devDependencies": {
@@ -1612,7 +1613,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
       "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
@@ -3918,6 +3918,15 @@
         "rimraf": "bin.js"
       }
     },
+    "node_modules/rss-parser": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/rss-parser/-/rss-parser-3.12.0.tgz",
+      "integrity": "sha512-aqD3E8iavcCdkhVxNDIdg1nkBI17jgqF+9OqPS1orwNaOgySdpvq6B+DoONLhzjzwV8mWg37sb60e4bmLK117A==",
+      "dependencies": {
+        "entities": "^2.0.3",
+        "xml2js": "^0.4.19"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4005,6 +4014,11 @@
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
       "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
     },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -5273,6 +5287,26 @@
         "node": ">=12"
       }
     },
+    "node_modules/xml2js": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
@@ -6606,8 +6640,7 @@
     "entities": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
-      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
-      "dev": true
     },
     "errno": {
       "version": "0.1.8",
@@ -8385,6 +8418,15 @@
         "glob": "^7.1.3"
       }
     },
+    "rss-parser": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/rss-parser/-/rss-parser-3.12.0.tgz",
+      "integrity": "sha512-aqD3E8iavcCdkhVxNDIdg1nkBI17jgqF+9OqPS1orwNaOgySdpvq6B+DoONLhzjzwV8mWg37sb60e4bmLK117A==",
+      "requires": {
+        "entities": "^2.0.3",
+        "xml2js": "^0.4.19"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8437,6 +8479,11 @@
         }
       }
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
     "saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -9380,6 +9427,20 @@
       "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
       "dev": true
     },
+    "xml2js": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      }
+    },
+    "xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
+    },
     "xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "eleventy-sass": "^1.3.1",
     "esm": "^3.2.25",
     "gsap": "^3.10.4",
+    "rss-parser": "^3.12.0",
     "webpack": "^5.72.1"
   }
 }

src/_data/news.js

@@ -0,0 +1,28 @@
+const Parser = require('rss-parser');
+const parser = new Parser();
+
+let medium_feed = 'https://medium.com/feed/@Start9Labs';
+let twitter_feed = 'https://nitter.it/start9labs/rss';
+
+module.exports = async function() {
+
+	let md = await parser.parseURL(medium_feed);
+	let tw = await parser.parseURL(twitter_feed);
+
+	let data = await Promise.all([md,tw]).then((values)=>{
+		let all = [];
+		
+		values.forEach(item => {
+			all = [...all, ...item.items];
+		});
+
+		all.sort(function(a,b){
+			return new Date(b.pubDate) - new Date(a.pubDate);
+		  });
+
+		return all;
+	});
+
+	return data;
+	
+};

src/_data/site.js

@@ -1,4 +1,7 @@
 module.exports = {
+      pitch: {
+        url: "#infographics" //"https://start9.com/latest/learn/index"
+      },
       products: {
         buyUrl: "https://store.start9.com/",
         diyUrl: "https://start9.com/latest/diy",
@@ -7,6 +10,18 @@ module.exports = {
         whyRunBitcoinUrl: "https://bitcoinmagazine.com/culture/six-reasons-you-should-run-bitcoin-node",
         whyRunLightningUrl: "",
       },
+      beYourOwn: {
+        url: "https://marketplace.start9.com/"
+      },
+      poweredBy: {
+        url: "https://github.com/Start9Labs/embassy-os"
+      },
+      support: {
+        url: "https://start9.com/latest/support/index"
+      },
+      dev: {
+        url: "https://start9.com/latest/developer-docs/"
+      },
       footer: {
         copyright: "© " + new Date().getFullYear() + " by START9 LABS, INC.",
         canary:

src/_includes/components/landing/_contact.njk

@@ -1,23 +1,32 @@
-<input type="email" name="" id="" placeholder="email address">
+<form action="">
-    <ul
+    <input type="email" name="" id="" placeholder="email address"/>
-        class="community__icons">
+    <button type="submit">
-        {# {% for group in menu.filter(e => e.slug == 'contact') %}
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    {% for item in group.items|sort(false, false, 'order') %}
+        {# <path stroke="none" d="M0 0h24v24H0z" fill="none"/> #}
-                    <li>
+        <line x1="10" y1="14" x2="21" y2="3" vector-effect="non-scaling-stroke" />
-                        <a {{'class=' + item.class + '' if item.class}} {{'target=' + item.target + '' if item.target}} href="/{{item.url}}">{{item.name}}</a>
+        <path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" vector-effect="non-scaling-stroke"/>
-                    </li>
+        </svg>
-                    {% endfor %}
+    </button>
-                {% endfor %} #}
+</form>
-        <li>
+<ul
-            <a target="_blank" href="https://matrix.to/#/!lMnRwPWnyQvOfAoEnD:matrix.start9labs.com">{% include "components/svg/matrix.svg" %}</a>
+    class="community__icons">
-        </li>
+    {# {% for group in menu.filter(e => e.slug == 'contact') %}
-        <li>
+                        {% for item in group.items|sort(false, false, 'order') %}
-            <a target="_blank" href="https://www.youtube.com/channel/UCGEw4HJDvOn3Oy8ykR36P7Q">{% include "components/svg/youtube.svg" %}</a>
+                        <li>
-        </li>
+                            <a {{'class=' + item.class + '' if item.class}} {{'target=' + item.target + '' if item.target}} href="/{{item.url}}">{{item.name}}</a>
-        <li>
+                        </li>
-            <a target="_blank" href="https://t.me/start9_labs">{% include "components/svg/telegram.svg" %}</a>
+                        {% endfor %}
-        </li>
+                    {% endfor %} #}
-        <li>
+    <li>
-            <a target="_blank" href="https://twitter.com/start9labs">{% include "components/svg/twitter.svg" %}</a>
+        <a target="_blank" href="https://matrix.to/#/!lMnRwPWnyQvOfAoEnD:matrix.start9labs.com">{% include "components/svg/matrix.svg" %}</a>
-        </li>
+    </li>
-    </ul>
+    <li>
+        <a target="_blank" href="https://www.youtube.com/channel/UCGEw4HJDvOn3Oy8ykR36P7Q">{% include "components/svg/youtube.svg" %}</a>
+    </li>
+    <li>
+        <a target="_blank" href="https://t.me/start9_labs">{% include "components/svg/telegram.svg" %}</a>
+    </li>
+    <li>
+        <a target="_blank" href="https://twitter.com/start9labs">{% include "components/svg/twitter.svg" %}</a>
+    </li>
+</ul>

src/_includes/components/landing/be-your-own.njk

@@ -42,5 +42,5 @@
             </div>
         </div>
     </div>
-    <a href="https://marketplace.start9.com/" class="btn">browse the start9 marketplace</a>
+    <a href="{{ site.beYourOwn.url }}" class="btn">browse the start9 marketplace</a>
 </section>

src/_includes/components/landing/dev.njk

@@ -8,7 +8,7 @@
                     <h3>Our community runs on devs like <em>you</em>.</h3>
                 </div>
                 <div class="footer">
-                    <a class="btn" href="">learn more</a>
+                    <a class="btn" href="{{ site.dev.url }}">learn more</a>
                 </div>
             </div>
         </div>

src/_includes/components/landing/pitch.njk

@@ -5,5 +5,5 @@
     <p>
         We make a personal server called an <em>Embassy</em> that puts you in control of your data, your money, and your digital life.
     </p>
-    <a class="btn" href="">learn more</a>
+    <a class="btn" href="{{ site.pitch.url }}">learn more</a>
 </section>

src/_includes/components/landing/powered-by.njk

@@ -13,7 +13,7 @@
         {% include "components/svg/stack.svg" %}
         <div class="img-shadow">{% include "components/svg/stack.svg" %}</div>
     </div>
-    <a class="source-link" href="https://github.com/Start9Labs" target="_blank">
+    <a class="source-link" href="{{ site.poweredBy.url }}" target="_blank">
     <div class="image-with-shadow">
         <img src="../assets/images/code1.png" alt=""/>
         <img class="img-shadow" src="../assets/images/code1.png" alt=""/>

src/_includes/components/landing/support.njk

@@ -17,5 +17,5 @@
       <img src="../assets/images/support1.png" alt="">
     </div>
   </div>
-  <a class="btn" href="/about#team">meet the team</a>
+  <a class="btn" href="{{ site.support.url }}">meet the team</a>
 </section>

src/_includes/components/menu.njk

@@ -1,6 +1,6 @@
 <section id="menu">
     <div class="menu-content">
-        <div class="header"><img src="../assets/images/start9_logo.png" alt=""></div>
+        <div class="header"><a href="/"><img src="../assets/images/start9_logo.png" alt=""/></a></div>
         <ul class="groups">
             {% for group in menu|selectattr("inFlyout")|sort(false, false, 'order') %}
             <li class="{{group.size}}">

src/about.njk

@@ -4,7 +4,7 @@ layout: layouts/peripheral.njk
 ---
 
 {# <script src="{{ '/assets/js/getTeam.js' | url }}"></script> #}
-<section id="hero">
+<section id="hero" class="hero--about">
     <div id="hero-image">
         <img src="../assets/images/about-hero.png" alt=""/>
         <img class="img-shadow" src="../assets/images/about-hero.png" alt=""/>
@@ -166,8 +166,8 @@ layout: layouts/peripheral.njk
 <section id="team">
     <h2>our team</h2>
     <div class="section__image">
-        <img src="../assets/images/team.png" alt=""/>
+        <img src="../assets/images/team2.png" alt=""/>
-        <img class="img-shadow" src="../assets/images/team.png" alt=""/>
+        <img class="img-shadow" src="../assets/images/team2.png" alt=""/>
     </div>
 
     <ul class="members">

src/assets/js/main.js

@@ -79,6 +79,7 @@ function openMenu(e) {
   gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
   gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
   gsap.to("html", { overflow: "hidden" });
+  document.querySelector('html').classList.add("menu-is-open");
 }
 function closeMenu(e) {
   e.preventDefault();
@@ -87,6 +88,7 @@ function closeMenu(e) {
   gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
   gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
   gsap.to("html", { overflow: "overlay" });
+  document.querySelector('html').classList.remove("menu-is-open");
 }
 
 //////////////////////////////////////////

src/assets/styles/community.scss

@@ -1,13 +1,22 @@
-#community {
+section#community {
   display: flex;
   flex-direction: column;
   align-items: center;
   //min-height: calc(100vh - 2 * var(--section-padding));
   margin-bottom: 12rem;
+  --width: calc(31ch - 5rem);
+
+  h1{
+    margin-bottom: 6rem;
+  }
+
+  form{
+    position: relative;
+  }
 
   input[type="email"] {
-    width: 31ch;
+    width: var(--width);
-    background: transparent;
+    background-color: transparent;
     border: 0;
     border-bottom: 1px dotted var(--c-line-primary);
     padding: 0.7em 1em;
@@ -15,13 +24,48 @@
     font-family: var(--f-button);
     font-weight: 100;
     color: var(--c-text-primary);
-    margin-top: 7rem;
+    transition: var(--t-simple);
+    &:focus{
+      background-color: rgba(255,255,255,.1);
+    }
+    &:focus-visible{
+      outline: none;
+    }
+    &:placeholder-shown, &:invalid{
+      &+button {
+        right: 0;
+        opacity: 0;
+      }
+    }
+  }
+  button[type='submit']{
+    transition: var(--t-simple);
+    height: 100%;
+    width: 5rem;
+    position: absolute;
+    border: 0;
+    background-color: var(--c-text-accent);
+    cursor: pointer;
+    right: -5rem;
+    opacity: 1;
+    svg{
+      transition: var(--t-simple);
+      width:70%;
+      path, line{
+        stroke: var(--c-line-primary);
+      }
+    }
+    &:hover{
+      svg{
+        transform: translateX(-0.4rem) rotate(45deg) scale(1.2);
+      }
+    }
   }
 
   .community__icons {
     display: flex;
     justify-content: space-between;
-    width: 31ch;
+    width: var(--width);
     font-size: 2rem;
     font-family: var(--f-button);
     align-items: center;

src/assets/styles/dev.scss

@@ -57,5 +57,6 @@
 }
   img {
     width: 20rem;
+    box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
   }
 }

src/assets/styles/main.scss

@@ -73,6 +73,12 @@ html {
   ::-webkit-scrollbar-thumb:hover {
     background: var(--c-1);
   }
+
+  &.menu-is-open{
+    .header__logo{
+        opacity: 0 !important;
+    }
+  }
 }
 
 body{

src/assets/styles/peripheral.scss

@@ -1,9 +1,16 @@
+@use 'community';
+
 main {
   margin-top: 7rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow-x: clip;
+  background-color: #333;
+}
+
+#menu{
+  box-shadow: inset 0 -5rem 5rem -2rem rgb(0 0 0 / 40%);
 }
 
 .header__logo {
@@ -102,10 +109,26 @@ section#virtues {
     align-items: flex-start;
   }
 }
+  #logo{
+    margin-bottom: -6rem;
+    h1 { font-size: 5rem; }
+  }
 
 #hero-image img {
   margin-top: 0;
-  width: 28rem;
+  width: 25rem;
+
+}
+
+.hero--about{
+  #hero-image img {
+    margin-top: 0;
+    width: 28rem;
+  }
+  #logo{
+    margin-bottom: 0;
+    h1 { font-size: 4.2rem; }
+  }
 }
 
 h1 {
@@ -119,6 +142,7 @@ h2 {
   font-family: var(--f-hero);
   font-size: 3.7rem;
   text-align: center;
+  line-height: 1;
 }
 
 section#blurb h2 {
@@ -178,6 +202,12 @@ p {
 
 /* about */
 
+section#origin{
+  .section__image img{
+    transform: rotate(-3deg);
+  }
+}
+
 .members {
   display: flex;
   flex-wrap: wrap;
@@ -190,7 +220,7 @@ p {
       border-radius: 100%;
       width: 10rem;
       height: 10rem;
-      border: 1px solid var(--c-text-primary);
+      box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
     }
     p {
       font-size: .8rem;
@@ -232,3 +262,43 @@ ol ol, ul ol {
   margin-left: 15px; 
 }
 }
+
+section#news{
+  ul{
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+  }
+  li a{
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    align-items: flex-start;
+    outline: 1px solid rgb(255 255 255 / 0%);
+    outline-offset: .5rem;
+    transition: var(--t-simple);
+    &:hover{
+      outline: 1px solid rgb(255 255 255 / 100%);
+      outline-offset: 2rem;
+    }
+  }
+  h3{
+    text-transform: unset;
+    color: var(--c-text-primary);
+  }
+  .creator{
+    border-radius: 999px;
+    background-color: var(--c-text-accent);
+    color: var(--c-text-primary);
+    padding: .2em .5em;
+    font-size: .8rem;
+    font-weight: 500;
+    opacity: .6;
+  }
+  .twitter-text{
+    color: var(--c-text-primary);
+    font-size: 1.2rem;
+    line-height: 1.4;
+    margin: 0;
+  }
+}

src/assets/styles/powered-by.scss

@@ -73,6 +73,14 @@ section#powered-by {
       background-color: var(--c-text-accent);
       border-radius: 999px;
       padding: .15em .6em;
+      transition: var(--t-simple);
+    }
+    &:hover{
+      transform: scale(1.05);
+      span{
+        background-color: var(--c-text-primary);
+        color: var(--c-text-accent);
+      }
     }
   }
 }

src/contact.njk

@@ -15,4 +15,8 @@ layout: layouts/peripheral.njk
     </div>
 </section>
 
-{% include "components/landing/_contact.njk" %}
+<section id="community">
+
+    {% include "components/landing/_contact.njk" %}
+    
+</section>

src/news.njk

@@ -14,3 +14,29 @@ layout: layouts/peripheral.njk
         </h1>
     </div>
 </section>
+
+<section id="news">
+    {# <h2>{{ jobs|length }} {{ "Open Position" if jobs|length == 1 else "Open Positions" }}</h2> #}
+    <ul class="news">
+        {% for post in news %}
+        <li class="post">
+            <a href="{{ post.guid }}">
+                {% if post.creator %}
+                <span class="creator">{{ post.creator }}</span>
+                {% endif %}
+
+                {% if post.creator.includes('@') %}
+                <p class="twitter-text">{{ post.title }}</p>
+                {% else %}
+                <h3>{{ post.title }}</h3>
+                {% endif %}
+                <h4>{{ post.pubDate }}</h4>
+                
+                {% if post.description %}
+                <p>{{ post.description }}</p>
+                {% endif %}
+            </a>
+        </li>
+        {% endfor %}
+    </ul>
+</section>