f
/
awesome-chatgpt-prompts
mirror of https://github.com/f/awesome-chatgpt-prompts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add dark mode and publish to GitHub Pages using GitHub Actions

Browse Source
pull/756/head
Mike-FreeAI 6 months ago
parent d56ff0e90f
commit 4d388ecf9e
4 changed files with 100 additions and 0 deletions
Show Stats Download Patch File Download Diff File

33
.github/workflows/publish.yml vendored
Unescape View File

@ -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

8
README.md
Unescape View File

@ -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

8
_config.yml
Unescape View File

@ -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"

51
_layouts/default.html
Unescape View File

@ -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) -->

Write Preview
Loading…
Cancel
Save