cupcakearmy/nicco.io
1
0
Fork 0
mirror of https://github.com/cupcakearmy/nicco.io.git synced 2025-09-06 18:50:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

test new features

Browse Source
This commit is contained in:
cupcakearmy
2020-09-22 21:47:33 +02:00
parent 23c527fef1
commit b447b99159
16 changed files with 370 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Nav.svelte
View File

@@ -8,11 +8,16 @@
{ name: 'Blog', href: 'https://blog.nicco.io' },
{ name: 'Contact', href: '/contact' },
]
let nav
</script>
<style>
nav {
height: 100vh;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
width: 3.5em;
height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
background-color: var(--clr-primary);
display: flex;
flex-direction: column;
@@ -35,6 +40,24 @@
li a {
line-height: 1em;
width: 1em;
position: relative;
}
li a span {
z-index: 5;
position: relative;
}
li a div {
z-index: 4;
width: 0.125em;
height: 100%;
top: 0;
left: 1.12em;
position: absolute;
}
li a div.active {
background-color: var(--clr-secondary);
}
h1 {
@@ -45,21 +68,36 @@
font-size: 1.5em;
}
h1.active {
box-shadow: 0 0.1em var(--clr-secondary);
}
@media (max-width: 30em) {
nav {
width: 2.5em;
}
a {
padding: 0.5em;
}
li a div {
transform: translateX(-0.5em);
}
}
</style>
<nav>
<nav bind:this={nav}>
<a href="/">
<h1>NB</h1>
<h1 class:active={segment === undefined}>NB</h1>
</a>
<ul>
{#each routes as { name, href }}
<li>
<a {href}>{name}</a>
<a {href}>
<span>{name}</span>
<div class:active={href.slice(1) === segment} />
</a>
</li>
{/each}
</ul>

12
src/components/Project.svelte
View File

@@ -34,16 +34,14 @@
</style>
<section>
<h2>{project.name}</h2>
<h2>{project.title}</h2>
<div>
<b>{project.title}</b>
<b class="date">{project.date}</b>
</div>
<div><b>{project.description}</b> <b class="date">{project.date}</b></div>
<p>{project.body}</p>
<p>
{@html project.content}
</p>
<ion-icon name="link-outline" />
<a rel="noopener noreferrer" target="_blank" href={project.link}>{project.link.replace(/https?:\/\//, '')}</a>
</section>

37
src/components/Work.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script>
export let work
</script>
<style>
img {
width: 100%;
}
.title {
font-size: 2em;
line-height: 1;
}
.horizontal {
display: flex;
justify-content: space-between;
align-items: end;
}
.regular {
font-weight: 400;
}
</style>
<div class="horizontal">
<div class="title regular">{work.title}</div>
<div><a href={work.link} target="_blank">{work.link.replace(/https?:\/\//, '')}</a></div>
</div>
<img src={work.image.url} alt={work.image.description} />
<div class="horizontal regular">
<div>{work.role}</div>
<div>{work.date}</div>
</div>
<p>
{@html work.content}
</p>

25
src/lib/wp.js Normal file
View File

@@ -0,0 +1,25 @@
import axios from 'axios'
const isDev = process.env.NODE_ENV !== 'production'
axios.defaults.baseURL = `${isDev ? 'http://localhost' : 'https://api.nicco.io'}/wp-json/wp/v2`
function normalize(post) {
return {
...post.acf,
id: post.id,
title: post.title.rendered,
content: post.content.rendered,
}
}
export async function getOne(url, params = {}) {
const p = new URLSearchParams(params).toString()
const { data } = await axios(`${url}?${p}`)
if (!data.length) return null
else return normalize(data[0])
}
export async function getAll(url, params = {}) {
const { data } = await axios(url)
return data.map(normalize)
}

24
src/routes/about.svelte
View File

@@ -1,5 +1,16 @@
<script context="module">
import { getOne } from '../lib/wp'
export async function preload() {
const data = await getOne('pages', { slug: 'about' })
return { data }
}
</script>
<script>
import SimplePage from '../components/SimplePage.svelte'
export let data
</script>
<style>
@@ -31,17 +42,6 @@
</svelte:head>
<SimplePage title="About">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
{@html data.content}
<img src="/images/about.jpg" alt="decoration" />
</SimplePage>

12
src/routes/projects.svelte
View File

@@ -1,13 +1,13 @@
<script context="module">
export async function preload({ params }) {
const res = await this.fetch('projects.json')
const data = await res.json()
if (res.status === 200) return { data }
else this.error(res.status, 'Not found')
import { getAll } from '../lib/wp'
export async function preload() {
const data = await getAll('projects')
return { data }
}
</script>
<script>
<script lang="ts">
import SimplePage from '../components/SimplePage.svelte'
import Project from '../components/Project.svelte'

27
src/routes/works.svelte
View File

@@ -1,5 +1,17 @@
<script context="module">
import { getAll } from '../lib/wp'
export async function preload() {
const data = await getAll('works')
return { data }
}
</script>
<script>
import SimplePage from '../components/SimplePage.svelte'
import Work from '../components/Work.svelte'
export let data
</script>
<svelte:head>
@@ -7,16 +19,7 @@
</svelte:head>
<SimplePage title="Works">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
{#each data as work}
<Work {work} />
{/each}
</SimplePage>

28
src/server.js
View File

@@ -1,17 +1,15 @@
import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
import sirv from 'sirv'
import polka from 'polka'
import compression from 'compression'
import * as sapper from '@sapper/server'
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
const { PORT, NODE_ENV } = process.env
const dev = NODE_ENV === 'development'
polka() // You can also use Express
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});
polka()
.use(compression({ threshold: 0 }))
.use(sirv('static', { dev }))
.use(sapper.middleware())
.listen(PORT, (err) => {
if (err) console.log('error', err)
})

82
src/service-worker.js
View File

@@ -1,82 +0,0 @@
import { timestamp, files, shell, routes } from '@sapper/service-worker';
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by the bundler,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(files);
const cached = new Set(to_cache);
self.addEventListener('install', event => {
event.waitUntil(
caches
.open(ASSETS)
.then(cache => cache.addAll(to_cache))
.then(() => {
self.skipWaiting();
})
);
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(async keys => {
// delete old caches
for (const key of keys) {
if (key !== ASSETS) await caches.delete(key);
}
self.clients.claim();
})
);
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
const url = new URL(event.request.url);
// don't try to handle e.g. data: URIs
if (!url.protocol.startsWith('http')) return;
// ignore dev server requests
if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
// always serve static files and bundler-generated assets from cache
if (url.host === self.location.host && cached.has(url.pathname)) {
event.respondWith(caches.match(event.request));
return;
}
// for pages, you might want to serve a shell `service-worker-index.html` file,
// which Sapper has generated for you. It's not right for every
// app, but if it's right for yours then uncomment this section
/*
if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
event.respondWith(caches.match('/service-worker-index.html'));
return;
}
*/
if (event.request.cache === 'only-if-cached') return;
// for everything else, try the network first, falling back to
// cache if the user is offline. (If the pages never change, you
// might prefer a cache-first approach to a network-first one.)
event.respondWith(
caches
.open(`offline${timestamp}`)
.then(async cache => {
try {
const response = await fetch(event.request);
cache.put(event.request, response.clone());
return response;
} catch(err) {
const response = await cache.match(event.request);
if (response) return response;
throw err;
}
})
);
});

6
src/template.html
View File

@@ -21,12 +21,12 @@
</head>
<body>
<!-- The application will be rendered inside this element,
because `src/client.js` references it -->
because `src/client.js` references it -->
<div id="sapper">%sapper.html%</div>
<!-- Sapper creates a <script> tag containing `src/client.js`
and anything else it needs to hydrate the app and
initialise the router -->
and anything else it needs to hydrate the app and
initialise the router -->
%sapper.scripts%
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>