Commit ef7555f2 authored by epsi sayidina's avatar epsi sayidina

Tutor-03

parent eed6464c
......@@ -23,11 +23,11 @@ module.exports = function(eleventyConfig) {
// directory management
passthroughFileCopy: true,
dir: {
input: "src",
output: "_site", // default
// ⚠️ These values are both relative to your input directory.
// default
input: "views",
output: "_site",
// ⚠️ This value is relative to your input directory.
includes: "_includes",
data: "_data"
}
};
};
{% extends "layouts/base.njk" %}
{% block main %}
<h2>{{ renderData.title or title or metadata.title }}</h2>
<h2>{{ renderData.title or title }}</h2>
<strong>This is a page kind layout.</strong>
<br/>
......
{% extends "layouts/base.njk" %}
{% block main %}
<h2>{{ title or metadata.title }}</h2>
<h2>{{ title }}</h2>
<pre>{{ page.date }}</pre>
<br/>
......
<title>{{ renderData.title or title or metadata.title }}</title>
<title>Your mission. Good Luck!</title>
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/x-icon" />
......@@ -20,7 +20,7 @@ module.exports = function(eleventyConfig) {
// collection
eleventyConfig.addCollection("tagList",
require("./src/_11ty/getTagList"));
require("./views/_11ty/getTagList"));
// Return your Config object
return {
......@@ -41,7 +41,7 @@ module.exports = function(eleventyConfig) {
// directory management
passthroughFileCopy: true,
dir: {
input: "src",
input: "views",
output: "dist",
// ⚠️ These values are both relative to your input directory.
includes: "_includes",
......
module.exports = {
"title": "Your mission. Good Luck!"
};
const moment = require("moment");
module.exports = function(eleventyConfig) {
// directory management
eleventyConfig.addPassthroughCopy("assets");
// layout alias
eleventyConfig.addLayoutAlias("home", "layouts/home.njk");
eleventyConfig.addLayoutAlias("page", "layouts/page.njk");
eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
eleventyConfig.addLayoutAlias("archives", "layouts/archives.njk");
eleventyConfig.addLayoutAlias("tags", "layouts/tags.njk");
eleventyConfig.addLayoutAlias("tag-name", "layouts/tag-name.njk");
// miscellanous filter
eleventyConfig.addNunjucksFilter("date", function(date, format) {
return moment(date).format(format);
});
// collection
eleventyConfig.addCollection("tagList",
require("./views/_11ty/getTagList"));
// Return your Config object
return {
// URL related
pathPrefix: "/",
// Templating Engine
templateFormats: [
"md",
"njk",
"html"
],
markdownTemplateEngine: "njk",
htmlTemplateEngine: "njk",
dataTemplateEngine: "njk",
// directory management
passthroughFileCopy: true,
dir: {
input: "views",
output: "dist",
// ⚠️ These values are both relative to your input directory.
includes: "_includes",
data: "_data"
}
};
};
This diff is collapsed.
html {
height: 100%;
overflow-y: auto;
}
body {
background-image: url("../images/light-grey-terrazzo.png");
min-height: 100%;
}
.maxwidth {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 1216px) {
.maxwidth {
max-width: 1216px;
}
}
.layout-base {
padding-top: 5rem;
}
footer.site-footer {
padding-top: 4rem;
}
.blog-post p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
main,
aside {
margin-bottom: 20px;
}
@media screen and (min-width: 769px), print {
main {
margin-right: 10px;
margin-left: 10px;
}
aside {
margin-left: 10px;
margin-right: 10px;
}
}
@media screen and (min-width: 1280px) {
main {
margin-left: 0px;
}
aside {
margin-right: 0px;
}
}
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
// http://belowthebenthic.com/bulma-burger/
new Vue({
el: '#navbar-vue-app',
data: {
isOpen: false
}
});
This diff is collapsed.
This diff is collapsed.
{
"name": "tutor-11ty-bulma-md",
"description": "Eleventy Bulma MD Test Drive: Chapter 03",
"author": "Epsiarto Rizqi Nurwijayadi",
"homepage": "https://gitlab.com/epsi-rns/tutor-11ty-bulma-md#readme",
"version": "0.3.0",
"scripts": {
"build": "npx eleventy",
"watch": "npx eleventy --watch",
"debug": "DEBUG=* npx eleventy"
},
"repository": {
"type": "git",
"url": "git://gitlab.com/epsi-rns/tutor-11ty-bulma-md.git"
},
"license": "MIT",
"bugs": {
"url": "https://gitlab.com/epsi-rns/tutor-11ty-bulma-md/issues"
},
"devDependencies": {
"@11ty/eleventy": "^0.10.0",
"moment": "^2.24.0"
}
}
module.exports = function(collection) {
let tagSet = new Set();
collection.getAll().forEach(function(item) {
if( "tags" in item.data ) {
let tags = item.data.tags;
tags = tags.filter(function(item) {
switch(item) {
// this list should match the `filter` list in tags.njk
case "all":
case "nav":
case "post":
case "posts":
return false;
}
return true;
});
for (const tag of tags) {
tagSet.add(tag);
}
}
});
// returning an array in addCollection works in Eleventy 0.5.3
return [...tagSet];
};
module.exports = {
"title": "Your mission. Good Luck!",
// https://www.webstoemp.com/blog/from-jekyll-to-eleventy/
now: new Date()
};
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
</article>
</main>
<aside class="column is-one-thirds">
<div class="box">
This is an archive kind layout.
</div>
</aside>
{% endblock %}
<!DOCTYPE html>
<html lang="en">
<head>
{% include "site/head.njk" %}
</head>
<body>
<!-- header -->
{% include "site/header.njk" %}
{% block general %}
<!-- main -->
<div class="columns is-8 layout-base maxwidth">
{% block main %}
{{ content | safe }}
{% endblock %}
{% block aside %}{% endblock %}
</div>
{% endblock %}
<!-- footer -->
{% include "site/footer.njk" %}
{% include "site/scripts.njk" %}
</body>
</html>
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-full">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
</article>
<div class="box">
This is a home kind layout,
to show landing page.
</div>
</main>
{% endblock %}
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
</article>
</main>
<aside class="column is-one-thirds">
<div class="box">
This is a page kind layout.
</div>
</aside>
{% endblock %}
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ title or metadata.title }}</h2>
<p><strong>{{ page.date | date('MMMM Do, YYYY') }}</strong></p>
{{ content | safe }}
</article>
</main>
<aside class="column is-one-thirds">
<div class="box">
This is a post kind layout.
</div>
</aside>
{% endblock %}
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
</article>
</main>
<aside class="column is-one-thirds">
<div class="box">
This is a tag-name kind layout.
</div>
</aside>
{% endblock %}
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
</article>
</main>
<aside class="column is-one-thirds">
<div class="box">
This is a tags kind layout.
</div>
</aside>
{% endblock %}
<footer class="site-footer">
<div class="navbar is-fixed-bottom maxwidth
is-dark has-text-centered is-vcentered">
<div class="column">
&copy; {{ metadata.now | date("Y") }}
</div>
</div>
</footer>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<!-- Let browser know website is optimized for mobile -->
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ renderData.title or title or metadata.title }}</title>
<!-- CSS Framework -->
<link type="text/css" rel="stylesheet"
href="{{ "/assets/css/bulma.css" | url }}">
<!-- Custom CSS -->
<link type="text/css" rel="stylesheet"
href="{{ "/assets/css/main.css" | url }}">
<link rel="shortcut icon" type="image/x-icon"
href="{{ "/assets/favicon.ico" | url }}"/>
<nav role="navigation" aria-label="main navigation"
class="navbar is-fixed-top is-dark maxwidth"
id="navbar-vue-app">
<div class="navbar-brand">
<a class="navbar-item"
href="{{ "/" | url }}">
<img src="{{ "/assets/images/logo-gear.png" | url }}"
alt="Home" />
</a>
<a class="navbar-item"
href="{{ "/pages/" | url }}">
Blog
</a>
<a role="button" class="navbar-burger burger"
aria-label="menu" aria-expanded="false" data-target="navbarBulma"
@click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBulma" class="navbar-menu"
v-bind:class="{'is-active': isOpen}">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Archives
</a>
<div class="navbar-dropdown">
<a class="navbar-item"
href="{{ "/tags/" | url }}">
By Tags
</a>
<hr class="navbar-divider">
<a class="navbar-item"
href="{{ "#" | url }}">
By Chronology
</a>
</div>
</div>
<a class="navbar-item"
href="{{ "/pages/about/" | url }}">
About
</a>
</div>
<div class="navbar-end">
<form class="is-marginless" action="/pages/search/" method="get">
<div class="navbar-item">
<input class="" type="text" name="q"
placeholder="Search..." aria-label="Search">
&nbsp;
<button class="button is-light"
type="submit">Search</button>
</div>
</form>
</div>
</div>
</nav>
<!-- JavaScript at end of body for optimized loading -->
<script src="{{ "/assets/js/vue.min.js" | url }}"></script>
<script src="{{ "/assets/js/bulma-burger-vue.js" | url }}"></script>
---
layout : home
eleventyExcludeFromCollections: true
---
<p>To have, to hold, to love,
cherish, honor, and protect?</p>
<p>To shield from terrors known and unknown?
To lie, to deceive?</p>
<p>To live a double life,
to fail to prevent her abduction,
erase her identity,
force her into hiding,
take away all she has known.</p>