Start9/start9.com
2
0
Fork 0
mirror of https://github.com/Start9Labs/start9.com.git synced 2026-03-26 10:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Spencer Flagg
2022-09-20 14:58:56 +02:00
parent 1152f2dfea
commit 025a86da0f
22 changed files with 319 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.lazyimages.json
View File

File diff suppressed because one or more lines are too long

67
package-lock.json generated
View File

@@ -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==",
"dev": true
"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
},
"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",

1
package.json
View File

@@ -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"
}
}

28
src/_data/news.js Normal file
View File

@@ -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;
};

15
src/_data/site.js
View File

@@ -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:

55
src/_includes/components/landing/_contact.njk
View File

@@ -1,23 +1,32 @@
<input type="email" name="" id="" placeholder="email address">
<ul
class="community__icons">
{# {% for group in menu.filter(e => e.slug == 'contact') %}
{% for item in group.items|sort(false, false, 'order') %}
<li>
<a {{'class=' + item.class + '' if item.class}} {{'target=' + item.target + '' if item.target}} href="/{{item.url}}">{{item.name}}</a>
</li>
{% endfor %}
{% endfor %} #}
<li>
<a target="_blank" href="https://matrix.to/#/!lMnRwPWnyQvOfAoEnD:matrix.start9labs.com">{% include "components/svg/matrix.svg" %}</a>
</li>
<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>
<form action="">
<input type="email" name="" id="" placeholder="email address"/>
<button type="submit">
<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">
{# <path stroke="none" d="M0 0h24v24H0z" fill="none"/> #}
<line x1="10" y1="14" x2="21" y2="3" vector-effect="non-scaling-stroke" />
<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"/>
</svg>
</button>
</form>
<ul
class="community__icons">
{# {% for group in menu.filter(e => e.slug == 'contact') %}
{% for item in group.items|sort(false, false, 'order') %}
<li>
<a {{'class=' + item.class + '' if item.class}} {{'target=' + item.target + '' if item.target}} href="/{{item.url}}">{{item.name}}</a>
</li>
{% endfor %}
{% endfor %} #}
<li>
<a target="_blank" href="https://matrix.to/#/!lMnRwPWnyQvOfAoEnD:matrix.start9labs.com">{% include "components/svg/matrix.svg" %}</a>
</li>
<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>

2
src/_includes/components/landing/be-your-own.njk
View File

@@ -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>

2
src/_includes/components/landing/dev.njk
View File

@@ -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>

2
src/_includes/components/landing/pitch.njk
View File

@@ -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>

2
src/_includes/components/landing/powered-by.njk
View File

@@ -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=""/>

2
src/_includes/components/landing/support.njk
View File

@@ -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>

2
src/_includes/components/menu.njk
View File

@@ -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}}">

6
src/about.njk
View File

@@ -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 class="img-shadow" src="../assets/images/team.png" alt=""/>
<img src="../assets/images/team2.png" alt=""/>
<img class="img-shadow" src="../assets/images/team2.png" alt=""/>
</div>
<ul class="members">

BIN
src/assets/images/team2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

2
src/assets/js/main.js
View File

@@ -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");
}
//////////////////////////////////////////

54
src/assets/styles/community.scss
View File

@@ -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;
background: transparent;
width: var(--width);
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;

1
src/assets/styles/dev.scss
View File

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

6
src/assets/styles/main.scss
View File

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

74
src/assets/styles/peripheral.scss
View File

@@ -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;
@@ -231,4 +261,44 @@ ol ol, ul ol {
list-style-type: lower-latin;
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;
}
}

8
src/assets/styles/powered-by.scss
View File

@@ -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);
}
}
}
}

6
src/contact.njk
View File

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

26
src/news.njk
View File

@@ -13,4 +13,30 @@ layout: layouts/peripheral.njk
<span>News</span>
</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>