switch site to mkdocs material

This commit is contained in:
Umputun 2022-08-07 15:21:34 -05:00
parent b9e994be0c
commit 77d82d9a0f
27 changed files with 98 additions and 4594 deletions

View File

@ -1,15 +1,21 @@
FROM --platform=$BUILDPLATFORM node:16-alpine as build
FROM --platform=$BUILDPLATFORM squidfunk/mkdocs-material as build
WORKDIR /build
COPY site/ /build
COPY README.md /build/src/index.md
RUN mkdir -p /build/docs
COPY README.md /build/docs/index.md
COPY site/ /build/
RUN \
sed -i 's|^.*/workflows/ci.yml.*$||' /build/docs/index.md && \
cat /build/styles.html >> /build/docs/index.md && \
sed -i 's|https://raw.githubusercontent.com/umputun/reproxy/master/site/logo-bg.svg|logo.png|' /build/docs/index.md
RUN mkdocs build
COPY site/favicon.svg /build/site/
COPY site/logo.png /build/site/
RUN yarn --frozen-lockfile
RUN yarn build
RUN ls -la /build/public
FROM ghcr.io/umputun/reproxy
COPY --from=build /build/public /srv/site
COPY --from=build /build/site /srv/site
EXPOSE 8080
USER app
ENTRYPOINT ["/srv/reproxy", "--assets.location=/srv/site"]

View File

@ -1,5 +1,5 @@
<div align="center">
<img class="logo" src="https://raw.githubusercontent.com/umputun/reproxy/master/site/src/logo-bg.svg" width="355px" height="142px" alt="Reproxy | Simple Reverse Proxy"/>
<img class="logo" src="https://raw.githubusercontent.com/umputun/reproxy/master/site/logo-bg.svg" width="355px" height="142px" alt="Reproxy | Simple Reverse Proxy"/>
</div>
Reproxy is a simple edge HTTP(s) server / reverse proxy supporting various providers (docker, static, file, consul catalog). One or more providers supply information about the requested server, requested URL, destination URL, and health check URL. It is distributed as a single binary or as a docker container.

View File

@ -1,6 +0,0 @@
node_modules
.gitignore
.prettierrc
.dockerignore
Dockerfile
public

View File

@ -1,89 +0,0 @@
const fs = require('fs')
const path = require('path')
const htmlmin = require('html-minifier')
const markdownIt = require('markdown-it')
const markdownItAnchor = require('markdown-it-anchor')
const toc = require('@thedigitalman/eleventy-plugin-toc-a11y')
const fns = require('date-fns')
function getVersion() {
return `reproxy-${Date.now()}`
}
function transformHTML(content, outputPath) {
if (!outputPath?.endsWith('.html')) {
return content
}
return htmlmin.minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true,
})
}
function transformMarkdown() {
return markdownIt({
html: true,
breaks: true,
linkify: true,
}).use(markdownItAnchor, {
permalink: true,
permalinkClass: '',
permalinkSymbol: '',
})
}
function replaceLogo(content) {
const filepath = path.resolve(__dirname, './src/logo.svg')
const svg = fs.readFileSync(filepath, 'utf-8')
return content.replace(/<img class="logo"(.*?)>/gi, svg)
}
function getReadableDate(date) {
return fns.format(new Date(date), 'LLL dd, yyyy')
}
function getISODate(date) {
return fns.format(new Date(date), 'yyyy-mm-dd')
}
module.exports = (config) => {
config.addShortcode('version', getVersion)
// Pluigns
config.addPlugin(toc, {
tags: ['h2', 'h3'],
heading: false,
listType: 'ul',
wrapperClass: 'docs-nav',
listClass: 'pl-5',
listItemClass: 'mb-2',
listItemAnchorClass:
'inline-block p-1 hover:text-gray-900 dark:hover:text-gray-200',
})
// HTML transformations
config.addTransform('replaceLogo', replaceLogo)
config.addTransform('htmlmin', transformHTML)
// Date formaters
config.addFilter('humanizeDate', getReadableDate)
config.addFilter('isoDate', getISODate)
// Markdown
config.setLibrary('md', transformMarkdown())
// Other files
config.addPassthroughCopy({ 'src/public/*': '.' })
return {
dir: {
input: 'src',
output: 'public',
data: 'data',
layouts: 'layouts',
includes: 'includes',
},
}
}

5
site/.gitignore vendored
View File

@ -1,5 +0,0 @@
_tmp
node_modules
yarn-*
package-lock.json
public

View File

@ -1,5 +0,0 @@
{
"semi": false,
"useTabs": true,
"singleQuote": true
}

View File

Before

Width:  |  Height:  |  Size: 169 B

After

Width:  |  Height:  |  Size: 169 B

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
site/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

75
site/mkdocs.yml Normal file
View File

@ -0,0 +1,75 @@
site_name: Reproxy
site_url: https://reproxy.io/
site_author: Umputun
site_description: >-
Reproxy is a simple edge HTTP(s) server / reverse proxy supporting various providers (docker, static, file, consul catalog).
repo_name: umputun/reproxy
repo_url: https://github.com/umputun/reproxy
copyright: Some rights reserved &copy; 2021 - 2022 Umputun
theme:
name: material
favicon: favicon.svg
language: en
palette:
- scheme: slate
media: "(prefers-color-scheme: dark)"
primary: orange
features:
- navigation.instant
- toc.follow
- toc.integrate
- content.code.annotate
- navigation.sections
plugins:
- search
- minify:
minify_html: true
extra:
generator: true
social:
- icon: fontawesome/brands/github
link: https://github.com/umputun
- icon: fontawesome/brands/docker
link: https://hub.docker.com/r/umputun/reproxy/
- icon: fontawesome/brands/twitter
link: https://twitter.com/umputun
markdown_extensions:
- abbr
- admonition
- attr_list
- def_list
- footnotes
- meta
- md_in_html
- toc:
permalink: true
- pymdownx.arithmatex:
generic: true
- pymdownx.betterem:
smart_enable: all
- pymdownx.caret
- pymdownx.details
- pymdownx.emoji:
emoji_generator: !!python/name:materialx.emoji.to_svg
emoji_index: !!python/name:materialx.emoji.twemoji
- pymdownx.highlight:
anchor_linenums: true
- pymdownx.inlinehilite
- pymdownx.keys
- pymdownx.mark
- pymdownx.smartsymbols
- pymdownx.superfences:
custom_fences:
- name: mermaid
class: mermaid
format: !!python/name:pymdownx.superfences.fence_code_format
- pymdownx.tabbed:
alternate_style: true
- pymdownx.tasklist:
custom_checkbox: true
- pymdownx.tilde

View File

@ -1,39 +0,0 @@
{
"name": "reproxy",
"version": "0.0.0",
"repository": "https://github.com/umputun/reproxy/site",
"author": "Pavel Mineev <pavel@mineev.me>",
"license": "MIT",
"private": true,
"engines": {
"node": ">= 14.15"
},
"scripts": {
"build": "cross-env NODE_ENV=production run-s build:* --print-label",
"build:clean": "rm -rf public/*",
"build:css": "postcss src/main.css -o src/includes/main.css",
"build:eleventy": "eleventy",
"dev": "run-p dev:*",
"dev:css": "postcss src/main.css -o public/main.css -w",
"dev:eleventy": "eleventy --serve --watch"
},
"devDependencies": {
"@11ty/eleventy": "^0.12.1",
"@11ty/eleventy-navigation": "^0.2.0",
"@tailwindcss/typography": "^0.4.0",
"@thedigitalman/eleventy-plugin-toc-a11y": "^2.0.2",
"autoprefixer": "^10.2.5",
"cross-env": "^7.0.3",
"cssnano": "^5.0.1",
"date-fns": "^2.21.0",
"html-minifier": "^4.0.0",
"markdown-it": "^12.3.2",
"markdown-it-anchor": "^7.1.0",
"markdown-it-link-attributes": "^3.0.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.2.13",
"postcss-cli": "^8.3.1",
"prettier": "^2.2.1",
"tailwindcss": "^2.1.1"
}
}

View File

@ -1,7 +0,0 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: {},
},
}

View File

@ -1 +0,0 @@
module.exports = 'default.njk'

View File

@ -1,11 +0,0 @@
module.exports = {
env: process.env.NODE_ENV,
date: Date.now(),
githubUrl: 'https://github.com/umputun/reproxy',
githubBranch: 'master',
url: 'https://reproxy.io',
title: 'Reproxy',
subtitle: 'Simple Reverse Proxy',
description:
'Reproxy is a minimalistic system acting as an edge server / reverse proxy for your infrastructure. It provides the only essential functionality with no bells and whistles. Setup is very straightforward and not much to configure.',
}

View File

@ -1 +0,0 @@
*.css

View File

@ -1,38 +0,0 @@
const sidebarElement = document.getElementById('sidebar')
const sidebarOpenButton = document.getElementById('sidebar-open-button')
const sidebarCloseButton = document.getElementById('sidebar-close-button')
const sidebarLinks = sidebarElement.querySelectorAll('a')
sidebarOpenButton.addEventListener('click', toggleSidebar)
sidebarCloseButton.addEventListener('click', closeSidebar)
Array.from(sidebarLinks).forEach((l) => {
l.addEventListener('click', () => {
if (!isShow()) {
return
}
closeSidebar()
})
})
function openSidebar() {
document.body.classList.add('overflow-hidden')
sidebarElement.classList.remove('hidden')
}
function closeSidebar() {
sidebarElement.classList.add('hidden')
document.body.classList.remove('overflow-hidden')
}
function isShow() {
return !sidebarElement.classList.contains('hidden')
}
function toggleSidebar() {
if (isShow()) {
closeSidebar()
} else {
openSidebar()
}
}

View File

@ -1 +0,0 @@
../../README.md

View File

@ -1,95 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ site.title }}</title>
<link rel="icon" href="/favicon.svg"/>
<link rel="mask-icon" href="/favicon.svg" color="#FF7A00"/>
<link rel="apple-touch-icon" href="/touch-icon.png"/>
<meta name="theme-color" content="#FF7A00"/>
<meta property="og:title" content="{{ site.title }}"/>
<meta name="description" content="{{ site.description }}"/>
<meta property="og:description" content="{{ site.description }}"/>
<meta property="og:image" content="{{ site.url }}/sharing.png"/>
<meta property="og:image:width" content="1080"/>
<meta property="og:image:height" content="512"/>
<meta property="twitter:image" content="{{ site.url }}/sharing.png"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="{{ site.url }}"/>
<meta property="og:locale" content="en_US"/>
<meta name="twitter:card" content="summary_large_image"/>
{% if site.env === 'production' %}
{% set css %}{% include "main.css" %}{% endset %}
<style>{{ css | safe }}</style>
{% else %}
<link rel="stylesheet" href="/main.css"/>
{% endif %}
</head>
<body class="h-screen bg-white dark:bg-gray-900">
<header class="
fixed top-0 left-0 z-20
w-full
border-b border-gray-100 dark:border-gray-800
bg-opacity-50 bg-white dark:bg-gray-900
backdrop-filter backdrop-blur-lg transition-colors duration-200
">
<nav class="flex items-center h-16 w-full py-2">
<div class="p-4 mr-auto flex flex-col sm:flex-row sm:items-center">
<span class="text-xl font-bold text-orange-600 dark:text-gray-300">{{ site.title }}</span>
<span class="block sm:ml-4 text-sm md:text-md text-gray-500 dark:text-gray-400">{{ site.subtitle }}</span>
</div>
<div class="mr-3">
<a class="text-gray-400 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" aria-label="github link" rel="noopener noreferrer" href="{{ site.githubUrl }}" target="_blank">
<svg height="36" viewBox="0 0 24 24" fill="none">
<path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z" fill="currentColor"></path>
</svg>
</a>
</div>
<button aria-label="Show navigation" id="sidebar-open-button" class="block md:hidden mr-3">
<svg fill="none" width="24" height="24" viewBox="0 0 24 24" class="text-gray-400 hover:text-gray-600" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</nav>
</header>
<aside
id="sidebar"
class="
hidden md:block
fixed z-10 top-0 left-0 inset-y-0
w-full md:w-60 mt-16
overflow-y-auto
bg-white dark:bg-gray-900
text-gray-500 dark:text-gray-400
border-r border-gray-100 dark:border-gray-800
transition-colors duration-200
"
>
<button name="Close navigation" id="sidebar-close-button" class="float-right justify-end block md:hidden -mr-4 p-6">
<svg xmlns="http://www.w3.org/2000/svg" class="dark:bg-gray-500" width="18" height="18" viewBox="0 0 18 18">
<path class="text-gray-100" d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</button>
<div class="py-6 pr-6 pl-1">
{{ content | toc | safe }}
</div>
</aside>
<main class="px-4 pt-24 md:pt-28 pb-20 md:pl-60">
<arcicle class="block p-0 sm:px-6 md:px-16 lg:px-24 m-auto max-w-5xl prose 2xl:prose-lg dark:prose-dark dark:text-gray-100">
{{ content | safe }}
<footer class="flex mt-4">
<div class="ml-auto text-xs">
Updated&nbsp;<time datetime="{{ site.date | isoDate }}">{{ site.date | humanizeDate }}</time>
<a class="ml-2 inline-block no-underline font-normal rounded" target="_blank" href="{{ site.githubUrl }}/edit/{{ site.githubBranch }}/README.md">Edit</a>
</div>
</footer>
</article>
</main>
{% set js %}{% include "main.js" %}{% endset %}
<script>
{{ js | safe }}
</script>
</body>
</html>

View File

@ -1 +0,0 @@
<svg class="max-w-full text-black dark:text-white" width="355px" fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 710 260"><path d="M0 124l85-34v145L0 124z" fill="#FF7A00"/><path d="M170 136l-85 34V25l85 111z" fill="#FFB35A"/><path d="M208 181h23v-28h8l15 28h25l-18-32c9-4 15-12 15-24 0-17-13-28-32-28h-36v84zm23-46v-20h8c8 0 13 3 13 10 0 8-5 10-13 10h-8zM315 182c17 0 29-9 31-22h-21c-1 4-5 6-10 6-7 0-10-5-10-11v-1h41v-5c0-20-13-32-32-32s-32 13-32 32c0 21 12 33 33 33zm-10-40c0-5 4-9 10-9 5 0 10 4 10 9h-20zM355 204h23v-34c3 7 9 11 18 11 13 0 25-10 25-32s-13-32-25-32c-10 0-15 5-18 12v-11h-23v86zm22-55c0-9 4-15 10-15 7 0 10 6 10 15s-3 15-10 15c-6 0-10-6-10-15zM430 181h23v-33c0-7 5-12 11-12l9 1v-19l-6-1c-7 0-12 4-14 13h-1v-12h-22v63zM507 182c21 0 33-13 33-33 0-19-12-32-33-32-20 0-33 13-33 32 0 20 13 33 33 33zm0-17c-6 0-9-6-9-16s3-16 9-16 10 6 10 16-4 16-10 16zM567 118h-23l17 31-18 32h23l10-20 11 20h22l-18-32 17-31h-22l-10 19-9-19zM630 204c16 0 23-8 27-18l23-68h-24l-10 43h-1l-10-43h-24l22 65v1c-2 4-6 4-12 2l-5 16 14 2z" fill="currentColor" class="logo-text"/></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,11 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
scroll-behavior: smooth;
}
.docs-nav a ~ ul {
@apply mt-1 mb-2;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@ -1,13 +0,0 @@
{
"name": "Reproxy",
"short_name": "Reproxy",
"icons": [
{
"src": "touch-icon.png",
"sizes": "512x512"
}
],
"background_color": "#ffffff",
"theme_color": "#FF7A00",
"display": "fullscreen"
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

9
site/styles.html Normal file
View File

@ -0,0 +1,9 @@
<style>
.md-typeset h1,
.md-content__button {
display: none;
}
.md-header__topic {
display: none;
}
</style>

View File

@ -1,139 +0,0 @@
const colors = require('tailwindcss/colors')
const { spacing, width } = require('tailwindcss/defaultTheme')
module.exports = {
mode: 'jit',
purge: ['src/**/*.njk', 'src/**/*.js', '.eleventy.js', 'src/**/*.svg'],
darkMode: 'media',
theme: {
extend: {
container: {
center: true,
sm: {
with: '100%',
},
},
colors: {
orange: colors.orange,
},
typography: (theme) => ({
DEFAULT: {
css: {
maxWidth: '100%',
lineHeight: 1.5,
paddingLeft: spacing[12],
paddingRight: spacing[12],
color: theme('colors.gray.700'),
'h2,h3,h4': {
paddingTop: spacing[24],
marginTop: '-3rem',
},
'blockquote p:first-of-type::before': false,
'blockquote p:last-of-type::after': false,
'code::before': false,
'code::after': false,
img: {
margin: spacing[2],
display: 'initial',
},
code: {
wordWrap: 'break-word',
fontWeight: 'normal',
backgroundColor: theme('colors.gray.100'),
color: theme('colors.gray.700'),
paddingTop: spacing[0.5],
paddingBottom: spacing[0.5],
paddingLeft: spacing[2],
paddingRight: spacing[2],
borderRadius: spacing[1],
},
hr: {
borderTopWidth: '2px',
borderColor: theme('colors.gray.200'),
}
},
},
lg: {
css: {
lineHeight: 1.5,
'h2,h3,h4': {
paddingTop: spacing[24],
marginTop: '-3rem',
},
},
},
dark: {
css: [
{
color: theme('colors.gray.400'),
'[class~="lead"]': {
color: theme('colors.gray.300'),
},
a: {
color: theme('colors.gray.200'),
},
strong: {
color: theme('colors.gray.200'),
},
'ol > li::before': {
color: theme('colors.gray.400'),
},
'ul > li::before': {
backgroundColor: theme('colors.gray.600'),
},
hr: {
borderColor: theme('colors.gray.300'),
},
blockquote: {
color: theme('colors.gray.300'),
borderLeftColor: theme('colors.gray.600'),
},
h1: {
color: theme('colors.gray.200'),
},
h2: {
color: theme('colors.gray.200'),
},
h3: {
color: theme('colors.gray.200'),
},
h4: {
color: theme('colors.gray.200'),
},
'figure figcaption': {
color: theme('colors.gray.400'),
},
code: {
backgroundColor: theme('colors.gray.700'),
color: theme('colors.gray.200'),
},
'a code': {
color: theme('colors.gray.200'),
},
pre: {
color: theme('colors.gray.300'),
backgroundColor: theme('colors.gray.800'),
},
thead: {
color: theme('colors.gray.200'),
borderBottomColor: theme('colors.gray.400'),
},
'tbody tr': {
borderBottomColor: theme('colors.gray.600'),
},
hr: {
borderColor: theme('colors.gray.500'),
}
},
],
},
}),
},
},
variants: {
extend: {
typography: ['responsive', 'dark'],
},
},
plugins: [require('@tailwindcss/typography')],
}

File diff suppressed because it is too large Load Diff