change the card creation method and add search

This commit is contained in:
Amolith 2019-02-02 20:38:24 -05:00
parent a833ebbfe6
commit 93d13d3875
Signed by: Amolith
GPG Key ID: 51FD40936DB0065B
5 changed files with 110 additions and 123 deletions

20
app.js
View File

@ -9,7 +9,7 @@ $(function(){
read_json: function() {
$.ajax({
url: "cards/info.json",
url: "/cards.json",
dataType: 'json',
async: false,
success: function(data) {
@ -57,13 +57,13 @@ $(function(){
},
create_card: function(d) {
$.each(d, function(i){
view.create_card(d[i].name, d[i].description, d[i].button_text);
view.create_card(d[i].name, d[i].description, d[i].button_text, d[i].link);
});
},
filter_data: function(c) {
var d = model.filter_data(c);
$.each(d, function(i){
view.create_card(d[i].name, d[i].description, d[i].button_text);
view.create_card(d[i].name, d[i].description, d[i].button_text, d[i].link);
});
},
recreate_cards: function() {
@ -74,7 +74,7 @@ $(function(){
// Renomear
var view = {
init: function() {
this.container = $(".flex-wrapper");
this.container = $(".flex-cards");
this.search_field = $("#search_field");
view.events();
},
@ -92,14 +92,16 @@ $(function(){
});
},
create_card: function(name, desc, bt_txt){
create_card: function(name, desc, bt_txt, link){
var $card = $("<div>").addClass("card");
var $h2 = $("<h2>").addClass("title").text(name);
var $desc = $("<div>").addClass("description").text(desc);
var $button = $("<button>").text(bt_txt);
var $h1 = $("<h1>").text(name);
var $desc = $("<p>").text(desc);
var $button = $("<button>").addClass("button").text(bt_txt);
var $a = $("<a>").attr("href", link);
$card.append($h2).append($desc).append($button);
$a.append($button);
$card.append($h1).append($desc).append($a);
this.container.append($card);
},
clean_cards: function() {

89
cards.json Normal file
View File

@ -0,0 +1,89 @@
{
"cards" :
[
{
"name": "Mattermost",
"description": "Mattermost is a FLOSS application for real-time chat. Use this for communicating with other users, joining a few different communities, and getting support for NixNet services.",
"button_text": "Chat!",
"link":"https://nixnet.xyz/mattermost/"
},
{
"name": "Mastodon",
"description": "Mastodon is a decentralised microblogging social network with millions of users worldwide. You can create an account on one instance and interact with an instance from across the world.",
"button_text": "Socialise!",
"link": "https://masto.nixnet.xyz/"
},
{
"name": "Wireguard",
"description": "WireGuard is an open source application and protocol that uses VPN techniques to create secure tunnels in various configurations. It aims to be more performant than OpenVPN or IPsec0.",
"button_text": "Tunnel!",
"link": "https://nixnet.xyz/wireguard/"
},
{
"name": "Gitea",
"description": "Gitea is a simple, easy-to-use and yet full-featured, self-hosted code hosting solution. Users get an initial limit of 5 repos. Please be conscientious of storage use and don't upload large files.",
"button_text": "Code!",
"link": "https://git.nixnet.xyz/"
},
{
"name": "CodiMD",
"description": "CodiMD is an application that allows users to collaborate in real time on markdown documents and presentations. Perfect for quick and easy slideshows and documentation.",
"button_text": "Write!",
"link": "https://codi.nixnet.xyz/"
},
{
"name": "PrivateBin",
"description": "PrivateBin is a minimalist and open source pastebin that has zero knowledge of pasted data. Everything is encrypted and decrypted in-browser using 256bit AES in Galois Counter mode.",
"button_text": "Paste!",
"link": "https://bin.nixnet.xyz/"
},
{
"name": "Plume",
"description": "Plume is an open source and federated blogging platform that can be interacted with and followed from any social network powered by ActivityPub including Mastodon and others!",
"button_text": "Write!",
"link": "https://plume.nixnet.xyz/"
},
{
"name": "wallabag",
"description": "wallabag is like a self-hosted version of Mozilla's Pocket. You throw it some links and it saves them to read later in a minimal UI, and downloads them to the mobile app if you have it.",
"button_text": "Read!",
"link": "https://wallabag.nixnet.xyz/"
},
{
"name": "NixedWiki",
"description": "NixedWiki is built on BookStack, a simple and easy-to-use platform for organising and storing information. Everything's searchable, it uses the WYSIWYG editor, and much more!",
"button_text": "Document!",
"link": "https://wiki.nixnet.xyz/"
},
{
"name": "RSS-Bridge",
"description": "RSS-Bridge is an application that generates feeds for sites that don't support it. There are 179 bridges from YouTube playlists and channels to new Bandcamp releases by tag and many others!",
"button_text": "Subscribe!",
"link": "https://rss.nixnet.xyz/"
},
{
"name": "Jabber/XMPP",
"description": "Jabber/XMPP is a set of open technologies for instant messaging, multi-party chat, and voice/video calls. XMPP stands for the Extensible Messaging and Presence Protocol.",
"button_text": "Register!",
"link": "https://nixnet.xyz/jabber-xmpp/"
},
{
"name": "searX",
"description": "searX is a meta search engine that aggregates results from more than 70 different search engines. Users are neither tracked nor profiled. searX can also be used over Tor for increased anonymity.",
"button_text": "Search!",
"link": "https://searx.nixnet.xyz/"
},
{
"name": "Mumble",
"description": "Mumble is an open source, low-latency, high quality voice chat software primarily intended for use while gaming. It's also great for private calls between yourself and others.",
"button_text": "Chat!",
"link": "mumble://nixnet.xyz:64738"
},
{
"name": "Funkwhale",
"description": "Funkwhale is an awesome service that lets you upload your favourite music and listen to it from anywhere. You can also listen to friends' music as Funkwhale federates with other instances!",
"button_text": "Listen!",
"link": "https://funk.nixnet.xyz"
}
]
}

View File

@ -1,20 +0,0 @@
{
"cards" :
[
{
"name": "Mastodon",
"description": "Mastodon is a decentralised microblogging social network with millions of users worldwide. You can create an account on one instance and interact with an instance from across the world.",
"button_text": "Socialise!"
},
{
"name": "Mattermost",
"description": "Mattermost is a FLOSS application for real-time chat. Use this for communicating with other users, joining a few different communities, and getting support for NixNet services.",
"button_text": "Chat!"
},
{
"name": "Wireguard",
"description": "WireGuard is an open source application and protocol that uses VPN techniques to create secure tunnels in various configurations. It aims to be more performant than OpenVPN or IPsec0.",
"button_text": "Tunnel!"
}
]
}

View File

@ -10,77 +10,21 @@ priority: 0.9
<style>
</style>
<center><p>I host a variety of services that are available for anyone to use free of charge. Below is a list with descriptions of each.</p></center>
</br>
<center><h1><a href="https://status.nixnet.xyz" target="_blank"><u>Status page</u></a> / <a href="https://netdata.nixnet.xyz" target="_blank"><u>Stats page</u></a></h1></center>
</br>
<center>
<form>
<input id="search_field" type="text" autocomplete="off" name="search" placeholder="Search services . . .">
</form>
</center>
</br>
</br>
<div class="flex-wrapper">
<div class="flex-cards">
<div class="card">
<h1><b>Mattermost</b></h1>
<p>Mattermost is a FLOSS application for real-time chat. Use this for communicating with other users, joining a few different communities, and getting support for NixNet services.</p>
<a href="https://nixnet.xyz/mattermost/"><button class="button">Chat!</button></a>
</div>
<div class="card">
<h1><b>Mastodon</b></h1>
<p>Mastodon is a decentralised microblogging social network with millions of users worldwide. You can create an account on one "instance" and interact with an instance from across the world.</p>
<a href="https://masto.nixnet.xyz"><button class="button">Socialise!</button></a>
</div>
<div class="card">
<h1><b>Wireguard</b></h1>
<p>WireGuard is an open source application and protocol that uses VPN techniques to create secure tunnels in various configurations. It aims to be more performant than OpenVPN or IPsec.</p>
<a href="https://nixnet.xyz/wireguard/"><button class="button">Tunnel!</button></a>
</div>
<div class="card">
<h1><b>Gitea</b></h1>
<p>Gitea is a simple, easy-to-use and yet full-featured, self-hosted code hosting solution. Users get an initial limit of 5 repos. Please be conscientious of storage use and don't upload large files.</p>
<a href="https://git.nixnet.xyz/"><button class="button">Code!</button></a>
</div>
<div class="card">
<h1><b>CodiMD</b></h1>
<p>CodiMD is an application that allows users to collaborate in real time on markdown documents and presentations. Perfect for quick and easy slideshows and documentation.</p>
<a href="https://codi.nixnet.xyz"><button class="button">Collaborate!</button></a>
</div>
<div class="card">
<h1><b>PrivateBin</b></h1>
<p>PrivateBin is a minimalist and open source pastebin that has zero knowledge of pasted data. Everything is encrypted and decrypted in-browser using 256bit AES in Galois Counter mode.</p>
<a href="https://bin.nixnet.xyz/"><button class="button">Paste!</button></a>
</div>
<div class="card">
<h1><b>Plume</b></h1>
<p>Plume is an open source and federated blogging platform that can be interacted with and followed from any social network powered by ActivityPub including Mastodon and others!</p>
<a href="https://plume.nixnet.xyz/"><button class="button">Write!</button></a>
</div>
<div class="card">
<h1><b>wallabag</b></h1>
<p>wallabag is like a self-hosted version of Mozilla's Pocket. You throw it some links and it saves them to read later in a minimal UI, and downloads them to the mobile app if you have it.</p>
<a href="https://wallabag.nixnet.xyz/"><button class="button">Read!</button></a>
</div>
<div class="card">
<h1><b>NixedWiki</b></h1>
<p>NixedWiki is built on BookStack, a simple and easy-to-use platform for organising and storing information. Everything's searchable, it uses the WYSIWYG editor, and much more!</p>
<a href="https://wiki.nixnet.xyz/"><button class="button">Document!</button></a>
</div>
<div class="card">
<h1><b>RSS-Bridge</b></h1>
<p>RSS-Bridge is an application that generates feeds for sites that don't support it. There are 179 bridges from YouTube playlists and channels to new Bandcamp releases by tag and many others!</p>
<a href="https://rss.nixnet.xyz"><button class="button">Subscribe!</button></a>
</div>
<div class="card">
<h1><b>Jabber/XMPP</b></h1>
<p>Jabber/XMPP is a set of open technologies for instant messaging, multi-party chat, and voice/video calls. XMPP stands for the Extensible Messaging and Presence Protocol.</p>
<a href="https://nixnet.xyz/jabber-xmpp/"><button class="button">Register!</button></a>
</div>
<div class="card">
<h1><b>searX</b></h1>
<p>searX is a meta search engine that aggregates results from more than 70 different search engines. Users are neither tracked nor profiled. searX can also be used over Tor for increased anonymity.</p>
<a href="https://searx.nixnet.xyz"><button class="button">Search!</button></a>
</div>
<div class="card">
<h1><b>Mumble</b></h1>
<p>Mumble is an open source, low-latency, high quality voice chat software primarily intended for use while gaming. It's also great for private calls between yourself and others.</p>
<a href="mumble://nixnet.xyz:64738"><button class="button">Chat!</button></a>
</div>
</div>
</div>
<script src="/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="/app.js" charset="utf-8"></script>
</br>

View File

@ -1,28 +0,0 @@
---
layout: page
title: "NixNet"
subtitle: "Your one-man Libre Hosting provider"
description: "A network of websites and services hosted by Amolith available for anyone to use free of charge."
cover: /cover.png
permalink: /test/
priority: 0.9
---
<style>
</style>
<center><p>I host a variety of services that are available for anyone to use free of charge. Below is a list with descriptions of each.</p></center>
</br>
<center><h1><a href="https://status.nixnet.xyz" target="_blank"><u>Status page</u></a> / <a href="https://netdata.nixnet.xyz" target="_blank"><u>Stats page</u></a></h1></center>
</br>
<center>
<form>
<input type="text" autocomplete="off" name="search" placeholder="Search services . . .">
</form>
</center>
</br>
</br>
<div class="flex-wrapper">
</div>
<script src="js/libs/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="js/app.js" charset="utf-8"></script>
</br>