Frontend: CSS and JavaScript

How to include CSS and JS in your Dracory project.

CSS and JavaScript

Dracory makes it easy to include CSS and JavaScript in your pages. You can include stylesheets and scripts from CDNs or add inline styles and scripts directly in your controllers.

In the snippets below, baselayouts refers to github.com/dracory/base/layouts, which provides the Options type consumed by internal/layouts functions.

Including CSS

// Add stylesheet URLs
webpage := layouts.NewPageLayout(app, r, baselayouts.Options{
    // ...
    StyleURLs: []string{
        "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css",
    },
})

// Add inline styles
webpage := layouts.NewPageLayout(app, r, baselayouts.Options{
    // ...
    Styles: []string{
        `.my-class { color: blue; }`,
    },
})

Including JavaScript

// Add script URLs
webpage := layouts.NewPageLayout(app, r, baselayouts.Options{
    // ...
    ScriptURLs: []string{
        "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js",
    },
})

// Add inline scripts
webpage := layouts.NewPageLayout(app, r, baselayouts.Options{
    // ...
    Scripts: []string{
        `document.addEventListener('DOMContentLoaded', function() {
            console.log('Page loaded');
        });`,
    },
})