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 <[email protected]>
NixOS · Mar 3, 2024 · 90f8e1f · 90f8e1f
1 parent 18ea29c
commit 90f8e1f
Show file tree

Hide file tree

Showing 23 changed files with 102 additions and 59 deletions.
diff --git a/src/components/layout/CodeBlock.astro b/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>

diff --git a/src/components/pages/community/NixConEntry.astro b/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>
diff --git a/src/components/pages/download/components/DownloadHeader.astro b/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}

diff --git a/src/components/pages/download/components/panel-wrapper.astro b/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>
diff --git a/src/components/pages/download/content/nix-linux.astro b/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>

diff --git a/src/components/pages/download/content/nix-macos.astro b/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>

diff --git a/src/components/pages/download/content/nix-wsl2.astro b/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>

diff --git a/src/components/pages/download/content/nixos-amazon.astro b/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>
 

diff --git a/src/components/pages/download/content/nixos-isoimage.astro b/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"

diff --git a/src/components/pages/download/content/nixos-virtualbox.astro b/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>
 

diff --git a/src/components/pages/explore/TimelineText.astro b/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",

diff --git a/src/components/ui/Button.astro b/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"
 }

diff --git a/src/components/ui/Input.astro b/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}

diff --git a/src/components/ui/NixosSearchInput.astro b/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>
diff --git a/src/content/explore/info.yaml b/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

diff --git a/src/content/landing-features/01-reproducable.md b/src/content/landing-features/01-reproducable.md
@@ -1,5 +1,5 @@
 ---
-title: Reproducable
+title: Reproducible
 img: /images/features/reproducable.svg
 ---
 

diff --git a/src/layouts/Header.astro b/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>

diff --git a/src/pages/blog.astro b/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>

diff --git a/src/pages/community.astro b/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">
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@