create-vanjs/template-node-ssr/src/routes/about.js

🍦 Quick tool for scaffolding your first VanJS project

// import van from "vanjs-core";
import van from "@vanjs/van";
import { Meta, Title } from "@vanjs/meta";
import { A, navigate } from "@vanjs/router";

export const route = {
  preload: async () => {
    // in most cases you may want to enforce user access control
    console.log("About preload triggered");
  },
  load: async () => {
    // Load data if needed
    // you might want to cache this data
    console.log("About load triggered");
  },
};

export const Page = () => {
  const { div, h1, p, button } = van.tags;
  Title("About Page");
  Meta({ name: "description", content: "About description" });
  return [
    div(
      { class: "flex h-screen" },
      div(
        { class: "container mx-auto p-4" },
        h1({ class: "text-5xl font-bold my-8" }, "About"),
        p({ class: "mb-4" }, "This is the about page"),
        button(
          { class: "btn mr-2", onclick: () => navigate("/") },
          "Go home",
        ),
        A(
          { class: "btn", href: "/not-found" },
          "Not found",
        ),
      ),
    ),
  ];
};