mainpage: fill out more sections

TODO.md

@@ -0,0 +1,26 @@
+TODO List
+==========
+
+## Misc
+
+- Figure out what to replace the location section with.
+- Fill out the "contact us" section on the main page.
+- Figure out any legalese we need on the main page.
+- Add social media icons below lix for mastodon/github/etc.
+
+## Pages
+
+- Create the `/install` page.
+- Create a subsection for using Lix on existing NixOS, and link it to the box.
+- Create the `/about` page.
+- Create a "Why Lix" section on `/about` and link to it.
+- Figure out where to link the "Docs" link to.
+- Create a /community page linking to matrix.
+- Create /roadmap.
+- Create /infrastructure.
+
+## Graphics
+
+- Replace the primary "hero" graphic with a Lix one.
+- Replace the "lix-managed systems" graphic with an image of our logo on a screen.
+- Replace the placeholders for each of the three main page "why lix" points.

config.yaml

@@ -69,13 +69,13 @@ menus:
       url: "/about"
       weight: 2
 
+    - name: "Source Repositories"
+      url: "https://git.lix.systems"
     - name: "The Lix Team"
       url: "/team"
       weight: 3
 
-    - name: "Source Repositories"
+      weight: 3
-      url: "https://git.lix.systems"
-      weight: 4
 
     - name: "Documentation"
       url: "/#"

data/home/ecosystem.yaml

@@ -0,0 +1,27 @@
+enabled: true
+id: "ecosystem"
+
+content:
+  title: "The Lix Ecosystem"
+  text: "Like other Nix ecosystems, Lix layers together multiple projects to create a full Lix stack — allowing you to forge your own systems on a base of community work."
+  cards:
+    - image: "images/ecosystem-lix.png"
+      title: "The Lix Package Manager"
+      text: "The ecosystem's core is the Lix package manager — a community variant of the Nix configuration language and package management system."
+      button:
+        label: "view the code"
+        url: "https://git.lix.systems/lix-project/lix"
+
+    - image: "images/ecosystem-nixpkgs.svg"
+      title: "Community Packages"
+      text: "Lix is fully compatible with existing Nix expressions — which means it benefits from the hundreds of thousands of existing community-maintained packages and configurations."
+      button:
+        label: "visit nixpkgs"
+        url: "https://github.com/nixos/nixpkgs"
+
+    - image: "images/ecosystem-nixpkgs.svg"
+      title: "Lix-Managed Systems"
+      text: "Lix can also be used as the core Nix implementation for Nix-based operating systems and system managers, including the full NixOS distribution, as well as system management software like Home Manager or nix-darwin."
+      button:
+        label: "use lix with NixOS"
+        url: "/install"

data/home/portfolio.yaml

@@ -2,38 +2,31 @@ enabled: true
 id: "portfolio"
 
 content:
-  - image: "images/portfolio-ecommerce.png"
+
-    pretitle: "Portfolio Service"
+  - image: "images/services-web-development.png"
-    title: "We developed an eCommerce website"
+    pretitle: "nix with a modern flavor"
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed euismod quis sit gravida pharetra sit. Cursus vel enim pretium vulputate semper sem elit magna neque. Aliquet adipisc."
+    title: "an ever-evolving lix codebase, for a language that can evolve"
+    text: "Lix is designed to grow and evolve — in a way that never breaks backwards compatibility. Lix intends to support language versioning features — so we can continuously improve the language without affecting existing configurations."
 
     buttons: 
-      - label: "See live"
+      - label: "see our roadmap"
-        url: "#"
+        url: "/roadmap"
 
-      - label: "Read more"
-        url: "#"
 
-  - image: "images/portfolio-ecommerce.png"
+  - image: "images/services-web-development.png"
-    pretitle: "Portfolio Service"
+    pretitle: "an independent ecosystem"
-    title: "We developed an eCommerce website"
+    title: "community-owned infrastructure"
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed euismod quis sit gravida pharetra sit. Cursus vel enim pretium vulputate semper sem elit magna neque. Aliquet adipisc."
+    text: "Lix is designed to avoid ecosystem lock-in: you can build and use Lix without any dependency on corporate-controlled infrastructure, like Microsoft's GitHub."
 
     buttons: 
-      - label: "See live"
+      - label: "read about our infrastructure"
         url: "#"
 
-      - label: "Read more"
+  - image: "images/services-web-development.png"
-        url: "#"
+    pretitle: "a human-friendly implementation"
-
+    title: "a configuration language for everyone — human or otherwise"
-  - image: "images/portfolio-ecommerce.png"
+    text: "Declarative configurations may run on machines — but their interface shouldn't be designed for them! The Lix team is constantly working on usability and ergonomics enhancements — including tools that let you better see and interact with your configuration."
-    pretitle: "Portfolio Service"
-    title: "We developed an eCommerce website"
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed euismod quis sit gravida pharetra sit. Cursus vel enim pretium vulputate semper sem elit magna neque. Aliquet adipisc."
 
     buttons: 
-      - label: "See live"
+      - label: "see existing & proposed improvements"
-        url: "#"
+        url: "/roadmap"
-
-      - label: "Read more"
-        url: "#"

data/home/services.yaml

@@ -1,27 +0,0 @@
-enabled: true
-id: "services"
-
-content:
-  title: "Our main services"
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec quam nibh elit pellentesque velit netus suspendisse. Sed enim, pretium, montes, in ut dolor urna."
-  cards:
-    - image: "images/services-web-development.png"
-      title: "Web development"
-      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie in malesuada eget fames purus ligula luctus tellus. Habitant condimentum sit gravida praesent. "
-      button:
-        label: "Learn more"
-        url: "#"
-
-    - image: "images/services-web-development.png"
-      title: "Web development"
-      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie in malesuada eget fames purus ligula luctus tellus. Habitant condimentum sit gravida praesent. "
-      button:
-        label: "Learn more"
-        url: "#"
-
-    - image: "images/services-web-development.png"
-      title: "Web development"
-      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie in malesuada eget fames purus ligula luctus tellus. Habitant condimentum sit gravida praesent. "
-      button:
-        label: "Learn more"
-        url: "#"

themes/lix/assets/images/ecosystem-nixpkgs.svg

@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="420"
+   height="420"
+   viewBox="0 0 411.363 411.363"
+   version="1.1"
+   xml:space="preserve"
+   style="clip-rule:evenodd;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2"
+   id="svg12"
+   sodipodi:docname="lix.svg"
+   inkscape:export-filename="../lix.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs12" /><sodipodi:namedview
+   id="namedview12"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   showgrid="false"
+   inkscape:zoom="1.203125"
+   inkscape:cx="174.12987"
+   inkscape:cy="174.54545"
+   inkscape:window-width="1276"
+   inkscape:window-height="1392"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg12" />
+    
+    
+    
+    
+    
+    <g
+   id="Flake"
+   transform="translate(-186.20448,-20.133533)">
+        <g
+   id="path4861"
+   transform="translate(66.1334,798.311)">
+            <path
+   d="m 247.523,-568.202 97.757,169.34 -44.925,0.422 -26.099,-45.495 -26.285,45.252 -22.322,-0.009 -11.433,-19.752 37.448,-64.392 -26.583,-46.26 z"
+   style="fill:#5277c3;stroke:#ffffff;stroke-width:10px"
+   id="path5" />
+        </g>
+        <g
+   id="use4863"
+   transform="translate(66.1334,798.311)">
+            <path
+   d="m 282.807,-637.955 -97.774,169.331 -22.827,-38.696 26.35,-45.35 -52.332,-0.138 -11.153,-19.335 11.389,-19.777 74.489,0.235 26.771,-46.152 z"
+   style="fill:#d52d00;stroke:#ffffff;stroke-width:10px"
+   id="path6" />
+        </g>
+        <g
+   id="use4865"
+   transform="translate(66.1334,798.311)">
+            <path
+   d="m 290.308,-502.594 195.532,0.009 -22.098,39.118 -52.45,-0.146 26.047,45.39 -11.168,19.327 -22.822,0.025 -37.041,-64.627 -53.355,-0.108 z"
+   style="fill:#d52d00;stroke:#ffffff;stroke-width:10px"
+   id="path7" />
+        </g>
+        <g
+   id="use4867"
+   transform="translate(66.1334,798.311)">
+            <path
+   d="m 404.115,-576.791 -97.758,-169.34 44.926,-0.421 26.099,45.495 26.285,-45.252 22.322,0.009 11.432,19.751 -37.448,64.392 26.584,46.261 z"
+   style="fill:#d52d00;stroke:#ffffff;stroke-width:10px"
+   id="path8" />
+        </g>
+        <g
+   id="path4873"
+   transform="translate(66.1334,798.311)">
+            <path
+   d="m 247.523,-568.202 97.757,169.34 -44.925,0.422 -26.099,-45.495 -26.285,45.252 -22.322,-0.009 -11.433,-19.752 37.448,-64.392 -26.583,-46.26 z"
+   style="fill:#5277c3;stroke:#ffffff;stroke-width:10px"
+   id="path9" />
+        </g>
+        <g
+   id="use4875"
+   transform="translate(66.1334,798.311)">
+            <path
+   d="m 361.069,-642.826 -195.531,-0.01 22.097,-39.117 52.45,0.145 -26.047,-45.389 11.169,-19.327 22.822,-0.025 37.041,64.627 53.354,0.108 z"
+   style="fill:#d362a4;stroke:#ffffff;stroke-width:10px"
+   id="path10" />
+        </g>
+        <g
+   id="use4877"
+   transform="translate(66.1334,798.311)">
+            <path
+   d="m 368.697,-507.074 97.774,-169.33 22.828,38.696 -26.35,45.35 52.332,0.137 11.153,19.336 -11.389,19.777 -74.49,-0.235 -26.771,46.152 z"
+   style="fill:#a30262;stroke:#ffffff;stroke-width:10px"
+   id="path11" />
+        </g>
+        <g
+   id="path3336-6"
+   transform="translate(66.1334,798.311)">
+            <path
+   d="m 247.639,-568.311 97.758,169.341 -44.926,0.421 -26.099,-45.495 -26.285,45.252 -22.322,-0.009 -11.433,-19.752 37.449,-64.392 -26.584,-46.26 z"
+   style="fill:#ff9a56;stroke:#ffffff;stroke-width:10px"
+   id="path12" />
+        </g>
+    </g>
+</svg>

themes/lix/assets/scss/sections/ecosystem.scss

@@ -0,0 +1,11 @@
+.ecosystem img.raster {
+	margin-left: auto;
+	margin-right: auto;
+	width: 40%;
+}
+
+.ecosystem img.svg {
+	margin-left: auto;
+	margin-right: auto;
+	width: 60%;
+}

themes/lix/assets/scss/shared/shared.scss

@@ -9,7 +9,7 @@
 @import "../sections/hero";
 @import "../sections/brands";
 @import "../sections/portfolio";
-@import "../sections/services";
+@import "../sections/ecosystem";
 @import "../sections/testimonials";
 @import "../sections/cta";
 

themes/lix/layouts/index.html

@@ -1,8 +1,5 @@
 {{ define "main" }}
   {{ with .Site.Data.home.hero }}{{ partial "sections/hero.html" . }}{{ end }}
-  {{ with .Site.Data.home.brands }}{{ partial "sections/brands.html" . }}{{ end }}
+  {{ with .Site.Data.home.ecosystem }}{{ partial "sections/ecosystem.html" . }}{{ end }}
   {{ with .Site.Data.home.portfolio }}{{ partial "sections/portfolio.html" . }}{{ end }}
-  {{ with .Site.Data.home.services }}{{ partial "sections/services.html" . }}{{ end }}
-  {{ with .Site.Data.home.testimonials }}{{ partial "sections/testimonials.html" . }}{{ end }}
-  {{ with .Site.Data.home.cta }}{{ partial "sections/cta.html" . }}{{ end }}
 {{ end }}

themes/lix/layouts/partials/sections/ecosystem.html

@@ -1,4 +1,4 @@
-<section class="section services py-5">
+<section class="section ecosystem py-5">
   <div class="container">
     <div class="row justify-content-center pb-5">
       <div class="col-12 col-xl-6">

themes/lix/layouts/partials/shared/footer.html

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row pb-5">
       <div class="col-12 col-xl-4 text-center text-xl-start pb-4">
-        <h4 class="fs-4 fw-semibold text-uppercase text-primary">{{ .Site.Title }}</h4>
+        <h4 class="fs-4 fw-semibold text-primary">{{ .Site.Title }}</h4>
         <p class="small text-black-61">{{ .Site.Params.description }}</p>
         {{ with .Site.Params.social }}
         <ul class="d-flex justify-content-center justify-content-xl-start list-unstyled">

themes/lix/layouts/partials/utilities/image-fluid.html

@@ -1,3 +1,7 @@
 {{ with resources.Get . }}
-  <img class="img-fluid" src="{{ .Permalink }}" alt="{{ .Title }}" width="{{ .Width }}" height="{{ .Height }}">
+{{ if eq .MediaType.SubType "svg" }}
+  <img class="img-fluid svg" src="{{ .Permalink }}" alt="{{ .Title }}">
+{{ else }}
+  <img class="img-fluid raster" src="{{ .Permalink }}" alt="{{ .Title }}" width="{{ .Width }}" height="{{ .Height }}">
+{{ end }}
 {{ end }}