speedie/docpp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 2 Wiki Activity
docpp/examples/speedie-page.cpp
Jacob 14cd8c4122 Remove/replace some "C with classes" junk. The C++ core guidelines state 
that you must not use ALL_CAPS for enum members. enum class is now used
as well, to further reinforce the idea that this is a C++ library. While
neither of these changes are necessary, it leads to a better and more
intuitive API design.

More operator overloading has also been added for many of the classes,
particularly the [] index operator, which can now be used in place of
the at() method. More methods have also been added, particularly for
Section and Document.

Some methods have also been fixed, or have had their behavior altered
slightly, but this should now be covered under the new tests, which have
also been (for the most part) rewritten, both because they were
previously both primitive and rather ugly and because new functionality
was added.

Examples have also been updated to reflect the changes made in this
commit, so that they build successfully.

Of course, these changes mean that the new API is incompatible with any
applications written with the 0.0.1 version. Hopefully most of these
changes are dealt with before the 1.0 release, because I would prefer
not making API-breaking changes by that point.
2024-05-20 01:32:49 +02:00

303 lines
10 KiB
C++
Raw Permalink Blame History

#include <iostream>
#include <fstream>
#include <docpp/docpp.hpp>
docpp::HTML::Section getCSS() {
docpp::HTML::Section css{docpp::HTML::Tag::Style};
docpp::CSS::Stylesheet stylesheet{};
stylesheet.push_back({"@font-face",
{
{"font-family", "Noto Sans"},
{"src", "url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2evCj.woff2) format('woff2')"}
}
});
stylesheet.push_back({"body",
{
{"margin", "0px"},
{"padding", "0px"},
{"font-family", "Noto Sans"},
{"background-color", "#212121"},
{"overflow-x", "hidden"},
{"color", "#f0eee4"},
}
});
stylesheet.push_back({"pre",
{
{"background-color", "#222222"},
{"width", "fit-content"},
{"padding", "5px"},
{"border-left", "2px solid #cccccc"},
}
});
stylesheet.push_back({"a",
{
{"color", "#89bfff"},
{"text-decoration", "none"},
{"transition", "0.1s"},
}
});
stylesheet.push_back({"a:hover",
{
{"color", "#ccccff"},
{"text-decoration", "underline"},
}
});
stylesheet.push_back({"a:hover",
{
{"color", "#ccccff"},
{"text-decoration", "underline"},
}
});
stylesheet.push_back({".content",
{
{"padding", "5px"},
{"padding-bottom", "100px"},
{"max-width", "1000px"},
{"margin", "auto"},
{"text-align", "center"},
}
});
stylesheet.push_back({".content li",
{
{"text-align", "left"},
}
});
stylesheet.push_back({".content table",
{
{"margin-left", "auto"},
{"margin-right", "auto"},
{"text-align", "left"},
}
});
stylesheet.push_back({".content th, td",
{
{"padding-right", "25px"},
}
});
stylesheet.push_back({".links img",
{
{"transform", "translate(0m +20%)"},
{"display", "inline"},
}
});
stylesheet.push_back({".navbar",
{
{"background-color", "#363636"},
{"color", "#1fccef"},
{"position", "sticky"},
{"top", "0px"},
{"z-index", "6"},
{"margin", "5px"},
{"padding", "5px"},
{"width", "auto"},
{"text-align", "center"},
{"border-radius", "10px"},
}
});
stylesheet.push_back({".navbar a",
{
{"color", "#e6e6fa"},
{"text-decoration", "none"},
{"padding-top", "5px"},
{"padding-bottom", "5px"},
{"padding-left", "3px"},
{"padding-right", "3px"},
}
});
stylesheet.push_back({".navbar a:hover",
{
{"display", "inline"},
{"text-decoration", "underline"},
}
});
stylesheet.push_back({".navbar span",
{
{"padding", "5px"},
{"display", "inline"},
}
});
stylesheet.push_back({".navbar img",
{
{"transform", "translate(+30%, +25%)"},
}
});
stylesheet.push_back({".warning",
{
{"color", "#ffff00"},
}
});
stylesheet.push_back({"footer",
{
{"font-size", "8pt"},
{"font-weight", "normal"},
{"background-color", "transparent"},
{"padding", "5px"},
{"color", "#f0eee4"},
{"background-color", "#363636"},
{"text-align", "center"},
{"position", "fixed"},
{"bottom", "0px"},
{"width", "100%"},
}
});
stylesheet.push_back({"footer .links",
{
{"color", "#89bfff"},
}
});
stylesheet.push_back({".links",
{
{"color", "#66667d"},
{"padding", "5px"},
{"padding-left", "2px"},
}
});
stylesheet.push_back({".banner",
{
{"padding-top", "25px"},
}
});
css.push_back({docpp::HTML::Tag::Empty_No_Formatting, {}, stylesheet.get<std::string>(docpp::CSS::Formatting::Pretty, 4)});
return css;
}
docpp::HTML::Section getNavbar(docpp::HTML::Section& e) {
docpp::HTML::Section navbar(docpp::HTML::Tag::Div, {{docpp::HTML::Property{{"class", "navbar"}}}});
docpp::HTML::Section span(docpp::HTML::Tag::Span, {});
span.push_back({docpp::HTML::Tag::Empty, {}, "speedie.site\n"});
const auto append_to_span = [&](const std::string& img, const std::string& url, const std::string& text) {
span.push_back({docpp::HTML::Tag::Img, {{docpp::HTML::Property{{"src", img}}, docpp::HTML::Property{{"width", "16"}}, docpp::HTML::Property{{"height", "16"}}}}, ""});
span.push_back({docpp::HTML::Tag::A, {{docpp::HTML::Property{{"href", url}}}}, text});
};
append_to_span("img/home.png", "/", "Home");
append_to_span("img/projects.png", "/projects.html", "Projects");
append_to_span("img/blog.png", "/blog.html", "Blog");
append_to_span("img/git.svg", "https://git.speedie.site/speedie", "Git");
navbar.push_back(span);
e.push_back(navbar);
return e;
}
docpp::HTML::Section getHead() {
docpp::HTML::Section e{docpp::HTML::Tag::Head};
docpp::HTML::Element content_type{docpp::HTML::Tag::Meta, {{docpp::HTML::Property{{"http-equiv", "content-type"}}, docpp::HTML::Property{{"content", "text/html; charset=utf-8"}}}}};
docpp::HTML::Element charset{docpp::HTML::Tag::Meta, {{docpp::HTML::Property{{"charset", "UTF-8"}}}}};
docpp::HTML::Element favicon(docpp::HTML::Tag::Link, {{docpp::HTML::Property{{"rel", "icon"}}, docpp::HTML::Property{{"type", "image/x-icon"}}, docpp::HTML::Property{{"href", "/img/favicon.svg"}}}});
docpp::HTML::Element description(docpp::HTML::Tag::Meta, {{docpp::HTML::Property{{"name", "description"}}, docpp::HTML::Property{{"content", "Welcome to my personal website."}}}});
docpp::HTML::Element author(docpp::HTML::Tag::Meta, {{docpp::HTML::Property{{"name", "author"}}, docpp::HTML::Property{{"content", "speedie"}}}});
docpp::HTML::Element title(docpp::HTML::Tag::Title, {}, "speedie's site");
docpp::HTML::Section css{docpp::HTML::Tag::Style};
e.push_back(content_type);
e.push_back(favicon);
e.push_back(getCSS());
e.push_back(charset);
e.push_back(description);
e.push_back(title);
return getNavbar(e);
}
docpp::HTML::Section getMain() {
docpp::HTML::Section content(docpp::HTML::Tag::Div, {{docpp::HTML::Property{{"class", "content"}}}});
content.push_back({docpp::HTML::Tag::H2, {}, "Hello world!"});
content.push_back({docpp::HTML::Tag::P, {}, "Hello there! This is a replica of my old website, using docpp to generate the HTML. With that said. This only provides the index page, so many links are not functional. This is more to show off that docpp can be used to generate a proper website."});
content.push_back({docpp::HTML::Tag::H3, {}, "Links"});
docpp::HTML::Section links(docpp::HTML::Tag::Div, {{docpp::HTML::Property{{"class", "links"}}}});
docpp::HTML::Section table(docpp::HTML::Tag::Table);
static const auto append_to_table = [&](const std::string& img, const std::string& url, const std::string& short_text, const std::string& long_text) {
docpp::HTML::Section tr{docpp::HTML::Tag::Tr};
docpp::HTML::Section td{docpp::HTML::Tag::Td};
docpp::HTML::Section td2{docpp::HTML::Tag::Td};
td.push_back({docpp::HTML::Tag::Img, {{docpp::HTML::Property{{"src", img}}, docpp::HTML::Property{{"width", "16"}}, docpp::HTML::Property{{"height", "16"}}}}, ""});
td.push_back({docpp::HTML::Tag::A, {{docpp::HTML::Property{{"href", url}}}}, short_text});
td2.push_back({docpp::HTML::Tag::Empty, {}, long_text + "\n"});
tr.push_back(td);
tr.push_back(td2);
table.push_back(tr);
};
append_to_table("img/aboutme.png", "about-me.html", "About me", "Learn more about me.");
append_to_table("img/blog.png", "blog.html", "Blog", "Read my blog.");
append_to_table("img/projects.png", "projects.html", "Projects", "List of the software projects I work on.");
append_to_table("img/git.svg", "https://git.speedie.site/speedie", "Git", "Git server, where all my software projects are hosted.");
append_to_table("img/github.svg", "https://github.com/speedie1337", "GitHub", "My GitHub account, used for backups and contributions.");
links.push_back(table);
content.push_back(links);
return content;
}
docpp::HTML::Section getFooter() {
docpp::HTML::Section footer(docpp::HTML::Tag::Footer);
docpp::HTML::Section div(docpp::HTML::Tag::Div, {{docpp::HTML::Property("class", "column")}});
docpp::HTML::Section span(docpp::HTML::Tag::Span, {{docpp::HTML::Property("class", "links")}});
span.push_back({docpp::HTML::Tag::A, {{docpp::HTML::Property("class", "links"), docpp::HTML::Property("href", "https://git.speedie.site")}}, "Git"});
span.push_back({docpp::HTML::Tag::A, {{docpp::HTML::Property("class", "links"), docpp::HTML::Property("href", "https://ls.speedie.site")}}, "Downloads"});
span.push_back({docpp::HTML::Tag::A, {{docpp::HTML::Property("class", "links"), docpp::HTML::Property("href", "privacy.html")}}, "Licensing"});
div.push_back(span);
div.push_back({docpp::HTML::Tag::P, {{docpp::HTML::Property("style", "padding-top: 0px;")}}, "Made in Sweden"});
footer.push_back(div);
return footer;
}
int main() {
docpp::HTML::Section html_section = docpp::HTML::Section(docpp::HTML::Tag::Html);
docpp::HTML::Section head{getHead()};
docpp::HTML::Section body(docpp::HTML::Tag::Body);
body.push_back(getMain());
docpp::HTML::Section footer(getFooter());
html_section.push_back(head);
html_section.push_back(body);
html_section.push_back(footer);
docpp::HTML::Document html_doc(html_section);
std::cout << html_doc.get<std::string>(docpp::HTML::Formatting::Pretty) << "\n";
std::ofstream fs{"speedie-page.html"};
fs << html_doc.get<std::string>(docpp::HTML::Formatting::Pretty);
fs.close();
}
Reference in a new issue View git blame Copy permalink