Merge pull request #756 from Mike-FreeAI/add-dark-mode
Add dark mode and publish to GitHub Pages using GitHub Actions
This commit is contained in:
Fatih Kadir Akın
GitHub
commit
4eac478c05
|
|
@ -0,0 +1,33 @@
|
||||||
|
name: Publish to GitHub Pages
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout repository
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
|
||||||
|
- name: Set up Ruby
|
||||||
|
uses: actions/setup-ruby@v1
|
||||||
|
with:
|
||||||
|
ruby-version: '2.7'
|
||||||
|
|
||||||
|
- name: Install dependencies
|
||||||
|
run: |
|
||||||
|
gem install bundler
|
||||||
|
bundle install
|
||||||
|
|
||||||
|
- name: Build site
|
||||||
|
run: bundle exec jekyll build
|
||||||
|
|
||||||
|
- name: Deploy to GitHub Pages
|
||||||
|
uses: peaceiris/actions-gh-pages@v3
|
||||||
|
with:
|
||||||
|
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
publish_dir: ./_site
|
||||||
|
|
@ -94,6 +94,14 @@ The _unofficial_ ChatGPT desktop application provides a convenient way to access
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Dark Mode Implementation
|
||||||
|
|
||||||
|
We have implemented a dark mode for this repository to enhance your reading experience. The dark mode is implemented using CSS variables and a toggle button. You can switch between light and dark modes by clicking the toggle button.
|
||||||
|
|
||||||
|
## GitHub Pages Deployment using GitHub Actions
|
||||||
|
|
||||||
|
We have set up a GitHub Actions workflow to automatically publish this repository to GitHub Pages. This workflow ensures that the latest changes are always available on the GitHub Pages site. You can find the workflow configuration in the `.github/workflows/publish.yml` file.
|
||||||
|
|
||||||
# Prompts
|
# Prompts
|
||||||
|
|
||||||
## ChatGPT SEO prompts
|
## ChatGPT SEO prompts
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,10 @@
|
||||||
name: Awesome ChatGPT Prompts
|
name: Awesome ChatGPT Prompts
|
||||||
title: null
|
title: null
|
||||||
|
|
||||||
|
# Dark mode configuration
|
||||||
|
dark_mode: true
|
||||||
|
|
||||||
|
# GitHub Pages configuration
|
||||||
|
github_pages:
|
||||||
|
url: "https://<your-github-username>.github.io/<your-repo-name>"
|
||||||
|
branch: "gh-pages"
|
||||||
|
|
|
||||||
|
|
@ -7,10 +7,45 @@
|
||||||
|
|
||||||
{% seo %}
|
{% seo %}
|
||||||
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
|
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color-light: #ffffff;
|
||||||
|
--bg-color-dark: #1a1a1a;
|
||||||
|
--text-color-light: #000000;
|
||||||
|
--text-color-dark: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-color-light);
|
||||||
|
color: var(--text-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode {
|
||||||
|
background-color: var(--bg-color-dark);
|
||||||
|
color: var(--text-color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle {
|
||||||
|
position: fixed;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
background-color: var(--bg-color-light);
|
||||||
|
color: var(--text-color-light);
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .dark-mode-toggle {
|
||||||
|
background-color: var(--bg-color-dark);
|
||||||
|
color: var(--text-color-dark);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
{% include head-custom.html %}
|
{% include head-custom.html %}
|
||||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6945602608405209" crossorigin="anonymous"></script>
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6945602608405209" crossorigin="anonymous"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌞</button>
|
||||||
<div class="container-lg px-3 my-5 markdown-body">
|
<div class="container-lg px-3 my-5 markdown-body">
|
||||||
{% if site.title and site.title != page.title %}
|
{% if site.title and site.title != page.title %}
|
||||||
<h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
|
<h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
|
||||||
|
|
@ -47,6 +82,22 @@
|
||||||
}, false);
|
}, false);
|
||||||
x.previousElementSibling.previousElementSibling.prepend(button);
|
x.previousElementSibling.previousElementSibling.prepend(button);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function toggleDarkMode() {
|
||||||
|
const body = document.body;
|
||||||
|
body.classList.toggle('dark-mode');
|
||||||
|
const isDarkMode = body.classList.contains('dark-mode');
|
||||||
|
localStorage.setItem('dark-mode', isDarkMode);
|
||||||
|
document.querySelector('.dark-mode-toggle').textContent = isDarkMode ? '🌙' : '🌞';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const isDarkMode = localStorage.getItem('dark-mode') === 'true';
|
||||||
|
if (isDarkMode) {
|
||||||
|
document.body.classList.add('dark-mode');
|
||||||
|
document.querySelector('.dark-mode-toggle').textContent = '🌙';
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style>video { max-width: 100% !important; }</style>
|
<style>video { max-width: 100% !important; }</style>
|
||||||
<!-- Google tag (gtag.js) -->
|
<!-- Google tag (gtag.js) -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue