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/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..25e212f3e5 --- /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..124f58065f 100644 --- a/src/components/ui/Button.astro +++ b/src/components/ui/Button.astro @@ -1,7 +1,9 @@ --- interface Props { - color: ["orange", "green", "blue"] - size: ["sm", "lg"] + color?: "orange" | "green" | "lightblue" | "semidarkblue", + size?: "sm" | "lg" | "lg-full" | "sm-mobfull", + href?: string | null + type?: "button" | "submit" | "reset" } const colorMap = { @@ -13,14 +15,21 @@ const colorMap = { const sizeMap = { "sm": "px-10 py-2.5 rounded-3xl", - "lg": "px-14 py-4 rounded-2xl" + "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": "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 new file mode 100644 index 0000000000..53d1bce52f --- /dev/null +++ b/src/components/ui/Input.astro @@ -0,0 +1,41 @@ +--- +import Icon from "astro-icon"; + +interface Props { + color?: "nixdarkblue" | "white", + size?: "sm" | "lg" | "sm-full"; + icon?: "search" | null; + placeholder?: string; + name?: string; +} + +const { color = "nixdarkblue", size = "lg", icon = null, placeholder = "", name = null } = Astro.props; + +--- + +
+
+ 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.mdx b/src/content/learning-manuals/01-nix-manual.mdx new file mode 100644 index 0000000000..bb7020363a --- /dev/null +++ b/src/content/learning-manuals/01-nix-manual.mdx @@ -0,0 +1,19 @@ +--- +title: Nix Manual +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. + +- [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.mdx b/src/content/learning-manuals/02-nixpkgs-manual.mdx new file mode 100644 index 0000000000..c539295563 --- /dev/null +++ b/src/content/learning-manuals/02-nixpkgs-manual.mdx @@ -0,0 +1,58 @@ +--- +title: Nixpkgs Manual +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. + +- [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: + +- Integrate Nix with programming languages: + +- Integrate Nix with frameworks: + +- Configure your editor with Nix: + +- [Contributing to Nixpkgs](/manual/nixpkgs/stable/#chap-submitting-changes) diff --git a/src/content/learning-manuals/03-nixos-manual.mdx b/src/content/learning-manuals/03-nixos-manual.mdx new file mode 100644 index 0000000000..cc81a0864b --- /dev/null +++ b/src/content/learning-manuals/03-nixos-manual.mdx @@ -0,0 +1,18 @@ +--- +title: NixOS Manual +url: /manual/nixos/stable +--- + +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/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 1b9194a52d..277ca8a4c7 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 NixosSearchInput from "../components/ui/NixosSearchInput.astro"; import { getCollection } from "astro:content"; import { Image } from "astro:assets"; const landingFeatures = await getCollection("landing-features"); @@ -70,11 +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 new file mode 100644 index 0000000000..4079f67582 --- /dev/null +++ b/src/pages/learn.astro @@ -0,0 +1,89 @@ +--- +import Container from "../components/layout/Container.astro"; +import PageHeader from "../components/layout/PageHeader.astro"; +import Layout from "../layouts/Layout.astro"; +import { getCollection, getEntry } from "astro:content"; +import Button from "../components/ui/Button.astro"; +import Divider from "../components/layout/Divider.astro"; +import NixosSearchInput from "../components/ui/NixosSearchInput.astro"; +const learningManuals = await getCollection("learning-manuals"); +const { data: learningFeatures } = await getEntry('learning', 'features'); +const { data: learningResources } = await getEntry('learning', 'resources'); +--- + + + + + { + learningFeatures.map((feature) => ( +
+ + +
+ )) + } + + +
+ +

Search

+
+
+

Nix packages

+ +
+
+

NixOS options

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

+ {manual.data.title} +

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

+ Other Learning Resources +

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

{item.title}

+

{item.description}

+ +
+ )) + } +
+ +
+ diff --git a/src/styles/base.css b/src/styles/base.css index 54b1b38f88..cf9c42d28c 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -10,4 +10,24 @@ main a:any-link { @apply underline decoration-1 underline-offset-2 text-nixsemidarkblue; } + + article ul { + @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 e909d42595..7ab9773c67 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -21,6 +21,13 @@ module.exports = { mono: ["Fira\\ Mono", ...defaultTheme.fontFamily.mono], nixos: ["Vegur"], }, + borderWidth: { + '0.5': '0.5px', + '1': '1px' + }, + listStyleType: { + "circle": "circle", + }, }, container: { // https://tailwindcss.com/docs/container#centering-by-default