feat: add custom.css support

closes AOEpeople#433

README.md

@@ -203,8 +203,50 @@ Run `npm run build` to build the radar and upload the files of the `./build` fol
 You can view a development version of the radar by running `npm run serve` and open the radar in
 your browser at `http:https://localhost:3000`.
 
+## Advanced styling with `custom.css`
+
+If you need to customize the radar's styles, you can add custom CSS rules to the `custom.css` file.
+
+Be aware that this might break with future versions of the radar as we use css-modules in the
+components which generates dynamic, hashed class names and the layout structure might change.
+
+Therefore, it's advised the `[attribute^=value]` selector that matches elements whose attribute
+value begins
+with a specified value. As an example, if you want to always show the subline in the header use
+the following rule:
+
+```css
+[class^="subline__Logo"] {
+ display: block;
+ opacity: 1;
+}
+```
+
+If you want to include assets like images or fonts, use `../../public/` as the base path.
+Adding a background image to the page could be archived like this:
+
+```css
+body {
+ background: url("../../public/background.png");
+}
+```
+
+Changing the font-family of the headlines:
+
+```css
+h1,
+h2,
+h3 {
+ font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
+}
+```
+
+Changes to the css file will not be reflected in the development server. You need to
+run `npm run serve` or `npm run build` to see the changes.
+
 ## Development
 
 If you want to change core functionality of the radar, you can clone this repository and put your
-radar's markdown-files, config.json and about.md in the `data` folder. Running `npm run dev` will
-start the development server with your and will be available at `http:https://localhost:3000`.
+radar's markdown-files, config.json and about.md in the `data` folder. Run `npm run build:data` to
+parse the markdown files and create a `data.json` and then run `npm run dev` to start the
+development server, which will be available at `http:https://localhost:3000`.

bin/techradar.js

@@ -17,7 +17,7 @@ function info(message) {
 }
 
 function warn(message) {
- console.warn(`Warning: ${message}`);
+ console.log(`\x1b[33mWarning: ${message}\x1b[0m`);
 }
 
 function error(message) {
@@ -30,20 +30,16 @@ function bootstrap() {
  warn(
  "Could not find radar directory. Created a bootstrap radar directory in your current working directory. Feel free to customize it.",
  );
- fs.cpSync(
- path.join(BUILDER_DIR, "data", "radar"),
- path.join(CWD, "radar"),
- {
- recursive: true,
- },
- );
+ fs.cpSync(path.join(SOURCE_DIR, "data", "radar"), path.join(CWD, "radar"), {
+ recursive: true,
+ });
  }
 
  if (!fs.existsSync(path.join(CWD, "public"))) {
  warn(
  "Could not find public directory. Created a public radar directory in your current working directory.",
  );
- fs.cpSync(path.join(BUILDER_DIR, "public"), path.join(CWD, "public"), {
+ fs.cpSync(path.join(SOURCE_DIR, "public"), path.join(CWD, "public"), {
  recursive: true,
  });
  }
@@ -53,7 +49,7 @@ function bootstrap() {
  "Could not find a config.json. Created a bootstrap config.json in your current working directory. Customize it to your needs.",
  );
  fs.copyFileSync(
- path.join(BUILDER_DIR, "data", "config.default.json"),
+ path.join(SOURCE_DIR, "data", "config.default.json"),
  path.join(CWD, "config.json"),
  );
  }
@@ -63,10 +59,18 @@ function bootstrap() {
  "Could not find a about.md. Created a bootstrap about.md in your current working directory. Customize it to your needs.",
  );
  fs.copyFileSync(
- path.join(BUILDER_DIR, "data", "about.md"),
+ path.join(SOURCE_DIR, "data", "about.md"),
  path.join(CWD, "about.md"),
  );
  }
+
+ if (!fs.existsSync(path.join(CWD, "custom.css"))) {
+ warn("Created a bootstrap custom.css in your current working directory.");
+ fs.copyFileSync(
+ path.join(SOURCE_DIR, "src", "styles", "custom.css"),
+ path.join(CWD, "custom.css"),
+ );
+ }
 }
 
 // Calculate current hash of package.json
@@ -77,7 +81,7 @@ function calculateHash(file) {
  return hashSum.digest("hex");
 }
 
-const CURRENT_HASH = calculateHash(path.join(CWD, "package-lock.json"));
+const CURRENT_HASH = calculateHash(path.join(CWD, "package.json"));
 
 // Check if builder dir needs to be recreated
 let RECREATE_DIR = false;
@@ -107,12 +111,13 @@ if (RECREATE_DIR) {
  process.chdir(BUILDER_DIR);
  info("Installing npm packages");
  execSync("npm install", { stdio: "inherit" });
- bootstrap();
  } catch (e) {
  error("Could not install npm packages");
  }
 }
 
+bootstrap();
+
 try {
  if (fs.existsSync(path.join(BUILDER_DIR, "data", "radar"))) {
  fs.rmSync(path.join(BUILDER_DIR, "data", "radar"), { recursive: true });
@@ -127,6 +132,10 @@ try {
  path.join(CWD, "about.md"),
  path.join(BUILDER_DIR, "data", "about.md"),
  );
+ fs.copyFileSync(
+ path.join(CWD, "custom.css"),
+ path.join(BUILDER_DIR, "src", "styles", "custom.css"),
+ );
  fs.copyFileSync(
  path.join(CWD, "config.json"),
  path.join(BUILDER_DIR, "data", "config.json"),

package.json

@@ -1,6 +1,6 @@
 {
  "name": "aoe_technology_radar",
- "version": "4.0.2",
+ "version": "4.1.0-rc.1",
  "bin": {
  "techradar": "./bin/techradar.js"
  },

src/pages/_app.tsx

@@ -5,8 +5,9 @@ import Head from "next/head";
 import { Layout, type LayoutClass } from "@/components/Layout/Layout";
 import { formatTitle } from "@/lib/format";
 import { assetUrl } from "@/lib/utils";
-import "@/styles/globals.css";
-import "@/styles/hljs.css";
+import "@/styles/_globals.css";
+import "@/styles/_hljs.css";
+import "@/styles/custom.css";
 
 export type CustomPage<P = {}, IP = P> = NextPage<P, IP> & {
  layoutClass?: LayoutClass;

src/styles/custom.css

@@ -0,0 +1,2 @@
+/* Use this file to optionally override global css styles and use with caution. */
+/* See README.md for hints and examples: https://github.com/AOEpeople/aoe_technology_radar/ */