Skip to content

Commit

Permalink
chore: Brush up of PowerDNS Documentation Site
Browse files Browse the repository at this point in the history
- Upgraded to Bootstrap 5.3.3 for improved styling and responsiveness.
- Redesigned the documentation site to align with the visual style of other PowerDNS sites.
- Enhanced the version selector functionality:
  - Fetches and displays available versions from a `versions.json` file.
  - Supports additional and legacy versions with a dropdown for more options.
  - Highlights the latest version and provides a fallback for legacy versions if fetching fails.
- Improved user interface with a modern look and feel, including updated navigation, hero section, and product cards.
  • Loading branch information
milzi234 committed Jan 14, 2025
1 parent f53b2fd commit 402c684
Show file tree
Hide file tree
Showing 17 changed files with 439 additions and 9,661 deletions.
278 changes: 224 additions & 54 deletions website/docs.powerdns.com/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,86 +4,256 @@
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="description" content="PowerDNS Documentation - Authoritative Server and Recursor documentation">
<meta name="author" content="PowerDNS">

<title>PowerDNS Documentation</title>

<!-- Bootstrap Core CSS -->
<link href="website/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="website/css/one-page-wonder.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="icon" type="image/png" href="website/img/favicon.png">
<!-- Custom styles -->
<style>
:root {
--pdns-blue: #00A2DF;
--pdns-dark: #1D1D1B;
}
body {
font-family: "Open Sans", system-ui, -apple-system, sans-serif;
}
.navbar {
background-color: white;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-brand img {
height: 40px;
}
.hero {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
margin-bottom: 2rem;
}
.hero h1 {
color: var(--pdns-dark);
font-weight: 600;
margin-bottom: 1.5rem;
}
.hero p {
font-size: 1.1rem;
color: #495057;
max-width: 800px;
margin: 0 auto 1.5rem;
}
.product-links {
padding: 2rem 0;
}
.product-links h2 {
font-size: 1.4rem;
margin-bottom: 2rem;
color: #666;
font-weight: normal;
}
.product-card {
background: #fff;
padding: 1.5rem;
height: 100%;
transition: all 0.2s ease-in-out;
}
.product-card:hover {
background-color: #f8f9fa;
}
.product-card h3 {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.product-card h3 a {
color: var(--pdns-blue);
text-decoration: none;
}
.product-card h3 a:hover {
text-decoration: underline;
}
.product-card p {
color: #666;
margin-bottom: 0;
font-size: 0.95rem;
}
footer {
background-color: #666666;
color: white;
padding: 2rem 0;
margin-top: 3rem;
}
</style>

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">
<img src="website/img/powerdns-logo-trans.png" alt="PowerDNS">
</a>
</div>
<!-- /.container -->
</nav>

<!-- Full Width Image Header -->
<header class="header-image">
<div class="headline">
<div class="container">
<img src="website/img/powerdns-logo-trans.png" alt="PowerDNS logo"/>
<h1>Documentation</h1>
<p>There are two PowerDNS nameserver products: the Authoritative Server and the Recursor. While most other nameservers fully combine these functions, PowerDNS offers them separately, but can mix both authoritative and recursive usage seamlessly.</p>
<p>The <a href='/authoritative'>Authoritative Server</a> will answer questions about domains it knows about, but will not go out on the net to resolve queries about other domains. When the Authoritative Server answers a question, it comes out of the database, and can be trusted as being authoritative. There is no way to pollute the cache or to confuse the daemon.</p>
<!-- Hero Section -->
<section class="hero text-center">
<div class="container">
<h1>PowerDNS Documentation</h1>
<p>PowerDNS offers three main products: the Authoritative Server, the Recursor, and dnsdist. The Authoritative Server and Recursor are separate components that can be mixed seamlessly, while dnsdist provides high-performance load balancing and DDoS protection.</p>
</div>
</section>

<p>The <a href="/recursor">Recursor</a>, conversely, by default has no knowledge of domains itself, but will always consult other authoritative servers to answer questions given to it.</p>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="mb-4">
<h2>Authoritative Server</h2>
<p>The Authoritative Server answers questions about domains it knows about, but will not go out on the net to resolve queries about other domains. When the Authoritative Server answers a question, it comes out of the database, and can be trusted as being authoritative.</p>
<a href="/authoritative" class="btn btn-outline-primary">View Documentation</a>
<div id="auth-versions"></div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<h2>Recursor</h2>
<p>The Recursor, by default has no knowledge of domains itself, but will always consult other authoritative servers to answer questions given to it. It's designed for high-performance recursive DNS resolution.</p>
<a href="/recursor" class="btn btn-outline-primary">View Documentation</a>
<div id="rec-versions"></div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<h2>dnsdist</h2>
<p>dnsdist is a highly DNS-, DoS- and abuse-aware loadbalancer that can be used to distribute incoming traffic across multiple DNS servers.</p>
<a href="https://dnsdist.org/" class="btn btn-outline-primary">View Documentation</a>
<div id="dnsdist-versions"></div>
</div>
</div>
</div>

<p>PowerDNS has been designed to serve both the needs of small installations by being easy to setup, as well as for serving very large query volumes on large numbers of domains. Additionally, through use of clever programming techniques, PowerDNS offers very high domain resolution performance.</p>
<div class="product-links mt-5">
<div class="container">
<h2 class="text-center">Additional Products</h2>
<div class="row g-4">
<div class="col-md-6">
<div class="product-card">
<h3><a href="/cloudcontrol/latest/">PowerDNS Cloud Control</a></h3>
<p>Cloud-based DNS management solution.</p>
<div id="cc-versions"></div>
</div>
</div>
<div class="col-md-6">
<div class="product-card">
<h3><a href="/dstore/latest/">PowerDNS dstore</a></h3>
<p>Distributed storage solution for DNS data.</p>
<div id="dstore-versions"></div>
</div>
</div>
<div class="col-md-6">
<div class="product-card">
<h3><a href="/lightningstream/">PowerDNS Lightning Stream</a></h3>
<p>Tool to sync LMDB databases through S3 buckets between multiple servers in near real-time.</p>
<div id="lightningstream-versions"></div>
</div>
</div>
<div class="col-md-6">
<div class="product-card">
<h3><a href="/zonecontrol/latest">PowerDNS ZoneControl</a></h3>
<p>DNS zone management and control system.</p>
<div id="zonecontrol-versions"></div>
</div>
</div>
</div>
</div>
</div>
</div>

<p>Another prime goal is security. By the use of language features, the PowerDNS source code is reasonably small which makes auditing easy. In the same way, library features have been used to mitigate the risks of buffer overflows.</p>
<!-- Footer -->
<footer class="text-center">
<div class="container">
<p class="mb-0">&copy; PowerDNS.com</p>
</div>
</footer>

<p>Finally, PowerDNS is able to give a lot of statistics on its operation which is both helpful in determining the scalability of an installation as well as for spotting problems.</p>
<!-- Bootstrap 5 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Version Selector -->
<script src="website/js/version-selector.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Authoritative Server
loadVersionSelector(
'/authoritative',
'auth-versions'
);

// Recursor
loadVersionSelector(
'/recursor',
'rec-versions'
);

<h2><a href="/authoritative">PowerDNS Authoritative Server documentation</a></h2>
<h2><a href="/recursor">PowerDNS Recursor documentation</a></h2>
<h2><a href="https://dnsdist.org/">PowerDNS DNSdist documentation</a></h2>
<h2><a href="http://software.open-xchange.com/products/powerdns/doc/cc/">PowerDNS Cloud Control documentation</a></h2>
<h2><a href="/dstore/latest">PowerDNS Dstore documentation</a></h2>
<h2><a href="/lightningstream">PowerDNS Lightning Stream documentation</a></h2>
<h2><a href="/zonecontrol/latest">ZoneControl documentation</a></h2>
</div>
</div>
</header>
// Cloud Control
loadVersionSelector(
'/cloudcontrol',
'cc-versions',
{
url: 'https://software.open-xchange.com/products/powerdns/doc/cc/',
label: '2.X and older'
}
);

<!-- Page Content -->
<div class="container">
// DNSdist
loadVersionSelector(
'https://dnsdist.org',
'dnsdist-versions'
);

<hr class="featurette-divider">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright &copy; PowerDNS.com</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
// Dstore
loadVersionSelector(
'/dstore',
'dstore-versions',
null,
[
{ version: '2.1' },
{ version: '2.0' },
{ version: '1.5' }
]
);

<!-- jQuery -->
<script src="website/js/jquery.js"></script>
// Lightning Stream
loadVersionSelector(
'/lightningstream',
'lightningstream-versions'
);

<!-- Bootstrap Core JavaScript -->
<script src="website/js/bootstrap.min.js"></script>
// Zone Control
loadVersionSelector(
'/zonecontrol',
'zonecontrol-versions',
null,
[
{ version: '1.7.0', aliases: ['latest'] },
{ version: '1.6.3' },
{ version: '1.6.2' },
{ version: '1.6.1' },
{ version: '1.6.0' },
{ version: '1.5.1' },
{ version: '1.5.0' },
{ version: '1.4.2' }
]
);
});
</script>

</body>

Expand Down
Loading

0 comments on commit 402c684

Please sign in to comment.