Skip to content
Deploy Jekyll with GitHub Pages dependencies preinstalled

modified: Docs/MetaX_Cookbook.md #17

Sign in to view logs

modified: Docs/MetaX_Cookbook.md

modified: Docs/MetaX_Cookbook.md #17

Workflow file for this run

.github/workflows/jekyll-gh-pages.yml at 5477d70
# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll with GitHub Pages dependencies preinstalled
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v4
with:
python-version: '3.x'
- name: Install dependencies
run: |
python -m pip install --upgrade pip
pip install markdown jinja2
- name: Convert Markdown to HTML
run: |
python <<EOF
import markdown
from jinja2 import Template
import re
# Read markdown file
markdown_file_path = './Docs/MetaX_Cookbook.md'
with open(markdown_file_path, 'r', encoding='utf-8') as file:
markdown_content = file.read()
# Remove # Contents and [TOC]
markdown_content = markdown_content.replace('# Contents', '').replace('[TOC]', '')
# Extract headings and generate table of contents
headings = re.findall(r'^(#+) (.+)', markdown_content, re.MULTILINE)
toc_items = []
for heading in headings:
level = len(heading[0])
title = heading[1]
anchor = re.sub(r'\W+', '-', title.lower()).strip('-')
toc_items.append((level, title, anchor))
# Convert markdown to HTML
html_content = markdown.markdown(markdown_content, extensions=['tables', 'toc'])
# Add Bootstrap classes to tables and images
html_content = re.sub(r'<img (.*?)>', r'<div style="text-align: center;"><img \1 class="img-fluid" style="max-width: 60%; min-width: 300px; height: auto; display: inline-block;"></div>', html_content)
html_content = re.sub(r'<table>', r'<div class="table-responsive"><table class="table table-striped table-bordered">', html_content)
html_content = re.sub(r'</table>', r'</table></div>', html_content)
# Jinja2 template for HTML output
template = Template('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MetaX</title>
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/flatly/bootstrap.min.css" rel="stylesheet">
<style>
body {
display: flex;
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
nav {
width: 250px;
padding: 20px;
background-color: #2c3e50;
border-right: 1px solid #dee2e6;
position: fixed;
height: 100%;
overflow-y: auto;
}
nav h2 {
color: #ecf0f1;
}
nav a {
display: block;
padding: 8px 16px;
color: #ecf0f1;
text-decoration: none;
}
nav a.active {
background-color: #34495e;
color: #ffffff;
}
nav a:hover {
background-color: #34495e;
color: #ffffff;
}
main {
flex: 1;
padding: 20px;
margin-left: 250px;
overflow-y: auto;
}
h1, h2, h3, h4, h5, h6 {
color: #2c3e50;
}
table {
width: 100%;
margin-bottom: 1rem;
color: #212529;
border-collapse: collapse;
}
table th,
table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
table thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;
}
table tbody + tbody {
border-top: 2px solid #dee2e6;
}
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<nav>
<h2>MetaX</h2>
<ul class="nav flex-column">
{% for level, title, anchor in toc_items %}
<li class="nav-item" style="margin-left: {{ (level - 1) * 20 }}px;">
<a class="nav-link" href="#{{ anchor }}" id="nav-{{ anchor }}">{{ title }}</a>
</li>
{% endfor %}
</ul>
</nav>
<main>
{{ content }}
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Function to get the current scroll position and update the active nav link
function updateActiveNavLink() {
var sections = document.querySelectorAll('main h1, main h2, main h3, main h4, main h5, main h6');
var navLinks = document.querySelectorAll('nav a');
var fromTop = window.scrollY + 20;
sections.forEach(function(section) {
var top = section.offsetTop;
var bottom = top + section.offsetHeight;
var id = section.id;
if (fromTop >= top && fromTop < bottom) {
navLinks.forEach(function(link) {
link.classList.remove('active');
});
var activeLink = document.querySelector('nav a[href="#' + id + '"]');
if (activeLink) {
activeLink.classList.add('active');
// Scroll the navigation to the active link
activeLink.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
});
}
window.addEventListener('scroll', updateActiveNavLink);
</script>
</body>
</html>
''')
# Render the template with the content and TOC items
html_output = template.render(content=html_content, toc_items=toc_items)
# Write the HTML output to a file
output_file_path = './Docs/index.html'
with open(output_file_path, 'w', encoding='utf-8') as file:
file.write(html_output)
print("HTML file has been generated successfully.")
EOF
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Build with Jekyll
uses: actions/jekyll-build-pages@v1
with:
source: ./Docs/
destination: ./_site
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4