Skip to content

Commit

Permalink
Update doxygen-awesome-css
Browse files Browse the repository at this point in the history
  • Loading branch information
mpewsey committed Jun 11, 2024
1 parent 3987f8e commit 2f802c1
Show file tree
Hide file tree
Showing 29 changed files with 2,036 additions and 772 deletions.
11 changes: 2 additions & 9 deletions Docs/doxygen-awesome-css/.github/workflows/publish.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,12 @@ jobs:
uses: actions/checkout@v2
with:
fetch-depth: 0
- name: install Doxygen 1.9.2
run: |
sudo apt-get update
sudo apt-get install -y graphviz libclang-cpp1-9 libclang1-9
wget https://www.doxygen.nl/files/doxygen-1.9.2.linux.bin.tar.gz
tar -xvzf doxygen-1.9.2.linux.bin.tar.gz
ln -s doxygen-1.9.2/bin/doxygen doxygen
- name: set version
run: echo "PROJECT_NUMBER = `git describe --tags`" >> Doxyfile
- name: Generate Documentation
run: ./doxygen Doxyfile
uses: mattnotmitt/doxygen-action@edge
- name: Publish generated content to GitHub Pages
uses: tsunematsu21/[email protected].1
uses: tsunematsu21/[email protected].2
with:
dir: docs/html
branch: gh-pages
Expand Down
5 changes: 4 additions & 1 deletion Docs/doxygen-awesome-css/.gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
docs/html
.DS_Store
.idea
.idea

node_modules
*.tgz
3 changes: 3 additions & 0 deletions Docs/doxygen-awesome-css/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
*
!doxygen-awesome*

484 changes: 302 additions & 182 deletions Docs/doxygen-awesome-css/Doxyfile

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Docs/doxygen-awesome-css/LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2021 jothepro
Copyright (c) 2021 - 2023 jothepro

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
39 changes: 39 additions & 0 deletions Docs/doxygen-awesome-css/Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# SPDX-FileCopyrightText: 2022 Andrea Pappacoda <[email protected]>
# SPDX-License-Identifier: MIT

.POSIX:

PROJECT = doxygen-awesome-css

# Paths
PREFIX = /usr/local
DATADIR = share
INSTALLDIR = $(DESTDIR)$(PREFIX)/$(DATADIR)/$(PROJECT)

# Utilities
INSTALL = install -m 644
MKDIR = mkdir -p
RM = rm -f

# Files to be installed
FILES = doxygen-awesome-darkmode-toggle.js \
doxygen-awesome-fragment-copy-button.js \
doxygen-awesome-interactive-toc.js \
doxygen-awesome-paragraph-link.js \
doxygen-awesome-sidebar-only-darkmode-toggle.css \
doxygen-awesome-sidebar-only.css \
doxygen-awesome-tabs.js \
doxygen-awesome.css

# Empty targets so that `make` and `make clean` do not cause errors
all:
clean:

install:
$(MKDIR) $(INSTALLDIR)
$(INSTALL) $(FILES) $(INSTALLDIR)/

uninstall:
$(RM) -r $(INSTALLDIR)/

.PHONY: all clean install uninstall
165 changes: 124 additions & 41 deletions Docs/doxygen-awesome-css/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,87 +4,170 @@
[![GitHub](https://img.shields.io/github/license/jothepro/doxygen-awesome-css)](https://github.com/jothepro/doxygen-awesome-css/blob/main/LICENSE)
![GitHub Repo stars](https://img.shields.io/github/stars/jothepro/doxygen-awesome-css)

<div style="filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.22)); max-width: 500px">
<div class="title_screenshot">

![Screenshot of Doxygen Awesome CSS](img/screenshot.png)

</div>

**Doxygen Awesome** is a custom **CSS theme for Doxygen HTML-documentation** with lots of customization parameters.
**Doxygen Awesome** is a custom CSS theme for Doxygen HTML documentation with lots of customization parameters.

## Motivation

I really like how the Doxygen HTML-documentation is structured! But IMHO it looks a bit outdated.
I really like how the Doxygen HTML documentation is structured! But IMHO it looks a bit outdated.

This theme is an attemt to update the visuals of Doxygen without changing it's overall layout too much.
This theme is an attempt to update the visuals of Doxygen without changing its overall layout too much.

## Features

- 🌈 Clean, modern design
- 🚀 Heavily customizable by adjusting CSS-variables
- 🧩 No changes to the HTML structure of Doxygen required
- 🚀 Heavily customizable by adjusting CSS variables
- 🧩 No changes to the HTML structure of Doxygen are required
- 📱 Improved mobile usability
- 🌘 Dark mode support!
- 🥇 Works best with **doxygen 1.9.1** - **1.9.3**
- 🥇 Works best with **doxygen 1.9.1** - **1.9.4** and **1.9.6** - **1.10.0**

## Examples

- Sidebar-Only theme: [Documentation of this repository](https://jothepro.github.io/doxygen-awesome-css/)
- Base theme: [libsl3](https://a4z.github.io/libsl3/)

Some websites using this theme:

- [Documentation of this repository](https://jothepro.github.io/doxygen-awesome-css/)
- [wxWidgets](https://docs.wxwidgets.org/3.2/)
- [OpenCV 5.x](https://docs.opencv.org/5.x/)
- [Zephyr](https://docs.zephyrproject.org/latest/doxygen/html/index.html)
- [FELTOR](https://mwiesenberger.github.io/feltor/dg/html/modules.html)
- [Spatial Audio Framework (SAF)](https://leomccormack.github.io/Spatial_Audio_Framework/index.html)
- [Randolf Richardson's C++ classes](https://www.randolf.ca/c++/docs/)
- [libCloudSync](https://jothepro.github.io/libCloudSync/)
- [libsl3](https://a4z.github.io/libsl3/)

## Installation

Copy the file `doxygen-awesome.css` from this repository into your project or add this repository as submodule and check out the latest release:
To use the theme when generating your documentation, bring the required CSS and JS files from this repository into your project.

This can be done in several ways:

- manually copying the files
- adding the project as a Git submodule
- adding the project as a npm/xpm dependency
- installing the theme system-wide

All theme files are located in the root of this repository and start with the prefix `doxygen-awesome-`. You may not need all of them. Follow the install instructions to figure out what files are required for your setup.

```bash
### Git submodule
For projects that use git, add the repository as a submodule and check out the desired release:

```sh
git submodule add https://github.com/jothepro/doxygen-awesome-css.git
cd doxygen-awesome-css
git checkout v2.0.2
git checkout v2.3.3
```

Choose one of the theme variants and configure Doxygen accordingly:

<span id="variants_image">
### npm/xpm dependency

![Available theme variants](img/theme-variants.drawio.svg)
In the npm ecosystem, this project can be added as a development dependency
to your project:

</span>
```sh
cd your-project
npm install https://github.com/jothepro/doxygen-awesome-css#v2.3.3 --save-dev

1. **Base theme**:
```
# Doxyfile
GENERATE_TREEVIEW = YES # optional. Also works without treeview
HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css
ls -l node_module/@jothepro/doxygen-awesome-css
```

2. **Sidebar-only theme**:
```
# Doxyfile
GENERATE_TREEVIEW = YES # required!
HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css \
doxygen-awesome-css/doxygen-awesome-sidebar-only.css
```
Similarly, in the [xPack](https://xpack.github.io) ecosystem, this project can be added
as a development dependency to an [`xpm`](https://xpack.github.io/xpm/)
managed project.

### System-wide

You can even install the theme system-wide by running `make install`.
The files will be installed to `/usr/local/share/` by default,
but you can customize the install location with `make PREFIX=/my/custom/path install`.

### Choosing a layout

There are two layout options. Choose one of them and configure Doxygen accordingly:

<div class="tabbed">

- <b class="tab-title">Base Theme</b><div class="darkmode_inverted_image">
![](img/theme-variants-base.drawio.svg)
</div>
Comes with the typical Doxygen titlebar. Optionally the treeview in the sidebar can be enabled.

Required files: `doxygen-awesome.css`

Further installation instructions:
Required `Doxyfile` configuration:
```
GENERATE_TREEVIEW = YES # optional. Also works without treeview
DISABLE_INDEX = NO
FULL_SIDEBAR = NO
HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css
HTML_COLORSTYLE = LIGHT # required with Doxygen >= 1.9.5
```

- [How to install extensions](docs/extensions.md)
- [How to customize the theme (colors, spacing, border-radius, ...)](docs/customization.md)
- <b class="tab-title">Sidebar-Only Theme</b><div class="darkmode_inverted_image">
![](img/theme-variants-sidebar-only.drawio.svg)
</div>
Hides the top titlebar to give more space to the content. The treeview must be enabled in order for this theme to work.

Required files: `doxygen-awesome.css`, `doxygen-awesome-sidebar-only.css`

Required `Doxyfile` configuration:
```
GENERATE_TREEVIEW = YES # required!
DISABLE_INDEX = NO
FULL_SIDEBAR = NO
HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css \
doxygen-awesome-css/doxygen-awesome-sidebar-only.css
HTML_COLORSTYLE = LIGHT # required with Doxygen >= 1.9.5
```

</div>

<br>

@warning
- This theme is not compatible with the `FULL_SIDEBAR = YES` option provided by Doxygen!
- `HTML_COLORSTYLE` must be set to `LIGHT` since Doxygen 1.9.5!

### Further installation instructions

- [Installing extensions](docs/extensions.md)
- [Customizing the theme (colors, spacing, border-radius, ...)](docs/customization.md)
- [Tips and Tricks for further configuration](docs/tricks.md)

## Browser support

Tested with

- Chrome 98, Chrome 98 for Android, Chrome 87 for iOS
- Safari 15, Safari for iOS 15
- Firefox 97, Firefox Daylight 97 for Android, Firefox Daylight 96 for iOS
- Chrome 119, Chrome 119 for Android, Chrome 119 for iOS
- Safari 17, Safari for iOS 16
- Firefox 118, Firefox 120 for Android, Firefox 119 for iOS
- Edge 119
- Opera 108


The theme does not strive to be backward compatible with (significantly) older browser versions.


## Credits

- This theme is inspired by the [vuepress](https://vuepress.vuejs.org/) static site generator default theme.
- Thank you for all the feedback on github!
Thanks for all the bug reports and inspiring feedback on GitHub!

<span class="next_section_button">
Special thanks to all the contributors:
<br><br>
<a href="https://github.com/jothepro/doxygen-awesome-css/graphs/contributors">
<img src="https://contrib.rocks/image?repo=jothepro/doxygen-awesome-css" />
</a>

Read Next: [Extensions](docs/extensions.md)
</span>

<div class="section_buttons">

| Read Next |
|---------------------------------:|
| [Extensions](docs/extensions.md) |

</div>
Loading

0 comments on commit 2f802c1

Please sign in to comment.