mirror of
https://github.com/juanfont/headscale.git
synced 2025-11-20 09:46:01 -05:00
285c4e46a9
Add design system assets for HTML templates: - headscale.svg: Logo with optimized viewBox for proper alignment - style.css: Material for MkDocs CSS variables and typography - design.go: Design system constants for consistent styling The logo viewBox is adjusted to 32.92 0 1247.08 640 to eliminate whitespace from the original export and ensure left alignment with text content.
483 lines
18 KiB
Go
483 lines
18 KiB
Go
package templates
|
|
|
|
import (
|
|
elem "github.com/chasefleming/elem-go"
|
|
"github.com/chasefleming/elem-go/attrs"
|
|
"github.com/chasefleming/elem-go/styles"
|
|
)
|
|
|
|
// Design System Constants
|
|
// These constants define the visual language for all Headscale HTML templates.
|
|
// They ensure consistency across all pages and make it easy to maintain and update the design.
|
|
|
|
// Color System
|
|
// EXTRACTED FROM: https://headscale.net/stable/assets/stylesheets/main.342714a4.min.css
|
|
// Material for MkDocs design system - exact values from official docs.
|
|
const (
|
|
// Text colors - from --md-default-fg-color CSS variables.
|
|
colorTextPrimary = "#000000de" //nolint:unused // rgba(0,0,0,0.87) - Body text
|
|
colorTextSecondary = "#0000008a" //nolint:unused // rgba(0,0,0,0.54) - Headings (--md-default-fg-color--light)
|
|
colorTextTertiary = "#00000052" //nolint:unused // rgba(0,0,0,0.32) - Lighter text
|
|
colorTextLightest = "#00000012" //nolint:unused // rgba(0,0,0,0.07) - Lightest text
|
|
|
|
// Code colors - from --md-code-* CSS variables.
|
|
colorCodeFg = "#36464e" //nolint:unused // Code text color (--md-code-fg-color)
|
|
colorCodeBg = "#f5f5f5" //nolint:unused // Code background (--md-code-bg-color)
|
|
|
|
// Border colors.
|
|
colorBorderLight = "#e5e7eb" //nolint:unused // Light borders
|
|
colorBorderMedium = "#d1d5db" //nolint:unused // Medium borders
|
|
|
|
// Background colors.
|
|
colorBackgroundPage = "#ffffff" //nolint:unused // Page background
|
|
colorBackgroundCard = "#ffffff" //nolint:unused // Card/content background
|
|
|
|
// Accent colors - from --md-primary/accent-fg-color.
|
|
colorPrimaryAccent = "#4051b5" //nolint:unused // Primary accent (links)
|
|
colorAccent = "#526cfe" //nolint:unused // Secondary accent
|
|
|
|
// Success colors.
|
|
colorSuccess = "#059669" //nolint:unused // Success states
|
|
colorSuccessLight = "#d1fae5" //nolint:unused // Success backgrounds
|
|
)
|
|
|
|
// Spacing System
|
|
// Based on 4px/8px base unit for consistent rhythm.
|
|
// Uses rem units for scalability with user font size preferences.
|
|
const (
|
|
spaceXS = "0.25rem" //nolint:unused // 4px - Tight spacing
|
|
spaceS = "0.5rem" //nolint:unused // 8px - Small spacing
|
|
spaceM = "1rem" //nolint:unused // 16px - Medium spacing (base)
|
|
spaceL = "1.5rem" //nolint:unused // 24px - Large spacing
|
|
spaceXL = "2rem" //nolint:unused // 32px - Extra large spacing
|
|
space2XL = "3rem" //nolint:unused // 48px - 2x extra large spacing
|
|
space3XL = "4rem" //nolint:unused // 64px - 3x extra large spacing
|
|
)
|
|
|
|
// Typography System
|
|
// EXTRACTED FROM: https://headscale.net/stable/assets/stylesheets/main.342714a4.min.css
|
|
// Material for MkDocs typography - exact values from .md-typeset CSS.
|
|
const (
|
|
// Font families - from CSS custom properties.
|
|
fontFamilySystem = `"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif` //nolint:unused
|
|
fontFamilyCode = `"Roboto Mono", "SF Mono", Monaco, "Cascadia Code", Consolas, "Courier New", monospace` //nolint:unused
|
|
|
|
// Font sizes - from .md-typeset CSS rules.
|
|
fontSizeBase = "0.8rem" //nolint:unused // 12.8px - Base text (.md-typeset)
|
|
fontSizeH1 = "2em" //nolint:unused // 2x base - Main headings
|
|
fontSizeH2 = "1.5625em" //nolint:unused // 1.5625x base - Section headings
|
|
fontSizeH3 = "1.25em" //nolint:unused // 1.25x base - Subsection headings
|
|
fontSizeSmall = "0.8em" //nolint:unused // 0.8x base - Small text
|
|
fontSizeCode = "0.85em" //nolint:unused // 0.85x base - Inline code
|
|
|
|
// Line heights - from .md-typeset CSS rules.
|
|
lineHeightBase = "1.6" //nolint:unused // Body text (.md-typeset)
|
|
lineHeightH1 = "1.3" //nolint:unused // H1 headings
|
|
lineHeightH2 = "1.4" //nolint:unused // H2 headings
|
|
lineHeightH3 = "1.5" //nolint:unused // H3 headings
|
|
lineHeightCode = "1.4" //nolint:unused // Code blocks (pre)
|
|
)
|
|
|
|
// Responsive Container Component
|
|
// Creates a centered container with responsive padding and max-width.
|
|
// Mobile-first approach: starts at 100% width with padding, constrains on larger screens.
|
|
//
|
|
//nolint:unused // Reserved for future use in Phase 4.
|
|
func responsiveContainer(children ...elem.Node) *elem.Element {
|
|
return elem.Div(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Width: "100%",
|
|
styles.MaxWidth: "min(800px, 90vw)", // Responsive: 90% of viewport or 800px max
|
|
styles.Margin: "0 auto", // Center horizontally
|
|
styles.Padding: "clamp(1rem, 5vw, 2.5rem)", // Fluid padding: 16px to 40px
|
|
}.ToInline(),
|
|
}, children...)
|
|
}
|
|
|
|
// Card Component
|
|
// Reusable card for grouping related content with visual separation.
|
|
// Parameters:
|
|
// - title: Optional title for the card (empty string for no title)
|
|
// - children: Content elements to display in the card
|
|
//
|
|
//nolint:unused // Reserved for future use in Phase 4.
|
|
func card(title string, children ...elem.Node) *elem.Element {
|
|
cardContent := children
|
|
if title != "" {
|
|
// Prepend title as H3 if provided
|
|
cardContent = append([]elem.Node{
|
|
elem.H3(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.MarginTop: "0",
|
|
styles.MarginBottom: spaceM,
|
|
styles.FontSize: fontSizeH3,
|
|
styles.LineHeight: lineHeightH3, // 1.5 - H3 line height
|
|
styles.Color: colorTextSecondary,
|
|
}.ToInline(),
|
|
}, elem.Text(title)),
|
|
}, children...)
|
|
}
|
|
|
|
return elem.Div(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Background: colorBackgroundCard,
|
|
styles.Border: "1px solid " + colorBorderLight,
|
|
styles.BorderRadius: "0.5rem", // 8px rounded corners
|
|
styles.Padding: "clamp(1rem, 3vw, 1.5rem)", // Responsive padding
|
|
styles.MarginBottom: spaceL,
|
|
styles.BoxShadow: "0 1px 3px rgba(0,0,0,0.1)", // Subtle shadow
|
|
}.ToInline(),
|
|
}, cardContent...)
|
|
}
|
|
|
|
// Code Block Component
|
|
// EXTRACTED FROM: .md-typeset pre CSS rules
|
|
// Exact styling from Material for MkDocs documentation.
|
|
//
|
|
//nolint:unused // Used across apple.go, windows.go, register_web.go templates.
|
|
func codeBlock(code string) *elem.Element {
|
|
return elem.Pre(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Display: "block",
|
|
styles.Padding: "0.77em 1.18em", // From .md-typeset pre
|
|
styles.Border: "none", // No border in original
|
|
styles.BorderRadius: "0.1rem", // From .md-typeset code
|
|
styles.BackgroundColor: colorCodeBg, // #f5f5f5
|
|
styles.FontFamily: fontFamilyCode, // Roboto Mono
|
|
styles.FontSize: fontSizeCode, // 0.85em
|
|
styles.LineHeight: lineHeightCode, // 1.4
|
|
styles.OverflowX: "auto", // Horizontal scroll
|
|
"overflow-wrap": "break-word", // Word wrapping
|
|
"word-wrap": "break-word", // Legacy support
|
|
styles.WhiteSpace: "pre-wrap", // Preserve whitespace
|
|
styles.MarginTop: spaceM, // 1em
|
|
styles.MarginBottom: spaceM, // 1em
|
|
styles.Color: colorCodeFg, // #36464e
|
|
styles.BoxShadow: "none", // No shadow in original
|
|
}.ToInline(),
|
|
},
|
|
elem.Code(nil, elem.Text(code)),
|
|
)
|
|
}
|
|
|
|
// Base Typeset Styles
|
|
// Returns inline styles for the main content container that matches .md-typeset.
|
|
// EXTRACTED FROM: .md-typeset CSS rule from Material for MkDocs.
|
|
//
|
|
//nolint:unused // Used in general.go for mdTypesetBody.
|
|
func baseTypesetStyles() styles.Props {
|
|
return styles.Props{
|
|
styles.FontSize: fontSizeBase, // 0.8rem
|
|
styles.LineHeight: lineHeightBase, // 1.6
|
|
styles.Color: colorTextPrimary,
|
|
styles.FontFamily: fontFamilySystem,
|
|
"overflow-wrap": "break-word",
|
|
styles.TextAlign: "left",
|
|
}
|
|
}
|
|
|
|
// H1 Styles
|
|
// Returns inline styles for H1 headings that match .md-typeset h1.
|
|
// EXTRACTED FROM: .md-typeset h1 CSS rule from Material for MkDocs.
|
|
//
|
|
//nolint:unused // Used across templates for main headings.
|
|
func h1Styles() styles.Props {
|
|
return styles.Props{
|
|
styles.Color: colorTextSecondary, // rgba(0, 0, 0, 0.54)
|
|
styles.FontSize: fontSizeH1, // 2em
|
|
styles.LineHeight: lineHeightH1, // 1.3
|
|
styles.Margin: "0 0 1.25em",
|
|
styles.FontWeight: "300",
|
|
"letter-spacing": "-0.01em",
|
|
styles.FontFamily: fontFamilySystem, // Roboto
|
|
"overflow-wrap": "break-word",
|
|
}
|
|
}
|
|
|
|
// H2 Styles
|
|
// Returns inline styles for H2 headings that match .md-typeset h2.
|
|
// EXTRACTED FROM: .md-typeset h2 CSS rule from Material for MkDocs.
|
|
//
|
|
//nolint:unused // Used across templates for section headings.
|
|
func h2Styles() styles.Props {
|
|
return styles.Props{
|
|
styles.FontSize: fontSizeH2, // 1.5625em
|
|
styles.LineHeight: lineHeightH2, // 1.4
|
|
styles.Margin: "1.6em 0 0.64em",
|
|
styles.FontWeight: "300",
|
|
"letter-spacing": "-0.01em",
|
|
styles.Color: colorTextSecondary, // rgba(0, 0, 0, 0.54)
|
|
styles.FontFamily: fontFamilySystem, // Roboto
|
|
"overflow-wrap": "break-word",
|
|
}
|
|
}
|
|
|
|
// H3 Styles
|
|
// Returns inline styles for H3 headings that match .md-typeset h3.
|
|
// EXTRACTED FROM: .md-typeset h3 CSS rule from Material for MkDocs.
|
|
//
|
|
//nolint:unused // Used across templates for subsection headings.
|
|
func h3Styles() styles.Props {
|
|
return styles.Props{
|
|
styles.FontSize: fontSizeH3, // 1.25em
|
|
styles.LineHeight: lineHeightH3, // 1.5
|
|
styles.Margin: "1.6em 0 0.8em",
|
|
styles.FontWeight: "400",
|
|
"letter-spacing": "-0.01em",
|
|
styles.Color: colorTextSecondary, // rgba(0, 0, 0, 0.54)
|
|
styles.FontFamily: fontFamilySystem, // Roboto
|
|
"overflow-wrap": "break-word",
|
|
}
|
|
}
|
|
|
|
// Paragraph Styles
|
|
// Returns inline styles for paragraphs that match .md-typeset p.
|
|
// EXTRACTED FROM: .md-typeset p CSS rule from Material for MkDocs.
|
|
//
|
|
//nolint:unused // Used for consistent paragraph spacing.
|
|
func paragraphStyles() styles.Props {
|
|
return styles.Props{
|
|
styles.Margin: "1em 0",
|
|
styles.FontFamily: fontFamilySystem, // Roboto
|
|
styles.FontSize: fontSizeBase, // 0.8rem - inherited from .md-typeset
|
|
styles.LineHeight: lineHeightBase, // 1.6 - inherited from .md-typeset
|
|
styles.Color: colorTextPrimary, // rgba(0, 0, 0, 0.87)
|
|
"overflow-wrap": "break-word",
|
|
}
|
|
}
|
|
|
|
// Ordered List Styles
|
|
// Returns inline styles for ordered lists that match .md-typeset ol.
|
|
// EXTRACTED FROM: .md-typeset ol CSS rule from Material for MkDocs.
|
|
//
|
|
//nolint:unused // Used for numbered instruction lists.
|
|
func orderedListStyles() styles.Props {
|
|
return styles.Props{
|
|
styles.MarginBottom: "1em",
|
|
styles.MarginTop: "1em",
|
|
styles.PaddingLeft: "2em",
|
|
styles.FontFamily: fontFamilySystem, // Roboto - inherited from .md-typeset
|
|
styles.FontSize: fontSizeBase, // 0.8rem - inherited from .md-typeset
|
|
styles.LineHeight: lineHeightBase, // 1.6 - inherited from .md-typeset
|
|
styles.Color: colorTextPrimary, // rgba(0, 0, 0, 0.87) - inherited from .md-typeset
|
|
"overflow-wrap": "break-word",
|
|
}
|
|
}
|
|
|
|
// Unordered List Styles
|
|
// Returns inline styles for unordered lists that match .md-typeset ul.
|
|
// EXTRACTED FROM: .md-typeset ul CSS rule from Material for MkDocs.
|
|
//
|
|
//nolint:unused // Used for bullet point lists.
|
|
func unorderedListStyles() styles.Props {
|
|
return styles.Props{
|
|
styles.MarginBottom: "1em",
|
|
styles.MarginTop: "1em",
|
|
styles.PaddingLeft: "2em",
|
|
styles.FontFamily: fontFamilySystem, // Roboto - inherited from .md-typeset
|
|
styles.FontSize: fontSizeBase, // 0.8rem - inherited from .md-typeset
|
|
styles.LineHeight: lineHeightBase, // 1.6 - inherited from .md-typeset
|
|
styles.Color: colorTextPrimary, // rgba(0, 0, 0, 0.87) - inherited from .md-typeset
|
|
"overflow-wrap": "break-word",
|
|
}
|
|
}
|
|
|
|
// Link Styles
|
|
// Returns inline styles for links that match .md-typeset a.
|
|
// EXTRACTED FROM: .md-typeset a CSS rule from Material for MkDocs.
|
|
// Note: Hover states cannot be implemented with inline styles.
|
|
//
|
|
//nolint:unused // Used for text links.
|
|
func linkStyles() styles.Props {
|
|
return styles.Props{
|
|
styles.Color: colorPrimaryAccent, // #4051b5 - var(--md-primary-fg-color)
|
|
styles.TextDecoration: "none",
|
|
"word-break": "break-word",
|
|
styles.FontFamily: fontFamilySystem, // Roboto - inherited from .md-typeset
|
|
}
|
|
}
|
|
|
|
// Inline Code Styles (updated)
|
|
// Returns inline styles for inline code that matches .md-typeset code.
|
|
// EXTRACTED FROM: .md-typeset code CSS rule from Material for MkDocs.
|
|
//
|
|
//nolint:unused // Used for inline code snippets.
|
|
func inlineCodeStyles() styles.Props {
|
|
return styles.Props{
|
|
styles.BackgroundColor: colorCodeBg, // #f5f5f5
|
|
styles.Color: colorCodeFg, // #36464e
|
|
styles.BorderRadius: "0.1rem",
|
|
styles.FontSize: fontSizeCode, // 0.85em
|
|
styles.FontFamily: fontFamilyCode, // Roboto Mono
|
|
styles.Padding: "0 0.2941176471em",
|
|
"word-break": "break-word",
|
|
}
|
|
}
|
|
|
|
// Inline Code Component
|
|
// For inline code snippets within text.
|
|
//
|
|
//nolint:unused // Reserved for future inline code usage.
|
|
func inlineCode(code string) *elem.Element {
|
|
return elem.Code(attrs.Props{
|
|
attrs.Style: inlineCodeStyles().ToInline(),
|
|
}, elem.Text(code))
|
|
}
|
|
|
|
// orDivider creates a visual "or" divider between sections.
|
|
// Styled with lines on either side for better visual separation.
|
|
//
|
|
//nolint:unused // Used in apple.go template.
|
|
func orDivider() *elem.Element {
|
|
return elem.Div(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Display: "flex",
|
|
styles.AlignItems: "center",
|
|
styles.Gap: spaceM,
|
|
styles.MarginTop: space2XL,
|
|
styles.MarginBottom: space2XL,
|
|
styles.Width: "100%",
|
|
}.ToInline(),
|
|
},
|
|
elem.Div(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Flex: "1",
|
|
styles.Height: "1px",
|
|
styles.BackgroundColor: colorBorderLight,
|
|
}.ToInline(),
|
|
}),
|
|
elem.Strong(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Color: colorTextSecondary,
|
|
styles.FontSize: fontSizeBase,
|
|
styles.FontWeight: "500",
|
|
"text-transform": "uppercase",
|
|
"letter-spacing": "0.05em",
|
|
}.ToInline(),
|
|
}, elem.Text("or")),
|
|
elem.Div(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Flex: "1",
|
|
styles.Height: "1px",
|
|
styles.BackgroundColor: colorBorderLight,
|
|
}.ToInline(),
|
|
}),
|
|
)
|
|
}
|
|
|
|
// warningBox creates a warning message box with icon and content.
|
|
//
|
|
//nolint:unused // Used in apple.go template.
|
|
func warningBox(title, message string) *elem.Element {
|
|
return elem.Div(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Display: "flex",
|
|
styles.AlignItems: "flex-start",
|
|
styles.Gap: spaceM,
|
|
styles.Padding: spaceL,
|
|
styles.BackgroundColor: "#fef3c7", // yellow-100
|
|
styles.Border: "1px solid #f59e0b", // yellow-500
|
|
styles.BorderRadius: "0.5rem",
|
|
styles.MarginTop: spaceL,
|
|
styles.MarginBottom: spaceL,
|
|
}.ToInline(),
|
|
},
|
|
elem.Raw(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 2px;"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`),
|
|
elem.Div(nil,
|
|
elem.Strong(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Display: "block",
|
|
styles.Color: "#92400e", // yellow-800
|
|
styles.FontSize: fontSizeH3,
|
|
styles.MarginBottom: spaceXS,
|
|
}.ToInline(),
|
|
}, elem.Text(title)),
|
|
elem.Div(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Color: colorTextPrimary,
|
|
styles.FontSize: fontSizeBase,
|
|
}.ToInline(),
|
|
}, elem.Text(message)),
|
|
),
|
|
)
|
|
}
|
|
|
|
// downloadButton creates a nice button-style link for downloads.
|
|
//
|
|
//nolint:unused // Used in apple.go template.
|
|
func downloadButton(href, text string) *elem.Element {
|
|
return elem.A(attrs.Props{
|
|
attrs.Href: href,
|
|
attrs.Download: "headscale_macos.mobileconfig",
|
|
attrs.Style: styles.Props{
|
|
styles.Display: "inline-block",
|
|
styles.Padding: "0.75rem 1.5rem",
|
|
styles.BackgroundColor: "#3b82f6", // blue-500
|
|
styles.Color: "#ffffff",
|
|
styles.TextDecoration: "none",
|
|
styles.BorderRadius: "0.5rem",
|
|
styles.FontWeight: "500",
|
|
styles.Transition: "background-color 0.2s",
|
|
styles.MarginRight: spaceM,
|
|
styles.MarginBottom: spaceM,
|
|
}.ToInline(),
|
|
}, elem.Text(text))
|
|
}
|
|
|
|
// External Link Component
|
|
// Creates a link with proper security attributes for external URLs.
|
|
// Automatically adds rel="noreferrer noopener" and target="_blank".
|
|
//
|
|
//nolint:unused // Used in apple.go, oidc_callback.go templates.
|
|
func externalLink(href, text string) *elem.Element {
|
|
return elem.A(attrs.Props{
|
|
attrs.Href: href,
|
|
attrs.Rel: "noreferrer noopener",
|
|
attrs.Target: "_blank",
|
|
attrs.Style: styles.Props{
|
|
styles.Color: colorPrimaryAccent, // #4051b5 - base link color
|
|
styles.TextDecoration: "none",
|
|
}.ToInline(),
|
|
}, elem.Text(text))
|
|
}
|
|
|
|
// Instruction Step Component
|
|
// For numbered instruction lists with consistent formatting.
|
|
//
|
|
//nolint:unused // Reserved for future use in Phase 4.
|
|
func instructionStep(_ int, text string) *elem.Element {
|
|
return elem.Li(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.MarginBottom: spaceS,
|
|
styles.LineHeight: lineHeightBase,
|
|
}.ToInline(),
|
|
}, elem.Text(text))
|
|
}
|
|
|
|
// Status Message Component
|
|
// For displaying success/error/info messages with appropriate styling.
|
|
//
|
|
//nolint:unused // Reserved for future use in Phase 4.
|
|
func statusMessage(message string, isSuccess bool) *elem.Element {
|
|
bgColor := colorSuccessLight
|
|
textColor := colorSuccess
|
|
|
|
if !isSuccess {
|
|
bgColor = "#fee2e2" // red-100
|
|
textColor = "#dc2626" // red-600
|
|
}
|
|
|
|
return elem.Div(attrs.Props{
|
|
attrs.Style: styles.Props{
|
|
styles.Padding: spaceM,
|
|
styles.BackgroundColor: bgColor,
|
|
styles.Color: textColor,
|
|
styles.BorderRadius: "0.5rem",
|
|
styles.Border: "1px solid " + textColor,
|
|
styles.MarginBottom: spaceL,
|
|
styles.FontSize: fontSizeBase,
|
|
styles.LineHeight: lineHeightBase,
|
|
}.ToInline(),
|
|
}, elem.Text(message))
|
|
}
|