From 1a7ea3527f733f8c69c4704a7b1758b1c27c7a5f Mon Sep 17 00:00:00 2001 From: Mathias Schopmans Date: Thu, 14 Mar 2024 14:21:32 +0100 Subject: [PATCH] feat: add custom.css support closes #433 --- README.md | 46 ++++++++++++++++++++++-- bin/techradar.js | 35 +++++++++++------- package-lock.json | 4 +-- package.json | 2 +- src/pages/_app.tsx | 5 +-- src/styles/{globals.css => _globals.css} | 0 src/styles/{hljs.css => _hljs.css} | 0 src/styles/custom.css | 2 ++ 8 files changed, 74 insertions(+), 20 deletions(-) rename src/styles/{globals.css => _globals.css} (100%) rename src/styles/{hljs.css => _hljs.css} (100%) create mode 100644 src/styles/custom.css diff --git a/README.md b/README.md index a5d44d3d..5bad48af 100644 --- a/README.md +++ b/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`. diff --git a/bin/techradar.js b/bin/techradar.js index f9672ff7..1406b0dd 100644 --- a/bin/techradar.js +++ b/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"), diff --git a/package-lock.json b/package-lock.json index 5c83d08b..f5064a91 100644 --- a/package-lock.json +++ b/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" diff --git a/package.json b/package.json index 6a38d65e..553a4c6b 100644 --- a/package.json +++ b/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" }, diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 473ca611..5bdcc80f 100644 --- a/src/pages/_app.tsx +++ b/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

= NextPage & { layoutClass?: LayoutClass; diff --git a/src/styles/globals.css b/src/styles/_globals.css similarity index 100% rename from src/styles/globals.css rename to src/styles/_globals.css diff --git a/src/styles/hljs.css b/src/styles/_hljs.css similarity index 100% rename from src/styles/hljs.css rename to src/styles/_hljs.css diff --git a/src/styles/custom.css b/src/styles/custom.css new file mode 100644 index 00000000..d91a290f --- /dev/null +++ b/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/ */