cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions Releases 26 Wiki Activity

Welcome changes. Added a first steps blurb.

Browse Source
This commit is contained in:
Cory McWilliams 2024-04-12 02:32:21 +01:00
parent 6a7ecb0d4a
commit 49129ee6dd
3 changed files with 80 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/welcome.json
View File

@ -1,5 +1,5 @@
{
"type": "tildefriends-app",
"emoji": "👋",
"previous": "&zFISmRDAv+SXFonfZ9/sHNhrmMe+poTU22gwZzuSkT4=.sha256"
"previous": "&W5aJp2DgOW5rQ0AOIC9Ut3DpsahPrO6PjkJ1PQbNRdM=.sha256"
}

2
apps/welcome/app.js
View File

@ -2,4 +2,4 @@ async function main() {
await app.setDocument(utf8Decode(getFile('index.html')));
}
main();
main();

183
apps/welcome/index.html
View File

@ -1,36 +1,23 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="w3.css" />
<link rel="stylesheet" href="fontawesome.min.css" />
<link rel="stylesheet" href="regular.min.css" />
<link rel="stylesheet" href="solid.min.css" />
<link rel="stylesheet" href="brands.min.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="fontawesome.min.css">
<link rel="stylesheet" href="regular.min.css">
<link rel="stylesheet" href="solid.min.css">
<link rel="stylesheet" href="brands.min.css">
<style>
body,
h1,
h2,
h3,
h4,
h5 {
font-family: 'Poppins', sans-serif;
}
body {
font-size: 16px;
}
img {
margin-bottom: -8px;
}
.mySlides {
display: none;
}
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body {font-size: 16px;}
img {margin-bottom: -8px;}
.mySlides {display: none;}
</style>
<base target="_top" />
<base target="_top">
</head>
<body class="w3-content w3-black" style="max-width: 1500px">
<body class="w3-content w3-black" style="max-width:1500px;">
<!-- The App Section -->
<div class="w3-padding-64 w3-white">
<div class="w3-row-padding">
@ -38,64 +25,70 @@
<h1 class="w3-jumbo">
<b>😎 Tilde Friends</b>
</h1>
<h1 class="w3-xxlarge w3-text-green">
<b>Make apps and friends from the comfort of your web browser.</b>
</h1>
<p>
Tilde Friends is a platform for building, running, and sharing web
applications.
</p>
<p>
Available for lots of devices:
<h1 class="w3-xxlarge w3-text-green"><b>Make apps and friends from the comfort of your web browser.</b></h1>
<p>Tilde Friends is a platform for building, running, and sharing web applications.</p>
<p>Available for lots of devices:
<i class="fa-brands fa-linux w3-xlarge"></i>
<i class="fa-brands fa-android w3-xlarge"></i>
<i class="fa-brands fa-apple w3-xlarge"></i>
<i class="fa fa-mobile-screen w3-xlarge"></i>
<i class="fa-brands fa-windows w3-xlarge"></i>
</p>
<a
class="w3-button w3-black w3-padding-large"
href="https://www.tildefriends.net/~cory/releases/"
><i class="fa fa-download"></i> Download</a
>
<a
class="w3-button w3-black w3-padding-large"
href="https://www.tildefriends.net/~cory/apps/"
><i class="fa fa-link"></i> Try It</a
>
<a class="w3-button w3-black w3-padding-large" href="https://dev.tildefriends.net/cory/tildefriends/releases"><i class="fa fa-download"></i> Download</a>
<a class="w3-button w3-black w3-padding-large" href="https://www.tildefriends.net/~cory/apps/"><i class="fa fa-link"></i> Try It</a>
<a class="w3-button w3-black w3-padding-large" href="https://dev.tildefriends.net/"><i class="fa fa-mug-hot"></i> Code</a>
</div>
<div class="w3-col l4 m6">
<img src="tildefriends.png" class="w3-image w3-right w3-hide-small" />
<img src="tildefriends.png" class="w3-image w3-right w3-hide-small">
</div>
</div>
</div>
<!-- Getting Starting Section -->
<div class="w3-indigo w3-center">
<div class="w3-row-padding w3-padding-64 ">
<div class="w3-jumbo"><i class="fa fa-rocket"></i> <b>Getting Started</b></div>
<div>
<h2>First-time user checklist:</h2>
<ol type="1" style="text-align: left">
<li><a href="https://dev.tildefriends.net/cory/tildefriends/releases">Download</a>
Tilde Friends and run your own instance, or use
<a href="https://www.tildefriends.net/">https://www.tildefriends.net/</a>.</li>
<li>Create an account to identify yourself with that instance by username and password.</li>
<li>Create an SSB identity in the <b>ssb</b> app. This will generate a keypair used to
identify yourself to other users and sign your messages so that they can be verified as from you.</li>
<li>Describe yourself in your profile in the <b>ssb</b> app. Give yourself a name and an avatar if you like.</li>
<li>Connect to others. You will automatically discover peers on the
same instance and same network if there are any. Or use
<a href="https://github.com/staltz/ssb-room/blob/master/FAQ.md">rooms</a>
and pubs to reach more distant users.
<a href="https://www.tildefriends.net/~cory/room/">tildefriends.net itself</a>
operates as a room, so you can connect and see who else is online and establish
a connection.</li>
<li>Follow people to grow your network.</li>
<li>Use the <b>edit</b> link at the top of any page to start modifying and making apps.</li>
</ol>
</div>
</div>
</div>
<!-- SSB Section -->
<div class="w3-light-grey">
<div class="w3-row-padding w3-padding-64">
<div class="w3-row-padding w3-padding-64 ">
<div class="w3-col l4 m6 s4">
<a href="https://scuttlebutt.nz/"
><img
class="w3-image w3-round-large"
src="ssb.png"
alt="Secure Scuttlebutt"
/></a>
<a href="https://scuttlebutt.nz/"><img class="w3-image w3-round-large" src="ssb.png" alt="Secure Scuttlebutt"></a>
</div>
<div class="w3-col l8 m6" style="height: auto">
<h1 class="w3-jumbo"><b>Built for Sharing</b></h1>
<p>
Tilde Friends participates in the
<a href="https://scuttlebutt.nz/">Secure Scuttlebutt</a> distributed
social network.
Tilde Friends participates in the <a href="https://scuttlebutt.nz/">Secure Scuttlebutt</a> distributed social network.
</p>
<p>
Share apps with friends. Discover new apps made by enemies. Post
pictures of your coffee. Or just lurk.
Share apps with friends. Discover new apps made by enemies. Post pictures of your coffee. Or just lurk.
</p>
<p>
The social network integration provides tools for connecting with
other people world-wide while still allowing apps and everything to
operate offline.
The social network integration provides tools for connecting with other people world-wide
while still allowing apps and everything to operate offline.
</p>
</div>
</div>
@ -106,16 +99,14 @@
<div class="w3-row-padding">
<div class="w3-col l8 m6">
<h1 class="w3-jumbo"><b>Edit Anything</b></h1>
<i
class="fa fa-pen-to-square w3-left w3-jumbo w3-text-gray"
style="padding: 32px"
></i>
<i class="fa fa-pen-to-square w3-left w3-jumbo w3-text-gray" style="padding: 32px"></i>
<p>
See that <code><b>edit</b></code> link near the top left corner of
this page? It's there for every Tilde Friends app, so you can modify
and see your changes right away.
See that <code><b>edit</b></code> link near the top left corner of this page? It's there for
every Tilde Friends app, so you can modify and see your changes right away.
</p>
<p>
It's kind of like a wiki, but for code!
</p>
<p>It's kind of like a wiki, but for code!</p>
</div>
</div>
</div>
@ -124,22 +115,16 @@
<div class="w3-padding-64 w3-grey">
<div class="w3-row-padding">
<div class="w3-col">
<h1 class="w3-jumbo" style="text-align: right">
<b>Sandbox Security</b>
</h1>
<i
class="fa fa-road-barrier w3-right w3-jumbo w3-text-yellow"
style="padding: 32px"
></i>
<h1 class="w3-jumbo" style="text-align: right"><b>Sandbox Security</b></h1>
<i class="fa fa-road-barrier w3-right w3-jumbo w3-text-yellow" style="padding: 32px"></i>
<p>
Tilde Friends tries to make sure apps can be trusted using similar
techniques to how web browsers and operating systems do it.
Tilde Friends tries to make sure apps can be trusted using similar techniques to how web
browsers and operating systems do it.
</p>
<p>
This is all a work in progress, and it varies by platform, so don't
give it all your innermost secrets yet, but do kick its tires and
<a href="mailto:cory@tildefriends.net">share</a> any surprises you
find.
This is all a work in progress, and it varies by platform, so don't give it all your
innermost secrets yet, but do kick its tires and
<a href="mailto:cory@tildefriends.net">share</a> any surprises you find.
</p>
</div>
</div>
@ -149,16 +134,10 @@
<div class="w3-container w3-padding-64 w3-light-grey w3-center">
<h1 class="w3-jumbo"><b>Trusted Technology</b></h1>
<p>Tilde Friends is built using boring, trusted tech.</p>
<p>
Though of course for building Tilde Friends apps, you are free to use
whatever fits.
</p>
<p>Though of course for building Tilde Friends apps, you are free to use whatever fits.</p>
<div class="w3-row" style="margin-top: 64px">
<a
href="https://en.wikipedia.org/wiki/C_(programming_language)"
class="w3-col s3"
>
<div class="w3-row" style="margin-top:64px">
<a href="https://en.wikipedia.org/wiki/C_(programming_language)" class="w3-col s3">
<i class="fa fa-c w3-text-blue w3-jumbo"></i>
<p>C</p>
</a>
@ -176,7 +155,7 @@
</a>
</div>
<div class="w3-row" style="margin-top: 64px">
<div class="w3-row" style="margin-top:64px">
<a href="https://www.zlib.net/" class="w3-col s3">
<i class="fa fa-file-zipper w3-text-cyan w3-jumbo"></i>
<p>zlib</p>
@ -187,19 +166,16 @@
</a>
<a href="https://www.openssl.org/" class="w3-col s3">
<i class="fa fa-shield-halved w3-text-green w3-jumbo"></i>
<p>OpenSSL</p>
<p>OpenSSL </p>
</a>
<a
href="https://github.com/ianlancetaylor/libbacktrace"
class="w3-col s3"
>
<a href="https://github.com/ianlancetaylor/libbacktrace" class="w3-col s3">
<i class="fa fa-burst w3-text-pink w3-jumbo"></i>
<p>libbacktrace</p>
</a>
</div>
<div class="w3-row" style="margin-top: 64px">
<a href="https://codemirror.net/5/" class="w3-col s3">
<div class="w3-row" style="margin-top:64px">
<a href="https://codemirror.net/docs/changelog/" class="w3-col s3">
<i class="fa fa-keyboard w3-text-indigo w3-jumbo"></i>
<p>CodeMirror</p>
</a>
@ -220,10 +196,7 @@
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-blue-grey w3-center w3-xlarge">
<p class="w3-medium">
This page and Tilde Friends itself was made by Cory mostly in coffee
shops and a local pizza place.
</p>
<p class="w3-medium">This page and Tilde Friends itself was made by Cory mostly in coffee shops and a local pizza place.</p>
</footer>
</body>
</html>
</html>