{"id":22489361,"url":"https://github.com/ThijmenGThN/directus-themebuilder","last_synced_at":"2025-08-02T21:32:35.723Z","repository":{"id":65423191,"uuid":"567867923","full_name":"ThijmenGThN/directus-themebuilder","owner":"ThijmenGThN","description":"✦ A Theme Builder for Directus","archived":false,"fork":false,"pushed_at":"2023-12-08T16:13:41.000Z","size":522,"stargazers_count":44,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-30T09:33:59.522Z","etag":null,"topics":["directus","docker","nextjs","tailwind","theme-builder"],"latest_commit_sha":null,"homepage":"https://heuve.link/directus-themebuilder","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThijmenGThN.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-11-18T19:19:20.000Z","updated_at":"2024-10-30T19:52:52.000Z","dependencies_parsed_at":"2023-02-16T01:45:57.012Z","dependency_job_id":"b5e0f583-6f43-4343-b4b5-bb457ea2b5d3","html_url":"https://github.com/ThijmenGThN/directus-themebuilder","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThijmenGThN%2Fdirectus-themebuilder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThijmenGThN%2Fdirectus-themebuilder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThijmenGThN%2Fdirectus-themebuilder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThijmenGThN%2Fdirectus-themebuilder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThijmenGThN","download_url":"https://codeload.github.com/ThijmenGThN/directus-themebuilder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500221,"owners_count":17930020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directus","docker","nextjs","tailwind","theme-builder"],"created_at":"2024-12-06T17:19:42.745Z","updated_at":"2024-12-06T17:22:05.413Z","avatar_url":"https://github.com/ThijmenGThN.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\n### A Theme Builder for Directus\n\nCustomizing the Directus app with a specific color can be a hassle due to the need to convert the color to a CSS object. To simplify this process, a web application has been built that offers an easier way to apply a custom color using a color converter. The application eliminates the need to go through the tedious process of converting a single color and provides a more efficient solution. Try it out by clicking on the link below.\n\n\u003e _**TLDR**: Easier way to apply a custom color with a webapp color converter._\n\n**https://heuve.link/directus-themebuilder**\n\n![Preview](https://i.imgur.com/TjqUTRp.png)\n\n# Build with\n\n- NextJS [(site)](https://nextjs.org)\n- NextAuth [(site)](https://next-auth.js.org/)\n- Prisma [(site)](https://www.prisma.io)\n- TailwindCSS [(site)](https://tailwindcss.com)\n\n# Getting started\n\n## Dependencies\n\n- NodeJS [(site)](https://nodejs.org) ` \u003e16.8 `\n- Docker [(site)](https://docker.com/get-started/) ` \u003e24 `\n- Docker Compose [(site)](https://docs.docker.com/compose/install) ` \u003e1.28 `\n\n## Setup\n\n1. Clone the repository to your system. \n```sh\ngit clone https://github.com/ThijmenGThN/next-leaflet\n```\n```sh\ncd next-leaflet\n```\n\n2. Preparing the environment, it is recommend to use the sample file.\n```sh\ncp sample.env .env\n```\n```sh\nnano .env\n```\n\n3. Install the required dependencies, by default we do this with yarn.\n```\nyarn install\n```\n\u003e \u003cb\u003eDon't have yarn installed? \u003c/b\u003e\u003cbr/\u003e\n\u003e You can install it via npm.\n\u003e ```sh\n\u003e npm i -g yarn\n\u003e ```\n\n## Development\n\n1. Running Next.js in devmode.\n```sh\nyarn dev\n```\n\n2. Starting the database.\n```sh\ndocker-compose up -d\n```\n\u003e \u003cb\u003eA fresh installation needs an additional step.\u003c/b\u003e\u003cbr/\u003e\n\u003e Apply prisma's schema to the database.\n\u003e ```sh\n\u003e npx prisma db push\n\u003e ```\n\n## Deployment\n\nTo deploy next-leaflet we use docker by default, if you'd like to do it without docker, follow the \u003cb\u003eDevelopment\u003c/b\u003e procedure whilst changing step 1 to ` yarn deploy `.\n\n\u003e \u003cb\u003eSet the right variables.\u003c/b\u003e\u003cbr /\u003e\n\u003e Ensure that ` COMPOSE_PROFILES ` has been set to ` prod ` in the environment file so docker knows to also deploy the ` app ` service alongside the ` database `.\n\u003e\n\u003e Also make sure that the ` PRISMA_CONNECTOR ` has been set right, the default \"\u003cb\u003elocalhost\u003c/b\u003e\" won't work in deployment, instead replace it with \"\u003cb\u003edatabase\u003c/b\u003e\".\n\n0. Pull down any existing services that might run in the background.\n```sh\ndocker-compose down\n```\n\n1. Start next-leaflet in deployment-mode.\n```sh\ndocker-compose up -d\n```\n\n\u003e \u003cb\u003enext-leaflet should (after a while) go up on port ` 3000 `.\u003c/b\u003e\u003cbr /\u003e\n\u003e Display the console logs if the service is not going online. Do take note that the port might differ if adjusted in the environment file.\n\u003e ```sh\n\u003e docker-compose logs\n\u003e ```\n\n### GitHub Actions\n\nSetting up CI/CD with next-leaflet is not only a breeze to setup but also very useful to eliminate deployment steps.\n\n\u003cb\u003eThis setup will guide you to deploy your next-leaflet app on an ssh-accessible host.\u003c/b\u003e\n\n#### Configure environment variables\n\n0. Requirements\n - Ensure that you have access to an active GitHub Actions (runner).\n - Install docker(-compose) on the server you'd like to deploy next-leaflet on.\n    - Docker [(site)](https://docker.com/get-started/) ` \u003e24 `\n    - Docker Compose [(site)](https://docs.docker.com/compose/install) ` \u003e1.28 `\n\n1. Within GitHub navigate to ` Settings \u003e Secrets and variables \u003e Actions `.\n\n2. Create the following repository secrets:\n\nName|Expects|Description\n-|-|-\nSSH_KEY|Private Key|Generate a new ssh key without a password.\nSSH_HOST|IP Address|The address of your server with an Actions (runner) active.\nSSH_USER|Username|Host system user where next-leaflet should be deploy on.\nSSH_PORT|Port Number|This usually refers to the default ssh port 22.\nAPP_ENV|Environment|A copy of .env.sample with adjusted values for deployment.\n\n3. Designate a trigger branch within the ` .github/deploy.yml ` file.\n\n\u003e Any change pushed to the targeted branch should now trigger a request to deploy next-leaflet via docker-compose.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FThijmenGThN%2Fdirectus-themebuilder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FThijmenGThN%2Fdirectus-themebuilder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FThijmenGThN%2Fdirectus-themebuilder/lists"}