Skip to content

Instantly share code, notes, and snippets.

@bpwebs

bpwebs/CSS.html

Last active November 7, 2023 18:21
Show Gist options
  • Save bpwebs/6e9b72e819751f37d76949fd19cc2389 to your computer and use it in GitHub Desktop.
Save bpwebs/6e9b72e819751f37d76949fd19cc2389 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-Page Google Apps Script Web App
Raw
Code.gs
function doGet(e) {
let page = e.parameter.mode || "Index";
let html = HtmlService.createTemplateFromFile(page).evaluate();
let htmlOutput = HtmlService.createHtmlOutput(html);
htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
//Replace {{NAVBAR}} with the Navbar content
htmlOutput.setContent(htmlOutput.getContent().replace("{{NAVBAR}}",getNavbar(page)));
return htmlOutput;
}
//Create Navigation Bar
function getNavbar(activePage) {
var scriptURLHome = getScriptURL();
var scriptURLPage1 = getScriptURL("mode=Page1");
var scriptURLPage2 = getScriptURL("mode=Page2");
var scriptURLPage3 = getScriptURL("mode=Page3");
var navbar =
`<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="${scriptURLHome}">BPWEBS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link ${activePage === 'Index' ? 'active' : ''}" href="${scriptURLHome}">Home</a>
<a class="nav-item nav-link ${activePage === 'Page1' ? 'active' : ''}" href="${scriptURLPage1}">Page 1</a>
<a class="nav-item nav-link ${activePage === 'Page2' ? 'active' : ''}" href="${scriptURLPage2}">Page 2</a>
<a class="nav-item nav-link ${activePage === 'Page3' ? 'active' : ''}" href="${scriptURLPage3}">Page 3</a>
</div>
</div>
</div>
</nav>`;
return navbar;
}
//returns the URL of the Google Apps Script web app
function getScriptURL(qs = null) {
var url = ScriptApp.getService().getUrl();
if(qs){
if (qs.indexOf("?") === -1) {
qs = "?" + qs;
}
url = url + qs;
}
return url;
}
//INCLUDE HTML PARTS, EG. JAVASCRIPT, CSS, OTHER HTML FILES
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
Raw
CSS.html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
Raw
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('CSS'); ?>
</head>
<body>
{{NAVBAR}}
<div class="container">
<!-- Your content goes here -->
<br>
<h1 class="text-center">Home Page</h1>
<img src="https://loremflickr.com/640/480/dog" class="rounded mx-auto d-block"/>
</div>
<?!= include('JavaScript'); ?>
</body>
</html>
Raw
JavaScript.html
<script>
<!-- Your JavaScript codes goes here -->
</script>
Raw
Page1.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('CSS'); ?>
</head>
<body>
{{NAVBAR}}
<div class="container">
<!-- Your content goes here -->
<br>
<h1 class="text-center"> Page 1</h1>
<img src="https://loremflickr.com/640/480/cat" class="rounded mx-auto d-block"/>
</div>
<?!= include('JavaScript'); ?>
</body>
</html>
Raw
Page2.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('CSS'); ?>
</head>
<body>
{{NAVBAR}}
<div class="container">
<!-- Your content goes here -->
<br>
<h1 class="text-center"> Page 2</h1>
<img src="https://loremflickr.com/640/480/flower" class="rounded mx-auto d-block"/>
</div>
<?!= include('JavaScript'); ?>
</body>
</html>
Raw
Page3.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('CSS'); ?>
</head>
<body>
{{NAVBAR}}
<div class="container">
<!-- Your content goes here -->
<br>
<h1 class="text-center"> Page 3</h1>
<img src="https://loremflickr.com/640/480/river" class="rounded mx-auto d-block"/>
</div>
<?!= include('JavaScript'); ?>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment