Conversation
aaronlippold
force-pushed
the
framework
branch
from
3805041 to
b9940c8
Compare
Deploying saf-site with
|
| Latest commit: |
4324bb9
|
| Status: | 🚫 Build failed. |
Cloudflare Pages Preview
Deployed from commit 02e88b4 |
- Create /framework/ overview page with 5 pillar cards (Plan, Harden, Validate, Normalize, Visualize) - Create /framework/plan page with three focused sections - Redesign Plan pillar icon to match SAF design system (shield + clipboard with checkmarks) - Add framework sidebar link in VitePress config - Move "Why SAF?" and "Get Started" sections from framework to homepage - Update CLAUDE.md with setup improvements and component documentation patterns The framework pages use SAF branded icons, responsive card layouts, and consolidate previously scattered content. Plan page focuses on two core use cases: finding existing security guidance and creating new documentation for software lacking standards. Signed-off-by: Will Dower <will@dower.dev>
Signed-off-by: Will Dower <will@dower.dev>
aaronlippold
force-pushed
the
framework
branch
from
d2db279 to
9924a0f
Compare
Authored by: Aaron Lippold<lippold@gmail.com>
Authored by: Aaron Lippold<lippold@gmail.com>
Authored by: Aaron Lippold<lippold@gmail.com>
- scripts/gen-dbml.ts: Parses Drizzle schema dynamically - Finds ALL foreign key refs including junction tables - Auto-generates TableGroups based on naming patterns - Output: docs/.vitepress/database/schema.dbml - Command: pnpm db:dbml Authored by: Aaron Lippold<lippold@gmail.com>
- Fix ESLint errors (node:fs, matchAll, trailing commas, etc.) - Export functions for testability - Wrap main execution in conditional - Add 10 unit tests for findAllRefs and generateTableGroups Authored by: Aaron Lippold<lippold@gmail.com>
- Add Harden framework pillar page with three sections (hero, use cases, tools) - Increase PageSection headline font size for better readability - Remove redundant horizontal rule separators between PageSection components - Lighten pillar cards in dark mode for better contrast - Update Plan page to use PenTool icon for documentation creation Signed-off-by: Will Dower <will@dower.dev>
- Add Validate framework pillar page with three sections - Hero: automated security testing with InSpec - Use Cases: compliance testing, continuous validation, fast & repeatable - Tools: InSpec profiles and SAF CLI for profile generation - Expand Harden tools from 2 to 6 technologies - Added: Terraform, Puppet, PowerShell, Salt - All tools now link to filtered content page (?technology=X) - Update Harden section copy for clarity Signed-off-by: Will Dower <will@dower.dev>
Signed-off-by: Will Dower <will@dower.dev>
Mobile Responsiveness: - Add mobile-responsive icon display to framework pages - Mobile (<1024px): 36px icon inline with page title - Desktop (≥1024px): 280px icon in dedicated section - Applied to Plan, Harden, and Validate pages - Update CLAUDE.md with mobile-first design guidelines - Test checklist for mobile views (320px, 375px, 768px, 1024px+) - Responsive CSS patterns and breakpoints - Touch target and readability requirements Development Infrastructure: - Add husky + lint-staged for automatic git hooks - Pre-commit hook runs ESLint auto-fix on staged files - Histoire story docs validation on .story.vue files - Hooks install automatically with pnpm install (zero setup) - Update README with husky documentation Auto-formatting: - Fix trailing whitespace and EOF across YAML, JSON, SVG, markdown files Signed-off-by: Will Dower <will@dower.dev>
- Add Normalize framework pillar page - Problem/solution sections explaining HDF and data fragmentation - Comprehensive coverage of SAF CLI converters - 6 tool category cards (vulnerability, code, cloud, compliance, container, other) - Logo cloud marquee showing major supported tools - Add Framework dropdown to navbar - Shows all pillar pages in hover/click menu - Includes Overview link - Tool category cards styled to match framework index cards Signed-off-by: Will Dower <will@dower.dev>
Signed-off-by: Will Dower <will@dower.dev>
Signed-off-by: Will Dower <will@dower.dev>
…tive tools - Add brand icon mappings for 10+ security tools (Snyk, SonarQube, Splunk, Trivy, OWASP, JFrog, Prisma, Nessus, etc.) - Implement brand colors for Simple Icons with dark mode variants - Add interactive logo carousel with clickable links and tooltips - Restructure Normalize page sections (simplified Problem, expanded Solution with HDF benefits) - Improve tool category cards with better dark mode contrast - Simplify framework page titles across Plan, Harden, and Validate Signed-off-by: Will Dower <will@dower.dev>
- Create comprehensive Visualize framework page explaining Heimdall - Cover security data visualization challenges and solutions - Include 4 key features: interactive dashboards, multi-stakeholder views, compliance trending, and automated reporting - Follow established framework page pattern with mobile-responsive icons Signed-off-by: Will Dower <will@dower.dev>
- Create comprehensive Heimdall app page with capabilities, deployment options, and resources - Add apps index page with overview of all SAF tools (Heimdall, SAF CLI, Vulcan, InSpec) - Include links to demos, source repos, and documentation for each tool - Add placeholder sections for screenshots (to be added later) - Structure deployment options for Heimdall Lite vs Server - Provide getting started guidance based on user maturity level Signed-off-by: Will Dower <will@dower.dev>
…d layout - Add Heimdall logo to page title - Split demo buttons: Try Heimdall Demo and Try Heimdall Lite - Add deployment buttons: DockerHub, NPM Package, Helm Chart - Add icons to all buttons (GitHub, BookOpen, Docker, NPM, Helm, Visualize) - Arrange buttons in responsive grid (2x4 desktop, 2 columns mobile) - Remove Comprehensive Security Visualization section - Update screenshot sections with original site text - Add Container Deployment and NPM Package deployment options - Add icons to deployment cards (Heimdall, Docker, NPM) - Fix vertical alignment of icons and titles in cards - Update resource cards to match deployment card style with icons - Add NPM and Helm icons to BrandIcon component with brand colors Signed-off-by: Will Dower <will@dower.dev>
…styling - Add Apps dropdown navigation matching Framework pattern - Add Apps sidebar for /apps/ section navigation - Update app cards to match Heimdall deployment card style - Replace InSpec with Security Automation Content linking to /content/ - Fix raw HTML in Getting Started section with Vue data arrays - Add consistent card header with icons and titles - Improve card styling with proper hover effects and dark mode support Signed-off-by: Will Dower <will@dower.dev>
- Create Vulcan app page following Heimdall structure - Add Vulcan logo to page title - Add header buttons: Try Demo, GitHub, Documentation, DockerHub, Helm Chart, Plan - Add 4 screenshot sections with baseline editing features - Add deployment options: Container Deployment and From Source - Add resources section with Source Code and Documentation - Update apps index with correct Vulcan demo URL (vulcan.mitre.org) - Use 3-column button grid on desktop, 2-column on mobile Signed-off-by: Will Dower <will@dower.dev>
- Create SAF CLI app page with 6 feature sections - Add header buttons: GitHub, Documentation, DockerHub, NPM, Normalize - Add deployment options: Container (primary), NPM Package, From Source - Add resources section with Source Code and Documentation - Reorder apps dropdown menu: Heimdall, Vulcan, SAF CLI - Enable cleanUrls to remove .html extensions from all page URLs - Use 5-column button grid on desktop for SAF CLI header Signed-off-by: Will Dower <will@dower.dev>
- Replace feature cards with Jump Start Your Security Journey section - Add 5 framework pillar cards with descriptions and capabilities - Implement 3-2 grid layout for 5 cards (3 top, 2 centered bottom) - Add MITRE SAF Is section with Free, Open Source, A Community values - Add Open Source Toolset section with 6 tool cards - Include SAF CLI, Heimdall, Vulcan, Content Library, eMASS, OHDF - Show pillar capability icons on each tool card (clickable to framework pages) - Add tool icons to card headers with proper vertical alignment - Center pillar capability icons within cards - Remove section dividers and headlines for cleaner layout - Update hero to use VitePress home layout - Improve responsive design with proper mobile stacking Signed-off-by: Will Dower <will@dower.dev>
… issues **Homepage Changes:** - Add "Adopted by The Community" section with sponsor and vendor logo grids - Use LogoGrid component with static image placeholders - Remove section divider lines by targeting VitePress .vp-doc h2 styling **Bug Fixes:** - Fix raw HTML rendering by using LogoGrid props instead of wrapping in div/h3 - Fix LogoGrid text truncation (remove ellipsis, allow text wrapping) - Increase logo name max-width (120px mobile → 160px desktop) **Documentation:** - Add "Vue in Markdown Best Practices" section to CLAUDE.md - Document root cause of raw HTML issue (markdown-it vs Vue processing) - Provide correct patterns and anti-patterns with examples **Technical Details:** - Root cause: markdown-it treats content inside HTML tags as raw HTML - Solution: Use Vue components directly without HTML wrappers - VitePress .vp-doc h2 elements have border-top by default (removed for homepage) Files modified: - CLAUDE.md (47 insertions) - docs/index.md (78 insertions, 33 deletions) - docs/.vitepress/theme/components/LogoGrid.vue (12 changes) Signed-off-by: Will Dower <will@dower.dev>
**User Stories Section:** - Add "User Stories" section with dark variant PageSection - Include 3 Q&A pairs addressing common security automation questions - Two-column layout on desktop (question left, answer right) - Single column on mobile for readability - Questions retain quotation marks from original design **Ready to Automate Section:** - Update to 3-column grid layout with card styling matching app pages - Card 1: "View the Framework" → /framework/ (updated from "Start with Planning") - Description: "Explore the pillars of a solid security automation capability" - Icon: Layers - Card 2: "Browse Security Content" → /content/ (kept, style updated) - Icon: BookText - Card 3: "Explore SAF Tools" → /apps/ (new) - Description: "Discover the applications that power security automation" - Icon: Wrench **Card Styling:** - Consistent with app pages (resource-card pattern) - Hover effects with brand color border - Dark mode support with lightened backgrounds - Icon + title header layout Files modified: - docs/index.md (143 insertions, 24 deletions) Signed-off-by: Will Dower <will@dower.dev>
**eMASSer Page:** - Create /apps/emasser.md with full app page layout - Hero section with title, description, and action buttons - Deployment options: Docker container, Ruby Gem, From Source - Content sections: - "Automate Reporting" - Keep eMASS packages up to date - "Automate eMASS workflows" - Integration details - "eMASS Client Library" - Associated content - Resources section with GitHub and documentation links - Consistent styling with other app pages **Navigation Updates:** - Add eMASSer to Apps dropdown in navbar - Add eMASSer to Apps sidebar **Apps Overview:** - Add eMASSer card to apps index with description and links **Key Details:** - Correct branding: "eMASSer" (tool) integrates with "eMASS" (DISA system) - Ruby gem icon uses 'ruby' brand icon - Uses PageSection description prop to avoid raw HTML issues - Links to DockerHub (mitre/emasser) and RubyGems (emass_client) Files modified: - docs/apps/emasser.md (268 lines, new file) - docs/.vitepress/config.ts (2 insertions) - docs/apps/index.md (10 insertions) Signed-off-by: Will Dower <will@dower.dev>
**Trademark Notation (™):** - Add ™ symbol after "MITRE SAF" throughout the site - Add ™ symbol after "MITRE Security Automation Framework" - Updated in titles, hero sections, descriptions, and content - Uses ™ (trademark) not ® (registered trademark) as requested **Homepage Hero:** - Changed hero name from "MITRE SAF™" to "MITRE" - "MITRE" displays in brand blue color - "Security Automation Framework" displays in theme text color **Footer Implementation:** - Created custom Layout.vue component to add footer to all pages - Footer displays on doc layout pages (framework and apps pages) - Footer message: "MITRE Security Automation Framework (MITRE SAF) is a trademark of The MITRE Corporation. Released under the Apache 2.0 License." - Updated copyright year to 2026 **Bead Tracking:** - Created and closed bead: saf-dex **Pages Updated:** - Homepage (26 changes) - All app pages (Heimdall, Vulcan, SAF CLI, eMASSer) - Apps index page - Config (title, footer, copyright) - Theme (custom Layout component) Files modified: - docs/.vitepress/config.ts (6 changes) - docs/.vitepress/theme/index.ts (3 insertions) - docs/.vitepress/theme/Layout.vue (41 lines, new file) - docs/index.md (26 changes) - docs/apps/index.md (4 changes) - docs/apps/heimdall.md (2 changes) - docs/apps/vulcan.md (2 changes) - docs/apps/saf-cli.md (2 changes) - docs/apps/emasser.md (4 changes) Signed-off-by: Will Dower <will@dower.dev>
Add screenshots, diagrams, and logos to replace placeholders. Changes: - Homepage: add sponsor/agency and vendor/partner logos - Heimdall page: add 3 UI screenshots - Vulcan page: add 4 UI screenshots - SAF CLI page: add 6 diagrams and screenshots - Add screenshot CSS styling for proper display Assets organized in public/screenshots, public/diagrams, and public/logos. Signed-off-by: Will <will@dower.dev>
Signed-off-by: Will Dower <will@dower.dev>
…mations Implement hybrid markdown-it + client-side approach for automatic typography transformations of (tm) → ™, (r) → ®, and (c) → © symbols. Architecture: - markdown-it plugin: Build-time transformation for markdown content (~90 lines) - Client-side processor: DOM transformation for Vue component props (~70 lines) - Total implementation: ~160 lines (vs 1000+ lines in full nuxt-smartscript) CSS improvements: - Responsive trademark symbol sizing (smaller in headings for visual balance) - Proper vertical positioning using CSS variables - Based on nuxt-smartscript patterns with VitePress-specific tuning Content updates: - Add (tm) to all framework page descriptions (harden, validate, normalize, plan, visualize) - Add (tm) to homepage hero and pillar descriptions - Add (tm) to all app page descriptions (heimdall, vulcan, saf-cli, emasser) Signed-off-by: Will Dower <will@dower.dev>
- Add Osano consent management script from SAF's configuration - Create privacy policy page adapted from ACT site - Add Privacy Policy and Manage Cookies links to footer - Hide Osano default widget (triggered via footer link) - Add TypeScript definitions for window.Osano - Update navbar logo to use shield SVG - Hide Demo page in production builds - Fix double footer (removed duplicate config) Signed-off-by: Will Dower <will@dower.dev>
- Add min-height to cards for uniform heights (120-150px responsive) - Add width: 100% to cards for uniform widths across grid - Add logo-container wrapper with fixed dimensions for consistent logo spacing - Add min-height to logo names to reserve space for text wrapping - Fix Ansible logo (remove placeholder, use BrandIcon auto-resolution) - Add homepage footer with Privacy Policy and Manage Cookies links Signed-off-by: Will Dower <will@dower.dev>
- Add PillarBadge story with all pillars, sizes, and label variants - Add ContentCard story with validation/hardening/development examples - Add FeatureList story with horizontal/vertical layouts and link variants - Add MetadataPill story with basic pills, brand icons, links, and truncation - Auto-generate component docs from JSDoc via pnpm story:docs Signed-off-by: Will Dower <will@dower.dev>
- Add .mcp.json with playwright-brave server configuration - Configure Playwright to use Brave browser executable - Enable browser testing and screenshot capabilities in development Signed-off-by: Will Dower <will@dower.dev>
… approach - Replace outdated logos: - Air Force: optimized SVG (138KB → 3.8KB) - Lockheed Martin: symbol-only SVG - Platform One: WebP with transparent background - Red Hat, VMware: improved SVG versions - Switch to BrandIcon for dynamic theming: - Elastic: uses simple-icons:elastic - GitHub: white in dark mode, dark in light mode - Migrate sponsors/vendors from static arrays to database: - Add organizations data loader - Update homepage to use database-driven LogoGrid - Add integration tests for logo validation - Fix LogoGrid card height inconsistency (2.6em → 3.9em min-height) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Signed-off-by: Will Dower <will@dower.dev>
…prove screenshot visibility Narrowed sidebar from 272px to 226px and increased content area width to make screenshots and diagrams more visible on app and framework pages. Adjusted navbar positioning to align with narrower sidebar. Screenshots now use 60/40 ratio in horizontal layouts with borders and backgrounds removed for cleaner presentation. Signed-off-by: Will Dower <will@dower.dev>
- Fix pillar card layout to display 3 cards on top row, 2 centered on bottom - Increase PageSection container padding from 1.5rem to 2rem for better spacing - Fix wide-layout padding conflict (0.75rem -> 2rem) that was overriding component styles - All cards maintain consistent width using 6-column grid system Signed-off-by: Will <will@dower.dev>
- Remove Docs section from navbar (content migrated to source repos) - Add Training page to navbar - Create training_classes and upcoming_sessions collections in Pocketbase - Add data loader for training classes and sessions - Create TrainingPage component with: - Training site links with GitHub/Netlify icons - Upcoming sessions section with automatic date filtering - Class listings with descriptions, objectives, and YouTube recordings - Full-width layout for better content presentation - Sessions automatically filter by date (future only, excluding cancelled) - Status field uses 'scheduled' and 'cancelled' (no 'past' - handled by date) Signed-off-by: Will <will@dower.dev>
…laimer - Add Netlify, Ruby, and Salt icon mappings to BrandIcon with brand colors - Fix GitHub logo visibility in dark mode with selective color inversion - Add iconName property to LogoItem interface for icon override support - Update Vulcan to use SAF shield logo on Plan page - Refactor training page to markdown pattern (split TrainingPage.vue into focused components) - Add draft disclaimer to all content detail pages - Homepage copyediting and style improvements Signed-off-by: Will <will@dower.dev>
- Refactor wide layout from route-based to frontmatter-based detection - Add wideLayout: true to all framework, apps, and training pages - Remove duplicate CSS (.VPDoc container/content) from individual pages - Add dynamic training sidebar with individual class links - Add ID support to PageSection component for anchor navigation - Add class-specific IDs to TrainingClassList for direct linking - Add sidebar text wrapping CSS for long class names - Remove 'Class' suffix from sidebar links (redundant under 'All Classes') - Create trainingSidebar.ts for dynamic sidebar generation from database This change makes layout configuration explicit via frontmatter rather than implicit route detection, following VitePress best practices. All wide-layout pages now centrally inherit styling from custom.css, eliminating duplication. Signed-off-by: Will <will@dower.dev>
Signed-off-by: Will <will@dower.dev>
…ia downloads - Add Resources nav dropdown with HDF Examples, HDF Schema, and Media & Downloads pages - Add interactive JSON schema viewer (vue3-json-viewer) to HDF Schema page - Create CardGrid and MediaCard components to fix VitePress markdown rendering - Download media PDFs from existing saf.mitre.org into docs/public - Minor wording fixes on normalize page Signed-off-by: Will <will@dower.dev>
- Add custom _render function to extract text from Vue component props - Inject synthetic headings for pages without VitePress-formatted headings - Exclude test/dev/taxonomy pages from search index - Boost title field weight for better relevance ranking - Add frontmatter title to homepage for search visibility - Update plan pillar SVG to match current site icon Signed-off-by: Will <will@dower.dev>
- 5 validation profiles (RSA Archer, NGINX, Tomcat CIS, Photon OS) - 38 hardening libraries (Ansible, Chef, PowerCLI, Keycloak) - Draft detection: 3 items marked as draft (DRAFT:/[WIP] in name) - FK inference from names/GitHub URLs (vendor, tech, standard, target) - Source: saf-site-backend.herokuapp.com GraphQL API Includes import script and documentation for reproducibility. Signed-off-by: Will <will@dower.dev>
- Replace Lucide icons with proper ValidateIcon/HardenIcon in PillarBadge - Add pl-4 class to search input for better left padding - Maintains consistency with framework page pillar icons Signed-off-by: Will <will@dower.dev>
Use scoped CSS with !important to reliably override base input padding. Ensures search text has comfortable spacing from input edge (16px). Signed-off-by: Will <will@dower.dev>
Add explicit show-label prop to PillarBadge to display 'Validate' and 'Harden' text alongside icons for clarity. Signed-off-by: Will <will@dower.dev>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adding in the framework pages.