diff --git a/README.md b/README.md
index 4a9363faf4fc93444aba297adf909e108065a915..d13f3d64b15656668f6685b750a9bb8f2e6682fa 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1 @@
-# vue3
-
-## Project setup
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+# nodenogg.in (beta)
diff --git a/package.json b/package.json
index f6a9f27fac78778a609f1b067046a51905df502c..bb676b98495414037f910f54d92b1e075d6291b8 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "name": "vue3",
+ "name": "nodenogg.in",
"version": "0.1.0",
"private": true,
"scripts": {
diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..c93e47241c4a33a8f9f30eceacbc3a7df19285f4 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 3e5a13962197105f2078d2a224cc57dfa09b4893..fe66dc2265edb03471cddf035c3cebba5093037a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,52 @@
<!DOCTYPE html>
-<html lang="">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title><%= htmlWebpackPlugin.options.title %></title>
- </head>
- <body>
- <noscript>
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
- </noscript>
- <div id="app"></div>
- <!-- built files will be auto injected -->
- </body>
-</html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+
+ <!-- Open Graph -->
+ <meta property="og:image" content="https://alpha.nodenogg.in/files/logo_nt.png" />
+ <meta property="og:image:width" content="216" />
+ <meta property="og:image:height" content="226" />
+ <meta property="og:image:type" content="image/png" />
+ <meta property="og:title" content="nodenogg.in - BETA build" />
+ <meta property="og:description"
+ content="nodenogg.in is a Free Open Source Software (FOSS) project that empowers communities of practice to build and create knowledge by bridging the physical and digital studio spaces. designers and makers gather and spatially arrange materials, links and thoughts within the shared digital platform." />
+ <meta property="og:type" content="website" />
+ <meta property="og:url" content="https://beta.nodenogg.in" />
+
+ <!-- Twitter -->
+ <meta name="twitter:card" content="summary" />
+ <meta property="twitter:image" content="https://alpha.nodenogg.in/files/logo_nt.jpg" />
+ <meta property="twitter:image:width" content="216" />
+ <meta property="twitter:image:height" content="226" />
+ <meta property="twitter:image:type" content="image/png" />
+ <meta property="twitter:title" content="nodenogg.in - BETA build" />
+ <meta property="twitter:description"
+ content="nodenogg.in is a Free Open Source Software (FOSS) project that empowers communities of practice to build and create knowledge by bridging the physical and digital studio spaces. designers and makers gather and spatially arrange materials, links and thoughts within the shared digital platform." />
+
+ <meta property="twitter:url" content="https://beta.nodenogg.in" />
+ <meta property="twitter:site" content="@nodenoggin" />
+ <meta property="twitter:creator" content="@nodenoggin" />
+
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+ <link rel="apple-touch-icon" href="<%= BASE_URL %>favicon.ico">
+
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title>
+ <%= htmlWebpackPlugin.options.title %>
+ </title>
+</head>
+
+<body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+ Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 6a65bcc1751df8669f08f543a3831f2065dbd7aa..ac4fc3f8ee4935fd0f45ff4fe879630c81ac3604 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,66 @@
<template>
<div id="nav">
- <router-link to="/">Home</router-link> |
- <router-link to="/about">About</router-link>
+ <router-link to="/">Start</router-link> |
+ <router-link to="/credits">Credits</router-link>
</div>
<router-view />
</template>
<style>
+@import url("https://use.typekit.net/mwd7zcu.css");
+
#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
+ font-family: source-code-pro, monospace;
+ font-weight: 400;
+ font-size: 18px;
+ font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
-}
-
-#nav {
- padding: 30px;
}
#nav a {
- font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
- color: #42b983;
+ color: #1cc469;
+}
+
+h1 {
+ margin: 0.2em 0 0 0;
+ padding: 0em;
+ font-size: 6.2em;
+ font-family: houschka-rounded, sans-serif;
+ font-weight: 700;
+ font-style: normal;
+ color: black;
+}
+
+h2 {
+ margin: 0em 0em 1em 0.3em;
+ font-size: 1.1em;
+ font-family: houschka-rounded, sans-serif;
+ font-weight: 300;
+ font-style: normal;
+ color: #707070;
+}
+
+.long {
+ word-wrap: break-word;
+ width: 305px;
+ line-height: 1em;
+}
+
+.highlight {
+ color: #1cc469;
+}
+
+@media only screen and (min-width: 630px) {
+ h2 {
+ margin-top: -1em;
+ }
+ .long {
+ word-wrap: normal;
+ }
}
</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1bafda5914ac59909efbfa2cf2d32206d0ca1f67..0000000000000000000000000000000000000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <p>
- For a guide and recipes on how to configure / customize this project,<br />
- check out the
- <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
- >vue-cli documentation</a
- >.
- </p>
- <h3>Installed CLI Plugins</h3>
- <ul>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
- target="_blank"
- rel="noopener"
- >babel</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
- target="_blank"
- rel="noopener"
- >router</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
- target="_blank"
- rel="noopener"
- >vuex</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
- target="_blank"
- rel="noopener"
- >eslint</a
- >
- </li>
- </ul>
- <h3>Essential Links</h3>
- <ul>
- <li>
- <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
- </li>
- <li>
- <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
- >Forum</a
- >
- </li>
- <li>
- <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
- >Community Chat</a
- >
- </li>
- <li>
- <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
- >Twitter</a
- >
- </li>
- <li>
- <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
- </li>
- </ul>
- <h3>Ecosystem</h3>
- <ul>
- <li>
- <a href="https://router.vuejs.org" target="_blank" rel="noopener"
- >vue-router</a
- >
- </li>
- <li>
- <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-devtools#vue-devtools"
- target="_blank"
- rel="noopener"
- >vue-devtools</a
- >
- </li>
- <li>
- <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
- >vue-loader</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/awesome-vue"
- target="_blank"
- rel="noopener"
- >awesome-vue</a
- >
- </li>
- </ul>
- </div>
-</template>
-
-<script>
-export default {
- name: "HelloWorld",
- props: {
- msg: String
- }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
- margin: 40px 0 0;
-}
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
-}
-</style>
diff --git a/src/components/JoinMicrocosm.vue b/src/components/JoinMicrocosm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bfca06c8721323caeb1e2e661d0d2adf07310d38
--- /dev/null
+++ b/src/components/JoinMicrocosm.vue
@@ -0,0 +1,109 @@
+<template>
+ <form>
+ <span class="arrow">โฌโฌ</span>
+ <h1>What shall we call you ? ๐ฉโ๐</h1>
+ <p>
+ First we need to connect this device to your ideas. This name is what
+ allows you to create and edit your nodes and this name can be anything you
+ like, this name is always anonymous.
+ </p>
+ <div class="breaker-one">
+ <label for="name">Name:</label>
+ <input
+ type="text"
+ id="name"
+ autocomplete="name"
+ placeholder="type name here!"
+ autocorrect="off"
+ autocapitalize="none"
+ />
+ <button type="button">Store</button>
+ </div>
+ <h2>Next start or join a <span class="long">microcosm !</span> ๐</h2>
+
+ <p>
+ Start your own microcosm to store your ideas and ask others to join you,
+ either tell them the microcosm name or share the URL and add the ending;
+ /microcosm/<strong>nameofyourmicrocosm</strong>
+ </p>
+ <div class="breaker-two">
+ <label for="microcosm">Microcosm:</label>
+ <input
+ type="text"
+ id="microcosm"
+ autocomplete="microcosm"
+ placeholder="type microcosm name here!"
+ autocorrect="off"
+ autocapitalize="none"
+ />
+ <button type="button">Start or Join</button>
+ </div>
+ </form>
+</template>
+
+<script>
+export default {
+ name: "JoinMicrocosm"
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+ margin-top: -0.5em;
+ font-size: 5.2em;
+ line-height: 1.2em;
+}
+
+h2 {
+ font-size: 5.2em;
+ line-height: 1.2em;
+ margin: -0.5em 0 0 0;
+ padding: 0em;
+ font-family: houschka-rounded, sans-serif;
+ font-weight: 700;
+ font-style: normal;
+ color: black;
+}
+
+.arrow {
+ font-size: 6em;
+ color: #1cc469;
+}
+
+.breaker-one {
+ padding: 1em;
+ margin-left: -1em;
+ margin-right: -0.4em;
+ margin-bottom: 2.5em;
+ background-color: rgba(196, 47, 152, 0.4);
+}
+
+.breaker-two {
+ padding: 1em;
+ margin-left: -1em;
+ margin-right: -0.4em;
+ margin-bottom: 1em;
+ background-color: rgba(37, 194, 194, 0.4);
+}
+
+label,
+button {
+ display: block;
+}
+
+input {
+ margin-top: 0.8em;
+ border: none;
+ padding: 1em;
+ font-size: 1em;
+}
+button {
+ cursor: pointer;
+ background-color: #1cc469;
+ border: none;
+ margin-top: 1em;
+ padding: 1em;
+ font-size: 1em;
+}
+</style>
diff --git a/src/components/TellmeMore.vue b/src/components/TellmeMore.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef7b148414c0a330d16a42881c3a4601eff4801f
--- /dev/null
+++ b/src/components/TellmeMore.vue
@@ -0,0 +1,53 @@
+<template
+ ><div>
+ <h1>Messy mapping tool for multiplayer thinking</h1>
+ <p class="info">โ ๏ธThis is a non functional beta build of nodenogg.inโ ๏ธ</p>
+ <p>
+ nodenogg.in is free/libre open source software, built in the open,
+ inclusive by design, private by design, human led design, humane by
+ design, delightful by design, intuitive and decentralised by design.
+ </p>
+ <p>
+ nodenogg.in is a <em>messy</em> serendipitous
+ <em>multiplayer</em> co-creation space to <em>play</em> and
+ <em>push</em> ideas together. nodenogg.in is designed to support a new
+ type of <em>co-creation</em>, a messy <em>spatial</em> canvas where
+ <em>makers</em> can <em>tinker</em> with ideas and connect thoughts.
+ </p>
+ <p>
+ nodenogg.in built from scratch with ๐ using open accessible web tech
+ HTML, CSS, Javascript, SVG, Vue 3, PouchDB and CouchDB (and a few plugins
+ such as markdown).
+ </p>
+ <p>
+ Working Vue 2 alpha version can be played with at
+ <a href="https://alpha.nodenogg.in">alpha.nodenogg.in</a>
+ </p>
+ <p>Made by Adam Procter</p>
+ <p><a href="#">LICENSE</a></p>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "TellmeMore",
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+ font-size: 3em;
+}
+
+.info {
+ font-style: italic;
+}
+
+em {
+ font-style: normal;
+ font-weight: 700;
+ background-color: #1cc469;
+ padding: 0 1em 0 1em;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index d100dc9cc25da3c6fecc9130f693b971ad31a571..3933ab58b8d2e6652daf3a6d180c018f4674d831 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,20 +1,20 @@
import { createRouter, createWebHistory } from "vue-router";
-import Home from "../views/Home.vue";
+import Start from "../views/Start.vue";
const routes = [
{
path: "/",
- name: "Home",
- component: Home
+ name: "Start",
+ component: Start
},
{
- path: "/about",
- name: "About",
+ path: "/credits",
+ name: "Credits",
// route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
+ // this generates a separate chunk (credits.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
- import(/* webpackChunkName: "about" */ "../views/About.vue")
+ import(/* webpackChunkName: "credits" */ "../views/Credits.vue")
}
];
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa28070de24f2055171ca2e20543881cb7fdf1c..0000000000000000000000000000000000000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
- <div class="about">
- <h1>This is an about page</h1>
- </div>
-</template>
diff --git a/src/views/Credits.vue b/src/views/Credits.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a8c10e8f3837be1a0beeb3123f2bf8ba4c27f1d7
--- /dev/null
+++ b/src/views/Credits.vue
@@ -0,0 +1,20 @@
+<template>
+ <h1>This will be the credits and thank you information.</h1>
+ <p>
+ You can read the doctoral thesis that accompanies this work
+ <a href="https://thesis.adamprocter.co.uk">here</a>
+ </p>
+</template>
+
+<script>
+export default {
+ name: "Credits",
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+ font-size: 3em;
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 191049e6fbe5bd5151c1c86ae5958ab379a5dcf5..0000000000000000000000000000000000000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
- <div class="home">
- <img alt="Vue logo" src="../assets/logo.png" />
- <HelloWorld msg="Welcome to Your Vue.js App" />
- </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
- name: "Home",
- components: {
- HelloWorld
- }
-};
-</script>
diff --git a/src/views/Start.vue b/src/views/Start.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c3eaa648da0ae7b9e4d507916dc134ba956d92f5
--- /dev/null
+++ b/src/views/Start.vue
@@ -0,0 +1,69 @@
+<template>
+ <header class="header">
+ <h1 class="long">nodenogg<span class="highlight">.in</span></h1>
+ <h2>a messy mapping tool for multiplayer thinking</h2>
+ </header>
+ <nav class="nav">
+ <a role="button" class="tellmemore" href="#" @click="isTellme = !isTellme"
+ >tell me more</a
+ >
+ <a role="button" class="letsplay" href="#" @click="isStart = !isStart"
+ >let's play !</a
+ >
+ </nav>
+ <main>
+ <JoinMicrocosm v-show="isStart" />
+ </main>
+ <aside>
+ <TellmeMore v-show="isTellme" />
+ </aside>
+</template>
+
+<script>
+// @ is an alias to /src
+import JoinMicrocosm from "@/components/JoinMicrocosm.vue";
+import TellmeMore from "@/components/TellmeMore.vue";
+
+export default {
+ name: "Start",
+ components: {
+ JoinMicrocosm,
+ TellmeMore,
+ },
+ data() {
+ return {
+ isStart: false,
+ isTellme: false,
+ };
+ },
+};
+</script>
+
+<style scoped>
+aside {
+ max-width: 800px;
+}
+a {
+ display: block;
+ font-size: 0.8em;
+ color: black;
+ text-decoration-line: none;
+ border-radius: 1em;
+ margin: 1em 0.8em;
+ padding: 1em 1.2em;
+}
+
+.tellmemore {
+ background-color: rgba(196, 47, 152, 0.4);
+}
+
+.letsplay {
+ background-color: rgba(37, 194, 194, 0.4);
+}
+
+@media only screen and (min-width: 330px) {
+ a {
+ display: inline-block;
+ }
+}
+</style>