pod-os · angelo-v · Sep 9, 2025 · Sep 1, 2025 · Sep 1, 2025 · Sep 1, 2025
diff --git a/.github/workflows/homepage.yml b/.github/workflows/homepage.yml
@@ -0,0 +1,23 @@
+name: Deploy Homepage
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./homepage
+    env:
+      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_POD_OS_HOMEPAGE_SITE_ID }}
+      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Nix
+        uses: DeterminateSystems/nix-installer-action@main
+      - name: Build homepage
+        run: nix-shell --run "make build"
+      - name: Deploy PodOS Homepage
+        run: npx netlify-cli deploy --dir=site --prod
diff --git a/elements/readme.md b/elements/readme.md
@@ -54,7 +54,7 @@ Try this 🤩:
 
 Check out the [📖 Storybook documentation](https://pod-os.github.io/PodOS/storybook/) to learn about the available elements.
 
-Also, check out the [🧑‍🏫 tutorial section](../docs/tutorials) on practical guides.
+Also, check out the [🧑‍🏫 tutorial section](http://pod-os.org/tutorials/) on practical guides.
 
 ## Development
 

diff --git a/homepage/.gitignore b/homepage/.gitignore
@@ -0,0 +1,2 @@
+site/
+docs/assets/
diff --git a/homepage/build/prepare.nu b/homepage/build/prepare.nu
@@ -0,0 +1,3 @@
+#!/usr/bin/env nu
+
+rsync --recursive ../assets/ ./docs/assets/
diff --git a/homepage/docs/contributing/index.md b/homepage/docs/contributing/index.md
@@ -0,0 +1,5 @@
+# Contributing to PodOS
+
+Check out our [repository on GitHub](https://github.com/pod-os/PodOS) and
+the [Contribution Guide](https://github.com/pod-os/PodOS/blob/main/CONTRIBUTING.md).
+
diff --git a/homepage/docs/getting-started/index.md b/homepage/docs/getting-started/index.md
@@ -0,0 +1,30 @@
+# Getting started
+
+## Hosted PodOS apps
+
+The simplest way to use PodOS is by using one of the hosted apps PodOS provides:
+
+<div class="grid cards" markdown>
+
+-   :octicons-browser-16:{ .lg .middle } __PodOS Browser__
+
+    ---
+
+    Allows you to browse through Solid Pods, your own or those of your friends and coworkers.
+
+    [:rocket: Launch PodOS Browser](https://browser.pod-os.org)
+
+-   :material-contacts:{ .lg .middle } __PodOS Contacts__
+
+    ---
+
+    :warning: Still in an early, experimental stage. Open address books and manage your contacts.
+
+    [:construction: Try PodOS Contacts](https://contacts.pod-os.org)
+
+
+</div>
+
+## Create your own dashboards
+
+With PodOS elements you can build your own html dashboards to access and visualize data in your Solid Pod the way you prefer. Read the [Quick Start](quick-start.md) to learn more.
diff --git a/homepage/docs/getting-started/quick-start.md b/homepage/docs/getting-started/quick-start.md
@@ -0,0 +1,49 @@
+# Quick start - PodOS elements
+
+1. Create a plain old html file
+2. Add latest PodOS script tag and stylesheet to the head
+3. Add a `<pos-app></pos-app>` to the body and use any PodOS element within it.
+4. Host the page on any webserver (like your [Solid](../solid/index.md) Pod 😉)
+
+Try this 🤩:
+
+``` html linenums="1" hl_lines="5-12 15 16 17 19 22"
+<!DOCTYPE html>
+<html>
+<head>
+  <title>PodOS Quick Start</title>
+  <script
+    type="module"
+    src="https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/elements/elements.esm.js"
+  ></script>
+  <link
+    href="https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/elements/elements.css"
+    rel="stylesheet"
+  />  <!-- (1)!  -->
+</head>
+<body>
+<pos-app> <!-- (2)!  -->
+  <pos-resource
+    uri="https://solidproject.solidcommunity.net/profile/card#me"> <!-- (3)! --> 
+    <h1> <!-- (4)! -->
+      <pos-label /> <!-- (5)! -->
+    </h1>
+    <blockquote>
+      <pos-description /> <!-- (6)! -->
+    </blockquote>
+  </pos-resource>
+</pos-app>
+</body>
+</html>
+```
+
+1. PodOS can be easily included from any CDN
+2. `<pos-app>` will provide PodOS to child elements. All other PodOS elements must be nested inside a `<pos-app>`
+3. Loads the resource and sets the context for all the child elements
+4. You can just combine normal HTML with PodOS elements
+5. `<pos-label` renders a human-readable name of the resource
+6. `<pos-description>` renders a renders a description of the resource
+
+Check out the [📖 Storybook documentation](https://pod-os.github.io/PodOS/storybook/) to learn about the available elements.
+
+Also, check out the [🧑‍🏫 tutorial section](../tutorials/index.md) on practical guides.
diff --git a/homepage/docs/index.md b/homepage/docs/index.md
@@ -0,0 +1,51 @@
+---
+hide:
+  - navigation
+  - toc
+title: PodOS - Your personal online data OS
+template: home.html.j2
+---
+
+<div class="grid cards" markdown>
+
+-   :material-clock-fast:{ .lg .middle } __No install - runs in your browser__
+
+    ---
+
+    With PodOS Browser you can start to use PodOS right now.
+
+    [:octicons-arrow-right-24: Launch PodOS Browser](https://browser.pod-os.org)
+
+-   :simple-html5:{ .lg .middle } __It's just HTML__
+
+    ---
+
+    With PodOS elements, facilitating your data is as simple as writing html
+
+    [:octicons-arrow-right-24: Quick start](getting-started/quick-start.md)
+
+-   :material-protocol:{ .lg .middle } __Interoperable web standards__
+
+    ---
+
+    Fully based on the Solid protocol and proven W3C standards. Zero lock-in.
+
+    [:octicons-arrow-right-24: About Solid](solid/index.md)
+
+-   :material-scale-balance:{ .lg .middle } __100 % Open Source__
+
+    ---
+
+    PodOS is 100% free and open soure
+
+    [:octicons-arrow-right-24: View the code](https://github.com/pod-os/PodOS)
+
+-   <img src="https://nlnet.nl/image/logos/NGI0_tag.svg" alt="NGI Zero Logo" width="15%" /> __Funded by NLNet__
+
+    ---
+
+    Funded through [NGI0 Commons Fund](https://nlnet.nl/commonsfund/), a fund established by [NLnet](https://nlnet.nl/) with financial support from the European Commission's [Next Generation Internet](https://ngi.eu/) program
+
+    [:octicons-arrow-right-24: Learn more](https://nlnet.nl/project/PodOS/)
+
+</div>
diff --git a/homepage/docs/overrides/home.html.j2 b/homepage/docs/overrides/home.html.j2
@@ -0,0 +1,24 @@
+{% extends "main.html" %}
+
+{% block content %}
+
+  <section class="hero">
+    <img src="/assets/logo.svg" alt="PodOS logo" class="hero__logo">
+    <div>
+      <h1 class="hero__title">Your data, no matter what.</h1>
+      <p>PodOS serves as your gateway to managing online data. Store your data anywhere across the web and access it
+        whenever and wherever it is needed
+      </p>
+      <p class="buttons">
+        <a href="getting-started/" class="md-button md-button--primary">Get Started</a>
+        <a href="contributing/" class="md-button">Contributing</a>
+      </p>
+    </div>
+  </section>
+
+  {{ page.content }}
+
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
diff --git a/homepage/docs/solid/index.md b/homepage/docs/solid/index.md
@@ -0,0 +1,5 @@
+# About Solid
+
+Thanks to the Solid Protocol, PodOS can access data anywhere on the web and you stay in full control of where to store it.
+
+Learn more about Solid at [solidproject.org](https://solidproject.org).
diff --git a/homepage/docs/stylesheets/extra.css b/homepage/docs/stylesheets/extra.css
@@ -0,0 +1,26 @@
+section.hero {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2rem;
+  padding: 0 1rem;
+  h1 {
+    font-size: 3rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    line-height: 3rem;
+  }
+
+  .buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.2rem;
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    text-align: center;
+    gap: 2rem;
+  }
+}
diff --git a/docs/tutorials/authentication.md → homepage/docs/tutorials/authentication.md b/docs/tutorials/authentication.md → homepage/docs/tutorials/authentication.md
diff --git a/homepage/docs/tutorials/index.md b/homepage/docs/tutorials/index.md
@@ -0,0 +1,3 @@
+# Tutorials
+
+1. [Authentication](authentication.md)
diff --git a/homepage/makefile b/homepage/makefile
@@ -0,0 +1,8 @@
+prepare:
+	nu build/prepare.nu
+
+serve: prepare
+	mkdocs serve
+
+build: prepare
+	mkdocs build
diff --git a/homepage/mkdocs.yml b/homepage/mkdocs.yml
@@ -0,0 +1,63 @@
+site_name: PodOS
+site_url: https://pod-os.org/
+nav:
+  - Home: index.md
+  - Getting Started:
+      - getting-started/index.md
+      - getting-started/quick-start.md
+  - Tutorials:
+      - tutorials/index.md
+      - tutorials/authentication.md
+  - Contributing: contributing/index.md
+
+plugins:
+  - privacy
+extra_css:
+  - stylesheets/extra.css
+theme:
+  name: material
+  favicon: assets/logo.svg
+  features:
+    - navigation.tabs
+    - navigation.footer
+    - navigation.indexes
+    - content.code.copy
+    - content.code.select
+    - content.code.annotate
+  logo: assets/logo.svg
+  custom_dir: docs/overrides
+  palette:
+    # Palette toggle for automatic mode
+    - media: "(prefers-color-scheme)"
+      toggle:
+        icon: material/brightness-auto
+        name: Switch to light mode
+
+    # Palette toggle for light mode
+    - media: "(prefers-color-scheme: light)"
+      primary: white
+      scheme: default
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to dark mode
+
+    # Palette toggle for dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: black
+      toggle:
+        icon: material/weather-night
+        name: Switch to system preference
+markdown_extensions:
+  - attr_list
+  - md_in_html
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
+  - pymdownx.highlight:
+      anchor_linenums: true
+      line_spans: __span
+      pygments_lang_class: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences
diff --git a/homepage/shell.nix b/homepage/shell.nix
@@ -0,0 +1,20 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+with pkgs;
+mkShell {
+  buildInputs = [
+    nushell
+    python3Packages.mkdocs
+    python3Packages.mkdocs-material
+    rsync
+  ];
+
+  shellHook = ''
+echo "- Nushell $(nu --version)"
+echo "- MkDocs $(mkdocs --version)" 
+echo ""
+echo "Available commands:"
+echo "- make serve : Start development server"
+echo "- make build : Build static site"
+  '';
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		#!/usr/bin/env nu

		rsync --recursive ../assets/ ./docs/assets/
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Tutorials

		1. [Authentication](authentication.md)