Add professional Jekyll website structure with dark theme and SEO #1

Copilot · 2025-10-29T15:48:09Z

Implements a complete Jekyll static site generator structure with dark theme support, blog system, and SEO optimization for the CryptoAttacker tools repository.

Structure

Configuration: _config.yml with English content, navigation, SEO settings, and plugin configuration
Layouts: Default, page, and post templates with semantic HTML and ARIA labels
Includes: Modular header (with navigation + theme toggle), footer, and head components
Styling: SASS architecture with CSS custom properties for theming
- variables.scss - Theme colors for light/dark modes
- base.scss - Typography and accessibility
- layout.scss - Header, footer, navigation (responsive)
- pages.scss - Page and post styles
- syntax-highlighting.scss - Code blocks (Rouge) with dual themes
Content: Homepage, About, Contact, Blog listing, 404 page, 3 sample posts with tags/categories
Assets: Theme toggle JavaScript with localStorage persistence

Dark Theme

Theme preference stored in localStorage, respects system preferences by default. Toggle button in navigation switches between light/dark with smooth CSS transitions via data-theme attribute.

function setTheme(theme) {
  html.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}

SEO & Accessibility

jekyll-seo-tag plugin for meta tags
Sitemap and robots.txt auto-generated
Semantic HTML5 with proper heading hierarchy
ARIA labels on interactive elements
Keyboard navigation support

Screenshots

Light Theme:

Dark Theme:

Code Highlighting:

Usage

bundle install
bundle exec jekyll serve

Site builds successfully and serves at localhost:4000.

Original prompt

Create a professional Jekyll website structure in the CryptoAttacker/tools repository with the following features:

Full English content and configuration

Dark theme support (with toggle and persistent preference)

Modern responsive layout (header, footer, navigation)

Blog system (posts, tags, categories)

About, Contact, and Blog pages

SEO best practices (meta tags, sitemap)

Code syntax highlighting

Accessibility standards

All necessary default files (_config.yml, _includes, _layouts, _data, _sass, assets/css, assets/js, assets/images, index.html, Gemfile, README.md, etc.)

The Jekyll site must follow best practices and be suitable for professional use.

This pull request was created as a result of the following prompt from Copilot chat.

Create a professional Jekyll website structure in the CryptoAttacker/tools repository with the following features:

Full English content and configuration

Dark theme support (with toggle and persistent preference)

Modern responsive layout (header, footer, navigation)

Blog system (posts, tags, categories)

About, Contact, and Blog pages

SEO best practices (meta tags, sitemap)

Code syntax highlighting

Accessibility standards

All necessary default files (_config.yml, _includes, _layouts, _data, _sass, assets/css, assets/js, assets/images, index.html, Gemfile, README.md, etc.)

The Jekyll site must follow best practices and be suitable for professional use.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: Pymmdrza <[email protected]>

Pymmdrza

jeklly

Copilot

Pull Request Overview

This PR transforms the site from a cryptocurrency tools landing page with mixed promotional content to a clean, professional Jekyll-based blog and documentation platform. The changes establish a modern, accessible foundation for technical content.

Key changes:

Complete redesign with Jekyll static site generator
New dark theme toggle with persistent user preference
Professional blog system with three sample posts on cryptocurrency security and Jekyll tutorials
Modern responsive layout with semantic HTML and accessibility features

Reviewed Changes

Copilot reviewed 27 out of 29 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
index.md → index.html	Replaced promotional content with clean homepage featuring latest blog posts
_config.yml	Added Jekyll site configuration with plugins, navigation, and SEO settings
_layouts/*	Created default, page, and post layouts with semantic HTML
_includes/*	Added reusable header, footer, and head components
_sass/*	Implemented comprehensive SCSS with CSS variables for theming
assets/js/theme-toggle.js	Added dark theme toggle with localStorage persistence
_posts/*	Created three sample blog posts with proper front matter
about.md, contact.md, blog.html	Added core pages for site navigation
robots.txt	Added SEO configuration with sitemap reference
Gemfile	Defined Jekyll dependencies and plugins

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-10-29T23:14:44Z

assets/js/theme-toggle.js

+    // Only apply system preference if user hasn't set a preference
+    if (!localStorage.getItem('theme')) {
+      setTheme(darkModeQuery.matches ? 'dark' : 'light');
+    }


The system preference check at initialization conflicts with the earlier initTheme() call on line 38. When a user has no stored preference, initTheme() sets it to 'light' (line 10 default), then this code immediately overwrites it with the system preference. The logic should check system preference first before the initial initTheme() call, or the default in getTheme() should be removed to allow this check to work properly.

Copilot · 2025-10-29T23:14:44Z

_includes/head.html

+    // Load theme preference before page renders to prevent flash
+    (function() {
+      const theme = localStorage.getItem('theme') || 'light';
+      document.documentElement.setAttribute('data-theme', theme);
+    })();


The theme initialization logic is duplicated between _includes/head.html and assets/js/theme-toggle.js (lines 9-10 and 27-30). This creates a maintenance burden and potential for inconsistency. Consider extracting the default theme value to a shared constant or removing the duplication by relying solely on the head.html initialization for the initial render.

Copilot · 2025-10-29T23:14:44Z

contact.md

+
+### Send Us a Message
+
+<form class="contact-form" action="https://formspree.io/f/YOUR_FORM_ID" method="POST">


The contact form uses a placeholder 'YOUR_FORM_ID' that will result in a non-functional form. Consider either removing the form entirely until configured, providing clearer setup instructions in a comment, or using a configuration variable from _config.yml (e.g., {{ site.formspree_id }}) to make it easier to configure without editing HTML.

Copilot · 2025-10-29T23:14:45Z

robots.txt

+User-agent: *
+Allow: /
+
+Sitemap: {{ site.url }}/sitemap.xml


Liquid template syntax in robots.txt will not be processed unless the file has front matter. The file needs YAML front matter (triple dashes) at the top for Jekyll to process the {{ site.url }} variable, otherwise it will be output as literal text.

Initial plan

381b0d0

Copilot AI assigned Copilot and Pymmdrza Oct 29, 2025

Copilot started work on behalf of Pymmdrza October 29, 2025 15:48 View session

Create complete Jekyll website structure with dark theme support

f48bb6b

Co-authored-by: Pymmdrza <[email protected]>

Copilot AI changed the title ~~[WIP] Create professional Jekyll website structure in CryptoAttacker/tools~~ Add professional Jekyll website structure with dark theme and SEO Oct 29, 2025

Copilot AI requested a review from Pymmdrza October 29, 2025 16:08

Copilot finished work on behalf of Pymmdrza October 29, 2025 16:08

Pymmdrza approved these changes Oct 29, 2025

View reviewed changes

Pymmdrza self-requested a review October 29, 2025 23:11

Pymmdrza requested changes Oct 29, 2025

View reviewed changes

Pymmdrza marked this pull request as ready for review October 29, 2025 23:12

Copilot AI review requested due to automatic review settings October 29, 2025 23:12

Pymmdrza merged commit ef196d4 into main Oct 29, 2025
1 check passed

Pymmdrza temporarily deployed to github-pages October 29, 2025 23:13 — with GitHub Pages Inactive

Copilot AI reviewed Oct 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add professional Jekyll website structure with dark theme and SEO #1

Add professional Jekyll website structure with dark theme and SEO #1

Uh oh!

Copilot AI commented Oct 29, 2025 •

edited

Loading

Uh oh!

Pymmdrza left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 29, 2025

Uh oh!

Copilot AI Oct 29, 2025

Uh oh!

Copilot AI Oct 29, 2025

Uh oh!

Copilot AI Oct 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		### Send Us a Message

		<form class="contact-form" action="https://formspree.io/f/YOUR_FORM_ID" method="POST">

Add professional Jekyll website structure with dark theme and SEO #1

Add professional Jekyll website structure with dark theme and SEO #1

Uh oh!

Conversation

Copilot AI commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Structure

Dark Theme

SEO & Accessibility

Screenshots

Usage

Uh oh!

Pymmdrza left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Oct 29, 2025 •

edited

Loading