feat: add custom.css support

closes #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://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://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://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-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "aoe_technology_radar",
-  "version": "4.0.2",
+  "version": "4.1.0-rc.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aoe_technology_radar",
-      "version": "4.0.2",
+      "version": "4.1.0-rc.1",
       "hasInstallScript": true,
       "bin": {
         "techradar": "bin/techradar.js"

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/ */