Make everything work again and improve styling
This commit is contained in:
parent
4a2f7e1a20
commit
64f8279886
|
|
@ -3,3 +3,7 @@ bundle.js
|
|||
node_modules
|
||||
elm-stuff
|
||||
tar-packages
|
||||
|
||||
# Vim
|
||||
~*
|
||||
.*.sw*
|
||||
|
|
|
|||
14
README.md
14
README.md
|
|
@ -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.
|
||||
|
||||
## 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:
|
||||
|
||||
|
|
@ -22,3 +32,5 @@ Now, you can use
|
|||
$ npm run build
|
||||
$ 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.
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function home_page(node) {
|
|||
app.ports.pub.subscribe(function(obj) {
|
||||
const string = JSON.stringify(obj);
|
||||
|
||||
const stored_hash = ipfs.add(Buffer.from(string))
|
||||
ipfs.add(Buffer.from(string))
|
||||
.catch(error => alert(error))
|
||||
.then(file => app.ports.new_hash.send(file[0].hash));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -56,10 +56,8 @@ view model =
|
|||
[ input [ type_ "text", placeholder "Name", onInput Name] []
|
||||
, input [ type_ "text", placeholder "Location", onInput Location] []
|
||||
, 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] []
|
||||
]
|
||||
, textarea [ placeholder "Talk about yourself", onInput Bio] []
|
||||
, input [ type_ "submit", value "Publish", onClick Submit] []
|
||||
]
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ view model =
|
|||
]
|
||||
, div [ class "content col-md-4 col-sm-4"]
|
||||
[ h1 [] [ text model.name ]
|
||||
, p [ class "subheader" ] [ text model.location ]
|
||||
, p [ class "subheader" ] [ text ("📍 " ++ model.location) ]
|
||||
, p [ innerHtml model.bio ] []
|
||||
, div [ class "container-fluid" ]
|
||||
[ div [ class "row" ]
|
||||
|
|
|
|||
|
|
@ -3,15 +3,19 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>dbio</title>
|
||||
<link rel="stylesheet" href="https://ipfs.io/ipfs/QmPEJx9Bur2NNDPtBNT5zQ6bBnCkgYtKeNBAWRXx4j5hf2/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="page_home">
|
||||
<div class="jumbotron">
|
||||
<div class="jumbotron-inner">
|
||||
<h1>
|
||||
dbio - decentralized profiles
|
||||
dbio
|
||||
</h1>
|
||||
<p>
|
||||
Instantly publish your profile to IPFS. No server required.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container form">
|
||||
|
|
@ -23,24 +27,31 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="about">
|
||||
<div class="container">
|
||||
<div class="about-inner">
|
||||
<h2>What is dbio?</h2>
|
||||
<p>
|
||||
Dbio is a simple tool, similar to about.me, that you can use to share
|
||||
your bio. Unlike about.me, dbio users don't have to trust a central
|
||||
server: all the content you publish is added to IPFS - the permanet
|
||||
web. You seed your own bio from your own IPFS node.
|
||||
dbio aims to recreate the simplicity of <a href="https://about.me">
|
||||
about.me</a> using IPFS. Simply fill out the form, hit publish, and
|
||||
dbio will create and store a JSON file representing your profile on
|
||||
your IPFS node. You can then view your profile through the website,
|
||||
accessing it from its hash.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
By the way, you can only publish to writeable nodes. Make sure the
|
||||
gateway you're using is writeable!
|
||||
To use this app, your node needs to be writable and have CORS
|
||||
enabled. <a href="https://codeberg.org/njms/dbio/README.md#Using">
|
||||
See here</a> for instructions on how to prepare your node.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<p>© 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,66 +1,88 @@
|
|||
body {
|
||||
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
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 {
|
||||
background-color: #3498db;
|
||||
height: 200px;
|
||||
height: 50vh;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jumbotron h1 {
|
||||
.jumbotron-inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form {
|
||||
padding-top: 40px;
|
||||
|
||||
padding-bottom: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-inner {
|
||||
width: 500px;
|
||||
width: 520px;
|
||||
max-width: 90%;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
form > #elm > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
padding: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
border: none;
|
||||
border-bottom: 1px solid black
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
border-bottom: none;
|
||||
background-color: #3498db;
|
||||
color: #2c3e50;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.two-inputs > input {
|
||||
width: 49%
|
||||
}
|
||||
|
||||
.two-inputs > input:last-child {
|
||||
margin-left: 5px
|
||||
width: auto;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
margin-top: 0.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about {
|
||||
background-color: #ecf0f1;
|
||||
padding-top: 10vh;
|
||||
padding-bottom: 10vh;
|
||||
font-size: 1.5em
|
||||
height: 75vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.about-inner {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.about h2 {
|
||||
font-size: 2em;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 10px;
|
||||
font-size: 1.2em;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
text-align: center;
|
||||
background-color: #34495e;
|
||||
color: #ecf0f1
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="page_view">
|
||||
|
||||
<div class="container-fluid">
|
||||
<div id="elm"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue