https://github.com/dropseed/dropseed-docs-theme
A Combine theme for Dropseed documentation.
https://github.com/dropseed/dropseed-docs-theme
combine static-site theme
Last synced: 5 months ago
JSON representation
A Combine theme for Dropseed documentation.
- Host: GitHub
- URL: https://github.com/dropseed/dropseed-docs-theme
- Owner: dropseed
- Created: 2021-01-06T17:29:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-01T00:10:54.000Z (over 1 year ago)
- Last Synced: 2025-10-20T07:59:13.741Z (9 months ago)
- Topics: combine, static-site, theme
- Language: HTML
- Homepage:
- Size: 2.51 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dropseed-docs-theme
A [Combine](https://github.com/dropseed/combine) theme for standard Dropseed documentation.
This theme has:
- a fixed, full-screen layout with a sidebar
- [search with pitchfork](https://github.com/dropseed/pitchfork)
- [Tailwind](https://tailwindcss.com/)
- on-page navigation sidebar that is populated automatically
- active-page link highlighting with JavaScript
- a markdown template with optional next/previous page links
- [Rubik](https://fonts.google.com/specimen/Rubik) and [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) Google Fonts
- a `google_tag_manager_id` variable
- a `version` variable
- a site `name` variable
## Using it
### Git submodule
A submodule is the recommended way to use this on Dropseed projects,
so that improvements can be pushed/pulled easily.
```console
$ git submodule add https://github.com/dropseed/dropseed-docs-theme theme
```
To pull the latest changes,
you can then do:
```console
$ git submodule update --remote theme
```
You could also do a one-time copy of these files to use as a starting point.
### `combine.yml`
Your site needs a `combine.yml`,
and the build steps are defined there.
```yaml
steps:
- run: "./theme/node_modules/.bin/parcel build theme/content/assets/_app.js --out-dir output/assets --out-file app.js"
watch: "./theme/node_modules/.bin/parcel watch theme/content/assets/_app.js --out-dir output/assets --out-file app.js"
# Note how we're using a modified copy of _tailwind.css from the site itself, not the theme
- run: "./theme/node_modules/.bin/tailwind -i ./content/assets/_tailwind.css -o ./output/assets/tailwind.css"
watch: "./theme/node_modules/.bin/tailwind -i ./content/assets/_tailwind.css -o ./output/assets/tailwind.css --watch"
- run: "./theme/node_modules/.bin/pitchfork index output -c .content"
variables:
name: Combine
base_url:
default: "https://combine.dropseed.io"
from_env: URL # netlify
version:
default: "\"latest\""
from_env: COMMIT_REF
google_tag_manager_id:
from_env: GOOGLE_TAG_MANAGER_ID
```
### `tailwind.config.js`
You can import and add/remove settings to the theme's Tailwind config:
```js
const docsTheme = require("./theme/tailwind.config.js")
docsTheme.theme.extend.colors = {
"d-brown-100": "#fbf9f8",
"d-brown-200": "#e1cdc0",
"d-brown-300": "#c7b5a8",
"d-brown-400": "#ad9c91",
"d-brown-500": "#948479",
"d-brown-600": "#7a6b61",
"d-brown-700": "#60534a",
"d-brown-800": "#463a32",
"d-brown-900": "#252525",
"d-green": "#6b8f71",
"d-red": "#e15634",
}
module.exports = docsTheme
```
### `base.template.html`
Then extend the theme with your base template.
```html+jinja
{% extends "theme.template.html" %}
{% block body_class %}text-gray-700{% endblock %}
{% block sidebar_home_link %}
PullApprove Docs
{% endblock %}
{% block navbar_content_right %}
{% endblock %}
```