From 35565b1ce5ff6278a6d96a9f6d338455e17e5ea9 Mon Sep 17 00:00:00 2001 From: Thilo Billerbeck Date: Mon, 13 Nov 2023 01:16:31 +0100 Subject: [PATCH 1/4] started work on learning page --- public/images/learn/firstStepsGfx.svg | 48 +++++++++++++++++++++ public/images/learn/howItWorksGfx.svg | 60 +++++++++++++++++++++++++++ public/images/learn/installGfx.svg | 37 +++++++++++++++++ src/components/layout/Divider.astro | 20 +++++++++ src/components/ui/Button.astro | 8 ++-- src/pages/learn.astro | 56 +++++++++++++++++++++++++ tailwind.config.cjs | 4 ++ 7 files changed, 230 insertions(+), 3 deletions(-) create mode 100644 public/images/learn/firstStepsGfx.svg create mode 100644 public/images/learn/howItWorksGfx.svg create mode 100644 public/images/learn/installGfx.svg create mode 100644 src/components/layout/Divider.astro create mode 100644 src/pages/learn.astro diff --git a/public/images/learn/firstStepsGfx.svg b/public/images/learn/firstStepsGfx.svg new file mode 100644 index 0000000000..4e7a840909 --- /dev/null +++ b/public/images/learn/firstStepsGfx.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/learn/howItWorksGfx.svg b/public/images/learn/howItWorksGfx.svg new file mode 100644 index 0000000000..3fef97f911 --- /dev/null +++ b/public/images/learn/howItWorksGfx.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/learn/installGfx.svg b/public/images/learn/installGfx.svg new file mode 100644 index 0000000000..3ddc73cb17 --- /dev/null +++ b/public/images/learn/installGfx.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/layout/Divider.astro b/src/components/layout/Divider.astro new file mode 100644 index 0000000000..5524c31d06 --- /dev/null +++ b/src/components/layout/Divider.astro @@ -0,0 +1,20 @@ +--- +interface Props { + style?: "slope", + mirrorX?: boolean, + mirrorY?: boolean +} + +const styleMap = { + "slope": "/divider/slope_down.svg" +} + +const { style = "slope", mirrorX = false, mirrorY = false } = Astro.props; +--- + + \ No newline at end of file diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro index 1d4be13d70..78fc16985e 100644 --- a/src/components/ui/Button.astro +++ b/src/components/ui/Button.astro @@ -1,7 +1,8 @@ --- interface Props { - color: ["orange", "green", "blue"] - size: ["sm", "lg"] + color: "orange" | "green" | "lightblue" | "semidarkblue", + size: "sm" | "lg" | "lg-full", + href: string } const colorMap = { @@ -13,7 +14,8 @@ const colorMap = { const sizeMap = { "sm": "px-10 py-2.5 rounded-3xl", - "lg": "px-14 py-4 rounded-2xl" + "lg": "px-14 py-4 rounded-2xl", + "lg-full": "py-4 w-full rounded-2xl" } const { color = "orange", size = "sm", href = "" } = Astro.props; diff --git a/src/pages/learn.astro b/src/pages/learn.astro new file mode 100644 index 0000000000..e1ba09b939 --- /dev/null +++ b/src/pages/learn.astro @@ -0,0 +1,56 @@ +--- +import Container from "../components/layout/Container.astro"; +import PageHeader from "../components/layout/PageHeader.astro"; +import Layout from "../layouts/Layout.astro"; +import { getCollection } from "astro:content"; +import Button from "../components/ui/Button.astro"; +import Divider from "../components/layout/Divider.astro"; + +const learnMenuItems = [ + { + imgUrl: '/images/learn/installGfx.svg', + title: 'Install Nix', + color: 'green' + }, + { + imgUrl: '/images/learn/firstStepsGfx.svg', + title: 'First Steps with Nix', + color: 'orange' + }, + { + imgUrl: '/images/learn/howItWorksGfx.svg', + title: 'How Nix works', + color: 'lightblue' + } +] + +--- + + + + + {learnMenuItems.map((i) => ( +
+ + +
+ ))} + + +
+ +

Search

+
+

Nix packages

+

NixOS options

+
+ +
+ + \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index e909d42595..3f5b6a70c0 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -21,6 +21,10 @@ module.exports = { mono: ["Fira\\ Mono", ...defaultTheme.fontFamily.mono], nixos: ["Vegur"], }, + borderWidth: { + '0.5': '0.5px', + '1': '1px' + } }, container: { // https://tailwindcss.com/docs/container#centering-by-default From 4843d6c57b3fb8932d65b2a7385b61bc91bd048e Mon Sep 17 00:00:00 2001 From: Thilo Billerbeck Date: Tue, 14 Nov 2023 23:31:30 +0100 Subject: [PATCH 2/4] continued working on the nixos website --- public/doc-icon.svg | 72 +++++++++ src/components/ui/Input.astro | 38 +++++ src/content/learning-manuals/01-nix-manual.md | 19 +++ .../learning-manuals/02-nixpkgs-manual.md | 50 ++++++ .../learning-manuals/03-nixos-manual.md | 18 +++ src/pages/index.astro | 6 +- src/pages/learn.astro | 152 +++++++++++++----- src/styles/base.css | 7 + 8 files changed, 317 insertions(+), 45 deletions(-) create mode 100644 public/doc-icon.svg create mode 100644 src/components/ui/Input.astro create mode 100644 src/content/learning-manuals/01-nix-manual.md create mode 100644 src/content/learning-manuals/02-nixpkgs-manual.md create mode 100644 src/content/learning-manuals/03-nixos-manual.md diff --git a/public/doc-icon.svg b/public/doc-icon.svg new file mode 100644 index 0000000000..0f4c2a5ad4 --- /dev/null +++ b/public/doc-icon.svg @@ -0,0 +1,72 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ui/Input.astro b/src/components/ui/Input.astro new file mode 100644 index 0000000000..4dd2c618e8 --- /dev/null +++ b/src/components/ui/Input.astro @@ -0,0 +1,38 @@ +--- +import Icon from "astro-icon"; + +interface Props { + color?: "nixdarkblue" | "white", + size?: "sm" | "lg" | "sm-full"; + icon?: "search" | null; + placeholder?: string; +} + +const { color = "nixdarkblue", size = "lg", icon = null, placeholder = "" } = Astro.props; + +--- + +
+
+ diff --git a/src/content/learning-manuals/01-nix-manual.md b/src/content/learning-manuals/01-nix-manual.md new file mode 100644 index 0000000000..d9b124f267 --- /dev/null +++ b/src/content/learning-manuals/01-nix-manual.md @@ -0,0 +1,19 @@ +--- +title: Nix Manual +url: +--- + +Nix is a package manager which comes in a form of many command line tools. Packages that Nix can build are defined with the Nix Expression Language. + +- [Installation](/manual/nix/stable/installation/installing-binary) +- [Basic package management](/manual/nix/stable/package-management/basic-package-mgmt) +- [What is a channel?](/manual/nix/stable/package-management/channels.html) +- Main command line tools: + - [nix-env](/manual/nix/stable/command-ref/nix-env) — manipulate or query Nix user environments + - [nix-build](/manual/nix/stable/command-ref/nix-build) — build a Nix expression + - [nix-shell](/manual/nix/stable/command-ref/nix-shell) — start an interactive shell based on a Nix expression + - [nix-store](/manual/nix/stable/command-ref/nix-store) — manipulate or query the Nix store +- [Nix expression language](/manual/nix/stable/expressions/expression-language.html) + - [Built-in functions](/manual/nix/stable/expressions/builtins.html) + - [Nixpkgs Library Functions](/manual/nixpkgs/stable/#sec-functions-library) + - [Debugging Nix Expressions](/manual/nixpkgs/stable/#sec-debug) diff --git a/src/content/learning-manuals/02-nixpkgs-manual.md b/src/content/learning-manuals/02-nixpkgs-manual.md new file mode 100644 index 0000000000..9e1a885ba2 --- /dev/null +++ b/src/content/learning-manuals/02-nixpkgs-manual.md @@ -0,0 +1,50 @@ +--- +title: Nixpkgs Manual +url: +--- + +The Nix Packages collection (Nixpkgs) is a set of thousands of packages for the Nix package manager and NixOS Linux distribution. + +- [Configure nixpkgs](/manual/nixpkgs/stable/#chap-packageconfig) +- [Customize packages (override packages)](/manual/nixpkgs/stable/#chap-overrides) +- [Extend nixpkgs (via overlays)](/manual/nixpkgs/stable/#chap-overlays) +- [Adding a package to nixpkgs](/manual/nixpkgs/stable/#chap-quick-start) + - [The Standard Environment](/manual/nixpkgs/stable/#chap-stdenv) + - [Fetching sources](/manual/nixpkgs/stable/#chap-pkgs-fetchers) + - Building images: + - [Docker](/manual/nixpkgs/stable/#sec-pkgs-dockerTools) + - [Snap](/manual/nixpkgs/stable/#sec-pkgs-snapTools) + - [AppImage](/manual/nixpkgs/stable/#sec-pkgs-appimageTools) + - [OCI](/manual/nixpkgs/stable/#sec-pkgs-ociTools) + - ... +- Integrate Nix with programming languages: + - [Javascript (Node)](/manual/nixpkgs/stable/#language-javascript) + - [Python](/manual/nixpkgs/stable/#python) + - [Ruby](/manual/nixpkgs/stable/#sec-language-ruby) + - [Java](/manual/nixpkgs/stable/#sec-language-java) + - [Go](/manual/nixpkgs/stable/#sec-language-go) + - [Rust](/manual/nixpkgs/stable/#rust) + - [R](/manual/nixpkgs/stable/#r) + - [Haskell](/manual/nixpkgs/stable/#haskell) + - [Elm](/manual/nixpkgs/stable/#sec-elm) + - [BEAM Languages (Erlang, Elixir, LFE)](/manual/nixpkgs/stable/#sec-beam) + - [Lua](/manual/nixpkgs/stable/#users-guide-to-lua-infrastructure) + - [Idris](/manual/nixpkgs/stable/#idris) + - [Coq](/manual/nixpkgs/stable/#sec-language-coq) + - [Perl](/manual/nixpkgs/stable/#sec-language-perl) + - [OCaml](/manual/nixpkgs/stable/#sec-language-ocaml) + - ... +- Integrate Nix with frameworks: + - [Android](/manual/nixpkgs/stable/#android) + - [IOS](/manual/nixpkgs/stable/#ios) + - [Titanium](/manual/nixpkgs/stable/#titanium) + - [Tex Live](/manual/nixpkgs/stable/#sec-language-texlive) + - [Qt](/manual/nixpkgs/stable/#sec-language-qt) + - ... +- Configure your editor with Nix: + - [Vim](/manual/nixpkgs/stable/#vim) + - [Emacs](/manual/nixpkgs/stable/#sec-emacs) + - [Eclipse](/manual/nixpkgs/stable/#sec-eclipse) + - [Kakoune](/manual/nixpkgs/stable/#sec-kakoune) + - ... +- [Contributing to Nixpkgs](/manual/nixpkgs/stable/#chap-submitting-changes) diff --git a/src/content/learning-manuals/03-nixos-manual.md b/src/content/learning-manuals/03-nixos-manual.md new file mode 100644 index 0000000000..a8474791a6 --- /dev/null +++ b/src/content/learning-manuals/03-nixos-manual.md @@ -0,0 +1,18 @@ +--- +title: NixOS Manual +url: +--- + +NixOS is a Linux distribution based on Nix package manager. + +- [Installing NixOS]([%root%]manual/nixos/stable/#sec-installation) +- [Changing the Configuration]([%root%]manual/nixos/stable/#sec-changing-config) +- [Upgrading NixOS]([%root%]manual/nixos/stable/#sec-upgrading) +- [Configuration Syntax]([%root%]manual/nixos/stable/#sec-configuration-syntax) +- [Package Management]([%root%]manual/nixos/stable/#sec-package-management) +- [User Management]([%root%]manual/nixos/stable/#sec-user-management) +- [Troubleshooting]([%root%]manual/nixos/stable/#ch-troubleshooting) +- [Writing NixOS Modules]([%root%]manual/nixos/stable/#sec-writing-modules) +- [Writing NixOS Documentation]([%root%]manual/nixos/stable/#sec-writing-documentation) +- [Writing NixOS Tests]([%root%]manual/nixos/stable/#sec-nixos-tests) +- [Building Your Own NixOS CD]([%root%]manual/nixos/stable/#sec-building-image) diff --git a/src/pages/index.astro b/src/pages/index.astro index 1b9194a52d..ffddea3e01 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,6 +3,7 @@ import {Icon} from "astro-icon"; import Layout from "../layouts/Layout.astro"; import Container from "../components/layout/Container.astro"; import Button from "../components/ui/Button.astro"; +import Input from "../components/ui/Input.astro"; import { getCollection } from "astro:content"; import { Image } from "astro:assets"; const landingFeatures = await getCollection("landing-features"); @@ -70,10 +71,7 @@ const landingFeatures = await getCollection("landing-features"); The Nix Packages collection (Nixpkgs) is a set of over 80 000 packages for the Nix package manager.

-
-
+ diff --git a/src/pages/learn.astro b/src/pages/learn.astro index e1ba09b939..711cc56aae 100644 --- a/src/pages/learn.astro +++ b/src/pages/learn.astro @@ -5,52 +5,122 @@ import Layout from "../layouts/Layout.astro"; import { getCollection } from "astro:content"; import Button from "../components/ui/Button.astro"; import Divider from "../components/layout/Divider.astro"; +import Input from "../components/ui/Input.astro"; +const learningManuals = await getCollection("learning-manuals"); const learnMenuItems = [ - { - imgUrl: '/images/learn/installGfx.svg', - title: 'Install Nix', - color: 'green' - }, - { - imgUrl: '/images/learn/firstStepsGfx.svg', - title: 'First Steps with Nix', - color: 'orange' - }, - { - imgUrl: '/images/learn/howItWorksGfx.svg', - title: 'How Nix works', - color: 'lightblue' - } -] + { + imgUrl: "/images/learn/installGfx.svg", + title: "Install Nix", + color: "green", + }, + { + imgUrl: "/images/learn/firstStepsGfx.svg", + title: "First Steps with Nix", + color: "orange", + }, + { + imgUrl: "/images/learn/howItWorksGfx.svg", + title: "How Nix works", + color: "lightblue", + }, +]; +const learnResources = [ + { + title: "The Nix Hour", + description: + "A weekly beginner-oriented interactive video lecture on all things Nix. Running since October 2022.", + url: "https://www.youtube.com/playlist?list=PLyzwHTVJlRc8yjlx4VR4LU5A5O44og9in", + buttonText: "Watch on Youtube", + }, + { + title: "NixOS Wiki", + description: "A unofficial, user-maintained wiki for Nix and NixOS", + url: "https://nixos.wiki/", + buttonText: "Check the wiki", + }, + { + title: "Nix Pills", + description: + "A low-level tutorial on building software packages with Nix, showing in detail how Nixpkgs is constructed.", + url: "/guides/nix-pills", + buttonText: "Take the Pills", + }, +]; --- - - - {learnMenuItems.map((i) => ( -
- - -
- ))} + + + { + learnMenuItems.map((i) => ( +
+ + +
+ )) + } + + +
+ +

Search

+
+
+

Nix packages

+ +
+
+

NixOS options

+ +
+
- -
- -

Search

-
-

Nix packages

-

NixOS options

+
+ + + { + learningManuals.map(async (manual) => { + const { Content } = await manual.render(); + return ( +
+ +

+ {manual.data.title} +

+
+
- -
- - \ No newline at end of file + + + ); + }) + } + + +
+ +

+ Other Learning Resources +

+
+ { + learnResources.map((item) => ( +
+

{item.title}

+

{item.description}

+ +
+ )) + } +
+ +
+ diff --git a/src/styles/base.css b/src/styles/base.css index 54b1b38f88..6d004c262f 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -10,4 +10,11 @@ main a:any-link { @apply underline decoration-1 underline-offset-2 text-nixsemidarkblue; } + + article ul { + @apply list-disc list-inside; + } + article ul > li > ul { + @apply list-disc list-inside ml-4; + } } From c8a06c277509defeb92c1079aadcb5b9c3c7ad50 Mon Sep 17 00:00:00 2001 From: Thilo Billerbeck Date: Wed, 15 Nov 2023 02:18:15 +0100 Subject: [PATCH 3/4] final touches on learn page --- src/components/layout/Divider.astro | 4 +- src/components/ui/Button.astro | 23 ++-- src/components/ui/Input.astro | 9 +- src/components/ui/NixosSearchInput.astro | 27 ++++ .../{01-nix-manual.md => 01-nix-manual.mdx} | 2 +- ...ixpkgs-manual.md => 02-nixpkgs-manual.mdx} | 10 +- ...03-nixos-manual.md => 03-nixos-manual.mdx} | 2 +- src/content/learning/features.yaml | 12 ++ src/content/learning/resources.yaml | 14 +++ src/pages/index.astro | 8 +- src/pages/learn.astro | 115 ++++++------------ src/styles/base.css | 15 ++- tailwind.config.cjs | 5 +- 13 files changed, 149 insertions(+), 97 deletions(-) create mode 100644 src/components/ui/NixosSearchInput.astro rename src/content/learning-manuals/{01-nix-manual.md => 01-nix-manual.mdx} (97%) rename src/content/learning-manuals/{02-nixpkgs-manual.md => 02-nixpkgs-manual.mdx} (93%) rename src/content/learning-manuals/{03-nixos-manual.md => 03-nixos-manual.mdx} (97%) create mode 100644 src/content/learning/features.yaml create mode 100644 src/content/learning/resources.yaml diff --git a/src/components/layout/Divider.astro b/src/components/layout/Divider.astro index 5524c31d06..25e212f3e5 100644 --- a/src/components/layout/Divider.astro +++ b/src/components/layout/Divider.astro @@ -12,9 +12,9 @@ const styleMap = { const { style = "slope", mirrorX = false, mirrorY = false } = Astro.props; --- - \ No newline at end of file +]} aria-hidden="true" /> \ No newline at end of file diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro index 78fc16985e..124f58065f 100644 --- a/src/components/ui/Button.astro +++ b/src/components/ui/Button.astro @@ -1,8 +1,9 @@ --- interface Props { - color: "orange" | "green" | "lightblue" | "semidarkblue", - size: "sm" | "lg" | "lg-full", - href: string + color?: "orange" | "green" | "lightblue" | "semidarkblue", + size?: "sm" | "lg" | "lg-full" | "sm-mobfull", + href?: string | null + type?: "button" | "submit" | "reset" } const colorMap = { @@ -14,15 +15,21 @@ 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", "lg": "px-14 py-4 rounded-2xl", - "lg-full": "py-4 w-full rounded-2xl" + "lg-full": "text-center py-4 w-full rounded-2xl" } -const { color = "orange", size = "sm", href = "" } = Astro.props; +const { color = "orange", size = "sm", href = null, type = "button" } = Astro.props; +const classList = `${colorMap[color]} font-bold ${sizeMap[size]} text-white drop-shadow-[0_4px_1px_rgba(0,0,0,0.2)]`; --- - +) : ( + +)} diff --git a/src/components/ui/Input.astro b/src/components/ui/Input.astro index 4dd2c618e8..62b0f6f090 100644 --- a/src/components/ui/Input.astro +++ b/src/components/ui/Input.astro @@ -6,9 +6,10 @@ interface Props { size?: "sm" | "lg" | "sm-full"; icon?: "search" | null; placeholder?: string; + name?: string; } -const { color = "nixdarkblue", size = "lg", icon = null, placeholder = "" } = Astro.props; +const { color = "nixdarkblue", size = "lg", icon = null, placeholder = "", name = null } = Astro.props; --- @@ -26,12 +27,14 @@ const { color = "nixdarkblue", size = "lg", icon = null, placeholder = "" } = As />
diff --git a/src/components/ui/NixosSearchInput.astro b/src/components/ui/NixosSearchInput.astro new file mode 100644 index 0000000000..81b6d4dea4 --- /dev/null +++ b/src/components/ui/NixosSearchInput.astro @@ -0,0 +1,27 @@ +--- +import Button from './Button.astro'; +import Input from './Input.astro'; + +interface Props { + color?: "nixdarkblue" | "white", + size?: "sm" | "lg" | "sm-full"; + collection?: "packages" | "options"; + withSubmit?: boolean; + withSubmitClass?: string; +} + +const collectionMap = { + packages: "Nix packages", + options: "NixOS options", +} + +const { color = "nixdarkblue", size = "lg", collection = "packages", withSubmit = false } = Astro.props; + +--- + +
+ + {withSubmit && } +
diff --git a/src/content/learning-manuals/01-nix-manual.md b/src/content/learning-manuals/01-nix-manual.mdx similarity index 97% rename from src/content/learning-manuals/01-nix-manual.md rename to src/content/learning-manuals/01-nix-manual.mdx index d9b124f267..bb7020363a 100644 --- a/src/content/learning-manuals/01-nix-manual.md +++ b/src/content/learning-manuals/01-nix-manual.mdx @@ -1,6 +1,6 @@ --- title: Nix Manual -url: +url: /manual/nix/stable --- Nix is a package manager which comes in a form of many command line tools. Packages that Nix can build are defined with the Nix Expression Language. diff --git a/src/content/learning-manuals/02-nixpkgs-manual.md b/src/content/learning-manuals/02-nixpkgs-manual.mdx similarity index 93% rename from src/content/learning-manuals/02-nixpkgs-manual.md rename to src/content/learning-manuals/02-nixpkgs-manual.mdx index 9e1a885ba2..c539295563 100644 --- a/src/content/learning-manuals/02-nixpkgs-manual.md +++ b/src/content/learning-manuals/02-nixpkgs-manual.mdx @@ -1,6 +1,6 @@ --- title: Nixpkgs Manual -url: +url: /manual/nixpkgs/stable --- The Nix Packages collection (Nixpkgs) is a set of thousands of packages for the Nix package manager and NixOS Linux distribution. @@ -12,12 +12,15 @@ The Nix Packages collection (Nixpkgs) is a set of thousands of packages for the - [The Standard Environment](/manual/nixpkgs/stable/#chap-stdenv) - [Fetching sources](/manual/nixpkgs/stable/#chap-pkgs-fetchers) - Building images: +
    - [Docker](/manual/nixpkgs/stable/#sec-pkgs-dockerTools) - [Snap](/manual/nixpkgs/stable/#sec-pkgs-snapTools) - [AppImage](/manual/nixpkgs/stable/#sec-pkgs-appimageTools) - [OCI](/manual/nixpkgs/stable/#sec-pkgs-ociTools) - ... +
- Integrate Nix with programming languages: +
    - [Javascript (Node)](/manual/nixpkgs/stable/#language-javascript) - [Python](/manual/nixpkgs/stable/#python) - [Ruby](/manual/nixpkgs/stable/#sec-language-ruby) @@ -34,17 +37,22 @@ The Nix Packages collection (Nixpkgs) is a set of thousands of packages for the - [Perl](/manual/nixpkgs/stable/#sec-language-perl) - [OCaml](/manual/nixpkgs/stable/#sec-language-ocaml) - ... +
- Integrate Nix with frameworks: +
    - [Android](/manual/nixpkgs/stable/#android) - [IOS](/manual/nixpkgs/stable/#ios) - [Titanium](/manual/nixpkgs/stable/#titanium) - [Tex Live](/manual/nixpkgs/stable/#sec-language-texlive) - [Qt](/manual/nixpkgs/stable/#sec-language-qt) - ... +
- Configure your editor with Nix: +
    - [Vim](/manual/nixpkgs/stable/#vim) - [Emacs](/manual/nixpkgs/stable/#sec-emacs) - [Eclipse](/manual/nixpkgs/stable/#sec-eclipse) - [Kakoune](/manual/nixpkgs/stable/#sec-kakoune) - ... +
- [Contributing to Nixpkgs](/manual/nixpkgs/stable/#chap-submitting-changes) diff --git a/src/content/learning-manuals/03-nixos-manual.md b/src/content/learning-manuals/03-nixos-manual.mdx similarity index 97% rename from src/content/learning-manuals/03-nixos-manual.md rename to src/content/learning-manuals/03-nixos-manual.mdx index a8474791a6..cc81a0864b 100644 --- a/src/content/learning-manuals/03-nixos-manual.md +++ b/src/content/learning-manuals/03-nixos-manual.mdx @@ -1,6 +1,6 @@ --- title: NixOS Manual -url: +url: /manual/nixos/stable --- NixOS is a Linux distribution based on Nix package manager. diff --git a/src/content/learning/features.yaml b/src/content/learning/features.yaml new file mode 100644 index 0000000000..283743a62f --- /dev/null +++ b/src/content/learning/features.yaml @@ -0,0 +1,12 @@ +- imgUrl: "/images/learn/installGfx.svg" + title: Install Nix + color: green + url: /download#download-nix +- imgUrl: "/images/learn/firstStepsGfx.svg" + title: First Steps with Nix + color: orange + url: /tutorials/first-steps +- imgUrl: "/images/learn/howItWorksGfx.svg" + title: How Nix works + color: lightblue + url: /guides/how-nix-works \ No newline at end of file diff --git a/src/content/learning/resources.yaml b/src/content/learning/resources.yaml new file mode 100644 index 0000000000..a484211425 --- /dev/null +++ b/src/content/learning/resources.yaml @@ -0,0 +1,14 @@ +- title: The Nix Hour + description: A weekly beginner-oriented interactive video lecture on all things + Nix. Running since October 2022. + url: https://www.youtube.com/playlist?list=PLyzwHTVJlRc8yjlx4VR4LU5A5O44og9in + buttonText: Watch on Youtube +- title: NixOS Wiki + description: A unofficial, user-maintained wiki for Nix and NixOS + url: https://nixos.wiki/ + buttonText: Check the wiki +- title: Nix Pills + description: A low-level tutorial on building software packages with Nix, showing + in detail how Nixpkgs is constructed. + url: "/guides/nix-pills" + buttonText: Take the Pills \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index ffddea3e01..277ca8a4c7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,7 +3,7 @@ import {Icon} from "astro-icon"; import Layout from "../layouts/Layout.astro"; import Container from "../components/layout/Container.astro"; import Button from "../components/ui/Button.astro"; -import Input from "../components/ui/Input.astro"; +import NixosSearchInput from "../components/ui/NixosSearchInput.astro"; import { getCollection } from "astro:content"; import { Image } from "astro:assets"; const landingFeatures = await getCollection("landing-features"); @@ -71,8 +71,10 @@ const landingFeatures = await getCollection("landing-features"); The Nix Packages collection (Nixpkgs) is a set of over 80 000 packages for the Nix package manager.

- - + diff --git a/src/pages/learn.astro b/src/pages/learn.astro index 711cc56aae..4079f67582 100644 --- a/src/pages/learn.astro +++ b/src/pages/learn.astro @@ -2,119 +2,82 @@ import Container from "../components/layout/Container.astro"; import PageHeader from "../components/layout/PageHeader.astro"; import Layout from "../layouts/Layout.astro"; -import { getCollection } from "astro:content"; +import { getCollection, getEntry } from "astro:content"; import Button from "../components/ui/Button.astro"; import Divider from "../components/layout/Divider.astro"; -import Input from "../components/ui/Input.astro"; +import NixosSearchInput from "../components/ui/NixosSearchInput.astro"; const learningManuals = await getCollection("learning-manuals"); - -const learnMenuItems = [ - { - imgUrl: "/images/learn/installGfx.svg", - title: "Install Nix", - color: "green", - }, - { - imgUrl: "/images/learn/firstStepsGfx.svg", - title: "First Steps with Nix", - color: "orange", - }, - { - imgUrl: "/images/learn/howItWorksGfx.svg", - title: "How Nix works", - color: "lightblue", - }, -]; - -const learnResources = [ - { - title: "The Nix Hour", - description: - "A weekly beginner-oriented interactive video lecture on all things Nix. Running since October 2022.", - url: "https://www.youtube.com/playlist?list=PLyzwHTVJlRc8yjlx4VR4LU5A5O44og9in", - buttonText: "Watch on Youtube", - }, - { - title: "NixOS Wiki", - description: "A unofficial, user-maintained wiki for Nix and NixOS", - url: "https://nixos.wiki/", - buttonText: "Check the wiki", - }, - { - title: "Nix Pills", - description: - "A low-level tutorial on building software packages with Nix, showing in detail how Nixpkgs is constructed.", - url: "/guides/nix-pills", - buttonText: "Take the Pills", - }, -]; +const { data: learningFeatures } = await getEntry('learning', 'features'); +const { data: learningResources } = await getEntry('learning', 'resources'); --- - + { - learnMenuItems.map((i) => ( + learningFeatures.map((feature) => (
- -
)) } -
+
-

Search

-
+

Search

+
-

Nix packages

- +

Nix packages

+
-

NixOS options

- +

NixOS options

+
- + { learningManuals.map(async (manual) => { const { Content } = await manual.render(); return ( -
- -

- {manual.data.title} -

-
- -
- -
+
+
+ +

+ {manual.data.title} +

+
+ +
+
+ +
); }) } -
+
-

+

Other Learning Resources

-
+
{ - learnResources.map((item) => ( -
-

{item.title}

-

{item.description}

-
diff --git a/src/styles/base.css b/src/styles/base.css index 6d004c262f..cf9c42d28c 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -12,9 +12,22 @@ } article ul { - @apply list-disc list-inside; + @apply list-circle list-inside; } + article ul > li > ul { @apply list-disc list-inside ml-4; } + article ul.inlinelist { + @apply list-none flex flex-col ml-6; + } + article ul.inlinelist li { + @apply inline-block; + } + article ul.inlinelist li::after { + content: ", "; + } + article ul.inlinelist li:last-child::after { + content: ""; + } } diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 3f5b6a70c0..7ab9773c67 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -24,7 +24,10 @@ module.exports = { borderWidth: { '0.5': '0.5px', '1': '1px' - } + }, + listStyleType: { + "circle": "circle", + }, }, container: { // https://tailwindcss.com/docs/container#centering-by-default From 3f98be09d23bf664748bce76292adfd530b1ed3e Mon Sep 17 00:00:00 2001 From: Thilo Billerbeck Date: Wed, 15 Nov 2023 02:37:46 +0100 Subject: [PATCH 4/4] fixed broken mobile input alnignment --- src/components/ui/Input.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/Input.astro b/src/components/ui/Input.astro index 62b0f6f090..53d1bce52f 100644 --- a/src/components/ui/Input.astro +++ b/src/components/ui/Input.astro @@ -32,7 +32,7 @@ const { color = "nixdarkblue", size = "lg", icon = null, placeholder = "", name "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-96 border-2": size === "lg", - "px-10 pl-11 py-2 w-full border-1": size === "sm-full" + "px-4 md:px-10 md:pl-11 py-2 w-full border-1": size === "sm-full" }]} name={name} placeholder={placeholder}