From 64f82798865303e8a4512f98728299277af96892 Mon Sep 17 00:00:00 2001 From: natjms Date: Wed, 25 May 2022 16:36:32 -0700 Subject: [PATCH] Make everything work again and improve styling --- .gitignore | 4 +++ README.md | 14 +++++++++- js/index.js | 2 +- src/Publish.elm | 6 ++--- src/Retrieve.elm | 2 +- www/index.html | 35 ++++++++++++++++--------- www/styles.css | 66 ++++++++++++++++++++++++++++++++---------------- www/u/index.html | 1 - 8 files changed, 88 insertions(+), 42 deletions(-) diff --git a/.gitignore b/.gitignore index 4a68178..a80ab32 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,7 @@ bundle.js node_modules elm-stuff tar-packages + +# Vim +~* +.*.sw* diff --git a/README.md b/README.md index e5f597f..df41774 100644 --- a/README.md +++ b/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. diff --git a/js/index.js b/js/index.js index 7f650c2..3260f91 100644 --- a/js/index.js +++ b/js/index.js @@ -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)); }); diff --git a/src/Publish.elm b/src/Publish.elm index 124d542..d9e9666 100644 --- a/src/Publish.elm +++ b/src/Publish.elm @@ -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 "Education", onInput Education] [] - ] + , 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] [] ] diff --git a/src/Retrieve.elm b/src/Retrieve.elm index 3b2f359..a8016cc 100644 --- a/src/Retrieve.elm +++ b/src/Retrieve.elm @@ -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" ] diff --git a/www/index.html b/www/index.html index 6023ee8..05b20b9 100644 --- a/www/index.html +++ b/www/index.html @@ -3,15 +3,19 @@ dbio -
-

- dbio - decentralized profiles -

+
+

+ dbio +

+

+ Instantly publish your profile to IPFS. No server required. +

+
@@ -23,24 +27,31 @@
-
+

What is dbio?

- 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 + about.me 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.

- 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. + See here for instructions on how to prepare your node.

-

© 2018 natjms

+

+ Made with ❤️ by njms. All code shared + under the + AGPL + (Source). +

diff --git a/www/styles.css b/www/styles.css index 7ff6d3b..cecda6e 100644 --- a/www/styles.css +++ b/www/styles.css @@ -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 diff --git a/www/u/index.html b/www/u/index.html index fd38e71..c1d79c3 100644 --- a/www/u/index.html +++ b/www/u/index.html @@ -8,7 +8,6 @@
-