Merge pull request 'Update frontpage content' (#9) from feature/frontpage_content into master

Reviewed-on: Kosmos/website#9

README.md

@@ -1,10 +1,14 @@
 # kosmos.org
 
-This website (or rather foundation for a future website) is a simple static
+This website is a simple static site. It is built using the
-site. It is built using the [Hugo](https://gohugo.io/) static site generator.
+[Hugo](https://gohugo.io/) static site generator.
 
 ## Getting started
 
 1. Clone this Git repository
 2. [Install Hugo](https://gohugo.io/getting-started/installing/)
-3. Run `hugo server`
+3. Run `npm run dev`
+
+## Build for production
+
+    npm run build:release

content/foundation/_index.md

@@ -1,6 +1,7 @@
 ---
 title: Kosmos Infrastructure Foundation
 description: Providing physical infrastructure for Kosmos software and services
+headerImage: servers-02.jpg
 menu:
   main:
     identifier: foundation
@@ -8,4 +9,72 @@ menu:
     weight: 10
 ---
 
-Foundation content
+The Kosmos Infrastructure Foundation (KIF) is the legal, physical, and financial
+host organization for Kosmos hosted services.
+
+It acts as an infrastructure provider to the developers and users of Kosmos
+software. It is appointed this role by the Kosmos co-operative, and is run by
+members of the co-operative itself.
+
+The foundation also accepts financial contributions on behalf of the
+co-operative, both for the development and maintenance of Kosmos (and related)
+software, as well as for providing hosted services to people and organizations.
+As per the KIF's founding statutes, which are legally binding, any and all of
+its funds must only be used for these purposes.
+
+## Our Mission
+
+We believe that neither the development nor usage of [free and open-source
+software](https://en.wikipedia.org/wiki/Free_and_open-source_software) should
+be entirely dependent upon select corporations or VC-funded startup companies.
+Thus, we think that free software benefits from community-owned, sovereign and
+open communication and collaboration platforms that are only beholden to free
+software's most important stakeholders: its creators and users.
+
+In this context, our mission is as follows:
+
+<ul class="list-disc ml-4">
+  <li class="mb-2">
+    Provide community-controlled infrastructure for the collaborative
+    development of all Kosmos applications, as well as related and unrelated
+    free software
+  </li>
+  <li class="mb-2">
+    Provide a professional, reliable hosting environment for research,
+    development, testing, and demonstration of all Kosmos applications
+  </li>
+  <li>
+    Provide, on a not-for-profit basis, easy-to-use services surrounding Kosmos
+    applications to end users, both individual and organizations
+  </li>
+  <li>
+    Help other organizations with both self-hosting and providing hosted
+    services to their own users or the wider public
+  </li>
+</ul>
+
+## Board of Directors
+
+{{< partial "kif/board" >}}
+
+## Contact
+
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+  <div>
+
+  ### Snail Mail
+
+  Stichting Kosmos Infrastructure Foundation  
+  Herengracht 449A  
+  1017 BR Amsterdam  
+  Netherlands
+
+  </div>
+  <div>
+
+  ### E-Mail
+
+  [foundation@kosmos.org](mailto:foundation@kosmos.org)
+
+  </div>
+</div>

content/projects/_index.md

@@ -7,4 +7,4 @@ menu:
     weight: 3
 ---
 
-Projects content
+{{< partial "projects" >}}

data/kif/board.yaml

@@ -0,0 +1,10 @@
+- name: Sebastian Kippe
+  role: Chairman
+- name: Garret Alfert
+  role: Secretary
+- name: Michael Bumann
+  role: Treasurer
+- name: Greg Karékinian
+  role: Director
+- name: Nick Jennings
+  role: Director

data/projects.yaml

@@ -0,0 +1,70 @@
+- name: Kosmos Chat
+  description: >-
+    Kosmos Chat is a group chat application, based
+    exclusively on open protocols, standards, and data
+    formats. All of its components can be either
+    self-hosted or connected to hosted services. No user
+    data is ever locked into hosted silos.
+  status: >-
+    An alpha version of the client app is in use by developers, and a public
+    beta version is planned for 2022.
+  links:
+    - section: Links
+      items:
+        - title: Overview & planned features (partially outdated)
+          url: https://wiki.kosmos.org/Kosmos_Chat
+        - title: Web client (alpha version)
+          url: https://hyperchannel.kosmos.org
+    - section: Source code
+      items:
+        - title: Hyperchannel (Web client)
+          url: https://github.com/67P/hyperchannel
+        - title: Sockethub (Protocol proxy)
+          url: https://github.com/sockethub/sockethub/
+
+- name: Kosmos Accounts & Services
+  description: >-
+    Kosmos Accounts give people access to our hosted
+    services. An account dashboard and control panel
+    offers account management functionality and
+    additional integrations.
+  status: >-
+    Accounts are in beta and already in use by some
+    developers and other users. Registration is
+    currently by invitation only.
+  links:
+    - section: Links
+      items:
+        - title: Account dashboard (beta version)
+          url: https://accounts.kosmos.org
+        - title: Services
+          url: "/services"
+    - section: Source code
+      items:
+        - title: Akkounts (account dashboard/control panel)
+          url: https://gitea.kosmos.org/kosmos/akkounts
+        - title: Chef cookbooks (infrastructure automation)
+          url: https://gitea.kosmos.org/kosmos/chef
+
+- name: Kredits
+  description: >-
+    Kredits are a system for tracking opensource project
+    contributions, enabling and facilitating the fair
+    and transparent use of project funds, as well as
+    improving project management and governance.
+  status: >-
+    We have been experimenting with the system in
+    pre-production for a while, and have run multiple
+    trials for development grant payouts. Currently
+    working on production migration/launch.
+  links:
+    - section: Links
+      items:
+        - title: Overview & technical details
+          url: https://wiki.kosmos.org/Kredits
+        - title: Contribution Dashboard
+          url: https://kredits.kosmos.org
+    - section: Source code
+      items:
+        - title: List of software and repositories
+          url: https://wiki.kosmos.org/Kredits#Software

data/services/community.yaml

@@ -4,7 +4,7 @@
       url: https://wiki.kosmos.org/Services:Chat
       description: Chat rooms and instant messaging (XMPP/Jabber)
     - name: Social
-      url: kosmos.social
+      url: https://kosmos.social
       description: Social media (micro-blogging on the fediverse)
     - name: Forums
       url: https://community.kosmos.org

public/index.html

@@ -1,10 +1,9 @@
-<!doctype html><html lang=en><head><meta name=generator content="Hugo 0.99.1"><meta charset=utf-8><title>Kosmos</title><meta content="width=device-width,minimum-scale=1,maximum-scale=1" name=viewport><link href=https://assets.kosmos.org/fonts/open-sans/open-sans.css rel=stylesheet><link href=/css/style.css rel=stylesheet></head><body><div id=wrapper><header><h1>Kosmos</h1><h2>Group communication for the 21st century</h2></header><main><p>We are an open co-operative of people, who are developing a free,
+<!doctype html><html lang=en><head><meta name=generator content="Hugo 0.101.0"><meta charset=utf-8><title>Kosmos</title><meta content="width=device-width,minimum-scale=1,maximum-scale=1" name=viewport><link href=https://assets.kosmos.org/fonts/open-sans/open-sans.css rel=stylesheet><link href=/css/style.css rel=stylesheet></head><body><div id=wrapper><header><h1>Kosmos</h1><h2>Group communication for the 21st century</h2></header><main><p>We are an open co-operative of people, who are developing a free,
 open-source, and user-centric alternative to centralized group chat
-platforms, based on widely used protocols and standards.</p><p>We also develop a system for rewarding contributors and enabling
+platforms, based on widely used protocols and standards.
-governance based on contributions, called Kredits, which we started
+<a href=/projects>Learn more about our projects</a>.</p><p>We also offer <a href=/services>hosted services</a> for a variety of
-using in production recently.</p><p>You can find all relevant information and further links in our
+applications on a not-for-profit basis. And we have recently created a
-<a href=https://wiki.kosmos.org>wiki</a>.
+community-led <a href=/foundation>foundation</a> for this purpose.</p><p>We collaborate on source code on
-We collaborate on source code on
 <a href=https://github.com/67P rel=me>GitHub</a>
 as well as our own
 <a href=https://gitea.kosmos.org/kosmos rel=me>Gitea</a>.

themes/kosmos-22/layouts/_default/baseof.html

@@ -5,7 +5,7 @@
     <title>{{ block "title" . }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
     <link href='https://assets.kosmos.org/fonts/open-sans/open-sans.css' rel='stylesheet'>
     {{ $css := resources.Get "css/main.css" | resources.Fingerprint }}
-    <link rel="stylesheet" href="{{ $css.Permalink }}" />
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}" />
   </head>
   <body class="text-center">
     {{ partial "topnav" . }}

themes/kosmos-22/layouts/_default/section.html

@@ -1,7 +1,15 @@
 {{ define "main" }}
+  {{ if .Params.HeaderImage }}
+    <!-- <div class="w&#45;full h&#45;32 bg&#45;[center_bottom_23rem] bg&#45;cover" -->
+    <!--      style="background&#45;image: url(/img/{{ .Params.HeaderImage }})"> -->
+    <div class="w-full h-32 bg-[center] bg-cover"
+         style="background-image: url(/img/{{ .Params.HeaderImage }})">
+    </div>
+  {{ else }}
     <div class="w-full h-32 bg-[url('/img/lagoon-close-02.jpg')]
                 bg-[center_top_30rem] bg-cover">
     </div>
+  {{ end }}
   <div class="max-w-5xl mx-auto -mt-12 py-8 px-8 text-left bg-white">
   <header class="mb-8">
     <h1 class="text-2xl font-bold">{{ .Title }}</h1>

themes/kosmos-22/layouts/index.html

@@ -18,15 +18,14 @@
         We are an open co-operative of people, who are developing a free,
         open-source, and user-centric alternative to centralized group chat
         platforms, based on widely used protocols and standards.
+        <a href="/projects">Learn more about our projects</a>.
       </p>
       <p>
-        We also develop a system for rewarding contributors and enabling
+        We also offer <a href="/services">hosted services</a> for a variety of
-        governance based on contributions, called Kredits, which we started
+        applications on a not-for-profit basis. And we have recently created a
-        using in production recently.
+        community-led <a href="/foundation">foundation</a> for this purpose.
       </p>
       <p>
-        You can find all relevant information and further links in our
-        <a href="https://wiki.kosmos.org">wiki</a>.
         We collaborate on source code on
         <a href="https://github.com/67P" rel="me">GitHub</a>
         as well as our own

themes/kosmos-22/layouts/partials/kif/board.html

@@ -0,0 +1,8 @@
+<ul class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-6 mb-8">
+{{ range site.Data.kif.board }}
+  <li>
+    {{ .name }}<br>
+    <span class="text-discreet text-sm">{{ .role }}</span>
+  </li>
+{{ end }}
+</ul>

themes/kosmos-22/layouts/partials/projects.html

@@ -0,0 +1,19 @@
+{{ range site.Data.projects }}
+  <h2>{{ .name }}</h2>
+  <p>{{ .description | markdownify }}</p>
+  <p class="text-discreet">
+    <strong>Status:</strong> {{ .status | markdownify }}
+  </p>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+  {{ range .links }}
+    <div>
+      <h3 class="mt-6">{{ .section }}</h3>
+      <ul class="list-disc list-inside leading-relaxed">
+      {{ range .items }}
+        <li><a href="{{ .url }}">{{ .title | markdownify }}</a></li>
+      {{ end }}
+      </ul>
+    </div>
+  {{ end }}
+  </div>
+{{ end }}

themes/kosmos-22/layouts/partials/services/community.html

@@ -1,10 +1,10 @@
 {{ range site.Data.services.community }}
-  <h3 class="mb-4 text-sm uppercase text-zinc-500">{{ .category }}</h3>
+  <h3>{{ .category }}</h3>
   <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-8">
   {{ range .items }}
     <li>
       <h4 class="text-lg font-bold mb-2">
-        <a href="{{ .url }}" class="border-b border-zinc-400">{{ .name }}</a>
+        <a href="{{ .url }}" class="!text-black">{{ .name }}</a>
       </h4>
       <p>{{ .description }}</p>
     </li>

themes/kosmos-22/source/main.css

@@ -4,6 +4,48 @@
 
 @layer base {
   h2 {
-    @apply text-lg font-bold mb-8;
+    @apply text-lg font-bold mb-6 mt-8;
   }
+
+  h3 {
+    @apply mb-4 text-sm uppercase text-zinc-500;
+  }
+
+  h3:not(:first-child) {
+    @apply mt-6;
+  }
+
+  p + p,
+  p + ul {
+    @apply mt-6;
+  }
+
+  /* ul { */
+  /*   @apply list-disc list-inside leading-relaxed; */
+  /* } */
+}
+
+@layer components {
+  .text-discreet {
+    @apply text-zinc-500;
+  }
+
+  .content {
+    @apply pb-20;
+  }
+
+  .content a         { @apply text-sky-600 border-b border-zinc-300; }
+  .content a:hover   { @apply text-sky-700 border-b border-zinc-400; }
+  .content a:visited { @apply text-indigo-600 }
+  .content a:active  { @apply text-sky-500; }
+
+  input#mobile-nav-is-open + div > a svg:last-of-type          { @apply hidden; }
+  input#mobile-nav-is-open:checked + div > a svg:first-of-type { @apply hidden; }
+  input#mobile-nav-is-open:checked + div > a svg:last-of-type  { @apply block; }
+
+  input#mobile-nav-is-open + div > div.backdrop         { @apply hidden; }
+  input#mobile-nav-is-open:checked + div > div.backdrop { @apply block; }
+
+  input#mobile-nav-is-open + div > nav         { @apply hidden; }
+  input#mobile-nav-is-open:checked + div > nav { @apply block }
 }