init

NixOS · Dec 17, 2020 · babdda6 · babdda6
commit babdda6
Show file tree

Hide file tree

Showing 104 changed files with 78,469 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+/result*
+/.cache/
+/node_modules
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,25 @@
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "webpackFinal": async (config, {configType}) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+
+    // LESS
+    config.module.rules.push({
+      test: /\.less$/,
+      use: ['style-loader', 'css-loader', 'less-loader'],
+    });
+    config.resolve.extensions.push(".less");
+
+    return config;
+  }
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}
diff --git a/LICENCES/CC-BY-SA-4.0.txt b/LICENCES/CC-BY-SA-4.0.txt
diff --git a/LICENCES/MIT.txt b/LICENCES/MIT.txt
@@ -0,0 +1,24 @@
+Valid-License-Identifier: MIT
+License-Text:
+
+MIT License
+
+Copyright (c) 2019 The nixos-homepage contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,17 @@
+# Common styles for NixOS related web sites.
+
+In this repository you will find styles that are being used on different web
+sites in NixOS project. Few examples:
+
+- [nixos.org](https://github.com/NixOS/nixos-homepage)
+- [search.nixos.org](https://github.com/NixOS/nixos-search)
+- [status.nixos.org](https://github.com/NixOS/nixos-status)
+
+
+## License
+
+The content of the website is licensed under the [Creative Commons Attribution Share Alike 4.0 International](LICENSES/CC-BY-SA-4.0.txt) license.
+
+The software (including sample code) is licensed under the [MIT](LICENSES/MIT.txt) license.
+
+Some files might have a different license. See the files content for details.
diff --git a/default.nix b/default.nix
@@ -0,0 +1,3 @@
+(import (fetchTarball https://github.com/edolstra/flake-compat/archive/master.tar.gz) {
+  src = builtins.fetchGit ./.;
+}).defaultNix
diff --git a/flake.lock b/flake.lock
diff --git a/flake.nix b/flake.nix
@@ -0,0 +1,145 @@
+{
+  description = "Common styles for NixOS related web sites.";
+
+  inputs.nixpkgs = { url = "nixpkgs/nixos-unstable"; };
+
+  outputs =
+    { self
+    , nixpkgs 
+    }:
+    let
+      system = "x86_64-linux";
+      pkgs = import nixpkgs { inherit system; };
+      package = builtins.fromJSON (builtins.readFile ./package.json);
+    in rec {
+
+      lib.memoizeAssets = assets:
+        pkgs.runCommandNoCC "nixos-site-svg-assets" {
+          nativeBuildInputs = with pkgs.nodePackages; [
+            svgo
+          ];
+        }
+        ''
+          cp -r "${assets}" assets
+          chmod -R +w assets
+
+          echo ":: Embedding SVG files"
+          (cd assets
+          # Skip the source svg files
+          rm -f *.src.svg
+
+          # Optimize svg files
+          for f in *.svg; do
+            svgo $f &
+          done 
+          # Wait until all `svgo` processes are done
+          # According to light testing, it is twice as fast that way.
+          wait
+
+          # Embed svg files in svg.less
+          for f in *.svg; do
+            echo "- $f"
+            token=''${f^^}
+            token=''${token//[^A-Z0-9]/_}
+            token=SVG_''${token/%_SVG/}
+            substituteInPlace svg.less --replace "@$token)" "'$(cat $f)')"
+            substituteInPlace svg.less --replace "@$token," "'$(cat $f)',"
+          done
+          )
+          mv assets $out
+        '';
+
+      defaultPackage."${system}" = packages."${system}".commonStyles;
+
+      checks."${system}".build = defaultPackage."${system}";
+
+      packages."${system}" = rec {
+
+        commonStyles = pkgs.stdenv.mkDerivation {
+          name = "nixos-common-styles-${self.lastModifiedDate}";
+
+          src = self;
+
+          enableParallelBuilding = true;
+
+          installPhase = ''
+            mkdir $out
+            cp -R src/* $out/
+
+            rm -rf $out/assets
+            ln -sf ${lib.memoizeAssets ./src/assets} $out/assets
+          '';
+        };
+
+        storyBookYarnPkg = pkgs.yarn2nix-moretea.mkYarnPackage rec {
+          name = "${package.name}-yarn-${package.version}";
+          src = null;
+          dontUnpack = true;
+          packageJSON = ./package.json;
+          yarnLock = ./yarn.lock;
+          preConfigure = ''
+            mkdir ${package.name}
+            cd ${package.name}
+            ln -s ${packageJSON} ./package.json
+            ln -s ${yarnLock} ./yarn.lock
+          '';
+          yarnPreBuild = ''
+            mkdir -p $HOME/.node-gyp/${pkgs.nodejs.version}
+            echo 9 > $HOME/.node-gyp/${pkgs.nodejs.version}/installVersion
+            ln -sfv ${pkgs.nodejs}/include $HOME/.node-gyp/${pkgs.nodejs.version}
+          '';
+          publishBinsFor =
+            [
+              "@storybook/html"
+            ];
+          postInstall = ''
+            sed -i -e "s|node_modules/.cache/storybook|.cache/storybook|" \
+              $out/libexec/${package.name}/node_modules/@storybook/core/dist/server/utils/resolve-path-in-sb-cache.js
+          '';
+        };
+
+        storyBook = pkgs.stdenv.mkDerivation {
+          name = "${package.name}-${package.version}";
+          src = pkgs.lib.cleanSource ./.;
+
+          buildInputs =
+            [
+              storyBookYarnPkg
+            ] ++
+            (with pkgs; [
+              nodejs
+            ]) ++
+            (with pkgs.nodePackages; [
+              yarn
+            ]);
+
+          patchPhase = ''
+            rm -rf node_modules
+            ln -sf ${storyBookYarnPkg}/libexec/${package.name}/node_modules .
+          '';
+
+          buildPhase = ''
+            # Yarn writes cache directories etc to $HOME.
+            export HOME=$PWD/yarn_home
+            yarn run build-storybook
+          '';
+
+          installPhase = ''
+            mkdir -p $out
+            cp -R ./storybook-static/* $out/
+            cp netlify.toml $out/
+          '';
+
+          shellHook = ''
+            rm -rf node_modules
+            ln -sf ${storyBookYarnPkg}/libexec/${package.name}/node_modules .
+            export PATH=$PWD/node_modules/.bin:$PATH
+            echo "======================================"
+            echo "= To develop run: yarn run storybook ="
+            echo "======================================"
+          '';
+        };
+
+      };
+    };
+}
diff --git a/netlify.toml b/netlify.toml
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "nixos-site-styles",
+  "version": "1.0.0",
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-links": "^6.1.11",
+    "@storybook/html": "^6.1.11",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.0.1",
+    "less-loader": "^7.1.0"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  }
+}
diff --git a/shell.nix b/shell.nix
@@ -0,0 +1,4 @@
+(import (fetchTarball https://github.com/edolstra/flake-compat/archive/master.tar.gz) {
+  src = builtins.fetchGit ./.;
+}).shellNix
+
diff --git a/src/README.md b/src/README.md
@@ -0,0 +1,94 @@
+NixOS website styles
+====================
+
+*Developer-centric notes*
+
+How this is laid out
+--------------------
+
+This uses the rscss structure
+
+ * https://rscss.io/
+
+With one addendum that for *qualified* layout elements like `body > header` the
+component will not be named (e.g. `page-header`); the qualified name for the
+innate structure of the document is enough.
+
+
+Units
+-----
+
+### `@unit`
+
+**Always** use `@unit` relative sizes rather than pixels, if pixels equivalents
+are desired. Otherwise, work with `em` for relative sizes according to the
+current sizes, or `rem` for root-relative sizes.
+
+Using pixel sizes is completely forbidden.
+
+This ensures the site stays entirely scalable according to the user-agent's
+configuration.
+
+> **Tip:** To make a "2 pixels" border:
+> 
+> ```
+> * {
+> 	border: 2 * @unit solid red;
+> }
+> ```
+
+This is not to be confused with the `unit()` function of LESS, which changes or
+removes a unit without conversion. The `unit()` function maye be found near
+uses of `@unit` to strip a unit to work around automatic unit conversions.
+
+### `@gutter`
+
+The gutter is the other unit that is being used on the site. It is defined as
+based on `@unit`, so it respects the rule of always defining sizes based on
+`@unit`.
+
+A gutter is, simply put, the spacing between two elements of the design. When
+spacing out elements, put 1 `@gutter` between them. It can be done through
+dividing the responsibility in halves (`@gutter/2`).
+
+It might be needed to space things a bit more. Using multiples of `@gutter`
+makes ad-hoc adjustments harmonize better with the site.
+
+
+Colours
+-------
+
+> TBD
+
+Always use a named colour. Using functions (e.g.: `lighten` or `darken`) is not
+recommended, as it may create unchecked variants in the palette.
+
+
+Pitfalls
+--------
+
+### Broken `::before` on element with `id=`
+
+To push anchor links inside a page, all elements with an `id=` property
+are given pseudo-element that is used to push the element into the
+visible section of the viewport.
+
+What this means is that if the element you are attempting to style
+has an `id=` property it is fighting against a generic rule.
+
+If the element does not serve for navigation, neither is it used with
+JavaScript, it should not have an ID. To target elements refer to RSCSS.
+
+> Note that even with JavaScript it is preferable to use the RSCSS
+> scheme to target elements in a generic fashion, unless you are
+> targeting a specifically identified element rather than a generic use
+> case.
+
+
+Bibliography
+------------
+
+Useful resources to wrangle specifics.
+
+ * [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+ * https://rscss.io/
diff --git a/src/assets/README.md b/src/assets/README.md
@@ -0,0 +1,21 @@
+Notes about assets
+==================
+
+The `.src.svg` files are *Inkscape* source files.
+
+From these files, you *Save as...* **Plain SVG** files.
+
+In practice I don't know if it makes a difference considering this is
+going through `svgo` to optimize the files anyway.
+
+LESS CSS inclusion
+------------------
+
+Read `svg.less` to see how it works.
+
+The basic idea is that the build process will replace placeholder text
+elements with the actual SVG file content. This file content is
+massaged lightly via LESS functions.
+
+From then on, you have a LESS *Mixin* that you can use to refer to the
+SVG asset.