Using nginx SSI, building theme.
This commit is contained in:
Bob Vandevliet
parent
ce1bda0afd
commit
bd1ff485f2
7 changed files with 132 additions and 10 deletions
30
.volumes/nginx/conf/conf.d/default.conf
Normal file
30
.volumes/nginx/conf/conf.d/default.conf
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name localhost;
|
||||
|
||||
#access_log /var/log/nginx/host.access.log main;
|
||||
|
||||
root /usr/share/nginx/public;
|
||||
|
||||
location / {
|
||||
index index.html;
|
||||
ssi on;
|
||||
try_files $uri $uri/ $uri.html =404;
|
||||
}
|
||||
|
||||
# location /includes/ {
|
||||
# deny all;
|
||||
# return 404;
|
||||
# }
|
||||
|
||||
error_page 404 /404.html;
|
||||
location = /404.html {
|
||||
root /usr/share/nginx/public;
|
||||
}
|
||||
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
}
|
||||
11
docker-compose.yml
Normal file
11
docker-compose.yml
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
services:
|
||||
nginx:
|
||||
container_name: nginx.bvandevliet
|
||||
image: nginx:stable-alpine
|
||||
volumes:
|
||||
- ./.volumes/nginx/conf/conf.d:/etc/nginx/conf.d:ro
|
||||
- ./public:/usr/share/nginx/public:ro
|
||||
ports:
|
||||
- "8080:80"
|
||||
environment:
|
||||
- TZ=Europe/Amsterdam
|
||||
28
public/assets/css/styles.css
Normal file
28
public/assets/css/styles.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/* Style for active link based on body class */
|
||||
body.home .home-link,
|
||||
body.about .about-link,
|
||||
body.contact .contact-link {
|
||||
color: red;
|
||||
}
|
||||
|
||||
nav.bg-dark {
|
||||
background-color: rgba(var(--bs-dark-rgb), 0.7) !important;
|
||||
}
|
||||
|
||||
section.hero {
|
||||
position: relative;
|
||||
min-height: 20rem;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
/* background-color: darkred; */
|
||||
}
|
||||
|
||||
section.hero video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
4
public/includes/footer.html
Normal file
4
public/includes/footer.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<footer class="text-center py-3">
|
||||
<!--# config timefmt="%Y" -->
|
||||
<p>© <!--# echo var="date_local" --> <!--# echo var="site" default="Website Title" --></p>
|
||||
</footer>
|
||||
11
public/includes/head.html
Normal file
11
public/includes/head.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title><!--# echo var="title" default="Title" --></title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="assets/css/styles.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
|
||||
</head>
|
||||
18
public/includes/nav.html
Normal file
18
public/includes/nav.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<div class="container-xxl">
|
||||
<a class="navbar-brand home-link" href="#"><!--# echo var="site" default="Website Title" --></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link about-link" href="#section-about">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link contact-link" href="#section-contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,18 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--# set var="site" value="Vandevliet FPV" -->
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
|
||||
<title>Bootstrap demo</title>
|
||||
<!--# set var="title" value="Hello" -->
|
||||
<!--# include file="includes/head.html" -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
|
||||
</head>
|
||||
<body class="home hero">
|
||||
<header>
|
||||
<!--# include file="includes/nav.html" -->
|
||||
|
||||
<body>
|
||||
<h1>Hello world!</h1>
|
||||
<section class="hero">
|
||||
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
|
||||
<source src="static/showreel.mp4" type="video/mp4">
|
||||
</video>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<main class="container-xxl mt-4">
|
||||
<h2 id="section-about">About me</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat velit scelerisque. Donec adipiscing tristique risus nec feugiat in. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Orci a scelerisque purus semper eget duis at tellus at. Velit laoreet id donec ultrices tincidunt arcu. Sodales ut etiam sit amet nisl purus. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Ipsum nunc aliquet bibendum enim facilisis gravida. Tristique senectus et netus et malesuada fames ac turpis. Donec massa sapien faucibus et. Dui sapien eget mi proin sed libero enim.</p>
|
||||
<p>Dolor purus non enim praesent elementum. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Cursus euismod quis viverra nibh cras pulvinar mattis. Viverra justo nec ultrices dui sapien eget mi proin. Amet cursus sit amet dictum. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Tellus molestie nunc non blandit. Ullamcorper velit sed ullamcorper morbi tincidunt. Felis imperdiet proin fermentum leo vel orci porta. Hendrerit gravida rutrum quisque non tellus orci. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Volutpat commodo sed egestas egestas fringilla. Sagittis vitae et leo duis ut diam quam nulla porttitor. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Suspendisse in est ante in nibh mauris. Odio facilisis mauris sit amet massa.</p>
|
||||
<p>Volutpat blandit aliquam etiam erat. Erat imperdiet sed euismod nisi porta lorem. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Pharetra massa massa ultricies mi quis. Lacus sed viverra tellus in hac habitasse. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Velit ut tortor pretium viverra suspendisse potenti. Et malesuada fames ac turpis egestas. Enim praesent elementum facilisis leo vel fringilla. Id ornare arcu odio ut sem nulla pharetra diam sit. Arcu cursus vitae congue mauris rhoncus.</p>
|
||||
<p>Tempus egestas sed sed risus pretium quam vulputate. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Sit amet dictum sit amet justo. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam elementum pulvinar etiam non quam. Leo vel orci porta non. Aliquet nec ullamcorper sit amet risus nullam eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Donec enim diam vulputate ut. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Egestas dui id ornare arcu odio. Mi bibendum neque egestas congue quisque egestas. Id aliquet risus feugiat in ante metus dictum at tempor. Orci porta non pulvinar neque laoreet. Diam quam nulla porttitor massa id neque aliquam vestibulum. Tincidunt praesent semper feugiat nibh sed pulvinar. Morbi blandit cursus risus at ultrices mi tempus.</p>
|
||||
<p>Et netus et malesuada fames ac turpis. Tincidunt dui ut ornare lectus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Orci sagittis eu volutpat odio facilisis mauris. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ultrices gravida dictum fusce ut placerat orci nulla. A lacus vestibulum sed arcu non odio euismod. Purus viverra accumsan in nisl. Lectus magna fringilla urna porttitor rhoncus dolor purus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Id semper risus in hendrerit gravida rutrum quisque non. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Eu facilisis sed odio morbi quis. Ut ornare lectus sit amet. Aliquet nec ullamcorper sit amet risus nullam eget felis.</p>
|
||||
<h2 id="section-contact">Contact me</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat velit scelerisque. Donec adipiscing tristique risus nec feugiat in. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Orci a scelerisque purus semper eget duis at tellus at. Velit laoreet id donec ultrices tincidunt arcu. Sodales ut etiam sit amet nisl purus. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Ipsum nunc aliquet bibendum enim facilisis gravida. Tristique senectus et netus et malesuada fames ac turpis. Donec massa sapien faucibus et. Dui sapien eget mi proin sed libero enim.</p>
|
||||
<p>Dolor purus non enim praesent elementum. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Cursus euismod quis viverra nibh cras pulvinar mattis. Viverra justo nec ultrices dui sapien eget mi proin. Amet cursus sit amet dictum. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Tellus molestie nunc non blandit. Ullamcorper velit sed ullamcorper morbi tincidunt. Felis imperdiet proin fermentum leo vel orci porta. Hendrerit gravida rutrum quisque non tellus orci. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Volutpat commodo sed egestas egestas fringilla. Sagittis vitae et leo duis ut diam quam nulla porttitor. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Suspendisse in est ante in nibh mauris. Odio facilisis mauris sit amet massa.</p>
|
||||
<p>Volutpat blandit aliquam etiam erat. Erat imperdiet sed euismod nisi porta lorem. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Pharetra massa massa ultricies mi quis. Lacus sed viverra tellus in hac habitasse. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Velit ut tortor pretium viverra suspendisse potenti. Et malesuada fames ac turpis egestas. Enim praesent elementum facilisis leo vel fringilla. Id ornare arcu odio ut sem nulla pharetra diam sit. Arcu cursus vitae congue mauris rhoncus.</p>
|
||||
<p>Tempus egestas sed sed risus pretium quam vulputate. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Sit amet dictum sit amet justo. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam elementum pulvinar etiam non quam. Leo vel orci porta non. Aliquet nec ullamcorper sit amet risus nullam eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Donec enim diam vulputate ut. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Egestas dui id ornare arcu odio. Mi bibendum neque egestas congue quisque egestas. Id aliquet risus feugiat in ante metus dictum at tempor. Orci porta non pulvinar neque laoreet. Diam quam nulla porttitor massa id neque aliquam vestibulum. Tincidunt praesent semper feugiat nibh sed pulvinar. Morbi blandit cursus risus at ultrices mi tempus.</p>
|
||||
<p>Et netus et malesuada fames ac turpis. Tincidunt dui ut ornare lectus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Orci sagittis eu volutpat odio facilisis mauris. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ultrices gravida dictum fusce ut placerat orci nulla. A lacus vestibulum sed arcu non odio euismod. Purus viverra accumsan in nisl. Lectus magna fringilla urna porttitor rhoncus dolor purus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Id semper risus in hendrerit gravida rutrum quisque non. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Eu facilisis sed odio morbi quis. Ut ornare lectus sit amet. Aliquet nec ullamcorper sit amet risus nullam eget felis.</p>
|
||||
</main>
|
||||
|
||||
<!--# include file="includes/footer.html" -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue