nat
/
dbio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make everything work again and improve styling

This commit is contained in:
Nat 2022-05-25 16:36:32 -07:00
parent 4a2f7e1a20
commit 64f8279886
8 changed files with 88 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -3,3 +3,7 @@ bundle.js
node_modules node_modules
elm-stuff elm-stuff
tar-packages tar-packages
# Vim
~*
.*.sw*

14
README.md
View File

@ -2,7 +2,17 @@
dbio is a web application that allows you to very easily publish an [about.me](https://about.me)-style web page to IPFS. dbio is a web application that allows you to very easily publish an [about.me](https://about.me)-style web page to IPFS.
## Running the app ## Using
To use this app, your node needs to be writable with CORS enabled. You can do
that by running:
```
$ ipfs config --json Gateway.Writable true
$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]'
$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "POST", "GET"]'
```
## Running
First, like all good Node.JS projects, you've got to run: First, like all good Node.JS projects, you've got to run:
@ -22,3 +32,5 @@ Now, you can use
$ npm run build $ npm run build
$ npm start $ npm start
``` ```
All the files are accessed using relative links, so you can host the entire app on your IPFS node by pinning the `www` directory, or you can host it wherever you like.

2
js/index.js
View File

@ -22,7 +22,7 @@ function home_page(node) {
app.ports.pub.subscribe(function(obj) { app.ports.pub.subscribe(function(obj) {
const string = JSON.stringify(obj); const string = JSON.stringify(obj);
const stored_hash = ipfs.add(Buffer.from(string)) ipfs.add(Buffer.from(string))
.catch(error => alert(error)) .catch(error => alert(error))
.then(file => app.ports.new_hash.send(file[0].hash)); .then(file => app.ports.new_hash.send(file[0].hash));
}); });

4
src/Publish.elm
View File

@ -56,10 +56,8 @@ view model =
[ input [ type_ "text", placeholder "Name", onInput Name] [] [ input [ type_ "text", placeholder "Name", onInput Name] []
, input [ type_ "text", placeholder "Location", onInput Location] [] , input [ type_ "text", placeholder "Location", onInput Location] []
, input [ type_ "text", placeholder "IPFS image hash", onInput Image] [] , input [ type_ "text", placeholder "IPFS image hash", onInput Image] []
, div [ class "two-inputs" ] , input [ type_ "text", placeholder "Work", onInput Work] []
[ input [ type_ "text", placeholder "Work", onInput Work] []
, input [ type_ "text", placeholder "Education", onInput Education] [] , input [ type_ "text", placeholder "Education", onInput Education] []
]
, textarea [ placeholder "Talk about yourself", onInput Bio] [] , textarea [ placeholder "Talk about yourself", onInput Bio] []
, input [ type_ "submit", value "Publish", onClick Submit] [] , input [ type_ "submit", value "Publish", onClick Submit] []
] ]

2
src/Retrieve.elm
View File

@ -55,7 +55,7 @@ view model =
] ]
, div [ class "content col-md-4 col-sm-4"] , div [ class "content col-md-4 col-sm-4"]
[ h1 [] [ text model.name ] [ h1 [] [ text model.name ]
, p [ class "subheader" ] [ text model.location ] , p [ class "subheader" ] [ text ("📍 " ++ model.location) ]
, p [ innerHtml model.bio ] [] , p [ innerHtml model.bio ] []
, div [ class "container-fluid" ] , div [ class "container-fluid" ]
[ div [ class "row" ] [ div [ class "row" ]

31
www/index.html
View File

@ -3,15 +3,19 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>dbio</title> <title>dbio</title>
<link rel="stylesheet" href="https://ipfs.io/ipfs/QmPEJx9Bur2NNDPtBNT5zQ6bBnCkgYtKeNBAWRXx4j5hf2/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<div id="page_home"> <div id="page_home">
<div class="jumbotron"> <div class="jumbotron">
<div class="jumbotron-inner">
<h1> <h1>
dbio - decentralized profiles dbio
</h1> </h1>
<p>
Instantly publish your profile to IPFS. No server required.
</p>
</div>
</div> </div>
<div class="container form"> <div class="container form">
@ -23,24 +27,31 @@
</div> </div>
</div> </div>
<div class="about"> <div class="about">
<div class="container"> <div class="about-inner">
<h2>What is dbio?</h2> <h2>What is dbio?</h2>
<p> <p>
Dbio is a simple tool, similar to about.me, that you can use to share dbio aims to recreate the simplicity of <a href="https://about.me">
your bio. Unlike about.me, dbio users don't have to trust a central about.me</a> using IPFS. Simply fill out the form, hit publish, and
server: all the content you publish is added to IPFS - the permanet dbio will create and store a JSON file representing your profile on
web. You seed your own bio from your own IPFS node. your IPFS node. You can then view your profile through the website,
accessing it from its hash.
</p> </p>
<p> <p>
By the way, you can only publish to writeable nodes. Make sure the To use this app, your node needs to be writable and have CORS
gateway you're using is writeable! enabled. <a href="https://codeberg.org/njms/dbio/README.md#Using">
See here</a> for instructions on how to prepare your node.
</p> </p>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer">
<div class="container"> <div class="container">
<p>&#169; 2018 natjms</p> <p>
Made with ❤️ by <a href="https://njms.ca">njms</a>. All code shared
under the
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPL</a>
(<a href="https://codeberg.org/njms/dbio">Source</a>).
</p>
</div> </div>
</div> </div>

66
www/styles.css
View File

@ -1,66 +1,88 @@
body { body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #2c3e50; color: #2c3e50;
margin: 0;
} }
h1, h2, h3, h4, h5, h6 {
font-family: "Lucida Console", Monaco, monospace;
}
a { color: #3498db; text-decoration: none; }
a:hover { color: #3498db; text-decoration: underline; }
.jumbotron { .jumbotron {
background-color: #3498db; background-color: #3498db;
height: 200px; height: 50vh;
padding: 20px; padding: 20px;
display: flex;
justify-content: center;
align-items: center;
} }
.jumbotron h1 { .jumbotron-inner {
text-align: center; text-align: center;
} }
.form { .form {
padding-top: 40px; padding-top: 40px;
padding-bottom: 60px; padding-bottom: 60px;
display: flex;
align-items: center;
justify-content: center;
} }
.form-inner { .form-inner {
width: 500px; width: 520px;
max-width: 90%; max-width: 90%;
margin: 0 auto }
form > #elm > div {
display: flex;
flex-direction: column;
align-items: center;
} }
input, textarea { input, textarea {
width: 100%; width: 100%;
padding: 10px; padding: 1em;
margin-bottom: 0.5em;
border: none; border: none;
border-bottom: 1px solid black border-bottom: 1px solid black;
} }
input[type=submit] { input[type=submit] {
border-bottom: none; border-bottom: none;
background-color: #3498db; background-color: #3498db;
color: #2c3e50; color: #2c3e50;
font-weight: bold width: auto;
} padding-left: 2em;
padding-right: 2em;
.two-inputs > input { margin-top: 0.5em;
width: 49% font-weight: bold;
}
.two-inputs > input:last-child {
margin-left: 5px
} }
.about { .about {
background-color: #ecf0f1; background-color: #ecf0f1;
padding-top: 10vh; height: 75vh;
padding-bottom: 10vh; display: flex;
font-size: 1.5em justify-content: center;
align-items: center;
padding-left: 2em;
padding-right: 2em;
}
.about-inner {
width: 75%;
} }
.about h2 { .about h2 {
font-size: 2em;
line-height: 2em; line-height: 2em;
} }
.footer { .footer {
padding-top: 10px; padding-top: 1em;
font-size: 1.2em; padding-bottom: 1em;
text-align: center; text-align: center;
background-color: #34495e; background-color: #34495e;
color: #ecf0f1 color: #ecf0f1

1
www/u/index.html
View File

@ -8,7 +8,6 @@
</head> </head>
<body> <body>
<div id="page_view"> <div id="page_view">
<div class="container-fluid"> <div class="container-fluid">
<div id="elm"></div> <div id="elm"></div>
</div> </div>