Docs theme

Documentation theme for Cecil, powered by Tailwind CSS and Algolia DocSearch.

Features

• Auto-generated navigation sidebar
• Algolia DocSearch integration
• Ready for content localization (l10n)
• Templates internationalization (i18n)
• Mobile friendly
• Dark theme
• Blog posts templates

Installation

composer require cecil/theme-docs

Or download the latest archive and uncompress its content in themes/docs.

Usage

Add docs in the theme section of the config.yml:

theme:
  - docs

Configuration

sidebar:
  - <group>
  - <group>
footer: Copyright © %author%
github:
  repo: https://github.com/<org>/<repo>
  branch: <main|master>
docsearch:
  enabled: true|false
  appId: <YOUR_APP_ID>
  indexName: <YOUR_INDEX_NAME>
  apiKey: <YOUR_SEARCH_API_KEY>
  debug: false|true

Customize styles

Create the Tailwind configuration file tailwind.config.js:

// uncomment to define custom colors
//const colors = require('tailwindcss/colors');

module.exports = {
  presets: [
    require('./themes/docs/tailwind.preset.js')
  ],
  content: [
    './layouts/**/*.html.twig',
    './themes/**/layouts/**/*.html.twig',
  ],
  // uncomment to define custom colors
  /*theme: {
    extend: {
      // https://tailwindcss.com/docs/customizing-colors
      colors: {
        primary: colors.blue,
        secondary: colors.slate,
      },
    },
  }*/
}

Run the following command:

npm install -D tailwindcss
npx tailwindcss -i ./themes/docs/tailwind.css -o ./assets/styles.css

Development

Install deps

npm install

Rebuild CSS

npx tailwindcss -c ./tailwind.preset.js -i ./tailwind.css -o ./assets/styles.css

License

Docs theme is a free software distributed under the terms of the MIT license.

© Arnaud Ligny