fix 1235, 1246, 1248 and download page regresisons (#1265)

- fix #1235
- fix #1246
- fix #1248
- fix #1272 
- fix #1271 
- fix #1270 
- fix #1267 
- fix #1266 
- fix #1263 
- fix #1262
- fix #1283
- fix #1282
- fix #1280
- fix #1278
- fix some regressions on the download page (though not all)

---------

Co-authored-by: Rok Garbas <rok@garbas.si>

src/components/layout/CodeBlock.astro

@@ -8,7 +8,7 @@ const { lines } = Astro.props;
 
 ---
 
-<pre class="font-mono bg-[#3a3a3a] text-white whitespace-pre-line p-4 rounded-3xl">
+<pre class="font-mono bg-[#3a3a3a] text-white whitespace-pre-line p-4 rounded-3xl overflow-x-scroll">
 {lines.map((line, idx, {length}) => {
  if (length - 1 === idx) {
  return <span class="font-bold">{line.shellPrompt}</span><span>{line.code}</span>

src/components/pages/community/NixConEntry.astro

@@ -12,7 +12,7 @@ interface Props {
 const { title, date, description, href, imagePath = null } = Astro.props;
 ---
 
-<div class="font-extralight flex flex-col gap-1">
+<a href={href} target="_blank" rel="noopener noreferrer" class="!no-underline !text-white font-extralight flex flex-col gap-1">
  {imagePath && (
  <div class="flex justify-center bg-white rounded-xl mb-4 p-4 h-48">
  <Image src={imagePath} alt={`${title} Logo`} width="200" height="200" />
@@ -22,6 +22,6 @@ const { title, date, description, href, imagePath = null } = Astro.props;
  <div class="text-sm">{date}</div>
  <div class="leading-relaxed">{description}</div>
  <div class="!text-white text-right font-bold">
- <a href={href} class="!text-white">Read more...</a>
+ <span class=" underline">Read more...</span>
  </div>
-</div>
+</a>

src/components/pages/download/components/DownloadHeader.astro

@@ -13,7 +13,7 @@ const { title, subTitle, currentVersion } = Astro.props;
 ---
 
 <Container class="grid grid-cols-2 bg-nixdarkblue text-white py-8 md:py-4 mt-16">
- <h1 class="text-4xl font-bold pb-2">
+ <h1 class="text-4xl font-heading font-bold">
  {title}
  <span class="hidden lg:inline">
  {subTitle}

src/components/pages/download/components/panel-wrapper.astro

@@ -2,6 +2,6 @@
 
 ---
 
-<div class="flex flex-col justify-center gap-4 font-light mx-[1rem]">
+<div class="flex flex-col justify-center gap-4 font-light md:px-4">
  <slot />
 </div>

src/components/pages/download/content/nix-linux.astro

@@ -12,7 +12,7 @@ const nixLinuxSingleUserInstall = [
 
 ---
 
-<h3 class="text-2xl font-bold text-nixdarkblue pb-2">
+<h3 class="text-2xl font-heading font-bold text-nixdarkblue pb-2">
  Multi-user installation (recommended)
 </h3>
 <p>
@@ -25,7 +25,7 @@ const nixLinuxSingleUserInstall = [
  We recommend the multi-user install if you are on Linux running systemd,
  with SELinux disabled and you can authenticate with <CodeInline>sudo</CodeInline>.
 </p>
-<h3 class="text-2xl font-bold text-nixdarkblue pb-2">
+<h3 class="text-2xl font-heading font-bold text-nixdarkblue pb-2">
  Single-user installation
 </h3>
 <p>
@@ -41,22 +41,22 @@ const nixLinuxSingleUserInstall = [
  The script will invoke <CodeInline>sudo</CodeInline> to create <CodeInline>/nix</CodeInline> if it doesn’t already exist.
 </p>
 
-<h3 class="text-2xl font-bold text-nixdarkblue pb-2">
+<h3 class="text-2xl font-heading font-bold text-nixdarkblue pb-2">
  Which type of installation should you choose?
 </h3>
 <p>
  This depends on your requirements, but here is a short list of reasons why <span class="font-bold">we recommend </span>
  <a href="/manual/nix/stable/installation/multi-user">multi-user installation</a>:
 </p>
 
-<h5 class="text-2xl font-bold text-neutral-500">Pros</h5>
+<h5 class="text-2xl font-heading font-bold text-neutral-500">Pros</h5>
 <ul class="list-disc ml-[1rem]">
  <li>Better build isolation (and that is what Nix is all about)</li>
  <li>Better security (a build can not write somewhere in your home)</li>
  <li>Sharing builds between users</li>
 </ul>
 
-<h5 class="text-2xl font-bold text-neutral-500">Cons</h5>
+<h5 class="text-2xl font-heading font-bold text-neutral-500">Cons</h5>
 <ul class="list-disc ml-[1rem]">
  <li>Requires <CodeInline>root</CodeInline> to run the daemon</li>
  <li>More involved installation (creation of <CodeInline>nixbld* users</CodeInline>, installing a systemd unit, ...</li>

src/components/pages/download/content/nix-macos.astro

@@ -8,7 +8,7 @@ const nixMacOSMultiUserInstall = [
 
 ---
 
-<h3 class="text-2xl font-bold text-nixdarkblue pb-2">
+<h3 class="text-2xl font-heading font-bold text-nixdarkblue pb-2">
  Multi-user installation
 </h3>
 <p>

src/components/pages/download/content/nix-wsl2.astro

@@ -11,7 +11,7 @@ const nixWSL2SingleUserInstall = [
 
 ---
 
-<h3 class="text-2xl font-bold text-nixdarkblue pb-2">
+<h3 class="text-2xl font-heading font-bold text-nixdarkblue pb-2">
  Multi-user installation (Requires WSL with systemd enabled)
 </h3>
 <p>
@@ -21,7 +21,7 @@ const nixWSL2SingleUserInstall = [
  to configure it, and then install Nix using:
 </p>
 <CodeBlock lines={nixWSL2MultiUserInstall} />
-<h3 class="text-2xl font-bold text-nixdarkblue pb-2">
+<h3 class="text-2xl font-heading font-bold text-nixdarkblue pb-2">
  Single-user installation
 </h3>
 <p>

src/components/pages/download/content/nixos-amazon.astro

@@ -72,7 +72,7 @@ const amis = Object.entries(NIXOS_AMIS)
  NixOS can be deployed to Amazon EC2 with a pre-generated AMI image that you can select below.
 </p>
 
-<h3 class="text-2xl font-bold text-nixdarkblue">
+<h3 class="text-2xl font-bold font-heading text-nixdarkblue">
  Via AWS Management Console
 </h3>
 
@@ -82,7 +82,7 @@ const amis = Object.entries(NIXOS_AMIS)
 
 <div class="launch-amazon [&_tr.selected]:table-row">
  <span class="font-bold text-xl">Choose region: </span>
- <select class="select-region text-xl font-normal bg-white border-solid border-1 border-neutral-500">
+ <select class="text-xl px-2 py-1 border-1 w-full md:w-auto border-gray-950 font-normal outline-nixlightblue outline-2 focus:outline focus:border-nixlightblue bg-transparent rounded-full placeholder-gray-400 text-normal text-nixdarkblue placeholder-grey-200">
  {amis.map((option) => {
  const selected = (option.region === "ap-east-1")
  return (<option value={option.region} {selected}>{option.region}</option>)
@@ -117,7 +117,7 @@ const amis = Object.entries(NIXOS_AMIS)
  </Button>
 </div>
 
-<h3 class="text-2xl font-bold text-nixdarkblue">
+<h3 class="text-2xl font-bold font-heading text-nixdarkblue">
  Via Command Line
 </h3>
 

src/components/pages/download/content/nixos-isoimage.astro

@@ -7,12 +7,12 @@ import Tag from "../../../ui/Tag.astro";
 
 <p>
  You can install NixOS on physical hardware by burning one of the CD images onto a blank CD/DVD disk, or
- <a href="https://nixos.org/nixos/manual/index.html#sec-booting-from-usb">by copying it onto a USB stick</a>.
+ <a href="/manual/index.html#sec-booting-from-usb">by copying it onto a USB stick</a>.
  For <span class="font-bold">installation instructions</span>, please see the
  <a href="/manual/nixos/stable">manual</a>.
 </p>
 
-<h3 class="text-2xl font-bold text-nixdarkblue pb-2">
+<h3 class="text-2xl font-heading font-bold text-nixdarkblue pb-2">
  Graphical ISO image
 </h3>
 
@@ -87,7 +87,7 @@ import Tag from "../../../ui/Tag.astro";
  or installing without a desktop.
 </p>
 
-<h3 class="text-2xl font-bold text-nixdarkblue pb-2">
+<h3 class="text-2xl font-heading font-bold text-nixdarkblue pb-2">
  Minimal ISO image
 </h3>
 
@@ -102,7 +102,7 @@ import Tag from "../../../ui/Tag.astro";
  It contains a number of rescue tools.
 </p>
 
-<div class="grid grid-flow-row justify-start gap-6 mx-[1rem] mb-[1rem]">
+<div class="grid grid-flow-row gap-6 mx-[1rem] justify-start">
  <span>
  <Button
  color="semidarkblue"

src/components/pages/download/content/nixos-virtualbox.astro

@@ -35,7 +35,7 @@ import CodeInline from "../../../layout/CodeInline.astro";
  </Button>
 </div>
 
-<h3 class="text-2xl font-bold text-nixdarkblue pb-1">
+<h3 class="text-2xl font-heading font-bold text-nixdarkblue pb-1">
  To use it
 </h3>
 

src/components/pages/explore/TimelineText.astro

@@ -22,7 +22,7 @@ import Tag from "../../ui/Tag.astro";
 
 ---
 
-<h2 class="text-[2rem] leading-[2.2rem] font-bold text-nixdarkblue">{heading}</h2>
+<h2 class="text-[2rem] leading-[2.2rem] font-heading font-bold text-nixdarkblue">{heading}</h2>
 <p class="text-xl leading-[2.2rem] font-bold text-neutral-500">{subHeading}</p>
 <div class="flex flex-wrap gap-1" class:list={[{
  "justify-start md:justify-end": location === "left",

src/components/ui/Button.astro

@@ -21,7 +21,7 @@ const colorMap = {
 
 const sizeMap = {
  "sm": "px-10 py-2.5 rounded-3xl",
- "sm-mobfull": "px-8 py-2.5 rounded-3xl md:w-auto w-full text-center",
+ "sm-mobfull": "px-8 py-2.5 rounded-3xl md:w-min w-full text-center",
  "lg": "px-14 py-4 rounded-2xl text-center",
  "lg-full": "text-center py-4 block rounded-2xl"
 }

src/components/ui/Input.astro

@@ -16,23 +16,23 @@ const { color = "nixdarkblue", size = "lg", icon = null, placeholder = "", name
 <div class="relative">
  <Icon
  alt="Search"
- class:list={["h-8 w-8 hidden md:block absolute", {
+ class:list={["h-8 w-8 absolute", {
  "text-nixdarkblue": color === "nixdarkblue",
  "text-white": color === "white",
- "top-3.5 left-3": size === "lg",
- "top-2.5 left-2.5": size === "sm-full"
+ "top-3.5 left-3 md:block": size === "lg",
+ "top-1.5 left-2.5": size === "sm-full"
  }]}
  pack="mdi"
  name="search"
  />
  <input
  type="text"
  class="outline-nixlightblue outline-2 focus:outline focus:border-nixlightblue"
- class:list={["rounded-full text-xl placeholder-gray-400 text-normal", {
+ class:list={["rounded-full placeholder-gray-400 text-normal", {
  "text-nixdarkblue placeholder-grey-200": color === "nixdarkblue",
- "border-white text-white placeholder-nixlighterblue bg-transparent": color === "white",
- "py-3 pl-4 md:pl-11 pr-4 md:w-[30rem] border-2": size === "lg",
- "px-4 md:px-10 md:pl-11 py-2 w-full border-1": size === "sm-full"
+ "border-white text-white placeholder-nixlighterblue-dimmed bg-transparent": color === "white",
+ "w-full py-3 text-xl pl-11 pr-4 md:w-[30rem] border-2": size === "lg",
+ "px-10 md:pl-11 py-2 w-full border-1": size === "sm-full"
  }]}
  name={name}
  placeholder={placeholder}

src/components/ui/NixosSearchInput.astro

@@ -20,8 +20,8 @@ const { color = "nixdarkblue", size = "lg", collection = "packages", withSubmit
 ---
 
 <form method="get" action={`https://search.nixos.org/${collection}`} class:list={[{
- "flex flex-col items-center justify-center gap-6": withSubmit,
+ "flex flex-col items-stretch md:items-center justify-center gap-6 w-full md:w-auto": withSubmit,
 }]}>
  <Input color={color} size={size} placeholder={`Search for ${collectionMap[collection]}`} name="query" />
- {withSubmit && <Button color="green" type='submit'>Search</Button>}
+ {withSubmit && <Button color="green" size='sm-mobfull' type='submit'>Search</Button>}
 </form>

src/content/explore/info.yaml

@@ -6,7 +6,7 @@ content:
  Stop worrying how to install dependencies for your project.
  tags:
  - text: complete dependencies
- href: "https://nixos.org/guides/how-nix-works#complete-dependencies"
+ href: "/guides/how-nix-works#complete-dependencies"
  paragraphs:
  - >
  With Nix, a build process only has access to dependencies that have been declared explicitly.
@@ -24,9 +24,9 @@ content:
  Encourage cross-team development by providing a single way of building everything.
  tags:
  - text: language agnostic
- href: "https://nixos.org/guides/how-nix-works#multiple-versions"
+ href: "/guides/how-nix-works#multiple-versions"
  - text: portable
- href: "https://nixos.org/guides/how-nix-works#portable"
+ href: "/guides/how-nix-works#portable"
  paragraphs:
  - >
  Instead of complicated installation instructions, with Nix the development environment is always only one command away.
@@ -70,13 +70,13 @@ content:
  Never end up with a broken system.
  tags:
  - text: rollback
- href: "https://nixos.org/guides/how-nix-works#atomic"
+ href: "/guides/how-nix-works#atomic"
  - text: garbage collection
- href: "https://nixos.org/guides/how-nix-works#garbage-collection"
+ href: "/guides/how-nix-works#garbage-collection"
  - text: atomic
- href: "https://nixos.org/guides/how-nix-works#atomic"
+ href: "/guides/how-nix-works#atomic"
  - text: nix store
- href: "https://nixos.org/guides/how-nix-works#multiple-versions"
+ href: "/guides/how-nix-works#multiple-versions"
  paragraphs:
  - >
  Nix never overwrites files, but just adds new versions in different paths.
@@ -90,9 +90,9 @@ content:
  We all learn best when we play around.
  tags:
  - text: rollback
- href: "https://nixos.org/guides/how-nix-works#atomic"
+ href: "/guides/how-nix-works#atomic"
  - text: nix store
- href: "https://nixos.org/guides/how-nix-works#multiple-versions"
+ href: "/guides/how-nix-works#multiple-versions"
  paragraphs:
  - >
  Install new software without risk of things breaking.
@@ -107,7 +107,7 @@ content:
  Collaboration is encouraged by providing a low barrier to contribute and bots to guide contributors through the process.
  tags:
  - text: community
- href: "https://nixos.org/community/"
+ href: "/community/"
  - text: contribute
  href: "https://nix.dev/contributing/how-to-contribute"
  - text: github

src/content/landing-features/01-reproducable.md

@@ -1,5 +1,5 @@
 ---
-title: Reproducable
+title: Reproducible
 img: /images/features/reproducable.svg
 ---
 

src/layouts/Header.astro

@@ -7,7 +7,11 @@ import { getEntry } from 'astro:content';
 import Container from "../components/layout/Container.astro";
 const headerMenu = await getEntry('menus', 'header');
 
-const navbarItemStyle = "text-center text-nixsemidarkblue md:text-black border-b-transparent hover:border-b-nixlightblue border-b-4 bg-nixlighterblue md:bg-transparent";
+const currentTopRoute = `/${Astro.url.pathname.split("/")[1]}`
+
+const navbarItemStyle = `text-center text-nixsemidarkblue md:text-black md:hover:border-b-nixlightblue border-b-4`;
+const navbarItemInactiveStyle = `border-b-nixlighterblue md:border-b-transparent bg-nixlighterblue md:bg-transparent`;
+const navbarItemActiveStyle = `border-b-nixlightblue bg-nixlightblue text-white md:text-black md:bg-transparent font-bold`;
 ---
 
 <header class="bg-white text-black font-extralight drop-shadow-[0_8px_2px_rgba(0,0,0,0.2)]">
@@ -25,9 +29,14 @@ const navbarItemStyle = "text-center text-nixsemidarkblue md:text-black border-b
  </div>
  <div class="flex pb-4 md:pb-0 flex-col md:flex-row gap-0.5 md:gap-5 md:flex" id="navbar-menu">
  {headerMenu.data.items.map((item) => (
- <a class={`pt-8 pb-6 ${navbarItemStyle}`} href={item.link}>{item.name}</a>
+ <a
+ class:list={[
+ "pt-8 pb-6",
+ navbarItemStyle,
+ currentTopRoute === item.link ? navbarItemActiveStyle : navbarItemInactiveStyle,
+ ]} href={item.link}>{item.name}</a>
  ))}
- <a target="_blank" rel="noreferrer noopener" class={`pt-8 md:pt-7 pb-6 ${navbarItemStyle}`} href="https://search.nixos.org" arial-label="Nixos package and options search">
+ <a target="_blank" rel="noreferrer noopener" class={`pt-8 md:pt-7 pb-6 ${navbarItemStyle} ${navbarItemInactiveStyle}`} href="https://search.nixos.org" arial-label="Nixos package and options search">
  <Icon alt="Search" class="h-8 text-nixdarkblue hidden md:block" pack="mdi" name="search" />
  <span class="inline-block md:hidden">Search</span>
  </a>

src/pages/blog.astro

@@ -19,6 +19,16 @@ const blogMenu = await getEntry('menus', 'blog');
  const articles = document.querySelectorAll('article');
  let categories = [ ];
 
+ function toggleIndicator(id) {
+ const checkedLabel = document.getElementById(`checked-idc-${id}`);
+ const uncheckedLabel = document.getElementById(`unchecked-idc-${id}`);
+
+ checkedLabel.classList.toggle("invisible")
+ uncheckedLabel.classList.toggle("invisible")
+ checkedLabel.classList.toggle("visible")
+ uncheckedLabel.classList.toggle("visible")
+ }
+
  function refreshCategories() {
  let categoryCheckboxes = Array.prototype.slice.call(document.getElementsByName("category"));
  categories = categoryCheckboxes.map((checkbox) => {
@@ -36,7 +46,9 @@ const blogMenu = await getEntry('menus', 'blog');
  }
 
  document.getElementsByName("category").forEach((checkbox) => {
- checkbox.addEventListener("change", () => {
+ checkbox.addEventListener("change", (e) => {
+ const id = e.target.value;
+ toggleIndicator(id);
  refreshCategories();
  refreshArticles();
  });
@@ -54,7 +66,9 @@ const blogMenu = await getEntry('menus', 'blog');
  {blogMenu.data.map((e) => (
  <div>
  <input name="category" type="checkbox" id={`check-${e.id}`} value={e.id} class="hidden peer" checked />
- <label for={`check-${e.id}`} class="p-4 md:p-8 gap-2 w-full md:w-auto text-nixdarkblue border-1 fill-nixdarkblue hover:fill-white border-nixdarkblue rounded-2xl flex md:flex-col items-center hover:bg-nixdarkblue hover:text-white cursor-pointer peer-checked:bg-nixdarkblue peer-checked:text-white peer-checked:fill-white">
+ <label for={`check-${e.id}`} class="relative p-4 md:p-8 gap-2 w-full md:w-auto text-nixdarkblue border-1 fill-nixdarkblue hover:fill-white border-nixdarkblue rounded-2xl flex md:flex-col items-center hover:bg-nixdarkerblue hover:text-white cursor-pointer peer-checked:bg-nixdarkblue peer-checked:text-white peer-checked:fill-white hover:peer-checked:border-nixdarkerblue hover:peer-checked:bg-nixdarkerblue">
+ <label id={`checked-idc-${e.id}`} class="visible absolute right-8 md:right-4 md:top-2 text-xl font-black">&#9746;</label>
+ <label id={`unchecked-idc-${e.id}`} class="invisible absolute right-8 md:right-4 md:top-2 text-xl font-black">&#9744;</label>
  <Icon name={e.icon} class="w-12 md:w-24"/>
  <span class="font-light">{e.title}</span>
  </label>

src/pages/community.astro

@@ -98,7 +98,9 @@ import nixosFoundationLogo from "../assets/image/nixos-foundation-logo.svg";
  <Container>
  <h2 class="text-4xl font-bold font-heading">NixCon</h2>
  <p class="mt-2 text-xl font-bold mb-4">
- The NixCon Team organizes a conference once a year.
+ The
+ <a class="!text-white" href="/community/teams/nixcon">NixCon Team</a>
+ organizes a conference once a year.
  </p>
  <div class="grid md:grid-cols-3 gap-4">
  <div class="col-span-2 md:col-span-1 bg-nixsemidarkblue p-4 rounded-xl">