README
¶
You can execute the example by running $ dyd -serve in this directory and
pointing your browser to http://localhost:6226.
To only convert the example into a go install-able repository issue $ dyd.
In either case here are the files after running dyd:
examples/dynamicstyles/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dyd dymamic styles</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style><? write("%s", ctx.W3CSS()) ?></style>
<? write(`<link rel="stylesheet" href=%q>`, ctx.Request.URL.Query().Get("style")) ?>
</head>
<body>
<div class="container wrapper">
<div id="top">
<h1>Welcome to My Homepage</h1>
<p>Use the menu to select different Stylesheets</p>
</div>
<div class="wrapper">
<div id="menubar">
<ul id="menulist">
<li class="menuitem"><a href="?style=css/style1.css">Styleshet 1</a></li>
<li class="menuitem"><a href="?style=css/style2.css">Styleshet 2</a></li>
<li class="menuitem"><a href="?style=css/style3.css">Styleshet 3</a></li>
<li class="menuitem"><a href="?style=css/style4.css">Styleshet 4</a></li>
<li class="menuitem"><a href="/">Default stylesheet</a></li>
</ul>
</div>
<div id="main">
<h1>Same Page Different Stylesheets</h1>
<p>This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:<br>
<a href="?style=css/style1.css">Stylesheet 1</a>,
<a href="?style=css/style2.css">Stylesheet 2</a>,
<a href="?style=css/style3.css">Stylesheet 3</a>,
<a href="?style=css/style4.css">Stylesheet 4</a>,
</p>
<h2>No Styles</h2>
<p>This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:<br><a href="/">Default style</a>.</p>
</div>
<div id="sidebar">
<h3>Side-Bar</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div id="bottom">
This is a modification of <a href="https://www.w3schools.com/css/css_intro.asp">https://www.w3schools.com/css/css_intro.asp</a>,
used only as demonstration of one way how to achieve the same results
in dyd without javascript. The page HTML content and the CSS styles are
<p>Copyright 1999-2023 by Refsnes Data. All Rights Reserved.</p>
<p>For details see https://www.w3schools.com/about/about_copyright.asp</p>
</div>
</div>
</body>
</html>
examples/dynamicstyles/dyd.go
// Code generated by dyd, DO NOT EDIT.
package main
import (
"golang.org/x/net/html"
"modernc.org/dyd/dyd"
)
// dydStart starts the webapp. dydStart always returns a non-nil error.
func dydStart(beforeListen ...func(a dyd.App) error) error {
app, err := dyd.NewApp()
if err != nil {
return err
}
app.Bind("/index.html", Serve_index_1html)
app.AddMeta("/index.html", []html.Attribute{
html.Attribute{Namespace: "", Key: "charset", Val: "utf-8"},
})
app.AddMeta("/index.html", []html.Attribute{
html.Attribute{Namespace: "", Key: "name", Val: "viewport"},
html.Attribute{Namespace: "", Key: "content", Val: "width=device-width, initial-scale=1"},
})
app.AddTitle("/index.html", "dyd dymamic styles")
for _, f := range beforeListen {
if err = f(app); err != nil {
return err
}
}
return app.ListenAndServe(":6226")
}
examples/dynamicstyles/index.html.go
// Code generated by dyd, DO NOT EDIT.
package main
import (
"modernc.org/dyd/dyd"
)
// Serve_index_1html produces /index.html.
func Serve_index_1html(ctx *dyd.Context, write func(s string, args ...any) error) {
write(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dyd dymamic styles</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>`)
write("%s", ctx.W3CSS())
write(`</style>
`)
write(`<link rel="stylesheet" href=%q>`, ctx.Request.URL.Query().Get("style"))
write(`
</head>
<body>
<div class="container wrapper">
<div id="top">
<h1>Welcome to My Homepage</h1>
<p>Use the menu to select different Stylesheets</p>
</div>
<div class="wrapper">
<div id="menubar">
<ul id="menulist">
<li class="menuitem"><a href="?style=css/style1.css">Styleshet 1</a></li>
<li class="menuitem"><a href="?style=css/style2.css">Styleshet 2</a></li>
<li class="menuitem"><a href="?style=css/style3.css">Styleshet 3</a></li>
<li class="menuitem"><a href="?style=css/style4.css">Styleshet 4</a></li>
<li class="menuitem"><a href="/">Default stylesheet</a></li>
</ul>
</div>
<div id="main">
<h1>Same Page Different Stylesheets</h1>
<p>This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:<br>
<a href="?style=css/style1.css">Stylesheet 1</a>,
<a href="?style=css/style2.css">Stylesheet 2</a>,
<a href="?style=css/style3.css">Stylesheet 3</a>,
<a href="?style=css/style4.css">Stylesheet 4</a>,
</p>
<h2>No Styles</h2>
<p>This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:<br><a href="/">Default style</a>.</p>
</div>
<div id="sidebar">
<h3>Side-Bar</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div id="bottom">
This is a modification of <a href="https://www.w3schools.com/css/css_intro.asp">https://www.w3schools.com/css/css_intro.asp</a>,
used only as demonstration of one way how to achieve the same results
in dyd without javascript. The page HTML content and the CSS styles are
<p>Copyright 1999-2023 by Refsnes Data. All Rights Reserved.</p>
<p>For details see https://www.w3schools.com/about/about_copyright.asp</p>
</div>
</div>
</body>
</html>
`)
}
examples/dynamicstyles/main.go
package main
import (
"embed"
"log"
"net/http"
)
var (
//go:embed *.css
css embed.FS
)
func main() {
http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.FS(css))))
log.Fatal(dydStart())
}
Documentation
¶
There is no documentation for this package.
Source Files
Click to show internal directories.
Click to hide internal directories.