Introduce NativeLink Web Platform

[SchahinRohani]

Introducing Nativelink Web Platform and Migrated Documentation

This feature introduces the NativeLink web platform, built using Astro and Qwik, along with the migration of the existing documentation. It also includes significant improvements to website performance.

What's Included?

• Basic structure and functionality of the web platform (website + docs)
• Migrated documentation

Preview Link

Type of change

• This change requires a documentation update

Checklist

• Updated documentation if needed
• Tests added/amended
• bazel test //... passes locally
• PR is contained in a single commit, using git amend see some docs

---

This change is 

[allada]

+@blakehatch please work with @aaronmondal and @SchahinRohani on this.

Reviewable status: 0 of 2 LGTMs obtained, and 0 of 111 files reviewed (waiting on @blakehatch)

[blakehatch]

+@blakehatch please work with @aaronmondal and @SchahinRohani on this.

Reviewable status: 0 of 2 LGTMs obtained, and 0 of 111 files reviewed (waiting on @blakehatch)

Will do @allada, meeting on this tmrw morning.

[aaronmondal]

Great work! I marked various development artifacts that can probably be removed. I'll defer the content review to @blakehatch. From a code-perspective this mostly looks fine to me, modulo mostly formatting nits.

One thing we might think about is getting the various colors into some unified palette (and maybe some of the styles?) At the moment it looks like the inline tailwind usage is fairly manageable though. +@bclark8923 might be able to evaluate this better and #1289 might play a role in this as well.

Performance-wise the site is incredible, especially considering the many images, videos etc. As a follow-up we should definitely add dedicated lightouse workflows to prevent regressions on the top-level pages and especially to ensure good accessibility. It looks like the few points we're missing are mostly due to the imports from wix. Moving to another CDN probably gets us to perfect scores, though this seems more like a mid-term goal.

Reviewed 5 of 104 files at r3, 135 of 135 files at r4, all commit messages.
Reviewable status: 0 of 2 LGTMs obtained, and all files reviewed, and 48 discussions need to be resolved (waiting on @bclark8923 and @blakehatch)

---

.github/styles/config/vocabularies/TraceMachina/accept.txt line 71 at r4 (raw file):

Bruer
Eagan
plattform

remove 'platform'

---

web/platform/src/assets/astro.svg line 1 at r4 (raw file):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

remove

---

web/platform/src/assets/cloud.svg line 1 at r4 (raw file):

<svg data-bbox="0.139 0.322 20.698 13.356" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 14" height="14" width="21" data-type="ugc">

not sure if this is used, if it isn't, remove

---

web/platform/src/assets/qwik.svg line 1 at r4 (raw file):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

remove

---

web/platform/src/components/qwik/components/cards.tsx line 20 at r4 (raw file):

      <div class="flex h-auto w-5/6 flex-col items-start justify-start md:w-[277px] md:gap-0">
        <div>{icon}</div>
        <div class="bg-gradient-to-r from-white to-[#707098] bg-clip-text py-4 pr-6 text-[25px] text-transparent md:h-[120px] md:px-0 md:py-6">

Could we merge the colors in some global palette? I.e have a unified place where all the hashtag values live

---

web/platform/src/components/qwik/components/cards.tsx line 89 at r4 (raw file):

          id="Card"
          key={plan.title}
          class="flex flex-col gap-5 items-center justify-between p-6 w-80 rounded-lg bg-[rgba(205,193,193,0.46)] rounded-xl shadow-lg shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[9px] border border-[rgba(205,193,193,0.92)]"

same for these rgba values

---

web/platform/src/components/qwik/components/codeTabs.tsx line 55 at r4 (raw file):

                -v $(pwd)/basic_cas.json:/config \{"\n"}
                -p 50051:50051 \{"\n"}
                ghcr.io/tracemachina/nativelink:v0.5.1 \{"\n"}

nit: change this one (and the one below) to 0.5.3. Mid-term we should probably pass the version via e.g. an external environment variable so that this stays up-to-date.

---

web/platform/src/components/qwik/components/faq.tsx line 1 at r4 (raw file):

import { component$ } from "@builder.io/qwik";

remove

---

web/platform/src/components/qwik/components/some-islands.tsx line 1 at r4 (raw file):

import { $, component$, useOnDocument, useSignal } from "@builder.io/qwik";

what is this for?

---

web/platform/src/components/qwik/components/counter/counter.tsx line 5 at r4 (raw file):

export const Counter = component$((props: { initialVal: number }) => {
  const counter = useSignal<number>(props.initialVal);
  // console.log(counter)

comment

---

web/platform/src/components/qwik/pages/company.tsx line 7 at r4 (raw file):

// const _cards = [
//   {
//     title: "Media Kit",

comment

---

web/platform/src/components/react/faq.tsx line 5 at r4 (raw file):

import { useState } from "react";

// import { qwikify$ } from "@builder.io/qwik-react";

comment

---

web/platform/src/components/react/faq.tsx line 145 at r4 (raw file):

};

// export const QFAQ = qwikify$(FAQ);

comment

---

web/platform/src/components/react/react-counter.tsx line 1 at r4 (raw file):

/** @jsxImportSource react */

is this file needed?

---

web/platform/src/components/react/react-counter.tsx line 4 at r4 (raw file):

import { useState } from "react";

// import { qwikify$ } from "@builder.io/qwik-react";

comment

---

web/platform/src/components/react/react-counter.tsx line 19 at r4 (raw file):

};

// export const QReactCounter = qwikify$(ReactCounter);

comment

---

web/platform/src/components/react/aceternity/index.ts line 4 at r4 (raw file):

import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {

nit: add a comment here to explain why this exists

---

web/platform/styles/tailwind.css line 37 at r4 (raw file):

}

/* @theme {

nit: should we aggregate colors in the theme?

---

.github/workflows/web.yaml line 88 at r4 (raw file):

      - name: Production deployment
        if: matrix.os == 'ubuntu-24.04' && github.ref == 'refs/heads/main'
        working-directory: web/platform

looks like this is missing the deploy token?

---

web/platform/astro.config.ts line 20 at r4 (raw file):

import { starlightConfig } from "./starlight.conf";

// import Biome from "@playform/format";

nit: remove comment

---

web/platform/astro.config.ts line 41 at r4 (raw file):

    }),
    starlight(starlightConfig),
    // tailwind() // Tailwind 3.x

nit: comments and should all of this be disabled?

---

web/platform/starlight.conf.ts line 10 at r4 (raw file):

    PageFrame: "/src/components/starlight/PageFrame.astro",
  },
  // disable404Route: true,

nit: comment

---

web/platform/src/components/media/icons/engineers.tsx line 1 at r4 (raw file):

import type { PropsOf } from "@builder.io/qwik";

nit: i wonder, is there a way to import these svgs from some library?

---

web/platform/src/components/media/icons/icons.tsx line 1 at r4 (raw file):

import type { PropsOf } from "@builder.io/qwik";

nit: looks like most of this could be imported/fetched

---

web/platform/src/components/media/icons/icons.tsx line 569 at r4 (raw file):

};

export const SlackIcon = (_props: PropsOf<"svg">, _key: string) => {

nit: is this importable?

---

web/platform/src/components/media/icons/icons.tsx line 609 at r4 (raw file):

};

export const GitHubIcon = (_props: PropsOf<"svg">, _key: string) => {

nit: is this importable?

---

web/platform/src/components/qwik/components/footer.tsx line 3 at r4 (raw file):

import { component$, useSignal } from "@builder.io/qwik";

// import { Background } from "../../media/icons/icons";

comments

---

web/platform/src/components/qwik/components/footer.tsx line 56 at r4 (raw file):

export const Footer = component$(() => {
  const videoElementSignal = useSignal<HTMLAudioElement | undefined>();
  // const videoPlayButtonSignal = useSignal<HTMLButtonElement | undefined>();

comments

---

web/platform/src/components/qwik/components/header.css line 59 at r4 (raw file):

/*

nit: whitespace (and I think there is a redundand newline above this comment)

---

web/platform/src/components/qwik/components/logo.tsx line 5 at r4 (raw file):

// Assume reusable use method that does not have access to JSX
// but needs to register event handlers.

comment

---

web/platform/src/components/qwik/components/logo.tsx line 22 at r4 (raw file):

  // const _pos = useStorage();

  //   useVisibleTask$(() => {

comment

---

web/platform/src/components/qwik/components/counter/counter.module.css line 1 at r4 (raw file):

.container {

I wonder, what are your thoughts on putting the css for components into the tsx files? No strong opinion here, but it seems like it could make things more maintainable.

---

web/platform/src/components/qwik/counter/counter.tsx line 1 at r4 (raw file):

import { component$, useSignal } from "@builder.io/qwik";

what is this for?

---

web/platform/src/components/qwik/pages/community.tsx line 29 at r4 (raw file):

    date: "October 14-15, 2024",
    description:
      "Come hang out with us at Bazelcon at the Computer History Museum in Mountain View, CA! We are speaking at the event, so drop by to hear about the cool stuff we're building with our open-source contributors and the impact we've had for our customers. Also come find us around the conference if you want to chat with our team, we love to talk shop and meet our community in-person. Keep an eye on our socials for info on our external meetups that week and other chances to connect with our team during the conference. 1401 N Shoreline Blvd, Mountain View, CA 94043. Hope to see you there!",

nit: is it possible to linebreak this (and the ones below) for nicer diffs when this text is modified?

---

web/platform/src/components/qwik/pages/home.tsx line 5 at r4 (raw file):

import { Benefits } from "../sections/benefits";
import { Engineers } from "../sections/engineers";
// import { Impact } from "../sections/impact";

comment

---

web/platform/src/components/qwik/pages/product.tsx line 3 at r4 (raw file):

import { component$, useVisibleTask$ } from "@builder.io/qwik";

// import { Counter } from "../components/counter/counter";

comment

---

web/platform/src/components/qwik/sections/testimonials.tsx line 17 at r4 (raw file):

        <span class="text-[#8280A6]">from</span>
        {/* <img
          alt="Rocky Linux Logo"

the image here doesn't seem to show up on the page

---

web/platform/src/content/config.ts line 10 at r4 (raw file):

  schema: z.object({
    hello: z.string(),
    // tags: z.array(z.string()),

comments

---

web/platform/src/content/data/hello_world.json line 1 at r4 (raw file):

{

remove

---

web/platform/src/content/posts/Announcement_NativeLink.md line 9 at r4 (raw file):

pubDate: 2024-09-17
---
Today, we're excited to release NativeLink–a Rust implementation of Bazel's Remote Build Execution protocol (RBE) and Content Addressable Storage (CAS) designed to run your code and get out of the way. NativeLink seamlessly integrates with Bazel, Reclient, Goma, and Buck2. It comes at no cost and works on every major operating system.

nit: linebreak this text at 80 chars

---

web/platform/src/content/posts/Announcement_TraceMachina_Seedfunding.md line 9 at r4 (raw file):

readTime: 30 seconds
---
Trace Machina secures funding and launches NativeLink out of stealth to deliver simulation infrastructure for safety-critical technologies

nit: linebreak at 80 chars

---

web/platform/src/content/posts/CaseStudy_CIQ.md line 9 at r4 (raw file):

readTime: 30 seconds
---
CIQ is an enterprise company that specializes in Linux distribution, computing infrastructure, and cluster management and provisioning systems. They have a deep running commitment to supporting open source projects and creating enterprise-level support for them: They're the Founding Sponsor of Rocky Linux, an open source operating system that rebuilds sources directly from Red Hat Enterprise Linux (RHEL); they support an open source project called Warewulf that's a cluster management and provisioning system to help simplify deployment and management of compute clusters; and they supported and donated Singularity (later named to Apptainer) to the Linux Foundation that's designed to bring containers to high performance computing.

nit: linebreak at 80 chars

---

web/platform/src/content/posts/CaseStudy_Samsung.md line 10 at r4 (raw file):

---
Background
Samsung Internet, a Chromium-based browser, has been an integral part of Samsung's product lineup, requiring robust and efficient build infrastructure to keep up with its evolving complexity. With a need for more advanced solutions due to increasing build complexity and domain variety, the Samsung Internet team sought a tool that could provide remote execution and build caching at scale.

nit: linebreak at 80 chars

---

web/platform/src/content/posts/hello_world.md line 2 at r4 (raw file):

---
title: Hello World Blog Post

remove

---

web/platform/src/layouts/Layout.astro line 13 at r4 (raw file):

<!doctype html>
<html lang="en">
	<head>

use spaces instead of tabs

---

web/platform/src/layouts/MarkdownLayout.astro line 104 at r4 (raw file):

</div>

nit: remove redundant newlines

---

web/platform/src/pages/company.astro line 5 at r4 (raw file):

import { CompanyPage } from "@qwik/pages/company"

nit: remove empty line

---

web/platform/styles/landing.css line 11 at r4 (raw file):

[data-has-hero] .page {
	background:

use spaces instead of tabs

[blakehatch]

will swap out DNS before merge

Reviewable status: 1 of 2 LGTMs obtained, and 81 of 148 files reviewed, and pending CI: Bazel Dev / ubuntu-22.04, Cargo Dev / macos-13, Installation / macos-13, Installation / macos-14, Local / ubuntu-22.04, Remote / large-ubuntu-22.04, Web Platform Deployment / macos-14, docker-compose-compiles-nativelink (22.04), windows-2022 / stable, and 39 discussions need to be resolved (waiting on @bclark8923)

[aaronmondal]

Reviewed 29 of 52 files at r5, 28 of 30 files at r6, 3 of 3 files at r7, all commit messages.
Reviewable status: 1 of 2 LGTMs obtained, and 140 of 148 files reviewed, and pending CI: Bazel Dev / ubuntu-22.04, Cargo Dev / macos-13, Installation / macos-13, Installation / macos-14, Remote / large-ubuntu-22.04, Web Platform Deployment / macos-14, docker-compose-compiles-nativelink (22.04), windows-2022 / stable (waiting on @bclark8923)

[aaronmondal]

Reviewed 8 of 52 files at r5.
Reviewable status: 1 of 2 LGTMs obtained, and all files reviewed, and pending CI: Bazel Dev / ubuntu-22.04, Cargo Dev / macos-13, Installation / macos-13, Installation / macos-14, Remote / large-ubuntu-22.04, Web Platform Deployment / macos-14, docker-compose-compiles-nativelink (22.04), windows-2022 / stable (waiting on @bclark8923)

[aaronmondal]

-@bclark8923

Reviewable status: complete! 2 of 2 LGTMs obtained, and all files reviewed

[blakehatch]

Reviewed all commit messages.
Reviewable status: complete! 2 of 2 LGTMs obtained, and all files reviewed