Skip to content

Commit

Permalink
feat: Implement VitePress
Browse files Browse the repository at this point in the history
  • Loading branch information
TilmanGriesel committed Dec 1, 2024
1 parent 5bcb022 commit 3177ee1
Show file tree
Hide file tree
Showing 24 changed files with 2,333 additions and 252 deletions.
50 changes: 50 additions & 0 deletions .github/workflows/docs-deploy.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
name: Deploy docs site to Pages
on:
push:
branches: [main]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: pages
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 18
cache: yarn
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Install dependencies
run: yarn install
- name: Build with VitePress
run: |
yarn docs:build
touch ./docs/.vitepress/dist/.nojekyll
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./docs/.vitepress/dist
# Deployment job
deploy:
environment:
name: docs
url: ${{ steps.deployment.outputs.page_url }}
needs: build
runs-on: ubuntu-latest
name: Deploy
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
12 changes: 11 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,12 @@
.DS_Store
/.vscode
.vscode
cache
*.log
*.tgz
.DS_Store
.idea
.temp
.vite_opt_cache
.vscode
node_modules
TODOs.md
18 changes: 12 additions & 6 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,17 @@ format:
pre-commit run --all-files
@echo "YAML formatting complete."

docs-dev:
@echo "Starting vitepress..."
yarn add -D vitepress
yarn docs:dev

help:
@echo "Available targets:"
@echo " all - Run theme assembly (default)"
@echo " theme - Run the theme assembler"
@echo " clean - Remove generated files"
@echo " dev - Run rebuild dev script"
@echo " format - Format YAML files in src and theme directories"
@echo " help - Show this help message"
@echo " all - Run theme assembly (default)"
@echo " theme - Run the theme assembler"
@echo " clean - Remove generated files"
@echo " dev - Run rebuild dev script"
@echo " docs-dev - Run local vitepress"
@echo " format - Format YAML files in src and theme directories"
@echo " help - Show this help message"
54 changes: 38 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,65 @@
<a href="https://github.com/tilmangriesel/graphite/issues"><img src="https://img.shields.io/github/issues/tilmangriesel/graphite?colorA=1F2229&colorB=5c5e70&style=for-the-badge"></a>
</p>

<p align="center"><img src="https://raw.githubusercontent.com/TilmanGriesel/graphite/HEAD/docs/screenshots/dark.png"/></p>
<p align="center"><img src="https://raw.githubusercontent.com/TilmanGriesel/graphite/HEAD/docs/screenshots/light.png"/></p>

**Graphite** is a modern theme that offers a soothing dark mode alongside a bright, clean light mode. It uses native device fonts and maintains a unified design language across all Home Assistant interfaces, from the admin panel to code editors.

<p align="center"><img src="https://raw.githubusercontent.com/TilmanGriesel/graphite/HEAD/docs/public/assets/screenshot/dark.png"/></p>
<p align="center"><img src="https://raw.githubusercontent.com/TilmanGriesel/graphite/HEAD/docs/public/assets/screenshot/light.png"/></p>

## Installation
Easily install Graphite via [HACS](https://hacs.xyz/docs/use/), the Home Assistant Community Store.

### Step 1: Install HACS
If you haven't already, [install HACS](https://hacs.xyz/docs/use/) by following the official guide.

### Step 2: Add the Graphite Theme Repository

[![Open Graphite in your Home Assistant instance](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=TilmanGriesel&repository=graphite)

### Manual Guide

1. Copy the `themes` folder into your home-assistant config folder
1. Set the theme folder in you `configuration.yaml`
#### Alternatively
1. Open the HACS interface in Home Assistant.
2. Search for **Graphite Theme** or use the direct link below:
3. Click **Install** to add the theme to your setup.

### Step 3: Configure your theme directory

Ensure your `configuration.yaml` is set up to include custom themes:

```yaml
frontend:
themes: !include_dir_merge_named themes
```
3. Restart Home Assistant
4. Select the `Graphite` theme in your profile
### Step 4: Restart Home Assistant
Restart your Home Assistant instance to apply changes.
## Examples
### Step 5: Select the Graphite Theme
If you're curious about the cards from my screenshot, you can [check out my examples](https://github.com/TilmanGriesel/graphite/blob/main/examples/README.md).
1. Go to your **User Profile** in Home Assistant.
2. Under **Themes**, select `Graphite` (Light or Dark) from the dropdown menu.


## Manual Installation
For manual installation, you can follow these steps:

## Custom primary color & more
1. Download and copy the `themes` folder into your Home Assistant configuration directory.
2. Add the following to your `configuration.yaml`:
```yaml
frontend:
themes: !include_dir_merge_named themes
```
3. Restart Home Assistant.
4. Choose the `Graphite` theme from your profile.

## Personalize Graphite
Customize the Graphite theme's primary color and more without needing to fork the project by using the [Graphite Theme Patcher](https://github.com/TilmanGriesel/graphite/blob/main/extras/theme-patcher/README.md). This tool is designed for advanced users with technical expertise and experience in script and config modification. For detailed setup instructions, refer to the patcher's README.

## Modifying the theme
## Theme Development Kit
I've created token abstraction and a script to help maintain Graphite's consistency across theme variants and simplify updates. This setup can also serve as a great starting point for building your own themes in no time. [Theme Development Kit](https://github.com/TilmanGriesel/graphite/blob/main/extras/theme-patcher/README.md)

I've created a small token abstraction and a script to help maintain Graphite's consistency across theme variants and simplify updates. You'll find the source components in the src folder. After making any changes, use the theme_assembler Python 3 script in the tools directory to regenerate the theme files. Avoid directly modifying the files in the themes directory. This setup can also serve as a great starting point for building your own themes in no time.
## Examples
If you're curious about the cards from my screenshot, you can [check out my examples](https://github.com/TilmanGriesel/graphite/blob/main/examples/README.md).

## Personal note

Hi there, I'm Tilman, nice to meet you! I'm a product designer and software engineer with a love for blending technology, art, design, and open-source projects. I live in a cozy 16th-century home that I'm gradually turning into a smarter, more connected space.

I started designing this theme in 2022 to make our smart home more intuitive and visually harmonious for my partner Sophia and me. The goal was to create an experience that's both user-friendly and aesthetically pleasing, without needing extra complexity or plugins.
Expand Down
26 changes: 26 additions & 0 deletions docs/.vitepress/config.mts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { defineConfig } from "vitepress";

// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "Graphite Theme",
titleTemplate: ":title",
description: "Calm and clean theme for Home Assistant.",
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: "Home", link: "/" },
{ text: "Get Started", link: "/guides/getting-started" },
{ text: "Theme Patcher", link: "/features/graphite-theme-patcher" },
{ text: "Development Kit", link: "/features/graphite-theme-development-kit" },
{ text: "Card Examples", link: "/guides/card-examples" },
{ text: "About", link: "/about/graphite" },
],
socialLinks: [
{ icon: "github", link: "https://github.com/TilmanGriesel/graphite" },
],
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2024 Tilman Griesel'
}
},
});
20 changes: 20 additions & 0 deletions docs/.vitepress/theme/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { h } from "vue";
import type { Theme } from "vitepress";
import DefaultTheme from "vitepress/theme";
import "./style.css";

export default {
extends: DefaultTheme,
Layout: () => {
return h(DefaultTheme.Layout, null, {
// https://vitepress.dev/guide/extending-default-theme#layout-slots
});
},
enhanceApp({ app, router, siteData }) {
// ...
},
appearance: {
initialValue: 'auto'
},
aside: false,
} satisfies Theme;
Loading

0 comments on commit 3177ee1

Please sign in to comment.