Commit 6ec9bf71 authored by Russell Feldhausen's avatar Russell Feldhausen

Initial Commit

parents
# Generated files at default location
/public/
/resources/_gen
# K-State CS Hugo Framework
This is a [Hugo](https://gohugo.io/)-based web framework for K-State CS lecture content. It uses a lightly adapted version of the [Hugo-theme-learn](https://learn.netlify.com/en/) theme.
Major added features are the addition of [Reveal.js](https://github.com/hakimel/reveal.js/) slideshow framework, and the creation of an embeddable version of content pages for use with IFrames in [Canvas](https://www.instructure.com/) and other learning management systems.
**[Demo](https://ksucs-hugo.russfeld.me)**
#### Relevant Documentation
* [Hugo Documentation](https://gohugo.io/documentation/)
* [Hugo-theme-learn Documentation](https://learn.netlify.com/en/)
* [Reveal.js Documentation](https://github.com/hakimel/reveal.js/)
## Installation
Install Hugo > 0.47 on your system. I recommend using Linux or Windows Subsystem for Linux.
Clone this repository and edit your content.
To view the content locally, use the `hugo server` command and visit http://localhost:1313 to view a local version of your site
To deploy the content, use the `hugo` command on the destination server to generate a `public` folder. Then, point your web server of choice to that folder.
## Adding Content
To change the content on the homepage, edit `content/_index.md`.
To understand how the rest of the content is structured, review the existing files and folders in the `content` folder. Each subfolder contains a chapter, with the chapter index stored in a `_index.html` file in that subfolder. Pay special attention to the frontmatter on that file. The `title` and `pre` items determine what is shown in the left-hand menu, and the `weight` field is used for sorting. Finally, `chapter` denotes that this is a chapter file, and should use a different layout.
All other files in each subfolder are pages. The important item in the frontmatter is the `title`. Pages are sorted according to the `title` field unless a `weight` field is present.
The Chapter 1 example gives a sample Reveal.js slideshow. Note that the frontmatter gives a `type` field stating that it should use the templates for Reveal, and that the `hidden` field is set to true, which will remove this page from the left-hand menu.
## Layouts
By default, any files not present in the top level directories will be read from the corresponding directory in `themes/hugo-theme-learn`. So, the only files present in the `layouts` and `static` folder are those which are customized from the default theme, or new ones added for this framework. Most customized files have short comments discussing the edits made, or you can diff them with the corresponding theme file to get a summary of the changes.
The biggest addition is the "iframeable" type. For each content page (but not the chapter index pages nor the homepage), a second version of the page will be created at the same URL with a filename `embed.html` instead of `index.html`. This version of the file does not have any of the navigation elements on it, and it is perfect for embedding in an IFrame for use in an LMS.
## Questions?
Contact [Russell Feldhausen](https://russfeld.me) - russfeld@ksu.edu
baseURL = "https://ksucs-hugo.russfeld.me"
languageCode = "en-us"
title = "K-State CS Hugo Framework"
# Change the default theme to be use when building the site with Hugo
theme = "hugo-theme-learn"
# For search functionality
[outputs]
home = [ "HTML", "RSS", "JSON"]
# This will render all pages as iframeable as well
page = [ "HTML", "Iframeable"]
[params]
editURL = "https://gitlab.cs.ksu.edu/russfeld/ksucs-hugo/tree/master/content/"
description = "K-State CS Hugo Framework"
author = "Russell Feldhausen"
showVisitedLinks = false
themeVariant = "purple"
disableLanguageSwitchingButton = true
[blackfriday]
plainIDAnchors = true
hrefTargetBlank = true
# Custom output format for iframes
[outputFormats]
[outputFormats.Iframeable]
name = "Iframeable"
baseName = "embed"
mediaType = "text/html"
isPlainText = false
isHTML = true
---
title: "1. Chapter 0 Introduction"
date: 2018-08-24T10:53:26-05:00
---
Lorem Ipsum
+++
title = "Chapter 0 Title"
date = 2018-08-24T10:53:05-05:00
weight = 5
chapter = true
pre = "<b>0. </b>"
+++
### Chapter 0
# Chapter Title Here
Chapter 0 tagline.
---
type: "reveal"
hidden: true
---
<section>
<h2>CIS 123</h2><br><br><p>Title Slide</p>
</section>
<section>
<h3>Slide Title</h3>
<ul>
<li class="fragment">Content</li>
<li class="fragment">Content</li>
<li class="fragment">Content</li>
<li class="fragment">Content</li>
</ul>
</section>
---
title: "1. First Page"
date: 2018-08-24T10:53:26-05:00
---
Lorem Ipsum
[Slides]({{< relref "01-first-page-slides.md" >}})
+++
title = "Chapter 1 Title"
date = 2018-08-24T10:53:05-05:00
weight = 10
chapter = true
pre = "<b>1. </b>"
+++
### Chapter 1
# Chapter Title Here
Chapter 1 tagline
---
title: "1. Appendix A"
date: 2018-08-24T10:53:26-05:00
---
Lorem ipsum
+++
title = "Chapter X Title"
date = 2018-08-24T10:53:05-05:00
weight = 100
chapter = true
pre = "<b>X. </b>"
+++
### Chapter X
# Chapter X Title
Chapter X tagline.
+++
title = "Homepage"
date = 2018-08-24T10:53:05-05:00
+++
This is the homepage.
{{/* Custom Template for Embedable Content */}}
{{ partial "header.iframeable.html" . }}
{{ .Content }}
<footer class=" footline" >
{{with .Params.LastModifierDisplayName}}
<i class='fas fa-user'></i> <a href="mailto:{{ $.Params.LastModifierEmail }}">{{ . }}</a> {{with $.Date}} <i class='fas fa-calendar'></i> {{ .Format "02/01/2006" }}{{end}}
</div>
{{end}}
</footer>
{{ partial "footer.iframeable.html" . }}
<!-- Partial intended to be overwritten to add custom headers, like CSS or any other info
<style type="text/css">
/* Custom css */
</style>
-->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
{{/* Custom Template for Embedable Content */}}
{{ if .Params.chapter }}
</div> <!-- end chapter-->
{{ end }}
</div>
{{ partial "custom-comments.html" . }}
</div>
</section>
<div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
<div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
</div>
<script src="{{"js/clipboard.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/perfect-scrollbar.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/perfect-scrollbar.jquery.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/jquery.sticky.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/featherlight.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/html5shiv-printshiv.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/highlight.pack.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="{{"js/modernizr.custom.71422.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/hugo-learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<link href="{{"mermaid/mermaid.css" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" type="text/css" rel="stylesheet" />
<script src="{{"mermaid/mermaid.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
{{ partial "custom-footer.html" . }}
</body>
</html>
{{/* Custom Template for Embedable Content */}}
<!DOCTYPE html>
<html lang="{{ .Page.Language | default "en" }}" class="js csstransforms3d">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ .Hugo.Generator }}
{{ partial "meta.html" . }}
{{ partial "favicon.html" . }}
<title>{{ .Title }} :: {{ .Site.Title }}</title>
{{ $assetBusting := not .Site.Params.disableAssetsBusting }}
<link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/hybrid.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/featherlight.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/theme-embed.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/hugo-theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{with .Site.Params.themeVariant}}
<link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{end}}
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="{{"js/jquery-2.x.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<style type="text/css">
:root #header + #content > #left > #rlblock_left{
display:none !important;
}
{{ if .Site.Params.disableInlineCopyToClipBoard }}
:not(pre) > code + span.copy-to-clipboard {
display: none;
}
{{ end }}
</style>
{{ partial "custom-header.html" . }}
</head>
<body class="" data-url="{{ .RelPermalink }}">
<section id="body">
<div id="overlay"></div>
<div class="padding highlightable">
{{ if .Params.chapter }}
<div id="chapter">
{{ end }}
<div id="body-inner">
{{if and (not .IsHome) (not .Params.chapter) }}
{{end}}
{{define "breadcrumb"}}
{{$parent := .page.Parent }}
{{ if $parent }}
{{ $value := (printf "<a href='%s'>%s</a> > %s" $parent.URL $parent.Title .value) }}
{{ template "breadcrumb" dict "page" $parent "value" $value }}
{{else}}
{{.value|safeHTML}}
{{end}}
{{end}}
{{/* Place Logo Graphic or Text Here */}}
K-State CS Hugo Framework
{{/* Place Text for Bottom of Menu Here */}}
<p>Built using <a href="http://gohugo.io/">Hugo</a> and <a href="https://github.com/matcornic/hugo-theme-learn">Hugo-theme-learn</a></p>
<p><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br>by <a href="http://cs.ksu.edu">K-State Computer Science</a><br>unless otherwise stated</p>
{{/* Custom Template for Reveal.js Slides */}}
<html>
<head>
<link rel="stylesheet" href="/reveal/css/reveal.css">
<link rel="stylesheet" href="/reveal/css/theme/black.css">
</head>
<body>
<div class="reveal">
<div class="slides">
{{ .Content }}
</div>
</div>
<script src="/reveal/js/reveal.js"></script>
<script>
Reveal.initialize({
controls: false,
controlsTutorial: false,
progress: false,
transition: 'fade',
width: 1440,
height: 1080,
history: true,
});
window.addEventListener("mousedown", handleClick, false);
window.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
function handleClick(e) {
e.preventDefault();
if(e.button === 0) Reveal.next();
if(e.button === 2) Reveal.prev();
}
</script>
</body>
</html>
This diff is collapsed.
:root{
--MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#793CCC; /* Color of links */
--MAIN-LINK-HOVER-color:#512888; /* Color of hovered links */
--MAIN-ANCHOR-color: #793CCC; /* color of anchors on titles */
--MENU-HEADER-BG-color:#512888; /* Background color of menu header */
--MENU-HEADER-BORDER-color:#793CCC; /*Color of menu header border */
--MENU-SEARCH-BG-color:#512888; /* Search field background color (by default borders + icons) */
--MENU-SEARCH-BOX-color: #793CCC; /* Override search field border color */
--MENU-SEARCH-BOX-ICONS-color: #C497FF; /* Override search field icons color */
--MENU-SECTIONS-ACTIVE-BG-color:#20272b; /* Background color of the active section and its childs */
--MENU-SECTIONS-BG-color:#252c31; /* Background color of other sections */
--MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
--MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered */
--MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
--MENU-VISITED-color: #793CCC; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
}
body {
color: var(--MAIN-TEXT-color) !important;
}
textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
border-color: none;
box-shadow: none;
}
h2, h3, h4, h5 {
color: var(--MAIN-TITLES-TEXT-color) !important;
}
a {
color: var(--MAIN-LINK-color);
}
.anchor {
color: var(--MAIN-ANCHOR-color);
}
a:hover {
color: var(--MAIN-LINK-HOVER-color);
}
#sidebar ul li.visited > a .read-icon {
color: var(--MENU-VISITED-color);
}
#body a.highlight:after {
display: block;
content: "";
height: 1px;
width: 0%;
-webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-ms-transition: width 0.5s ease;
transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color);
}
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
#sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-ICONS-color);
border-color: var(--MENU-HEADER-BORDER-color);
}
#sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color);
}
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}
#sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color);
}
#sidebar a {
color: var(--MENU-SECTIONS-LINK-color);
}
#sidebar a:hover {
color: var(--MENU-SECTIONS-LINK-HOVER-color);
}
#sidebar ul li.active > a {
background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
}
#sidebar hr {
border-color: var(--MENU-SECTION-HR-color);
}
This diff is collapsed.
// Get Parameters from some url
var getUrlParameter = function getUrlParameter(sPageURL) {
var url = sPageURL.split('?');
var obj = {};
if (url.length == 2) {
var sURLVariables = url[1].split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
obj[sParameterName[0]] = sParameterName[1];
}
return obj;
} else {
return undefined;
}
};
// Execute actions on images generated from Markdown pages
var images = $("div#body-inner img").not(".inline");
// Wrap image inside a featherlight (to get a full size view in a popup)
images.wrap(function(){
var image =$(this);
if (!image.parent("a").length) {
return "<a href='" + image[0].src + "' data-featherlight='image'></a>";
}
});
// Change styles, depending on parameters set to the image
images.each(function(index){
var image = $(this)
var o = getUrlParameter(image[0].src);
if (typeof o !== "undefined") {
var h = o["height"];
var w = o["width"];
var c = o["classes"];
image.css("width", function() {
if (typeof w !== "undefined") {
return w;
} else {
return "auto";
}
});
image.css("height", function() {
if (typeof h !== "undefined") {
return h;
} else {
return "auto";
}
});
if (typeof c !== "undefined") {
var classes = c.split(',');
for (i = 0; i < classes.length; i++) {
image.addClass(classes[i]);
}
}
}
});
// Stick the top to the top of the screen when scrolling
$(document).ready(function(){
//russfeld disable top sticky bar - I dislike :)
//$("#top-bar").sticky({topSpacing:0, zIndex: 1000});
});
jQuery(document).ready(function() {
// Add link button for every
var text, clip = new Clipboard('.anchor');
$("h1~h2,h1~h3,h1~h4,h1~h5,h1~h6").append(function(index, html){
var element = $(this);
var url = document.location.origin + document.location.pathname;
var link = url + "#"+element[0].id;
return " <span class='anchor' data-clipboard-text='"+link+"'>" +
"<i class='fas fa-link fa-lg'></i>" +
"</span>"
;
});
$(".anchor").on('mouseleave', function(e) {
$(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
});
clip.on('success', function(e) {
e.clearSelection();
$(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
});