donations and stuff
This commit is contained in:
Luca Junge
parent
4bb90d0314
commit
48cbb3471e
57 changed files with 610 additions and 1260 deletions
34
.eleventy.js
34
.eleventy.js
|
|
@ -1,28 +1,34 @@
|
||||||
const { DateTime } = require("luxon")
|
const { DateTime } = require("luxon")
|
||||||
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
|
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight")
|
||||||
|
|
||||||
module.exports = function (eleventyConfig) {
|
module.exports = function (eleventyConfig) {
|
||||||
eleventyConfig.addPlugin(syntaxHighlight);
|
eleventyConfig.addPlugin(syntaxHighlight)
|
||||||
|
|
||||||
//eleventyConfig.addPassthroughCopy("css")
|
//eleventyConfig.addPassthroughCopy("css")
|
||||||
eleventyConfig.addPassthroughCopy("src/**/*.png")
|
eleventyConfig.addPassthroughCopy("src/**/*.png")
|
||||||
eleventyConfig.addPassthroughCopy("src/**/*.jpg")
|
eleventyConfig.addPassthroughCopy("src/**/*.jpg")
|
||||||
eleventyConfig.addPassthroughCopy("src/css/modelviewer.css")
|
eleventyConfig.addPassthroughCopy("src/css/*.css")
|
||||||
|
eleventyConfig.addPassthroughCopy("src/libs/**/*.js")
|
||||||
eleventyConfig.addPassthroughCopy("src/**/*.glb")
|
|
||||||
eleventyConfig.addPassthroughCopy({ "src/_assets/": "assets" })
|
eleventyConfig.addPassthroughCopy({ "src/_assets/": "assets" })
|
||||||
|
|
||||||
eleventyConfig.addFilter("readableDate", (dateObj) => {
|
eleventyConfig.addFilter("formatDate", (dateObj) => {
|
||||||
return DateTime.fromJSDate(dateObj, {
|
return DateTime.fromJSDate(dateObj, {
|
||||||
zone: "Europe/Berlin"
|
zone: "Europe/Berlin",
|
||||||
}).setLocale("de").toLocaleString(DateTime.DATE_FULL)
|
})
|
||||||
|
.setLocale("de")
|
||||||
|
.toLocaleString(DateTime.DATE_FULL)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Filter for showing excerpts of posts on the "/posts/" site, limited to 180 characters (about 4 lines on mobile)
|
// Filter for showing excerpts of posts on the "/posts/" site, limited to 180 characters (about 4 lines on mobile)
|
||||||
eleventyConfig.addFilter("excerpt", (post) => {
|
eleventyConfig.addFilter("createExcerpt", (post) => {
|
||||||
const content = post.replace(/(<([^>]+)>)/gi, "");
|
// This removes "<" and ">" from the output
|
||||||
return content.substr(0, content.lastIndexOf(" ", 180)) + "...";
|
const content = post.replace(/(<([^>]+)>)/gi, "")
|
||||||
});
|
return content.substr(0, content.lastIndexOf(" ", 180)) + "..."
|
||||||
|
})
|
||||||
|
|
||||||
|
eleventyConfig.addFilter("stringify", (object) => {
|
||||||
|
return JSON.stringify(object, null, 2)
|
||||||
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
passthroughFileCopy: true,
|
passthroughFileCopy: true,
|
||||||
|
|
@ -30,7 +36,7 @@ module.exports = function (eleventyConfig) {
|
||||||
input: "src",
|
input: "src",
|
||||||
includes: "_includes",
|
includes: "_includes",
|
||||||
data: "_data",
|
data: "_data",
|
||||||
output: "_site"
|
output: "build",
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,2 +1,2 @@
|
||||||
node_modules
|
node_modules
|
||||||
_site
|
build
|
||||||
|
|
|
||||||
776
package-lock.json
generated
776
package-lock.json
generated
File diff suppressed because it is too large
Load diff
15
package.json
15
package.json
|
|
@ -5,13 +5,9 @@
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "npm run dev",
|
"start": "npm run dev",
|
||||||
"dev": "npm-run-all -p dev:*",
|
"dev": "npx @11ty/eleventy --serve",
|
||||||
"dev:11ty": "npx @11ty/eleventy --serve",
|
"build": "npx @11ty/eleventy",
|
||||||
"dev:tailwind": "tailwindcss -i src/css/tailwind.css -o _site/css/style.css --watch --postcss",
|
"deploy": "scp -r _site/* contabo:www/luca-junge.de/"
|
||||||
"build": "run-s build:*",
|
|
||||||
"build:11ty": "npx @11ty/eleventy",
|
|
||||||
"build:tailwind": "tailwindcss -i src/css/tailwind.css -o _site/css/style.css --postcss",
|
|
||||||
"deploy": "scp -r _site/* strato:www/"
|
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "Luca Junge",
|
"author": "Luca Junge",
|
||||||
|
|
@ -22,11 +18,10 @@
|
||||||
"autoprefixer": "^10.4.13",
|
"autoprefixer": "^10.4.13",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"postcss": "^8.4.18",
|
"postcss": "^8.4.18",
|
||||||
"prettier": "2.7.1",
|
"prettier": "2.7.1"
|
||||||
"prettier-plugin-tailwindcss": "^0.1.13",
|
|
||||||
"tailwindcss": "^3.2.1"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"chart.js": "^4.4.0",
|
||||||
"luxon": "^3.1.0"
|
"luxon": "^3.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
tailwindConfig: "./tailwind.config.js"
|
|
||||||
}
|
|
||||||
|
|
@ -8,13 +8,11 @@
|
||||||
<link rel="stylesheet" href="{{'assets/fontawesome/css/all.css' | url}}">
|
<link rel="stylesheet" href="{{'assets/fontawesome/css/all.css' | url}}">
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-800">
|
<body>
|
||||||
{% include "partials/nav.njk" %}
|
{% include "partials/header.njk" %}
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="container mx-auto py-5 px-5">
|
{{ content | safe }}
|
||||||
{{ content | safe }}
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% include "partials/footer.njk" %}
|
{% include "partials/footer.njk" %}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<a href="{{ post.url }}" class="group rounded-lg flex flex-col items-center text-gray-100 lg:flex-row lg:max-w-xl">
|
|
||||||
<div class="bg-gray-700 group-hover:bg-gray-300 transition ease-in-out rounded-t-lg lg:rounded-none lg:rounded-l-lg overflow-hidden self-stretch">
|
|
||||||
<img class="object-contain object-center group-hover:scale-110 transition ease-in-out" src="{{ post.url }}thumbnail.png" alt="{{post.data.alt}}">
|
|
||||||
</div>
|
|
||||||
<div class="w-full h-full self-center py-3 px-4 leading-normal bg-gray-600 rounded-b-lg lg:rounded-b-none lg:rounded-r-lg">
|
|
||||||
<h5 class="text-2xl font-bold tracking-tight text-gray-100">{{post.data.title}}</h5>
|
|
||||||
<p class="mb-3 font-normal text-gray-200">{{post.data.alt}}</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
<!DOCTYPE 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">
|
|
||||||
<link rel="stylesheet" href="/css/style.css">
|
|
||||||
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
</head>
|
|
||||||
<body class="bg-gray-800 text-gray-100 model-list-style">
|
|
||||||
{% include "partials/nav.njk" %}
|
|
||||||
|
|
||||||
<aside class="container max-w-5xl mx-auto pt-5 pb-0 px-5">
|
|
||||||
|
|
||||||
<a onclick="history.back()" class="cursor-pointer inline-flex items-center py-3 px-3 text-sm font-bold text-center text-white bg-gray-700 rounded-lg hover:bg-gray-600 transition ease-in-out">
|
|
||||||
<i class="fa fa-solid fa-angle-left mr-2 no-underline"></i>Zurück
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{% if header %}
|
|
||||||
<div class="header-image mt-5">
|
|
||||||
<img src="{{ header }}" class="rounded-lg w-full max-h-56 object-cover object-center" alt="{{ title }}">
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<h1 class="mt-10 text-center">{{ title }}</h1>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div id="content" class="container max-w-5xl mx-auto py-5 px-5">
|
|
||||||
{{ content | safe }}
|
|
||||||
</div>
|
|
||||||
{% include "partials/footer.njk" %}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<a href="{{ post.url }}"class="group relative rounded-lg text-gray-100 shadow-md">
|
|
||||||
|
|
||||||
<!-- A container for the preview -->
|
|
||||||
<div class="model-image-container flex bg-gray-700 rounded-lg overflow-hidden">
|
|
||||||
<img class="m-2 border-t-3 object-contain w-full h-full group-hover:scale-110 transition ease-in-out" src="{{ post.url }}thumbnail.png" alt="{{post.data.alt}}">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- The model title and description -->
|
|
||||||
<div class="model-info text-gray-100 backdrop-blur-sm p-5 absolute bottom-0 left-0 right-0 bg-black/40 group-hover:bg-black/50 transition ease-in-out rounded-b-lg">
|
|
||||||
<h5 class="text-2xl not-italic uppercase font-bold">{{post.data.title}}</h5>
|
|
||||||
<p>{{post.data.alt}}</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<!DOCTYPE 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">
|
|
||||||
<link rel="stylesheet" href="/css/modelviewer.css">
|
|
||||||
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
</head>
|
|
||||||
<body class="bg-gray-800">
|
|
||||||
<model-viewer src="{{file if file else 'model.glb'}}"
|
|
||||||
field-of-view="{{fieldofview if fieldofview else 'auto'}}"
|
|
||||||
ar
|
|
||||||
xr-environment
|
|
||||||
camera-controls auto-rotate shadow-intensity=1>
|
|
||||||
<div slot="ar-button" slot="exit-webxr-ar-button" id="ar-button-container">
|
|
||||||
<button id="ar-button" title="View in Augmented Reality" class="blur">
|
|
||||||
<i class="fa fa-solid fa-cube"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div slot="exit-webxr-ar-button" id="ar-button-container">
|
|
||||||
<button id="ar-button" title="Close Augmented Reality" class="blur">
|
|
||||||
<i class="fa fa-solid fa-close"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="model-info-container">
|
|
||||||
<div id="model-info" class="blur">
|
|
||||||
<h5>{{title}}</h5>
|
|
||||||
<p>{{alt}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{content | safe}}
|
|
||||||
</model-viewer>
|
|
||||||
<script>
|
|
||||||
self.ModelViewerElement = self.ModelViewerElement || {};
|
|
||||||
self.ModelViewerElement.dracoDecoderLocation = '/assets/draco/';
|
|
||||||
</script>
|
|
||||||
<script type="module" src="/assets/model-viewer.min.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<footer class="px-2 py-2 md:py-3 text-gray-100 font-bolder bg-gray-900">
|
<footer>
|
||||||
<div class="flex flex-wrap justify-center">
|
<div>
|
||||||
<span class="font-bold">
|
<span>
|
||||||
<i class="fa-brands fa-creative-commons-zero mr-2"></i>Luca Junge</span>
|
<i class="fa-brands fa-creative-commons-zero" style="margin-right: 8px;"></i>Luca Junge</span>
|
||||||
</div>
|
</div>
|
||||||
</foot>
|
</foot>
|
||||||
|
|
|
||||||
17
src/_includes/partials/header.njk
Normal file
17
src/_includes/partials/header.njk
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul >
|
||||||
|
<li>
|
||||||
|
<a href="/" title="Zurück zur Startseite">
|
||||||
|
<i class="fa fa-solid fa-house"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="/posts/" title="Alle Posts">
|
||||||
|
<i class="fa fa-solid fa-message"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<nav class="bg-gray-900 px-3 py-4 text-white font-bold">
|
|
||||||
<div class="container flex flex-wrap justify-center xs:justify-between items-center mx-auto">
|
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center grow justify-between">
|
|
||||||
<span class="font-bold text-xl md:text-md"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center justify-between space-x-3 md:space-x-4">
|
|
||||||
<a href="/" title="Zurück zur Startseite" class="inline-flex items-center py-3 px-3 text-sm font-bold text-center text-white bg-gray-700 rounded-lg hover:bg-gray-600 transition ease-in-out">
|
|
||||||
<i class="fa fa-solid fa-house"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/posts/" title="Alle Posts" class="inline-flex items-center py-3 px-3 text-sm font-bold text-center text-white bg-gray-700 rounded-lg hover:bg-gray-600 transition ease-in-out">
|
|
||||||
<i class="fa fa-solid fa-message"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/models/" title="Alle Modelle" class="inline-flex items-center py-3 px-3 text-sm font-bold text-center text-white bg-gray-700 rounded-lg hover:bg-gray-600 transition ease-in-out">
|
|
||||||
<i class="fa fa-solid fa-cube"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
71
src/_includes/pie-chart.njk
Normal file
71
src/_includes/pie-chart.njk
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
<!DOCTYPE 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">
|
||||||
|
<link rel="stylesheet" href="/css/style.css">
|
||||||
|
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
|
||||||
|
<script src="/libs/chart.min.js"></script>
|
||||||
|
<title>{{ title }}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% include "partials/header.njk" %}
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
|
||||||
|
<a onclick="history.back()">
|
||||||
|
<i class="fa fa-solid fa-angle-left"></i>Zurück
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<h1 >{{ title }}</h1>
|
||||||
|
<span>{{ page.date | formatDate }}</span>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<div id="content">
|
||||||
|
<canvas id="chart" height="200"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include "partials/footer.njk" %}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let projectData = {{ projects | stringify | safe }}
|
||||||
|
let chart = new Chart(document.querySelector("#chart"), {
|
||||||
|
type: "pie",
|
||||||
|
data: {
|
||||||
|
labels: projectData.map(row => row.name),
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: projectData.map(row => row.amount)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
plugins: {
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (context) {
|
||||||
|
let label = context.dataset.label || '';
|
||||||
|
|
||||||
|
if (label) {
|
||||||
|
label += ': ';
|
||||||
|
}
|
||||||
|
|
||||||
|
label += new Intl
|
||||||
|
.NumberFormat('de-DE', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'EUR'
|
||||||
|
})
|
||||||
|
.format(context.parsed);
|
||||||
|
|
||||||
|
return label;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
responsive: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -8,25 +8,25 @@
|
||||||
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
|
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-800 text-gray-100 post-list-style">
|
<body>
|
||||||
{% include "partials/nav.njk" %}
|
{% include "partials/header.njk" %}
|
||||||
|
|
||||||
<aside class="container max-w-5xl mx-auto pt-5 pb-0 px-5">
|
<aside>
|
||||||
|
|
||||||
<a onclick="history.back()" class="cursor-pointer inline-flex items-center py-3 px-3 text-sm font-bold text-center text-white bg-gray-700 rounded-lg hover:bg-gray-600 transition ease-in-out">
|
<a onclick="history.back()">
|
||||||
<i class="fa fa-solid fa-angle-left mr-2 no-underline"></i>Zurück
|
<i class="fa fa-solid fa-angle-left"></i>Zurück
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{% if header %}
|
{% if header %}
|
||||||
<div class="header-image mt-5">
|
<div>
|
||||||
<img src="{{ header }}" class="rounded-lg w-full max-h-56 object-cover object-center" alt="{{ title }}">
|
<img src="{{ header }}" alt="{{ title }}">
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<h1 class="mt-10 text-center">{{ title }}</h1>
|
<h1>{{ title }}</h1>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<div id="content" class="container max-w-5xl mx-auto py-5 px-5">
|
<div id="content">
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</div>
|
</div>
|
||||||
{% include "partials/footer.njk" %}
|
{% include "partials/footer.njk" %}
|
||||||
|
|
|
||||||
|
|
@ -8,26 +8,26 @@
|
||||||
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
|
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-800 text-gray-100 post-style">
|
<body>
|
||||||
{% include "partials/nav.njk" %}
|
{% include "partials/header.njk" %}
|
||||||
|
|
||||||
<aside class="container max-w-5xl mx-auto pt-5 pb-0 px-5">
|
<aside>
|
||||||
|
|
||||||
<a onclick="history.back()" class="cursor-pointer inline-flex items-center py-3 px-3 text-sm font-bold text-center text-white bg-gray-700 rounded-lg hover:bg-gray-600 transition ease-in-out">
|
<a onclick="history.back()">
|
||||||
<i class="fa fa-solid fa-angle-left mr-2 no-underline"></i>Zurück
|
<i class="fa fa-solid fa-angle-left"></i>Zurück
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{% if header %}
|
{% if header %}
|
||||||
<div class="header-image mt-5">
|
<div>
|
||||||
<img src="{{ header }}" class="rounded-lg w-full max-h-56 object-cover object-center" alt="{{ title }}">
|
<img src="{{ header }}" alt="{{ title }}">
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<h1 class="mt-10 text-center">{{ title }}</h1>
|
<h1 >{{ title }}</h1>
|
||||||
<span class="block text-gray-500 text-center">{{ page.date | readableDate }}</span>
|
<span>{{ page.date | formatDate }}</span>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<div id="content" class="container max-w-5xl mx-auto py-5 px-5">
|
<div id="content">
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</div>
|
</div>
|
||||||
{% include "partials/footer.njk" %}
|
{% include "partials/footer.njk" %}
|
||||||
|
|
|
||||||
10
src/css/footer.css
Normal file
10
src/css/footer.css
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
footer {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0.75rem 1rem 0.75rem 1rem;
|
||||||
|
color: var(--black);
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
33
src/css/header.css
Normal file
33
src/css/header.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
body > header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0.75rem 1rem 0.75rem 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > header > nav {
|
||||||
|
display: flex;
|
||||||
|
/*flex-direction: row;*/
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px solid var(--purple-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > header > nav > ul {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > header > nav a > i {
|
||||||
|
padding: 10px;
|
||||||
|
background-color: var(--purple-dark);
|
||||||
|
color: var(--white);
|
||||||
|
transition: 0.2s ease-out;
|
||||||
|
transition-property: background;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > header > nav a:hover > i {
|
||||||
|
background-color: var(--purple-light);
|
||||||
|
}
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
background-color: rgb(31 41 55);
|
|
||||||
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
model-viewer {
|
|
||||||
width: 100%;
|
|
||||||
height: 100dvh;
|
|
||||||
background-color: rgb(31 41 55);
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(:defined) > * {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hotspot {
|
|
||||||
z-index: 1;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
border-radius: 32px;
|
|
||||||
border: 0;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
|
||||||
box-sizing: border-box;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 24px;
|
|
||||||
padding: 8px;
|
|
||||||
position: relative;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hotspot:not([data-visible]) {
|
|
||||||
background: transparent;
|
|
||||||
border: 4px solid rgba(0, 0, 0, 0.5);
|
|
||||||
box-shadow: none;
|
|
||||||
height: 32px;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hotspot:focus {
|
|
||||||
border: 4px solid rgb(0, 128, 200);
|
|
||||||
height: 32px;
|
|
||||||
outline: none;
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hotspot > * {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.HotspotAnnotation {
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
|
||||||
color: #fff;
|
|
||||||
display: block;
|
|
||||||
font-family: Futura, Helvetica Neue, sans-serif;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
left: calc(100% + 1em);
|
|
||||||
max-width: 128px;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
width: max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hotspot:not([data-visible]) > * {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transform: translateY(calc(-50% + 4px));
|
|
||||||
transition: transform 0.3s, opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
display: block;
|
|
||||||
width: 33%;
|
|
||||||
height: 10%;
|
|
||||||
max-height: 2%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate3d(-50%, -50%, 0);
|
|
||||||
border-radius: 25px;
|
|
||||||
box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5),
|
|
||||||
0px 0px 5px 1px rgba(0, 0, 0, 0.6);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar.hide {
|
|
||||||
visibility: hidden;
|
|
||||||
transition: visibility 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.update-bar {
|
|
||||||
background-color: rgba(255, 255, 255, 0.9);
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 25px;
|
|
||||||
float: left;
|
|
||||||
transition: width 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes circle {
|
|
||||||
from {
|
|
||||||
transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes elongate {
|
|
||||||
from {
|
|
||||||
transform: translateX(100px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translateX(-100px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
model-viewer > #ar-prompt {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 60px;
|
|
||||||
animation: elongate 2s infinite ease-in-out alternate;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
model-viewer[ar-status="session-started"] > #ar-prompt {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
model-viewer > #ar-prompt > img {
|
|
||||||
animation: circle 4s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ar-button-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 4; /* position in front of the annotations */
|
|
||||||
bottom: 0px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ar-button {
|
|
||||||
font-family: inherit; /* 1 */
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
margin: 0; /* 2 */
|
|
||||||
text-transform: none;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 0.5em 1.75em;
|
|
||||||
font-size: 1.75em;
|
|
||||||
border-radius: 24px;
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ar-button i {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#model-info-container {
|
|
||||||
margin: 0.75em;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
text-align: left;
|
|
||||||
justify-content: start;
|
|
||||||
z-index: 4; /* position in front of the annotations */
|
|
||||||
}
|
|
||||||
|
|
||||||
#model-info {
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 24px;
|
|
||||||
padding: 1.25rem;
|
|
||||||
margin: 0px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#model-info h5 {
|
|
||||||
margin: 0px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#model-info p {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blur {
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
}
|
|
||||||
36
src/css/post.css
Normal file
36
src/css/post.css
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
article header h1 {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article header h1 a {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
article header h1 a:focus-visible {
|
||||||
|
outline: 4px solid black;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article header time {
|
||||||
|
display: block;
|
||||||
|
padding: 4px 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article > p {
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article > a {
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li > article ~ li > article {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
outline: 1px solid black;
|
||||||
|
}
|
||||||
129
src/css/reset.css
Normal file
129
src/css/reset.css
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
div,
|
||||||
|
span,
|
||||||
|
applet,
|
||||||
|
object,
|
||||||
|
iframe,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
a,
|
||||||
|
abbr,
|
||||||
|
acronym,
|
||||||
|
address,
|
||||||
|
big,
|
||||||
|
cite,
|
||||||
|
code,
|
||||||
|
del,
|
||||||
|
dfn,
|
||||||
|
em,
|
||||||
|
img,
|
||||||
|
ins,
|
||||||
|
kbd,
|
||||||
|
q,
|
||||||
|
s,
|
||||||
|
samp,
|
||||||
|
small,
|
||||||
|
strike,
|
||||||
|
strong,
|
||||||
|
sub,
|
||||||
|
sup,
|
||||||
|
tt,
|
||||||
|
var,
|
||||||
|
b,
|
||||||
|
u,
|
||||||
|
i,
|
||||||
|
center,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
li,
|
||||||
|
fieldset,
|
||||||
|
form,
|
||||||
|
label,
|
||||||
|
legend,
|
||||||
|
table,
|
||||||
|
caption,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
thead,
|
||||||
|
tr,
|
||||||
|
th,
|
||||||
|
td,
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
canvas,
|
||||||
|
details,
|
||||||
|
embed,
|
||||||
|
figure,
|
||||||
|
figcaption,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
output,
|
||||||
|
ruby,
|
||||||
|
section,
|
||||||
|
summary,
|
||||||
|
time,
|
||||||
|
mark,
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote,
|
||||||
|
q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before,
|
||||||
|
blockquote:after,
|
||||||
|
q:before,
|
||||||
|
q:after {
|
||||||
|
content: "";
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
28
src/css/style.css
Normal file
28
src/css/style.css
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
@import url("./variables.css");
|
||||||
|
@import url("./reset.css");
|
||||||
|
@import url("./header.css");
|
||||||
|
@import url("./footer.css");
|
||||||
|
@import url("./post.css");
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
background-color: var(--white);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main * {
|
||||||
|
max-width: 768px;
|
||||||
|
}
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
/* Only used for the title */
|
|
||||||
.post-style h1 {
|
|
||||||
@apply mt-6 mb-1 text-4xl font-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style h2 {
|
|
||||||
@apply mb-4 mt-10 text-3xl font-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style h3 {
|
|
||||||
@apply mb-4 mt-10 text-2xl font-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style h4 {
|
|
||||||
@apply mb-4 mt-10 text-2xl font-bold italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style h5 {
|
|
||||||
@apply mb-4 mt-10 text-xl italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style h6 {
|
|
||||||
@apply mb-4 mt-10 text-sm italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style blockquote {
|
|
||||||
@apply my-1 mb-5 rounded-r-lg rounded-l-sm border-l-4 border-l-cyan-700 bg-gray-900 p-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style blockquote a {
|
|
||||||
@apply ml-1 text-cyan-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style img {
|
|
||||||
@apply mx-auto rounded-lg my-7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style code:not(pre code) {
|
|
||||||
@apply mx-0.5 my-2 px-2 py-0.5 bg-gray-900 rounded-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-style pre[class^="language-"] {
|
|
||||||
@apply my-7 p-2 rounded-lg bg-gray-900;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*** Model List Styles ***/
|
|
||||||
.model-list-style h1 {
|
|
||||||
@apply mt-6 mb-2 text-4xl font-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Post List */
|
|
||||||
.post-list-style h1 {
|
|
||||||
@apply mt-6 mb-2 text-4xl font-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Other components */
|
|
||||||
|
|
||||||
.cta-button {
|
|
||||||
@apply block w-full rounded-lg bg-cyan-700 p-3 text-center text-xl font-bold uppercase text-white transition-colors ease-in-out hover:bg-cyan-900 sm:mx-auto sm:w-1/2 sm:text-center;
|
|
||||||
}
|
|
||||||
13
src/css/variables.css
Normal file
13
src/css/variables.css
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
:root {
|
||||||
|
--text-color: #000000;
|
||||||
|
--purple-dark: #4c0026;
|
||||||
|
--purple-light: #792f4c;
|
||||||
|
--white: #ffffff;
|
||||||
|
--black: #000000;
|
||||||
|
--navbar-button-hover: #cccccc;
|
||||||
|
--blue-light: #7699d4;
|
||||||
|
--accent: #d3e0f3;
|
||||||
|
--blue-dark: #335c81;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Breakpoints */
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
---
|
|
||||||
layout: base.njk
|
|
||||||
title: luca-junge.de
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="grid gap-10 gap-x-24 sm:grid-cols-1 sm:grid-rows-1 md:grid-cols-2 md:grid-rows-2 md:mt-7">
|
|
||||||
{% for post in collections.post %}
|
|
||||||
<div>
|
|
||||||
<a href="{{post.url}}" class="inline-block md:inline-block text-2xl font-bold tracking-tight text-gray-100">{{post.data.title}}</a>
|
|
||||||
|
|
||||||
<span class="block md:inline-block text-sm md:ml-2 mb-2 text-gray-500">{{post.date | readableDate }}</span>
|
|
||||||
|
|
||||||
<p class="mb-3 font-normal text-gray-400">{{post.templateContent | excerpt}}</p>
|
|
||||||
|
|
||||||
<a href="{{post.url}}" class="inline-flex items-center py-2 px-3 text-sm font-bold text-center text-white bg-gray-700 rounded-lg hover:bg-gray-600 transition ease-in-out">
|
|
||||||
Weiterlesen</a>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-14 bg-gray-800">
|
|
||||||
<span class="block text-center font-bold text-gray-600">
|
|
||||||
<i class="fa fa-angle-up mr-1"></i>POSTS</span>
|
|
||||||
<hr class="h-px border-0 bg-gray-700 my-1">
|
|
||||||
<span class="block text-center font-bold text-gray-600">
|
|
||||||
<i class="fa fa-angle-down mr-1"></i>MODELS</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="grid gap-5 ml-0 grid-cols-1 grid-rows-1 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-3 lg:grid-rows-3">
|
|
||||||
{% for post in collections.model %}
|
|
||||||
{% include "model-preview.njk" %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
27
src/index/index.njk
Normal file
27
src/index/index.njk
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
---
|
||||||
|
layout: base.njk
|
||||||
|
title: luca-junge.de
|
||||||
|
permalink: /index.html
|
||||||
|
---
|
||||||
|
<p>Hello World</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{%- for post in collections.post -%}
|
||||||
|
<li>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>
|
||||||
|
<a href="{{post.url}}">{{post.data.title}}</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<time>{{post.date | formatDate }}</time>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<p>{{post.templateContent | createExcerpt}}</p>
|
||||||
|
|
||||||
|
<a href="{{post.url}}">
|
||||||
|
Weiterlesen</a>
|
||||||
|
</article>
|
||||||
|
</li>
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
1
src/libs/chart.min.js
vendored
Normal file
1
src/libs/chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,13 +0,0 @@
|
||||||
---
|
|
||||||
title: Amtsgericht Varel
|
|
||||||
file: model.glb
|
|
||||||
alt: Ein Teil der Frontseite des Amtsgerichts in Varel
|
|
||||||
---
|
|
||||||
|
|
||||||
<button class="Hotspot" slot="hotspot-1" data-surface="0 0 27445 26933 27449 0.457 0.230 0.313" data-visibility-attribute="visible">
|
|
||||||
<div class="HotspotAnnotation">1870</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="Hotspot" slot="hotspot-2" data-surface="0 0 202893 202896 208895 0.083 0.207 0.710" data-visibility-attribute="visible">
|
|
||||||
<div class="HotspotAnnotation">Front Door</div>
|
|
||||||
</button>
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 302 KiB |
|
|
@ -1,8 +0,0 @@
|
||||||
{
|
|
||||||
"layout": "modelviewer.njk",
|
|
||||||
"title": "Unbenannt",
|
|
||||||
"tags": "model",
|
|
||||||
"author": "Luca Junge",
|
|
||||||
"date": "Created",
|
|
||||||
"modelurl": "model.glb"
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
---
|
|
||||||
layout: model-list.njk
|
|
||||||
title: Alle 3D-Modelle
|
|
||||||
eleventyExcludeFromCollections: true
|
|
||||||
---
|
|
||||||
<ul class="grid gap-5 ml-0 mt-0 grid-cols-1 grid-rows-1 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-3 lg:grid-rows-3">
|
|
||||||
{% for post in collections.model %}
|
|
||||||
{% include "model-preview.njk" %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
---
|
|
||||||
title: Stadttheater Bremerhaven
|
|
||||||
alt: Ein 3D-Modell des Stadttheaters in Bremerhaven
|
|
||||||
---
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
|
|
@ -1,17 +0,0 @@
|
||||||
---
|
|
||||||
title: Toy Duck
|
|
||||||
file: model.glb
|
|
||||||
alt: A 3d model of a toy duck
|
|
||||||
---
|
|
||||||
|
|
||||||
<button class="Hotspot" slot="hotspot-1" data-position="0.034086908507172255m 0.035633058045035026m 0.0008323315838707837m" data-normal="0.11076220205426575m 0.9733893287613071m 0.2006114384817127m" data-visibility-attribute="visible">
|
|
||||||
<div class="HotspotAnnotation">The Beak</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="Hotspot" slot="hotspot-2" data-position="-0.0077982119614389955m -0.008128374324366697m -0.034137767670381604m" data-normal="-0.2165819895695754m 0.2073173991125989m -0.9539977661500428m" data-visibility-attribute="visible">
|
|
||||||
<div class="HotspotAnnotation">A Wing</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="Hotspot" slot="hotspot-3" data-position="-0.04329843722003483m 0.011786457618276569m 0.0029983665888340706m" data-normal="-0.7752145503176167m 0.6212154023517756m 0.11460290073456728m" data-visibility-attribute="visible">
|
|
||||||
<div class="HotspotAnnotation">The Tail</div>
|
|
||||||
</button>
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 130 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,19 +1,19 @@
|
||||||
---
|
---
|
||||||
title: Adding custom icons for MIME types on linux
|
title: Adding custom icons for MIME types on linux
|
||||||
sources:
|
sources:
|
||||||
- https://blog.robertelder.org/custom-mime-type-ubuntu/
|
- https://blog.robertelder.org/custom-mime-type-ubuntu/
|
||||||
- another source
|
- another source
|
||||||
---
|
---
|
||||||
|
|
||||||
# The problem
|
# The problem
|
||||||
|
|
||||||
I frequently work with 3D models in the web and therefore with .gltf or .glb files. These formats are the best choice for compressing and optimizing models for the web but they still seem to lack support in operating systems and their file managers. That is also the case for the preview icons. For example, that's how a .gltf file shows up in my file manager in Fedora 38 (Nautilus):
|
I frequently work with 3D models in the web and therefore with .gltf or .glb files. These formats are the best choice for compressing and optimizing models for the web but they still seem to lack support in operating systems and their file managers. That is also the case for the preview icons. For example, that's how a .gltf file shows up in the default file manager in Fedora 38, which is Nautilus:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
That's a very bad icon for files. It's blurry, shows a warning symbol and does not really represent the file contents.
|
That's obviously not very helpful. It's blurry, shows a warning symbol and does not really represent the file's contents.
|
||||||
|
|
||||||
I was wondering if it's possible to change icons for specific file types (also called MIME types) and as it turns out, it's possible on Linux!
|
I was wondering if it's possible to change icons for specific file types (also called MIME types) and as it turns out, it's possible!
|
||||||
|
|
||||||
## What to do
|
## What to do
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
|
@ -1,29 +1,21 @@
|
||||||
---
|
---
|
||||||
title: My favorite open source tools
|
title: My favorite open source tools
|
||||||
header: header.jpg
|
header: header.jpg
|
||||||
|
draft: false
|
||||||
---
|
---
|
||||||
|
|
||||||
I'm a huge fan of all things open-source. I've spent many hours exploring open-source software, and I've discovered so many fantastic tools and apps that have improved my workflows in so many ways. I want to share my personal favorites with this blog post.
|
## Design and Prototype
|
||||||
These are the open-source gems that I believe deserve a spot on everyone's computer. I hope you'll enjoy them as much as I do! Let's get started!
|
|
||||||
|
|
||||||
## Design & Prototyping
|
|
||||||
|
|
||||||
For the few times that I need to design something or prototype something visually, I found that using open-source tools helps me in saving costs for subscriptions or software itself.
|
|
||||||
|
|
||||||
### Penpot
|
### Penpot
|
||||||
|
|
||||||
> **Repository:** [https://github.com/penpot/penpot](https://github.com/penpot/penpot)
|
> **Repository:** [https://github.com/penpot/penpot](https://github.com/penpot/penpot)
|
||||||
|
|
||||||
Penpot is an exceptional open-source software due to its versatile design capabilities, collaborative features, and platform independence. It offers a range of design tools such as vector editing, layer management, and reusable components, allowing users to create detailed UI/UX designs. The platform facilitates real-time collaboration, enabling design teams to work together effectively on shared projects. As a browser-based application, Penpot is compatible with various operating systems, making it accessible to a wide range of users.
|
|
||||||
|
|
||||||
<a class="cta-button my-4" href="https://penpot.app/">Try Penpot</a>
|
<a class="cta-button my-4" href="https://penpot.app/">Try Penpot</a>
|
||||||
|
|
||||||
### Excalidraw
|
### Excalidraw
|
||||||
|
|
||||||
> **Repository:** [https://github.com/excalidraw/excalidraw](https://github.com/excalidraw/excalidraw)
|
> **Repository:** [https://github.com/excalidraw/excalidraw](https://github.com/excalidraw/excalidraw)
|
||||||
|
|
||||||
Excalidraw excels as an open-source software with its user-friendly interface, powerful drawing tools, and collaborative features. Users can create freehand drawings, shapes, and insert text with customizable styles and colors. Real-time collaboration is enabled through shareable links, allowing teams to work together seamlessly. Lastly, its ability to export drawings in various formats, like SVG and PNG, makes it a versatile tool for users across different industries.
|
|
||||||
|
|
||||||
<a class="cta-button my-4" href="https://excalidraw.com/">Try Excalidraw</a>
|
<a class="cta-button my-4" href="https://excalidraw.com/">Try Excalidraw</a>
|
||||||
|
|
||||||
## Game Development
|
## Game Development
|
||||||
|
|
@ -32,40 +24,28 @@ Excalidraw excels as an open-source software with its user-friendly interface, p
|
||||||
|
|
||||||
> **Repository:** [https://github.com/godotengine/godot](https://github.com/godotengine/godot)
|
> **Repository:** [https://github.com/godotengine/godot](https://github.com/godotengine/godot)
|
||||||
|
|
||||||
Godot is a remarkable open-source software due to its comprehensive game development capabilities, flexibility, and active community support. The engine provides a feature-rich environment with a powerful scene system, visual scripting, and built-in node architecture, enabling users to create both 2D and 3D games with ease. Its scripting language, GDScript, is easy to learn and offers a high level of customization, allowing developers to create unique gameplay mechanics. Furthermore, the thriving Godot community fosters continual improvement and offers invaluable resources for developers, from tutorials to asset libraries.
|
|
||||||
|
|
||||||
<a class="cta-button my-4" href="https://godotengine.org/">Try Godot</a>
|
<a class="cta-button my-4" href="https://godotengine.org/">Try Godot</a>
|
||||||
|
|
||||||
### Aseprite
|
### Aseprite
|
||||||
|
|
||||||
> **Repository:** [https://github.com/aseprite/aseprite/](https://github.com/aseprite/aseprite/)
|
> **Repository:** [https://github.com/aseprite/aseprite/](https://github.com/aseprite/aseprite/)
|
||||||
|
|
||||||
Aseprite is an outstanding open-source software, specifically designed for creating pixel art and animations, with a user-friendly interface and an extensive set of tools. It offers a wide range of features such as layers, frames, customizable palettes, and tileset support, which empower artists to produce detailed and intricate designs. Aseprite also includes advanced animation capabilities with onion skinning, sprite sheet generation, and loop controls, enabling users to bring their creations to life. Furthermore, the active community behind Aseprite ensures ongoing development, support, and a wealth of learning resources for users.
|
|
||||||
|
|
||||||
<a class="cta-button my-4" href="https://www.aseprite.org/">Try Aseprite</a>
|
<a class="cta-button my-4" href="https://www.aseprite.org/">Try Aseprite</a>
|
||||||
|
|
||||||
## Modelling & Texturing
|
## Modelling & Texturing
|
||||||
|
|
||||||
### Material Maker
|
### Material Maker
|
||||||
|
|
||||||
Material Maker (a software made with the Godot Engine btw) can be best described as a tool for creating textures with a node-based setup. You combine different types of nodes that influence your texture (e.g. adds a pattern, rotates the texture or adds contrast or shapes to it) into a final graph that computes your final texture. There are great examples of these node graphs out there for you to take a look at. If you need a procedurally generated texture, try it out.
|
|
||||||
|
|
||||||
<a class="cta-button my-4" href="https://www.materialmaker.org/">Try Material Maker</a>
|
<a class="cta-button my-4" href="https://www.materialmaker.org/">Try Material Maker</a>
|
||||||
|
|
||||||
|
|
||||||
### Blender
|
### Blender
|
||||||
|
|
||||||
Blender is a whole suite of tools related to graphics and 3d modelling. You can edit your 3d models, texture them or render out images from your models. I use it mostly to edit my 3d meshes from photogrammetry or 3d scans and optimize them for the web.
|
|
||||||
|
|
||||||
<a class="cta-button my-4" href="https://www.blender.org/">Try Blender</a>
|
<a class="cta-button my-4" href="https://www.blender.org/">Try Blender</a>
|
||||||
|
|
||||||
|
|
||||||
## Typesetting and Writing
|
## Typesetting and Writing
|
||||||
|
|
||||||
### Typst
|
### Typst
|
||||||
|
|
||||||
> **Repository:** [https://github.com/typst/typst](https://github.com/typst/typst)
|
> **Repository:** [https://github.com/typst/typst](https://github.com/typst/typst)
|
||||||
|
|
||||||
Typst is a great open-source software that offers seamless collaboration, customizable templates, and an intuitive environment for creating and editing documents. It runs in a browser, allowing users to work together across different locations and ensuring that everyone stays on the same page with shared documents in team workspaces. The software's reactive templates automatically format content as users type, and it supports switching templates without altering the content. With features like instant previews, clear error messages, familiar programming constructs, and easy formula editing, Typst is designed for scientific writing but is also easily accessible by beginners.
|
|
||||||
|
|
||||||
<a class="cta-button my-4" href="https://typst.app/">Try Typst</a>
|
<a class="cta-button my-4" href="https://typst.app/">Try Typst</a>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
---
|
|
||||||
title: Building Meshlab for Windows
|
|
||||||
draft: true
|
|
||||||
---
|
|
||||||
|
|
||||||
# Introduction
|
|
||||||
|
|
||||||
How to build meshlab for windows
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
---
|
|
||||||
title: Configuring Eleventy
|
|
||||||
draft: true
|
|
||||||
---
|
|
||||||
|
|
||||||
# Was ist Eleventy?
|
|
||||||
|
|
||||||
Eleventy ist ein Generator für statische Webseiten, der auch meine Webseite zum Laufen bringt.
|
|
||||||
Er ist zwar sehr flexibel, was aber auch bedeutet, dass es einige Zeit braucht um ein gutes, erweiterbares Grundsystem zu haben.
|
|
||||||
Aktuell habe ich zwei Hauptkategorien ("posts" und "models"), die jeweils in einer Unterkategorie zu finden sind.
|
|
||||||
|
|
||||||
> Siehe [https://luca-junge.de/posts](https://luca-junge.de/posts) und [https://luca-junge.de/models](https://luca-junge.de/models)
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
---
|
|
||||||
title: Godot 4.0 Debugger Plugin
|
|
||||||
draft: true
|
|
||||||
---
|
|
||||||
|
|
||||||
# Why I created this plugin
|
|
||||||
|
|
||||||
ToDo
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
---
|
|
||||||
title: How to automate decimating meshes with MeshLab and Blender
|
|
||||||
draft: true
|
|
||||||
---
|
|
||||||
|
|
||||||
# ToDo
|
|
||||||
|
|
||||||
Explain workflow here
|
|
||||||
5
src/posts/open-source-donations/index.md
Normal file
5
src/posts/open-source-donations/index.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Open Source Donations
|
||||||
|
layout: pie-chart.njk
|
||||||
|
draft: false
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"projects": [
|
||||||
|
{
|
||||||
|
"name": "Godot Engine",
|
||||||
|
"amount": "25"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Kenney (Game Assets)",
|
||||||
|
"amount": "4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Mozilla Thunderbird",
|
||||||
|
"amount": "5.70"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"layout": "post.njk",
|
"layout": "post.njk",
|
||||||
"title": "Unbenannt",
|
"title": "Unnamed",
|
||||||
"tags": "post",
|
"tags": "post",
|
||||||
"author": "Luca Junge",
|
"author": "Luca Junge",
|
||||||
"date": "Created"
|
"date": "Created"
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,23 @@ layout: post-list.njk
|
||||||
eleventyExcludeFromCollections: true
|
eleventyExcludeFromCollections: true
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="grid gap-10 gap-x-24 sm:grid-cols-1 sm:grid-rows-1">
|
<ul>
|
||||||
{% for post in collections.post %}
|
{%- for post in collections.post -%}
|
||||||
<div>
|
<li>
|
||||||
<a href="{{post.url}}" class="inline-block md:inline-block text-2xl font-bold tracking-tight text-gray-100">{{post.data.title}}</a>
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>
|
||||||
|
<a href="{{post.url}}">{{post.data.title}}</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<span class="block md:inline-block text-sm md:ml-2 mb-2 text-gray-500">{{post.date | readableDate }}</span>
|
<time>{{post.date | formatDate }}</time>
|
||||||
|
</header>
|
||||||
|
|
||||||
<p class="mb-3 font-normal text-gray-400">{{post.templateContent | excerpt}}</p>
|
<p>{{post.templateContent | createExcerpt}}</p>
|
||||||
|
|
||||||
<a href="{{post.url}}" class="inline-flex items-center py-2 px-3 text-sm font-bold text-center text-white bg-gray-700 rounded-lg hover:bg-gray-600 transition ease-in-out">
|
<a href="{{post.url}}">
|
||||||
Weiterlesen</a>
|
Weiterlesen</a>
|
||||||
</div>
|
</article>
|
||||||
{% endfor %}
|
</li>
|
||||||
</div>
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
content: ["./src/**/**/*.{njk,md}"],
|
|
||||||
theme: {
|
|
||||||
screens: {
|
|
||||||
'xs': '475px',
|
|
||||||
...defaultTheme.screens
|
|
||||||
},
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue