From cabacae1395b78a7d90cb3da0ce4f5ce12f35daa Mon Sep 17 00:00:00 2001 From: Sto Date: Thu, 24 Jul 2025 21:00:22 +0200 Subject: [PATCH 1/4] updated readme, added the steps of creating a custom theme using core-beta as a basis, included a brief description of the vite commands that will be used --- README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/README.md b/README.md index 17c0d87..fc7f390 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,46 @@ git subtree pull --prefix CTFd/themes/core-beta git@github.com:CTFd/core-beta.gi Make sure to use Merge Commits when dealing with the subtree here. For some reason Github's squash and commit uses the wrong line ending which causes issues with the subtree script: https://stackoverflow.com/a/47190256. +## Creating Custom Theme (based on core-beta) + +To create a custom theme based on the core-beta one, here are the steps to follow : +1. Clone core-beta theme locally +``` +git clone https://github.com/CTFd/core-beta.git +``` + +2. Copy the following files/folders into a new directory `custom-theme` : +- `package.json` +- `vite.config.js` +- `assets` +- `static` +- `templates` + +To clarify, the `./assets` folder would contain the uncompiled source files (the ones you can modify), while the `./static` directory contains the compiled ones. + +``` +mkdir custom-theme +cd core-beta +cp -r package.json vite.config.js assets static templates ./../custom-theme +``` + +3. Install [Yarn](https://classic.yarnpkg.com/en/) and [Vite](https://vite.dev/guide/) (following the official installation guides) +**Yarn** is a dependency management tool used to install and manage project packages while **Vite** handles the frontend tooling in CTFd by building optimized assets that are served through Flask. + - Install Yarn following https://classic.yarnpkg.com/en/docs/install + - Install Vite using the appropriate method for your system (for instance `npm i vite@latest -D`, etc.) + + +4. Run `npm install` in the root of `custom-theme` folder to install the necessary Node packages. +5. - Run `yarn dev` (this will run `vite build --watch`) while developing the theme. + - Run `yarn build` (which will run `vite build`) for a one-time build. +Vite allows you to preview changes instantly with hot reloading. + + +6. Now, you can start your modifications in the `assets` folder. Each time you save, Vite will automatically recompile everything, and you can directly see the result by importing your compiled theme into a CTFd instance. +(You do not need the `node_modules` folder, simply zip the theme directory without it.) + +*Note : core-beta theme uses Bootstrap framework for styling.* + ## Todo - Document how we are using Vite From 89071351d644e5e92f2925946b156487a0b8300c Mon Sep 17 00:00:00 2001 From: Sto Date: Thu, 24 Jul 2025 22:06:10 +0200 Subject: [PATCH 2/4] updated readme, removed the new folder part, yarn usage instead of npm --- README.md | 28 ++++++---------------------- 1 file changed, 6 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index fc7f390..34ee546 100644 --- a/README.md +++ b/README.md @@ -26,35 +26,19 @@ To create a custom theme based on the core-beta one, here are the steps to follo ``` git clone https://github.com/CTFd/core-beta.git ``` +To clarify the structure of the project, the `./assets` folder contains the uncompiled source files (the ones you can modify), while the `./static` directory contains the compiled ones. -2. Copy the following files/folders into a new directory `custom-theme` : -- `package.json` -- `vite.config.js` -- `assets` -- `static` -- `templates` - -To clarify, the `./assets` folder would contain the uncompiled source files (the ones you can modify), while the `./static` directory contains the compiled ones. - -``` -mkdir custom-theme -cd core-beta -cp -r package.json vite.config.js assets static templates ./../custom-theme -``` - -3. Install [Yarn](https://classic.yarnpkg.com/en/) and [Vite](https://vite.dev/guide/) (following the official installation guides) -**Yarn** is a dependency management tool used to install and manage project packages while **Vite** handles the frontend tooling in CTFd by building optimized assets that are served through Flask. - - Install Yarn following https://classic.yarnpkg.com/en/docs/install - - Install Vite using the appropriate method for your system (for instance `npm i vite@latest -D`, etc.) +2. Install [Yarn](https://classic.yarnpkg.com/en/) following the official installation guides : https://classic.yarnpkg.com/en/docs/install +**Yarn** is a dependency management tool used to install and manage project packages while **[Vite](https://vite.dev/guide/)** handles the frontend tooling in CTFd by building optimized assets that are served through Flask. -4. Run `npm install` in the root of `custom-theme` folder to install the necessary Node packages. -5. - Run `yarn dev` (this will run `vite build --watch`) while developing the theme. +3. Run `yarn install` in the root of `core-beta` folder to install the necessary Node packages including `vite`. +4. - Run `yarn dev` (this will run `vite build --watch`) while developing the theme. - Run `yarn build` (which will run `vite build`) for a one-time build. Vite allows you to preview changes instantly with hot reloading. -6. Now, you can start your modifications in the `assets` folder. Each time you save, Vite will automatically recompile everything, and you can directly see the result by importing your compiled theme into a CTFd instance. +5. Now, you can start your modifications in the `assets` folder. Each time you save, Vite will automatically recompile everything, and you can directly see the result by importing your compiled theme into a CTFd instance. (You do not need the `node_modules` folder, simply zip the theme directory without it.) *Note : core-beta theme uses Bootstrap framework for styling.* From f95d185f7b249e4c921398459498dbf79bfca5a9 Mon Sep 17 00:00:00 2001 From: Sto Date: Thu, 24 Jul 2025 22:27:33 +0200 Subject: [PATCH 3/4] updated readme, replaced core-beta by custom-theme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 34ee546..1e9e44a 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Make sure to use Merge Commits when dealing with the subtree here. For some reas To create a custom theme based on the core-beta one, here are the steps to follow : 1. Clone core-beta theme locally ``` -git clone https://github.com/CTFd/core-beta.git +git clone https://github.com/CTFd/core-beta.git custom-theme ``` To clarify the structure of the project, the `./assets` folder contains the uncompiled source files (the ones you can modify), while the `./static` directory contains the compiled ones. @@ -32,7 +32,7 @@ To clarify the structure of the project, the `./assets` folder contains the unco **Yarn** is a dependency management tool used to install and manage project packages while **[Vite](https://vite.dev/guide/)** handles the frontend tooling in CTFd by building optimized assets that are served through Flask. -3. Run `yarn install` in the root of `core-beta` folder to install the necessary Node packages including `vite`. +3. Run `yarn install` in the root of `custom-theme` folder to install the necessary Node packages including `vite`. 4. - Run `yarn dev` (this will run `vite build --watch`) while developing the theme. - Run `yarn build` (which will run `vite build`) for a one-time build. Vite allows you to preview changes instantly with hot reloading. From fbd706912d6de7df25363808fecf02f5aca77bc3 Mon Sep 17 00:00:00 2001 From: Kevin Chung Date: Fri, 1 Aug 2025 11:56:21 -0400 Subject: [PATCH 4/4] Update README.md --- README.md | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 1e9e44a..daa92ab 100644 --- a/README.md +++ b/README.md @@ -21,27 +21,30 @@ Make sure to use Merge Commits when dealing with the subtree here. For some reas ## Creating Custom Theme (based on core-beta) -To create a custom theme based on the core-beta one, here are the steps to follow : -1. Clone core-beta theme locally -``` -git clone https://github.com/CTFd/core-beta.git custom-theme -``` -To clarify the structure of the project, the `./assets` folder contains the uncompiled source files (the ones you can modify), while the `./static` directory contains the compiled ones. +To create a custom theme based on the core-beta one, here are the steps to follow: + +1. Clone core-beta theme locally to a seperate folder + ``` + git clone https://github.com/CTFd/core-beta.git custom-theme + ``` + To clarify the structure of the project, the `./assets` folder contains the uncompiled source files (the ones you can modify), while the `./static` directory contains the compiled ones. -2. Install [Yarn](https://classic.yarnpkg.com/en/) following the official installation guides : https://classic.yarnpkg.com/en/docs/install -**Yarn** is a dependency management tool used to install and manage project packages while **[Vite](https://vite.dev/guide/)** handles the frontend tooling in CTFd by building optimized assets that are served through Flask. +2. Install [Yarn](https://classic.yarnpkg.com/en/) following the [official installation guides](https://classic.yarnpkg.com/en/docs/install). + * **Yarn** is a dependency management tool used to install and manage project packages + * **[Vite](https://vite.dev/guide/)** handles the frontend tooling in CTFd by building optimized assets that are served through Flask. +4. Run `yarn install` in the root of `custom-theme` folder to install the necessary Node packages including `vite`. -3. Run `yarn install` in the root of `custom-theme` folder to install the necessary Node packages including `vite`. -4. - Run `yarn dev` (this will run `vite build --watch`) while developing the theme. +5. Run the appropriate yarn build mode: + - Run `yarn dev` (this will run `vite build --watch`) while developing the theme. - Run `yarn build` (which will run `vite build`) for a one-time build. -Vite allows you to preview changes instantly with hot reloading. + Vite allows you to preview changes instantly with hot reloading. -5. Now, you can start your modifications in the `assets` folder. Each time you save, Vite will automatically recompile everything, and you can directly see the result by importing your compiled theme into a CTFd instance. -(You do not need the `node_modules` folder, simply zip the theme directory without it.) +6. Now, you can start your modifications in the `assets` folder. Each time you save, Vite will automatically recompile everything (assuming you are using `yarn dev`), and you can directly see the result by importing your compiled theme into a CTFd instance. + Note: You do not need the `node_modules` folder, you can simply zip the theme directory without it. -*Note : core-beta theme uses Bootstrap framework for styling.* +7. When you are ready you can use `yarn build` to build the production copy of your theme. ## Todo