cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 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", "type": "tildefriends-app",
"emoji": "👋", "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'))); 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> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css" /> <link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="fontawesome.min.css" /> <link rel="stylesheet" href="fontawesome.min.css">
<link rel="stylesheet" href="regular.min.css" /> <link rel="stylesheet" href="regular.min.css">
<link rel="stylesheet" href="solid.min.css" /> <link rel="stylesheet" href="solid.min.css">
<link rel="stylesheet" href="brands.min.css" /> <link rel="stylesheet" href="brands.min.css">
<style> <style>
body, body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
h1, body {font-size: 16px;}
h2, img {margin-bottom: -8px;}
h3, .mySlides {display: none;}
h4,
h5 {
font-family: 'Poppins', sans-serif;
}
body {
font-size: 16px;
}
img {
margin-bottom: -8px;
}
.mySlides {
display: none;
}
</style> </style>
<base target="_top" /> <base target="_top">
</head> </head>
<body class="w3-content w3-black" style="max-width: 1500px"> <body class="w3-content w3-black" style="max-width:1500px;">
<!-- The App Section --> <!-- The App Section -->
<div class="w3-padding-64 w3-white"> <div class="w3-padding-64 w3-white">
<div class="w3-row-padding"> <div class="w3-row-padding">
@ -38,64 +25,70 @@
<h1 class="w3-jumbo"> <h1 class="w3-jumbo">
<b>😎 Tilde Friends</b> <b>😎 Tilde Friends</b>
</h1> </h1>
<h1 class="w3-xxlarge w3-text-green"> <h1 class="w3-xxlarge w3-text-green"><b>Make apps and friends from the comfort of your web browser.</b></h1>
<b>Make apps and friends from the comfort of your web browser.</b> <p>Tilde Friends is a platform for building, running, and sharing web applications.</p>
</h1> <p>Available for lots of devices:
<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-linux w3-xlarge"></i>
<i class="fa-brands fa-android w3-xlarge"></i> <i class="fa-brands fa-android w3-xlarge"></i>
<i class="fa-brands fa-apple w3-xlarge"></i> <i class="fa-brands fa-apple w3-xlarge"></i>
<i class="fa fa-mobile-screen w3-xlarge"></i> <i class="fa fa-mobile-screen w3-xlarge"></i>
<i class="fa-brands fa-windows w3-xlarge"></i> <i class="fa-brands fa-windows w3-xlarge"></i>
</p> </p>
<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>
class="w3-button w3-black w3-padding-large" <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>
href="https://www.tildefriends.net/~cory/releases/" <a class="w3-button w3-black w3-padding-large" href="https://dev.tildefriends.net/"><i class="fa fa-mug-hot"></i> Code</a>
><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
>
</div> </div>
<div class="w3-col l4 m6"> <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> </div>
</div> </div>
<!-- SSB Section --> <!-- SSB Section -->
<div class="w3-light-grey"> <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"> <div class="w3-col l4 m6 s4">
<a href="https://scuttlebutt.nz/" <a href="https://scuttlebutt.nz/"><img class="w3-image w3-round-large" src="ssb.png" alt="Secure Scuttlebutt"></a>
><img
class="w3-image w3-round-large"
src="ssb.png"
alt="Secure Scuttlebutt"
/></a>
</div> </div>
<div class="w3-col l8 m6" style="height: auto"> <div class="w3-col l8 m6" style="height: auto">
<h1 class="w3-jumbo"><b>Built for Sharing</b></h1> <h1 class="w3-jumbo"><b>Built for Sharing</b></h1>
<p> <p>
Tilde Friends participates in the Tilde Friends participates in the <a href="https://scuttlebutt.nz/">Secure Scuttlebutt</a> distributed social network.
<a href="https://scuttlebutt.nz/">Secure Scuttlebutt</a> distributed
social network.
</p> </p>
<p> <p>
Share apps with friends. Discover new apps made by enemies. Post Share apps with friends. Discover new apps made by enemies. Post pictures of your coffee. Or just lurk.
pictures of your coffee. Or just lurk.
</p> </p>
<p> <p>
The social network integration provides tools for connecting with The social network integration provides tools for connecting with other people world-wide
other people world-wide while still allowing apps and everything to while still allowing apps and everything to operate offline.
operate offline.
</p> </p>
</div> </div>
</div> </div>
@ -106,16 +99,14 @@
<div class="w3-row-padding"> <div class="w3-row-padding">
<div class="w3-col l8 m6"> <div class="w3-col l8 m6">
<h1 class="w3-jumbo"><b>Edit Anything</b></h1> <h1 class="w3-jumbo"><b>Edit Anything</b></h1>
<i <i class="fa fa-pen-to-square w3-left w3-jumbo w3-text-gray" style="padding: 32px"></i>
class="fa fa-pen-to-square w3-left w3-jumbo w3-text-gray"
style="padding: 32px"
></i>
<p> <p>
See that <code><b>edit</b></code> link near the top left corner of See that <code><b>edit</b></code> link near the top left corner of this page? It's there for
this page? It's there for every Tilde Friends app, so you can modify every Tilde Friends app, so you can modify and see your changes right away.
and see your changes right away. </p>
<p>
It's kind of like a wiki, but for code!
</p> </p>
<p>It's kind of like a wiki, but for code!</p>
</div> </div>
</div> </div>
</div> </div>
@ -124,22 +115,16 @@
<div class="w3-padding-64 w3-grey"> <div class="w3-padding-64 w3-grey">
<div class="w3-row-padding"> <div class="w3-row-padding">
<div class="w3-col"> <div class="w3-col">
<h1 class="w3-jumbo" style="text-align: right"> <h1 class="w3-jumbo" style="text-align: right"><b>Sandbox Security</b></h1>
<b>Sandbox Security</b> <i class="fa fa-road-barrier w3-right w3-jumbo w3-text-yellow" style="padding: 32px"></i>
</h1>
<i
class="fa fa-road-barrier w3-right w3-jumbo w3-text-yellow"
style="padding: 32px"
></i>
<p> <p>
Tilde Friends tries to make sure apps can be trusted using similar Tilde Friends tries to make sure apps can be trusted using similar techniques to how web
techniques to how web browsers and operating systems do it. browsers and operating systems do it.
</p> </p>
<p> <p>
This is all a work in progress, and it varies by platform, so don't This is all a work in progress, and it varies by platform, so don't give it all your
give it all your innermost secrets yet, but do kick its tires and innermost secrets yet, but do kick its tires and
<a href="mailto:cory@tildefriends.net">share</a> any surprises you <a href="mailto:cory@tildefriends.net">share</a> any surprises you find.
find.
</p> </p>
</div> </div>
</div> </div>
@ -149,16 +134,10 @@
<div class="w3-container w3-padding-64 w3-light-grey w3-center"> <div class="w3-container w3-padding-64 w3-light-grey w3-center">
<h1 class="w3-jumbo"><b>Trusted Technology</b></h1> <h1 class="w3-jumbo"><b>Trusted Technology</b></h1>
<p>Tilde Friends is built using boring, trusted tech.</p> <p>Tilde Friends is built using boring, trusted tech.</p>
<p> <p>Though of course for building Tilde Friends apps, you are free to use whatever fits.</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"> <div class="w3-row" style="margin-top:64px">
<a <a href="https://en.wikipedia.org/wiki/C_(programming_language)" class="w3-col s3">
href="https://en.wikipedia.org/wiki/C_(programming_language)"
class="w3-col s3"
>
<i class="fa fa-c w3-text-blue w3-jumbo"></i> <i class="fa fa-c w3-text-blue w3-jumbo"></i>
<p>C</p> <p>C</p>
</a> </a>
@ -176,7 +155,7 @@
</a> </a>
</div> </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"> <a href="https://www.zlib.net/" class="w3-col s3">
<i class="fa fa-file-zipper w3-text-cyan w3-jumbo"></i> <i class="fa fa-file-zipper w3-text-cyan w3-jumbo"></i>
<p>zlib</p> <p>zlib</p>
@ -187,19 +166,16 @@
</a> </a>
<a href="https://www.openssl.org/" class="w3-col s3"> <a href="https://www.openssl.org/" class="w3-col s3">
<i class="fa fa-shield-halved w3-text-green w3-jumbo"></i> <i class="fa fa-shield-halved w3-text-green w3-jumbo"></i>
<p>OpenSSL</p> <p>OpenSSL </p>
</a> </a>
<a <a href="https://github.com/ianlancetaylor/libbacktrace" class="w3-col s3">
href="https://github.com/ianlancetaylor/libbacktrace"
class="w3-col s3"
>
<i class="fa fa-burst w3-text-pink w3-jumbo"></i> <i class="fa fa-burst w3-text-pink w3-jumbo"></i>
<p>libbacktrace</p> <p>libbacktrace</p>
</a> </a>
</div> </div>
<div class="w3-row" style="margin-top: 64px"> <div class="w3-row" style="margin-top:64px">
<a href="https://codemirror.net/5/" class="w3-col s3"> <a href="https://codemirror.net/docs/changelog/" class="w3-col s3">
<i class="fa fa-keyboard w3-text-indigo w3-jumbo"></i> <i class="fa fa-keyboard w3-text-indigo w3-jumbo"></i>
<p>CodeMirror</p> <p>CodeMirror</p>
</a> </a>
@ -220,10 +196,7 @@
<!-- Footer --> <!-- Footer -->
<footer class="w3-container w3-padding-32 w3-blue-grey w3-center w3-xlarge"> <footer class="w3-container w3-padding-32 w3-blue-grey w3-center w3-xlarge">
<p class="w3-medium"> <p class="w3-medium">This page and Tilde Friends itself was made by Cory mostly in coffee shops and a local pizza place.</p>
This page and Tilde Friends itself was made by Cory mostly in coffee
shops and a local pizza place.
</p>
</footer> </footer>
</body> </body>
</html> </html>