Administrator approval is now required for registering new accounts. If you are registering a new account, and are external to the University, please ask the repository owner to contact ServiceLine to request your account be approved. Repository owners must include the newly registered email address, and specific repository in the request for approval.

Commit 7bc7beac authored by Adam Procter's avatar Adam Procter
Browse files

init

parent 7739c15e
# 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)
{
"name": "vue3",
"name": "nodenogg.in",
"version": "0.1.0",
"private": true,
"scripts": {
......
public/favicon.ico

4.19 KB | W: | H:

public/favicon.ico

1.12 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
<!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
<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>
<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>
<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>
<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>
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")
}
];
......
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<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>
<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>
<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>