[add] initial commit
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,73 @@
|
||||
@charset "utf-8";
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Overpass Mono';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: local('Overpass Mono Light'), local('OverpassMono-Light'), url('~@/assets/fonts/OverpassMono-Light_ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Overpass Mono';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: local('Overpass Mono Light'), local('OverpassMono-Light'), url('~@/assets/fonts/OverpassMono-Light.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Overpass Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Overpass Mono Regular'), local('OverpassMono-Regular'), url('~@/assets/fonts/OverpassMono-Regular_ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Overpass Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Overpass Mono Regular'), local('OverpassMono-Regular'), url('~@/assets/fonts/OverpassMono-Regular.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Overpass Mono';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: local('Overpass Mono SemiBold'), local('OverpassMono-SemiBold'), url('~@/assets/fonts/OverpassMono-SemiBold_ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Overpass Mono';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: local('Overpass Mono SemiBold'), local('OverpassMono-SemiBold'), url('~@/assets/fonts/OverpassMono-SemiBold.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Overpass Mono';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Overpass Mono Bold'), local('OverpassMono-Bold'), url('~@/assets/fonts/OverpassMono-Bold_ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Overpass Mono';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Overpass Mono Bold'), local('OverpassMono-Bold'), url('~@/assets/fonts/OverpassMono-Bold.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
@charset "utf-8";
|
||||
|
||||
// theme
|
||||
$family-monospace: 'Overpass Mono', monospace;
|
||||
$dark-theme: (
|
||||
background-color: #2E2E2E,
|
||||
background: #3d3d3d,
|
||||
text: #ccc,
|
||||
text-darker: #bbb,
|
||||
highlight: #f17603,
|
||||
highlight-hover: #ffab5c
|
||||
);
|
||||
|
||||
// bulma global variables
|
||||
$grey-light: map-get($dark-theme, "text");
|
||||
$grey-dark: map-get($dark-theme, "text");
|
||||
$grey-darker: map-get($dark-theme, "text-darker");
|
||||
$warning: map-get($dark-theme, "highlight");
|
||||
$primary: map-get($dark-theme, "highlight");
|
||||
$background: map-get($dark-theme, 'background');
|
||||
$family-primary: $family-monospace;
|
||||
$link-hover: map-get($dark-theme, "highlight");
|
||||
$link: map-get($dark-theme, "text");
|
||||
|
||||
// bulma component variables
|
||||
$body-background-color: map-get($dark-theme, 'background-color');
|
||||
|
||||
// bulma tooltip extension
|
||||
$tooltip-background-color: map-get($dark-theme, 'background');
|
||||
$tooltip-color: map-get($dark-theme, "text");
|
||||
|
||||
// general css
|
||||
.link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.hash-list {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
div {
|
||||
margin-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
.highlight {
|
||||
color: map-get($dark-theme, "highlight");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@charset "utf-8";
|
||||
|
||||
// import fonts
|
||||
@import '~@/assets/sass/fonts.scss';
|
||||
|
||||
// import global
|
||||
@import '~@/assets/sass/global.scss';
|
||||
|
||||
// import bulma
|
||||
@import 'bulma/sass/utilities/_all.sass';
|
||||
@import 'bulma/sass/base/_all.sass';
|
||||
@import 'bulma/sass/components/navbar.sass';
|
||||
@import 'bulma/sass/elements/container.sass';
|
||||
@import 'bulma/sass/elements/title.sass';
|
||||
@import 'bulma/sass/elements/icon.sass';
|
||||
@import 'bulma/sass/elements/content.sass';
|
||||
@import 'bulma/sass/elements/tag.sass';
|
||||
@import 'bulma/sass/grid/columns.sass';
|
||||
@import 'bulma/sass/form/all';
|
||||
@import 'bulma/sass/form/tools.sass';
|
||||
@import 'bulma/sass/layout/_all.sass';
|
||||
@import '@creativebulma/bulma-tooltip/src/sass/index.sass'; //https://github.com/CreativeBulma/bulma-tooltip https://wikiki.github.io/elements/tooltip/
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<a
|
||||
class="link icon-text"
|
||||
href="#"
|
||||
@click="toggle_locale()"
|
||||
>
|
||||
<span class="icon highlight">
|
||||
<font-awesome-icon icon="fa-solid fa-temperature-three-quarters" />
|
||||
</span><span style="font-size: 1em">{{ temperature }}</span>
|
||||
<slot />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Gelvin',
|
||||
props: {
|
||||
addr: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fetcher: null,
|
||||
value: NaN,
|
||||
celsius: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
temperature() {
|
||||
return this.celsius ?
|
||||
this.value.toFixed(2).toLocaleString() + "°C" :
|
||||
(this.value * 9/5 + 32).toFixed(2).toLocaleString() + "°F" ;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetch_temp();
|
||||
this.fetcher = setInterval(this.fetch_temp, 30000)
|
||||
},
|
||||
methods: {
|
||||
fetch_temp() {
|
||||
fetch(this.addr + "/gelvin/measurements/" + this.id)
|
||||
.then(response => response.json())
|
||||
.then(json => this.value = json.value);
|
||||
},
|
||||
toggle_locale() {
|
||||
this.celsius = ! this.celsius;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="hash-list">
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
class="content is-small"
|
||||
>
|
||||
<span class="highlight">#</span> {{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HashList',
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<a
|
||||
class="link icon-text"
|
||||
href="#"
|
||||
@click="attachUrl()"
|
||||
>
|
||||
<span
|
||||
v-if="icon"
|
||||
class="icon highlight"
|
||||
><font-awesome-icon :icon="icon" /></span>{{ text }}
|
||||
<slot />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'XorLink',
|
||||
props: {
|
||||
addr: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
otp: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
xorArray(a, b) {
|
||||
return a.length < b.length ? null : a.map((c, i) => {
|
||||
return c ^ b[i];
|
||||
})
|
||||
},
|
||||
attachUrl() {
|
||||
window.location.href = String.fromCharCode(...this.xorArray(this.addr, this.otp));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<header class="header">
|
||||
<strong>
|
||||
<g-link
|
||||
to="/"
|
||||
style="font-size: 1.5em"
|
||||
><span style="color: #ccc">{{ $static.metadata.siteName }}</span><span
|
||||
class="highlight"
|
||||
>#</span></g-link>
|
||||
</strong>
|
||||
<nav class="nav">
|
||||
<Gelvin
|
||||
:id="2"
|
||||
addr="https://api.pdev.dev"
|
||||
class="has-tooltip-bottom"
|
||||
data-tooltip="office temperature"
|
||||
/>
|
||||
<XorLink
|
||||
text="git"
|
||||
icon="fa-solid fa-code-branch"
|
||||
:addr="[0x03, 0x18, 0x40, 0x56, 0x4a, 0x09, 0x1f, 0x63, 0x2d, 0x03, 0x18, 0x47, 0x17, 0x55, 0x4c, 0x42, 0x03, 0x4f, 0x58, 0x12]"
|
||||
:otp="[0x6b, 0x6c, 0x34, 0x26, 0x39, 0x33, 0x30, 0x4c, 0x4a, 0x6a, 0x6c, 0x69, 0x67, 0x31, 0x29, 0x34, 0x2d, 0x2b, 0x3d, 0x64]"
|
||||
/>
|
||||
<XorLink
|
||||
text="mail"
|
||||
icon="fa-solid fa-envelope"
|
||||
:addr="[0x59, 0x12, 0x02, 0x4a, 0x40, 0x07, 0x76, 0x1b, 0x00, 0x19, 0x45, 0x52, 0x06, 0x0e, 0x1b, 0x03, 0x09, 0x5e, 0x45, 0x08, 0x51, 0x53]"
|
||||
:otp="[0x34, 0x73, 0x6b, 0x26, 0x34, 0x68, 0x4c, 0x6b, 0x61, 0x6a, 0x26, 0x33, 0x6a, 0x4e, 0x6b, 0x67, 0x6c, 0x28, 0x6b, 0x6c, 0x34, 0x25]"
|
||||
/>
|
||||
<XorLink
|
||||
text="pgp"
|
||||
icon="fa-solid fa-key"
|
||||
:addr="[0x45, 0x07, 0x02, 0x32, 0x56, 0x1b, 0x48, 0x1b, 0x3e, 0x5b, 0x59, 0x5c, 0x49, 0x44, 0x43, 0x0b, 0x1b]"
|
||||
:otp="[0x6a, 0x61, 0x6b, 0x5e, 0x33, 0x68, 0x67, 0x6b, 0x4b, 0x39, 0x35, 0x35, 0x2a, 0x6a, 0x33, 0x6c, 0x6b]"
|
||||
/>
|
||||
</nav>
|
||||
</header>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<static-query>
|
||||
query {
|
||||
metadata {
|
||||
siteName
|
||||
}
|
||||
}
|
||||
</static-query>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.layout {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
// This is the main.js file. Import global CSS and scripts here.
|
||||
// The Client API can be used here. Learn more: gridsome.org/docs/client-api
|
||||
|
||||
// icons import
|
||||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
|
||||
import {config, library} from '@fortawesome/fontawesome-svg-core';
|
||||
import {
|
||||
faGitAlt
|
||||
} from '@fortawesome/free-brands-svg-icons';
|
||||
import {
|
||||
faEnvelope,
|
||||
faKey,
|
||||
faCodeBranch,
|
||||
faTemperatureThreeQuarters
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import DefaultLayout from '~/layouts/Default.vue'
|
||||
import XorLink from '~/components/XorLink.vue'
|
||||
import Gelvin from '~/components/Gelvin.vue'
|
||||
import HashList from '~/components/HashList.vue'
|
||||
|
||||
// sass
|
||||
import '~/assets/sass/includes.scss'
|
||||
|
||||
// icons config
|
||||
config.autoAddCss = true;
|
||||
library.add(faGitAlt, faEnvelope, faKey, faCodeBranch, faTemperatureThreeQuarters)
|
||||
|
||||
export default function (Vue) {
|
||||
// Set default layout as a global component
|
||||
Vue.component('FontAwesomeIcon', FontAwesomeIcon);
|
||||
Vue.component('Layout', DefaultLayout);
|
||||
Vue.component('XorLink', XorLink);
|
||||
Vue.component('Gelvin', Gelvin);
|
||||
Vue.component('HashList', HashList);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="container content">
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<h2><span class="highlight">#</span>EHLO</h2>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-medium is-white">I am </span><span class="tag is-medium is-warning">Pascal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
I'm a Software Engineer. I mostly work on embedded network devices, though I like to dabble in web development and server management. When I'm not coding, I'm soldering things to code on.
|
||||
|
||||
<HashList
|
||||
:items="['Linux, OpenWrt, Yoctu, Arduino, RaspberryPi, Xilinx FPGA',
|
||||
'C/C++, Java/Scala, Python, Shell, Lua, HTML/CSS/JS, SQL, VHDL',
|
||||
'Autotools, Bitmake, CMake, Doxygen, Docker, Jenkins, Apache, Nginx']"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
metaInfo: {
|
||||
title: '/root'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.home-links a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user