UI stuff.

This commit is contained in:
Charlie 2018-05-28 20:39:43 +01:00
parent e067449717
commit 8e140d76d6
39 changed files with 182 additions and 88 deletions

View file

@ -27,3 +27,5 @@ There are a few common sub-headings that you can choose to use when writing a to
- Also known as. Similies for the topic. An article on 'Node.JS' might list 'Node'.
Don't write things that aren't necessary for a non-technical person to grasp the topic. This is in no way meant to replace official documentation, Wikipedia or Stack Overflow.
Many of the files in the `_topic` folder at the moment are either empty placeholders or rushed first attempts. Please do take a look if you feel that you can contribute.

View file

@ -1,6 +1,6 @@
title: Jargonthing
github: https://github.com/
collections:
topic:
output: true
permalink: /:name
permalink: /:name

14
_includes/footer.html Normal file
View file

@ -0,0 +1,14 @@
<hr />
<nav class="navbar navbar-expand-sm navbar-dark">
<div class='container'>
<span class="footer-github">
<a href={{ site.github }} class="badge badge-pill badge-light bg-white" target="_blank">
<span><img class="footer-github-image" src="assets/img/mark-github-512.png" /></span>
<span class="d-none d-sm-inline">Contribute</span>
</a>
</span>
<span>
</span>
</div>
</div>

View file

@ -7,10 +7,13 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
{% include search.html %}
</div>
</div>
</nav>
</nav>
<script>
function onClear() {
$("#search-input").val('');
}
</script>

10
_includes/search.html Normal file
View file

@ -0,0 +1,10 @@
<form id="search-form" class="form-inline my-2 my-lg-0">
<input
id="search-input"
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
onblur="onClear()">
<ul id="results-container"></ul>
</form>

View file

@ -6,28 +6,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/site.css">
<title>{{ site.title }}</title>
</head>
<body>
{% include nav.html %}
<br />
<div class="body-content">
{{ content }}
<hr />
<div class='container'>
<p>
Contribute on <a target='_blank' href='https://github.com/mistakenot'>GitHub</a>.
</p>
</div>
{% include footer.html %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="assets/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="assets/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="assets/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="assets/js/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="assets/js/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="assets/js/simple-jekyll-search.min.js"></script>
<script>
var sjs = SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
limit: 5
})
</script>
</body>
</html>

View file

@ -2,6 +2,6 @@
layout: default
---
<div class='container'>
{{ content }}
</div>
<div class="header-nav bg-primary"></div>
{{ content }}

View file

@ -1,7 +1,19 @@
---
layout: default
---
{% include nav.html %}
<br />
<div class='container'>
<div class="card border-primary">
<div class="card-body">
<h1>{{ page.title }}</h1>
{% if page.website %}
<a class="card-link" href="{{ page.website }}" target="_blank">{{ page.website }}</a>
{% endif %}
</div>
</div>
<br />
{{ content }}
</div>

View file

@ -3,7 +3,5 @@ layout: topic
title: "Angular.JS"
---
# Angular.JS
This topic is awaiting content. Open a pull request to contribute!

View file

@ -3,5 +3,4 @@ layout: topic
title: "Authorization"
---
# Authorization
Authorization is the process of ensuring that a user is allowed to perform a specfic action.

View file

@ -3,5 +3,3 @@ layout: topic
title: "Web Browser"
---
# Web Browser

View file

@ -3,8 +3,6 @@ layout: topic
title: "Client-Server"
---
# Client-Server
'Client-Server' is a model for communication between two computer systems. The role of the Server is to receive requests and act upon them, by either returning or modifying data. The role of the Client is to create and send these requests to the Server, often on behalf of a human user.
The Server is usually responsible for securing access to sensitive data and ensuring that all requests from Clients are properly [authorized](authorization) and validated. The Client is usually responsible for receiving input directly from a user in the form of mouse clicks or keyboard typing and formatting this data into a form that the Server can understand.

View file

@ -2,6 +2,3 @@
layout: topic
title: "Desktop Application"
---
# Desktop Application

View file

@ -1,9 +1,8 @@
---
layout: topic
title: ".NET Core"
website: https://dotnet.github.io/
---
# .NET Core
This topic is awaiting content. Open a pull request to contribute!

View file

@ -1,11 +1,10 @@
---
layout: topic
title: ".NET Framework"
website: https://www.microsoft.com/net/
---
# .NET Framework
The .NET Framework is a [software framework](framework) that was originally designed and released by [Microsoft](microsoft) in 2001. It originally could be used to build [desktop applications](desktop-application) for the [Windows](windows) operating system but has since expanded to be used to build [server-side](client-server) [web](web-application) and [mobile](mobile-application) applications.
The .NET Framework is a [software framework](framework) that first released by [Microsoft](microsoft) in 2001. It originally could be used to build [desktop applications](desktop-application) for the [Windows](windows) operating system but has since expanded to be used to build [server-side](client-server) [web](web-application) and [mobile](mobile-application) applications.

View file

@ -3,8 +3,6 @@ layout: topic
title: "Software Framework"
---
# Software Framework
A Software Framework is a set of tools, libraries and methodologies that are designed to make it easier for [developers](developer) to build systems. Frameworks differ from [libraries](library) in that they often expect the developers using them to follow certain patterns and methodologies when using them.
#### Examples

View file

@ -3,6 +3,12 @@ layout: topic
title: "JavaScript"
---
# JavaScript
JavaScript is a [programming language](programming-language) that was originally created to allow developers to write code that could be run in a [Web Browser](web-browser). It was first released in 1994 by the company Netscape. It has since become one of the most ubiquotous programming languages in the world and can be found executing including Web Browsers, [IoT Devices](iot-devices) and Mobile Phones.
JavaScript is a [programming language](programming-language) that was created to allow enable richer experiences on the web by enabling web developers to write code that can run in a [client](client-server) [browser](web-browser).
It is the programming language usd in the popular [Node.JS](nodejs) [runtime](runtime).
It is not related to the programming language, [Java](java).
## Similar to
- [Python](python)
- [TypeScript](typescript)

View file

@ -3,8 +3,6 @@ layout: topic
title: "Software Library"
---
# Software Library
A Software Library is a small collection of components that are designed to be used as part of a larger system. The components in a library usually share a single cohesive theme and do not try to dictate how they should be used by other systems.
#### Differs to

View file

@ -3,5 +3,3 @@ layout: topic
title: "Microsoft"
---
# Microsoft

View file

@ -3,5 +3,3 @@ layout: topic
title: "Mobile Application"
---
# Mobile Application

View file

@ -3,7 +3,5 @@ layout: topic
title: "Node.JS"
---
# Node.JS
This topic is awaiting content. Open a pull request to contribute!
Node.JS is a platform that enables developers to build [server-side](client-server) applications using [JavaScript](javascript) as the programming language.

View file

@ -3,7 +3,5 @@ layout: topic
title: "NPM"
---
# NPM
This topic is awaiting content. Open a pull request to contribute!

View file

@ -3,7 +3,5 @@ layout: topic
title: "Package Manager"
---
# Package Manager
This topic is awaiting content. Open a pull request to contribute!

11
_topic/python.markdown Normal file
View file

@ -0,0 +1,11 @@
---
layout: topic
title: "Python"
website: "https://pythonlang.org"
snipper: "Python is a programming languge known for its simplicity and wide range of uses."
---
Python is a [programming language](programming-language) that was originally created in 1994 by Someone. It is known for its wide range of uses including [Web Applications](web-applications), Data Science and Education. The simplicity of Python means that is is often used to teach introductory programming courses.
## Similar To
- [JavaScript](javascript)

View file

@ -3,8 +3,6 @@ layout: topic
title: "React.JS"
---
# React.JS
React.JS is a [library](/library) for building [user interfaces](ui). It utilises [JavaScript](javascript) and a special [syntax](syntax) for describing a heirachy of components that make up the interface called JSX.
It was originally released in 2013 by [Facebook](https://facebook.com) as [open-source software](oss). It can be used to create [user interfaces](ui) for [web browsers](web-browser) and for mobile devices.

8
_topic/runtime.markdown Normal file
View file

@ -0,0 +1,8 @@
---
layout: topic
title: "Software Runtime"
snippet: ""
---
This topic is awaiting content. Open a pull request to contribute!

View file

@ -0,0 +1,8 @@
---
layout: topic
title: "TypeScript"
snippet: ""
---
This topic is awaiting content. Open a pull request to contribute!

View file

@ -3,5 +3,4 @@ layout: topic
title: "Web Application"
---
# Web Applications

View file

@ -3,5 +3,3 @@ layout: topic
title: "Windows"
---
# Windows

34
assets/css/site.css Normal file
View file

@ -0,0 +1,34 @@
#site-form {
position: relative;
}
#results-container {
position: absolute;
top: 100%;
padding-left: 28px;
padding-right: 10px;
padding-bottom: 0px;
background: white;
z-index: 1;
}
.header-nav {
height: 10px;
}
.body-content {
min-height: 300px;
}
.footer-github-image {
height: 30px;
}
.footer-github {
background: white;
border-radius: 50%;
}
hr {
margin-bottom: 0;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

6
assets/js/simple-jekyll-search.min.js vendored Normal file
View file

@ -0,0 +1,6 @@
/*!
* Simple-Jekyll-Search v1.6.3 (https://github.com/christian-fei/Simple-Jekyll-Search)
* Copyright 2015-2018, Christian Fei
* Licensed under the MIT License.
*/
!function(){"use strict";var s={load:function(e,t){var n=window.XMLHttpRequest?new window.XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");n.open("GET",e,!0),n.onreadystatechange=(r=n,i=t,function(){if(4===r.readyState&&200===r.status)try{i(null,JSON.parse(r.responseText))}catch(e){i(e,null)}}),n.send();var r,i}};var n=function(e,t){var n=t.length,r=e.length;if(n<r)return!1;if(r===n)return e===t;e:for(var i=0,o=0;i<r;i++){for(var a=e.charCodeAt(i);o<n;)if(t.charCodeAt(o++)===a)continue e;return!1}return!0},t=new function(){this.matches=function(e,t){return n(t.toLowerCase(),e.toLowerCase())}};var r=new function(){this.matches=function(e,t){return"string"==typeof e&&0<=(e=e.trim()).toLowerCase().indexOf(t.toLowerCase())}};var f={put:function(e){if(l(e))return c(e);if(t=e,Boolean(t)&&"[object Array]"===Object.prototype.toString.call(t))return function(e){var t=[];u();for(var n=0,r=e.length;n<r;n++)l(e[n])&&t.push(c(e[n]));return t}(e);var t;return undefined},clear:u,search:function(e){if(!e)return[];return function(e,t,n,r){for(var i=[],o=0;o<e.length&&i.length<r.limit;o++){var a=p(e[o],t,n,r);a&&i.push(a)}return i}(o,e,a.searchStrategy,a).sort(a.sort)},setOptions:function(e){(a=e||{}).fuzzy=e.fuzzy||!1,a.limit=e.limit||10,a.searchStrategy=e.fuzzy?t:r,a.sort=e.sort||i}};function i(){return 0}var o=[],a={};function u(){return o.length=0,o}function l(e){return Boolean(e)&&"[object Object]"===Object.prototype.toString.call(e)}function c(e){return o.push(e),o}function p(e,t,n,r){for(var i in e)if(!d(e[i],r.exclude)&&n.matches(e[i],t))return e}function d(e,t){for(var n=!1,r=0,i=(t=t||[]).length;r<i;r++){var o=t[r];!n&&new RegExp(e).test(o)&&(n=!0)}return n}a.fuzzy=!1,a.limit=10,a.searchStrategy=a.fuzzy?t:r,a.sort=i;var h={compile:function(r){return m.template.replace(m.pattern,function(e,t){var n=m.middleware(t,r[t],m.template);return void 0!==n?n:r[t]||e})},setOptions:function(e){m.pattern=e.pattern||m.pattern,m.template=e.template||m.template,"function"==typeof e.middleware&&(m.middleware=e.middleware)}},m={};m.pattern=/\{(.*?)\}/g,m.template="",m.middleware=function(){};var y={merge:function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r],"undefined"!=typeof t[r]&&(n[r]=t[r]));return n},isJSON:function(e){try{return!!(e instanceof Object&&JSON.parse(JSON.stringify(e)))}catch(t){return!1}}};!function(t){var r={searchInput:null,resultsContainer:null,json:[],success:Function.prototype,searchResultTemplate:'<li><a href="{url}" title="{desc}">{title}</a></li>',templateMiddleware:Function.prototype,sortMiddleware:function(){return 0},noResultsText:"No results found",limit:10,fuzzy:!1,exclude:[]},i=["searchInput","resultsContainer","json"],o=function e(t){if(n=t,!(n&&"undefined"!=typeof n.required&&n.required instanceof Array))throw new Error("-- OptionsValidator: required options missing");var n;if(!(this instanceof e))return new e(t);var r=t.required;this.getRequiredOptions=function(){return r},this.validate=function(t){var n=[];return r.forEach(function(e){"undefined"==typeof t[e]&&n.push(e)}),n}}({required:i});function a(e){r.success(e),f.put(e),r.searchInput.addEventListener("keyup",function(e){var t;t=e.which,-1===[13,16,20,37,38,39,40,91].indexOf(t)&&(n(),l(e.target.value))})}function n(){r.resultsContainer.innerHTML=""}function u(e){r.resultsContainer.innerHTML+=e}function l(e){var t;(t=e)&&0<t.length&&(n(),function(e){var t=e.length;if(0===t)return u(r.noResultsText);for(var n=0;n<t;n++)u(h.compile(e[n]))}(f.search(e)))}function c(e){throw new Error("SimpleJekyllSearch --- "+e)}t.SimpleJekyllSearch=function(e){var n;return 0<o.validate(e).length&&c("You must specify the following required options: "+i),r=y.merge(r,e),h.setOptions({template:r.searchResultTemplate,middleware:r.templateMiddleware}),f.setOptions({fuzzy:r.fuzzy,limit:r.limit,sort:r.sortMiddleware}),y.isJSON(r.json)?a(r.json):(n=r.json,s.load(n,function(e,t){e&&c("failed to get JSON ("+n+")"),a(t)})),{search:l}},t.SimpleJekyllSearch.init=t.SimpleJekyllSearch,"function"==typeof t.SimpleJekyllSearchInit&&t.SimpleJekyllSearchInit.call(this,t.SimpleJekyllSearch)}(window)}();

View file

@ -3,35 +3,31 @@ layout: home
hide_search: true
---
<div class='text-center'>
<h1>{{ site.title }}</h1>
<div class="jumbotron">
<div class='text-center'>
<h1>{{ site.title }}</h1>
<p class="lead">A Jargonbuster for people that work with techies.</p>
<p class="lead">A Jargonbuster for people who work with techies.</p>
</div>
<div class='row'>
<div class='col d-flex flex-row justify-content-center'>
{% include search.html %}
</div>
</div>
</div>
<div class='row'>
<div class='col d-flex flex-row justify-content-center'>
<div class="input-group mb-3" style='max-width: 400px;'>
<input type="text" class="form-control" placeholder="E.g. React" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
<div class="container">
<h4 class='text-center'>Recently added</h4>
<div class='row'>
<div class='col'>
<div class='d-flex flex-row justify-content-around flex-wrap h4'>
{% for item in site.topic %}
<a class='badge badge-primary' href="{{ item.url }}" style='margin: 5px;'>{{ item.title }}</a>
{% endfor %}
</div>
</div>
</div>
</div>
<br />
<br />
<h4 class='text-center'>Topics</h4>
<div class='row'>
<div class='col'>
<div class='d-flex flex-row justify-content-around flex-wrap h4'>
{% for item in site.topic %}
<a class='badge badge-primary' href="{{ item.url }}" style='margin: 5px;'>{{ item.title }}</a>
{% endfor %}
</div>
</div>
</div>

View file

@ -1,9 +1,9 @@
echo '---
layout: topic
title: "'$(echo $2)'"
snippet: ""
website: ""
---
# '$(echo $2)'
This topic is awaiting content. Open a pull request to contribute!
' >> ./_topic/$1.markdown

12
search.json Normal file
View file

@ -0,0 +1,12 @@
---
layout: null
---
[
{% for topic in site.topic %}
{
"title": "{{ topic.title | escape }}",
"url": "{{ topic.url }}",
"snippet": "{{ topic.snippet }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]