CDN-hosted shared header, footer, and brand styles for Obsyk sites.
Live Demo: https://obsyk.github.io/shared-ui/
Add this to your HTML <head>:
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Obsyk Shared UI -->
<link rel="stylesheet" href="https://obsyk.github.io/shared-ui/obsyk-shared.css">
<script src="https://obsyk.github.io/shared-ui/obsyk-shared.js"></script>Then include the header and footer HTML in your page.
| File | Description |
|---|---|
obsyk-shared.css |
Combined CSS (brand variables + header + footer styles) |
obsyk-shared.js |
Combined JavaScript (mobile menu, app URL detection) |
header.html |
Header HTML template |
footer.html |
Footer HTML template |
<div id="header-container"></div>
<!-- Your page content -->
<div id="footer-container"></div>
<script src="https://obsyk.github.io/shared-ui/obsyk-shared.js"></script>
<script>
// Load header
fetch('https://obsyk.github.io/shared-ui/header.html')
.then(r => r.text())
.then(html => {
document.getElementById('header-container').innerHTML = html;
ObsykSharedUI.initHeader();
});
// Load footer
fetch('https://obsyk.github.io/shared-ui/footer.html')
.then(r => r.text())
.then(html => {
document.getElementById('footer-container').innerHTML = html;
ObsykSharedUI.initFooter();
});
</script>Copy the contents of header.html and footer.html directly into your templates.
See Integration with MkDocs below.
The shared CSS provides brand variables you can use:
/* Primary - Indigo */
var(--obsyk-primary-600) /* #4f46e5 - Main brand color */
/* Secondary - Slate */
var(--obsyk-secondary-900) /* #0f172a - Text color */
var(--obsyk-secondary-600) /* #475569 - Secondary text */
/* Accent - Emerald */
var(--obsyk-accent-500) /* #10b981 - Success/accent */
/* Typography */
var(--obsyk-font-sans) /* Inter, system-ui, sans-serif */
var(--obsyk-font-mono) /* JetBrains Mono, monospace */
/* Layout */
var(--obsyk-header-height) /* 64px */The JavaScript automatically detects the environment and sets login/signup links:
| Hostname contains | App URL |
|---|---|
staging- |
https://staging-app.obsyk.ai |
localhost |
http://localhost:3000 |
| (production) | https://app.obsyk.ai |
Links with data-obsyk-app-link attribute are automatically updated:
<a href="#" data-obsyk-app-link="login">Sign in</a>
<a href="#" data-obsyk-app-link="signup">Get Started</a>To integrate with MkDocs Material theme:
- Create
docs/overrides/main.html:
{% extends "base.html" %}
{% block extrahead %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://obsyk.github.io/shared-ui/obsyk-shared.css">
{% endblock %}
{% block header %}
<div id="obsyk-header-container"></div>
{% endblock %}
{% block footer %}
<div id="obsyk-footer-container"></div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="https://obsyk.github.io/shared-ui/obsyk-shared.js"></script>
<script>
fetch('https://obsyk.github.io/shared-ui/header.html')
.then(r => r.text())
.then(html => {
document.getElementById('obsyk-header-container').innerHTML = html;
ObsykSharedUI.initHeader();
});
fetch('https://obsyk.github.io/shared-ui/footer.html')
.then(r => r.text())
.then(html => {
document.getElementById('obsyk-footer-container').innerHTML = html;
ObsykSharedUI.initFooter();
});
</script>
{% endblock %}- Update
mkdocs.yml:
theme:
name: material
custom_dir: docs/overridesFor the API documentation site, create a custom Redoc template that includes the shared header/footer.
# Clone the repo
git clone https://github.com/Obsyk/shared-ui.git
cd shared-ui
# Serve locally (requires Python)
python -m http.server 8000 --directory dist
# Open http://localhost:8000 in your browsershared-ui/
├── dist/ # Built files (served via GitHub Pages)
│ ├── obsyk-shared.css # Combined CSS
│ ├── obsyk-shared.js # Combined JavaScript
│ ├── header.html # Header template
│ ├── footer.html # Footer template
│ └── index.html # Demo page
├── src/
│ ├── css/
│ │ ├── brand.css # Brand variables
│ │ ├── header.css # Header styles
│ │ └── footer.css # Footer styles
│ ├── js/
│ │ ├── header.js # Header functionality
│ │ └── footer.js # Footer functionality
│ └── html/
│ ├── header.html # Header template
│ └── footer.html # Footer template
└── .github/
└── workflows/
└── deploy.yml # GitHub Pages deployment
Copyright (c) Obsyk. All rights reserved. Proprietary and confidential.