ScalesCms

ScalesCMS is a plugin CMS for the Phoenix Framework that is developed by Fish on Fire and allows you to manage the content of either applications or websites easily.

It provides a set of JSON endpoints for headless usage. Alongside the CMS we also provide a set of React Native components that can be used to easily integrate the CMS into your application.

Build Status

Prerequisites

Elixir 1.14
Phoenix 1.7.17 and higher

How to set up in your project

Add to the list of dependencies in mix.exs
Add the following lines to your config.exs file
```
config :scales_cms,
endpoint: CmsDemoWeb.Endpoint

config :scales_cms,
repo: CmsDemo.Repo
```
This will allow the CMS to use your application's endpoint and repo.
Run mix scales_cms.generate_migrations to generate the migrations for the CMS. These migrations are now part of your application. You could modify them, but no modifications are supported currently.
Run mix ecto.migrate to run the migrations.

Setup tailwind for the admin interface

Add tailwind to your list of dependencies in mix.exs
Run mix tailwind.install to install tailwind

Add the following lines to your config.exs file

config :tailwind,
version: "3.3.2",
default: [
  args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
]

Create a tailwind.config.js file in the root of your project with the following content:

// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration

const plugin = require("tailwindcss/plugin")
const fs = require("fs")
const path = require("path")
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
content: [
  "./js/**/*.js",
  "../lib/scales_cms_web.ex",
  "../lib/scales_cms_web/**/*.*ex"
],
theme: {
  extend: {
    fontFamily: {
      'sans': ['"Poppins"', ...defaultTheme.fontFamily.sans],
    },
    colors: {
      primary: "#21C39D",
      primary_dark: "#178B70",
      secondary: "#0C2136",
      secondary_light: "#0F172A80",
      black: "#151519",
      midGrey: "#4D5D74",
      lightGrey: "#E7EAEE",
      white: "#FFFFFF",
      purple: "#C711B8",
      yellow: "#FFBB34",
      blue: "#36A1FF",
    }
  },
},
plugins: [
  require('flowbite/plugin'),
  require("@tailwindcss/forms"),
  // Allows prefixing tailwind classes with LiveView classes to add rules
  // only when LiveView classes are applied, for example:
  //
  //     <div class="phx-click-loading:animate-ping">
  //
  plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
  plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
  plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),

  // Embeds Heroicons (https://heroicons.com) into your app.css bundle
  // See your `CoreComponents.icon/1` for more information.
  //
  plugin(function ({ matchComponents, theme }) {
    let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
    let values = {}
    let icons = [
      ["", "/24/outline"],
      ["-solid", "/24/solid"],
      ["-mini", "/20/solid"],
      ["-micro", "/16/solid"]
    ]
    icons.forEach(([suffix, dir]) => {
      fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
        let name = path.basename(file, ".svg") + suffix
        values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
      })
    })
    matchComponents({
      "hero": ({ name, fullPath }) => {
        let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
        let size = theme("spacing.6")
        if (name.endsWith("-mini")) {
          size = theme("spacing.5")
        } else if (name.endsWith("-micro")) {
          size = theme("spacing.4")
        }
        return {
          [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
          "-webkit-mask": `var(--hero-${name})`,
          "mask": `var(--hero-${name})`,
          "mask-repeat": "no-repeat",
          "background-color": "currentColor",
          "vertical-align": "middle",
          "display": "inline-block",
          "width": size,
          "height": size
        }
      }
    }, { values })
  })
]
}

Create a css folder in the assets folder and create an app.css file with the following content: @tailwind base; @tailwind components; @tailwind utilities; /* Import the scales_cms Tailwind CSS file */ @import "../../deps/scales_cms/priv/tailwind/scales_cms.css"; /* This file is for your main application CSS */

## React Native Renderer More info on https://github.com/fishonfire/react-native-scales-renderer

## Development setup ### Prerequisites: #### direnv is used to manage environment variables. You can install it by running: 1. curl -sfL https://direnv.net/install.sh | bash 2. echo 'eval "$(direnv hook bash)"' >> ~/.bashrc or echo 'eval "$(direnv hook zsh)"' >> ~/.zshrc 3. Restart your terminal or run source ~/.bashrc or source ~/.zshrc

To start your Phoenix server:

Run mix guardian.gen.secret to generate API secret Set the API secret in the .envrc file like this: > export API_SECRET_KEY=+wUAu+Hizgp+rIBZdK8wM2HKYkHT1V6PvrYEoGJybMeH7/VqerwfF8Inw1Cq083W Run direnv allow to load the environment variables Run mix setup to install and setup dependencies * Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

## Contributors - Simon de la Court (https://github.com/simondelacourt) - Alexey Pikulik (https://github.com/alexeyfof) - Menno Jongejan (https://github.com/mennolpFoF)

Phoenix source code is licensed under the GPL License.