Commiting in order to switch computers

This commit is contained in:
Alicia Sykes 2021-06-17 13:34:02 +01:00
parent 491c07ed67
commit c92083f88f
7 changed files with 118 additions and 29 deletions

View File

@ -49,6 +49,20 @@ Maximum of 24mb of storage per user. Please do not repeatedly hit the endpoint,
- Add your `zone_id` (found in the Overview tab of your desired domain on Cloudflare)
- Add your `route`, which should be a domain or host, supporting a wildcard
```toml
name = "dashy-worker"
type = "javascript"
workers_dev = true
route = "example.com/*"
zone_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
account_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
kv_namespaces = [
{ binding = "DASHY_CLOUD_BACKUP", id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }
]
```
#### Complete `index.js`
- Write code to handle your requests, and interact with any other data sources in this file
- Generally, this is done within an event listener for 'fetch', and returns a promise
@ -66,7 +80,7 @@ async function handleRequest(request) {
}
```
- For the code used for Dashy's cloud service, see [here](https://notes.aliciasykes.com/p/j2F1deljv1)
- For the code used for Dashy's cloud service, see [here](https://gist.github.com/Lissy93/d19b43d50f30e02fa25f349cf5cb5ed8#file-index-js)
#### Commands

View File

@ -54,6 +54,7 @@ export default {
}
},
methods: {
/* Sets the theme, by updating data-theme attribute on the html tag */
setLocalTheme(newTheme) {
const htmlTag = document.getElementsByTagName('html')[0];
if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');

View File

@ -1,7 +1,13 @@
<template>
<nav class="side-bar">
<div v-for="(section, index) in sections" :key="index">
<SideBarItem class="item" :icon="section.icon" :title="section.title" />
<SideBarItem
class="item"
:icon="section.icon"
:title="section.name"
:click="launchItem"
/>
<SideBarSection v-if="isOpen" :items="section.items" />
</div>
</nav>
</template>
@ -9,6 +15,7 @@
<script>
import SideBarItem from '@/components/Workspace/SideBarItem.vue';
import SideBarSection from '@/components/Workspace/SideBarSection.vue';
export default {
name: 'SideBar',
@ -16,8 +23,19 @@ export default {
props: {
sections: Array,
},
data: () => ({
isOpen: false,
}),
components: {
SideBarItem,
SideBarSection,
},
methods: {
launchItem() {
this.isOpen = !this.isOpen;
// Open SideBarSection, passing in items[]
// this.$emit('launch', url);
},
},
};
</script>

View File

@ -1,6 +1,6 @@
<template>
<div class="side-bar-item">
<Icon v-if="icon" :icon="icon" size="small" />
<div class="side-bar-item" @click="click()">
<Icon v-if="icon" :icon="icon" size="small" :url="url" />
<p v-else>{{ title }}</p>
</div>
</template>
@ -8,7 +8,6 @@
<script>
import Icon from '@/components/LinkItems/ItemIcon.vue';
import Defaults from '@/utils/defaults';
export default {
name: 'SideBarItem',
@ -16,21 +15,12 @@ export default {
props: {
icon: String,
title: String,
},
mounted() {
this.initiateFontAwesome();
url: String,
click: Function,
},
components: {
Icon,
},
methods: {
initiateFontAwesome() {
const fontAwesomeScript = document.createElement('script');
const faKey = this.config.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;
fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
document.head.appendChild(fontAwesomeScript);
},
},
};
</script>

View File

@ -0,0 +1,52 @@
<template>
<div class="sub-side-bar">
<div v-for="(item, index) in items" :key="index">
<SideBarItem
class="item"
:icon="item.icon"
:title="item.title"
:url="item.url"
:click="launchItem"
/>
</div>
</div>
</template>
<script>
import SideBarItem from '@/components/Workspace/SideBarItem.vue';
export default {
name: 'SideBarSection',
inject: ['config'],
props: {
items: Array,
},
components: {
SideBarItem,
},
methods: {
launchItem(url) {
this.$emit('launch', url);
},
},
};
</script>
<style lang="scss" scoped>
@import '@/styles/media-queries.scss';
@import '@/styles/style-helpers.scss';
div.sub-side-bar {
display: flex;
flex-direction: column;
background: var(--side-bar-background);
color: var(--side-bar-color);
border: 1px dashed red;
text-align: center;
.item:not(:last-child) {
border-bottom: 1px dashed var(--side-bar-color);
}
}
</style>

View File

@ -9,15 +9,6 @@
highly customizable and functianl dashboard, in order to improvde productivity
and enable easy organisation of running services or web links.
</p>
<p>
Dashy is a web-based project with PWA mobile support. It's written in TypeScript,
and using the Vue.js framework, with a simple Node.js backend.
It can be run in a light-weight Alpine Docker container, with support for
healthcheck monitoring, self-updating and automatic restarting. Configuration
is done with a single YAML file, that is merged with the application when it
is built / compiled. The configuration can me modified using the UI, and then
exported back into the main config file.
</p>
</section>
<section>
@ -51,7 +42,7 @@
<img class="aht-pic" src="https://i.ibb.co/FnxqTfx/aht-bot-round.png" alt="Alicia Sykes">
</a>
Dashy is developed an maintained by <a href="https://aliciasykes.com">Alicia Sykes</a>
(<a href="https://github.com/lissy93">@Lissy93</a>).
(<a href="https://github.com/lissy93">@Lissy93</a>), with support from the community.
<ul>
<li><b>PGP Key</b> - <a href="https://keybase.io/aliciasykes/pgp_keys.asc?fingerprint=0688f8d34587d954e9e51fb8fedb68f55c0283a7"><code>0688 F8D3 4587 D954 E9E5 1FB8 FEDB 68F5 5C02 83A7</code></a></li>
<li><b>BTC Address</b> - <code>3853bSxupMjvxEYfwGDGAaLZhTKxB2vEVC</code></li>
@ -101,8 +92,8 @@ article.about {
background: var(--about-page-background);
color: var(--about-page-color);
width: 80%;
max-width: 800px;
margin: 1rem auto;
max-width: 1000px;
margin: 1rem auto 2.5rem auto;
padding: 1rem;
border: 1px solid var(--about-page-accent);
border-radius: var(--curve-factor);

View File

@ -1,6 +1,6 @@
<template>
<div class="work-space">
<SideBar :sections="sections" />
<SideBar :sections="sections" @launch="launchService" />
<WebContent :url="url" />
</div>
</template>
@ -9,11 +9,13 @@
import SideBar from '@/components/Workspace/SideBar';
import WebContent from '@/components/Workspace/WebContent';
import Defaults, { localStorageKeys } from '@/utils/defaults';
export default {
name: 'Workspace',
props: {
sections: Array,
appConfig: Object,
},
data: () => ({
url: '',
@ -22,6 +24,27 @@ export default {
SideBar,
WebContent,
},
methods: {
launchService(url) {
this.url = url;
},
setTheme() {
const theme = localStorage[localStorageKeys.THEME] || this.confTheme || Defaults.theme;
const htmlTag = document.getElementsByTagName('html')[0];
if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');
htmlTag.setAttribute('data-theme', theme);
},
initiateFontAwesome() {
const fontAwesomeScript = document.createElement('script');
const faKey = this.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;
fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
document.head.appendChild(fontAwesomeScript);
},
},
mounted() {
this.setTheme();
this.initiateFontAwesome();
},
};
</script>