Ledda/djledda-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

big updats

Browse Source
This commit is contained in:
Daniel Ledda
2025-12-20 00:10:42 +01:00
parent a93ffff00d
commit 51e44db779
25 changed files with 570 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
app/DJDonate.tsx → app/DjDonate.tsx
View File

0
app/DJEmail.tsx → app/DjEmail.tsx
View File

4
app/DJTooltip.tsx → app/DjTooltip.tsx
View File

@@ -1,4 +1,4 @@
import { nextTick, inject, provide, watch, type InjectionKey, onBeforeUnmount, watchEffect, onMounted, type Ref, type CSSProperties, defineComponent, ref } from "vue";
import { nextTick, inject, provide, watch, type InjectionKey, onBeforeUnmount, watchEffect, onMounted, type Ref, defineComponent, ref } from "vue";
import { addCSS, css, h as djh } from "@/util.ts";
type TooltipContext = {
@@ -122,7 +122,7 @@ export default defineComponent({
{...attrs}
onMouseenter={(e) => tooltip.show(props.tooltip, e.pageX, e.pageY)}
onMouseleave={() => tooltip.hide()}>
{slots.default && <slots.default />}
{slots.default?.()}
</div>
</>;
},

22
app/api.ts
View File

@@ -1,23 +1,23 @@
export type DJAPIEndpoint = "/rp-articles";
export type DjAPIEndpoint = "/rp-articles";
type RPArticle = {
title: string,
slug: string;
titleDe: string,
titleEn: string,
author: string,
type RPArticle = {
title: string,
slug: string;
titleDe: string,
titleEn: string,
author: string,
tags?: string[],
};
export interface DJAPIResultMap extends Record<DJAPIEndpoint, unknown> {
export interface DjAPIResultMap extends Record<DjAPIEndpoint, unknown> {
"/rp-articles": RPArticle[];
}
export type DJAPIResult = DJAPIResultMap[DJAPIEndpoint];
export type DjAPIResult = DjAPIResultMap[DjAPIEndpoint];
export default async function getDJAPI<T extends DJAPIEndpoint>(
export default async function getDjAPI<T extends DjAPIEndpoint>(
hostUrl: string,
endpoint: T,
): Promise<DJAPIResultMap[typeof endpoint]> {
): Promise<DjAPIResultMap[typeof endpoint]> {
return await (await fetch(`${hostUrl}/api${endpoint}`)).json();
}

39
app/blog/DjBlogRoot.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { defineComponent, ref } from "vue";
import useHead from "@/useHead.ts";
import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
import { addCSS, css } from "@/util.ts";
const styles = css`
.supercontainer {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 800px;
}
`;
export default defineComponent({
name: "app-root",
setup() {
addCSS('dj-blog-root', styles);
useHead({ title: "djblog Home" });
const tooltipCarrier = ref<HTMLDivElement | null>(null);
setupTooltip({ carrier: tooltipCarrier });
return () => <>
<div ref={tooltipCarrier} class="tooltip-carrier" />
<div class="supercontainer">
<div class="container">
<DjTooltip tooltip="come in and find out...">
<h1>dj blog</h1>
</DjTooltip>
</div>
</div>
</>;
},
});

7
app/blog/client.ts Normal file
View File

@@ -0,0 +1,7 @@
import { createSSRApp } from "vue";
import DjBlogRoot from "@/blog//DjBlogRoot.tsx";
import { cssRegistry } from "@/util.ts";
createSSRApp(DjBlogRoot)
.provide(cssRegistry, new Set())
.mount("#app-root");

7
app/blog/server.ts Normal file
View File

@@ -0,0 +1,7 @@
import { createSSRApp } from "vue";
import DjBlogRoot from "@/blog/DjBlogRoot.tsx";
export default function createApp() {
const app = createSSRApp(DjBlogRoot);
return { app, router: null };
}

24
app/generative-energy/GEDeutsch.tsx
View File

@@ -1,22 +1,20 @@
import { defineComponent } from "vue";
import { RouterLink } from "vue-router";
import DJEmail from "@/DJEmail.tsx";
import DjEmail from "@/DjEmail.tsx";
import useHead from "@/useHead.ts";
import useAsyncState from "@/useAsyncState.ts";
import getDJAPI from "@/api.ts";
import DJTooltip from "@/DJTooltip.tsx";
import getDjAPI from "@/api.ts";
import DjTooltip from "@/DjTooltip.tsx";
export default defineComponent({
name: "ge-deutsch",
async setup() {
useHead({ title: "Ray Peat Artikel auf Deutsch" });
const {
result: rpArticles,
stateIsReady,
} = useAsyncState("rp-articles", ({ hostUrl }) => getDJAPI(hostUrl, "/rp-articles"));
const rpArticles = useAsyncState("rp-articles", ({ hostUrl }) => getDjAPI(hostUrl, "/rp-articles"));
await rpArticles.done;
await stateIsReady;
return () => <>
<header>
<h1>Ray Peat Deutsche Übersetzungen</h1>
@@ -29,9 +27,9 @@ export default defineComponent({
<h2>Artikelliste</h2>
<div class="text-slab">
<ul id="article">
{rpArticles.value && rpArticles.value.map((_) => (
{rpArticles.result.value && rpArticles.result.value.map((_) => (
<li>
<DJTooltip tooltip={`Englischer Titel: <em>»${ _.titleEn }«</em>`}>
<DjTooltip tooltip={`Englischer Titel: <em>»${ _.titleEn }«</em>`}>
{_.tags?.includes('in-arbeit')
? _.titleDe
: (
@@ -40,7 +38,7 @@ export default defineComponent({
</RouterLink>
)}
{_.tags?.map(tag => <span class="tag">{tag}</span>)}
</DJTooltip>
</DjTooltip>
</li>
))}
</ul>
@@ -56,7 +54,7 @@ export default defineComponent({
<li><a href="http://raypeat.com/articles/articles/gelatin.shtml">Gelatin, stress, longevity</a></li>
<li><a href="http://raypeat.com/articles/articles/unsaturatedfats.shtml">Unsaturated fatty acids: Nutritionally essential, or toxic?</a></li>
</ul>
<DJEmail>Schick mir deine Vorschläge!</DJEmail>
<DjEmail>Schick mir deine Vorschläge!</DjEmail>
</div>
</section>
<section>
@@ -82,7 +80,7 @@ export default defineComponent({
<h3>Helfen</h3>
<p class="text-slab">
Falls was bei der Übersetzung auffällt oder besonders unidiomatisch klingt, bzw. der deutschen
Fachsprache der Medizin nicht gerecht sein sollte, kannst du mir unter <DJEmail />{" "}
Fachsprache der Medizin nicht gerecht sein sollte, kannst du mir unter <DjEmail />{" "}
eine Mail senden. Meine Muttersprache ist schließlich Englisch und ich bin kein professioneller
Übersetzer!
Falls jemand Hilfe leisten möchte, sag gerne Bescheid!

29
app/generative-energy/GEDeutschArticle.tsx
View File

@@ -1,9 +1,9 @@
import { createTextVNode, computed, defineComponent, h, inject, onServerPrefetch, ref, type VNode, watchEffect } from "vue";
import { createTextVNode, computed, defineComponent, h, inject, ref, type VNode } from "vue";
import { RouterLink } from "vue-router";
import useAsyncState from "@/useAsyncState.ts";
import useHead from "@/useHead.ts";
import DJEmail from "@/DJEmail.tsx";
import getDJAPI from "@/api.ts";
import DjEmail from "@/DjEmail.tsx";
import getDjAPI from "@/api.ts";
export default defineComponent({
name: "ge-deutsch-article",
@@ -25,8 +25,8 @@ export default defineComponent({
(innerHTML: string) => Object.assign(document.createElement("div"), { innerHTML }),
);
const { result: articleContent, stateIsReady } = useAsyncState(
"ge-deutsch-article-data",
const articleContent = useAsyncState(
"ge-deutsch-article-content",
async ({ hostUrl }) => {
const articleResponse = await fetch(`${hostUrl}/generative-energy/content/${props.articleName}.html`);
const result = await articleResponse.text();
@@ -34,15 +34,12 @@ export default defineComponent({
},
);
const {
result: articleData,
stateIsReady: articleDataReady,
} = useAsyncState('article-data', ({hostUrl}) => getDJAPI(hostUrl, '/rp-articles'));
const articlesMetadata = useAsyncState('article-metadata', ({hostUrl}) => getDjAPI(hostUrl, '/rp-articles'));
const articleMetadata = computed(() => articleData.value?.find(_ => _.slug === props.articleName));
const articleMetadata = computed(() => articlesMetadata.result.value?.find(_ => _.slug === props.articleName));
useHead({
title: () => articleMetadata.value?.title ?? '',
useHead({
title: () => articleMetadata.value?.title ?? '',
metatags: () => articleMetadata.value ? [
{ name: 'title', content: articleMetadata.value.title },
{ name: 'author', content: articleMetadata.value.author },
@@ -92,14 +89,14 @@ export default defineComponent({
}
function ArticleContentTransformed() {
if (articleContent.value) {
const dom = parseDom(articleContent.value);
if (articleContent.result.value) {
const dom = parseDom(articleContent.result.value);
return h("div", {}, [...dom.children].map((_) => transformArticleNode(_)));
}
return <div>Artikel lädt...</div>;
}
await Promise.all([stateIsReady, articleDataReady]);
await Promise.all([ articleContent.done, articlesMetadata.done ]);
return () => (
<div class="ge-article">
@@ -111,7 +108,7 @@ export default defineComponent({
</div>
<p class="text-slab">
Bei dem untenstehenden Artikel handelt es sich um eine hobbymäßige, amateurhafte Übersetzung des
Artikels „{ articleMetadata.value?.titleEn }“ von Ray Peat. Bei Ungenauigkeiten oder Fehlübersetzungen freue ich mich über <DJEmail>eine Mail</DJEmail>!
Artikels „{ articleMetadata.value?.titleEn }“ von Ray Peat. Bei Ungenauigkeiten oder Fehlübersetzungen freue ich mich über <DjEmail>eine Mail</DjEmail>!
</p>
{ articleMetadata.value?.tags?.includes('in-arbeit') && <h5 class="baustelle">🚧 Bitte beachte, dass diese Übersetzung noch in Arbeit ist! 🚧</h5> }
<hr />

18
app/generative-energy/GEMain.tsx
View File

@@ -1,6 +1,6 @@
import { RouterLink } from "vue-router";
import useHead from "@/useHead.ts";
import DJTooltip from "@/DJTooltip.tsx";
import DjTooltip from "@/DjTooltip.tsx";
export default {
name: "ge-main",
@@ -21,14 +21,14 @@ export default {
<div class="text-slab">
<ul>
<li>
<DJTooltip tooltip="Convert to and from grains, set ratios, etc.">
<DjTooltip tooltip="Convert to and from grains, set ratios, etc.">
<RouterLink to={{ name: "GECalculator" }}>Thyroid Calculator</RouterLink>
</DJTooltip>
</DjTooltip>
</li>
<li>
<DJTooltip tooltip="A selection of articles by Ray that I have translated in my spare time into German.">
<DjTooltip tooltip="A selection of articles by Ray that I have translated in my spare time into German.">
<RouterLink to={{ name: "GEDeutsch" }}>Ray Peat Articles in German</RouterLink>
</DJTooltip>
</DjTooltip>
</li>
</ul>
</div>
@@ -36,14 +36,14 @@ export default {
<div class="text-slab">
<ul>
<li>
<DJTooltip tooltip="Full text search of the majority of Ray's interviews. Extremely helpful and fun to use.">
<DjTooltip tooltip="Full text search of the majority of Ray's interviews. Extremely helpful and fun to use.">
<a href="https://bioenergeic.life">bioenergetic.life - A Ray Peat Search Engine</a>
</DJTooltip>
</DjTooltip>
</li>
<li>
<DJTooltip tooltip="Ray's original website with articles and bookstore">
<DjTooltip tooltip="Ray's original website with articles and bookstore">
<a href="https://raypeat.com">raypeat.com</a>
</DJTooltip>
</DjTooltip>
</li>
</ul>
</div>

10
app/generative-energy/GERoot.tsx
View File

@@ -1,12 +1,12 @@
import { defineComponent, ref, Suspense, type VNode } from "vue";
import { type RouteRecordRaw, RouterLink, RouterView, useRoute } from "vue-router";
import GEMain from "@/generative-energy/GEMain.tsx";
import DJEmail from "@/DJEmail.tsx";
import DjEmail from "@/DjEmail.tsx";
import GEDeutsch from "@/generative-energy/GEDeutsch.tsx";
import GEDeutschArticle from "@/generative-energy/GEDeutschArticle.tsx";
import GECalculator from "@/generative-energy/GECalculator.tsx";
import DJDonate from "@/DJDonate.tsx";
import { setupTooltip } from "@/DJTooltip.tsx";
import DjDonate from "@/DjDonate.tsx";
import { setupTooltip } from "@/DjTooltip.tsx";
export const routes: RouteRecordRaw[] = [
{
@@ -67,9 +67,9 @@ export default defineComponent({
<footer>
<div class="bottom">
<div>
<a href="/">djledda.net</a> {new Date().getFullYear()} - <DJEmail>{() => "Contact"}</DJEmail>
<a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
</div>
<DJDonate />
<DjDonate />
</div>
</footer>
</main>

48
app/home/DJHomeRoot.tsx → app/home/DjHomeRoot.tsx
View File

@@ -1,7 +1,7 @@
import { defineComponent, computed, ref, type Ref } from "vue";
import useHead from "@/useHead.ts";
import DJTooltip, { setupTooltip } from "@/DJTooltip.tsx";
import DJEmail from "@/DJEmail.tsx";
import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
import DjEmail from "@/DjEmail.tsx";
export default defineComponent({
name: "app-root",
@@ -33,64 +33,64 @@ export default defineComponent({
<div class="supercontainer">
<div class={{ shakeable: true, shakeMe: shaking.value }}>
<div class="title_name">
<DJTooltip tooltip="I wonder what he's listening to?">
<DjTooltip tooltip="I wonder what he's listening to?">
<img src="/home/img/dj.gif" alt="dj legt krasse Mucke auf"
class={{ dude: true, spinMe: dude1Spinning.value }}
onClick={ (e) => toggleDude(e, dude1Spinning)} />
</DJTooltip>
<DJTooltip tooltip="Easily the coolest guy out there.">
</DjTooltip>
<DjTooltip tooltip="Easily the coolest guy out there.">
<span>DJ Ledda</span>
</DJTooltip>
<DJTooltip tooltip="I once heard this guy played at revs.">
</DjTooltip>
<DjTooltip tooltip="I once heard this guy played at revs.">
<img src="/home/img/dj.gif" alt="dj laying down some sick beats"
class={{ dude: true, spinMe: dude2Spinning.value }}
onClick={ (e) => toggleDude(e, dude2Spinning) } />
</DJTooltip>
</DjTooltip>
</div>
<div class="main">
<div class="subject">
<div class="resourcelist">
<a href="https://drum-slayer.com">
<DJTooltip class="resource" tooltip="Small app for designing multitrack looped rhythms with local save and multiple files. Originally built using just vanilla TypeScript and CSS, now with Vue.">
<DjTooltip class="resource" tooltip="Small app for designing multitrack looped rhythms with local save and multiple files. Originally built using just vanilla TypeScript and CSS, now with Vue.">
Drum Slayer
</DJTooltip>
</DjTooltip>
</a>
<a href="/somaesque/index.html">
<DJTooltip class="resource" tooltip="Puzzle solver app for puzzle cubes resembling the original Soma Cube puzzle. Save and edit your own puzzles! Built with Svelte, THREE.js and AssemblyScript.">
<DjTooltip class="resource" tooltip="Puzzle solver app for puzzle cubes resembling the original Soma Cube puzzle. Save and edit your own puzzles! Built with Svelte, THREE.js and AssemblyScript.">
Somaesque
</DJTooltip>
</DjTooltip>
</a>
<a href="/generative-energy">
<DJTooltip class="resource" tooltip="Thyroid calculator, German translations, and more...">
<DjTooltip class="resource" tooltip="Thyroid calculator, German translations, and more...">
Generative Energy - Ray Peat Resources
</DJTooltip>
</DjTooltip>
</a>
<a href="/home/muenchen-auf-englisch.html">
<DJTooltip class="resource" tooltip="
<DjTooltip class="resource" tooltip="
Authentic historically accurate translations of all of Munich's S-Bahn and U-Bahn
stations, as well as the main municipalities, into English. You live in Allach? It's
Axleigh now. Giesing? Nope! Kyesing! This is a WIP.
">
M&uuml;nchen auf Englisch - Munich in English
</DJTooltip>
</DjTooltip>
</a>
<a href="/kadi/">
<DJTooltip class="resource" tooltip="Make an account and start saving paper and tracking your Yatzy stats with your
<DjTooltip class="resource" tooltip="Make an account and start saving paper and tracking your Yatzy stats with your
friends! Make your own rulesets, and more. Built with React, express.js, and
MongoDB. Currently inactive.">
K A D I: Online Yatzy Scoresheets
</DJTooltip>
</DjTooltip>
</a>
<a href="https://git.djledda.net/Ledda">
<DJTooltip class="resource" tooltip="Check out what I'm coding!">
<DjTooltip class="resource" tooltip="Check out what I'm coding!">
My git projects
</DJTooltip>
</DjTooltip>
</a>
<DJEmail>
<DJTooltip class="resource" tooltip="You'll see my address when you click here.">
<DjEmail>
<DjTooltip class="resource" tooltip="You'll see my address when you click here.">
Click here to get in touch
</DJTooltip>
</DJEmail>
</DjTooltip>
</DjEmail>
</div>
</div>
</div>

4
app/home/client.ts
View File

@@ -1,7 +1,7 @@
import { createSSRApp } from "vue";
import DJHomeRoot from "@/home/DJHomeRoot.tsx";
import DjHomeRoot from "@/home/DjHomeRoot.tsx";
import { cssRegistry } from "@/util.ts";
createSSRApp(DJHomeRoot)
createSSRApp(DjHomeRoot)
.provide(cssRegistry, new Set())
.mount("#app-root");

4
app/home/server.ts
View File

@@ -1,7 +1,7 @@
import { createSSRApp } from "vue";
import DJHomeRoot from "@/home/DJHomeRoot.tsx";
import DjHomeRoot from "@/home/DjHomeRoot.tsx";
export default function createApp() {
const app = createSSRApp(DJHomeRoot);
const app = createSSRApp(DjHomeRoot);
return { app, router: null };
}

9
app/useAsyncState.ts
View File

@@ -1,8 +1,7 @@
import { onMounted, onServerPrefetch, type ShallowRef, shallowRef } from "vue";
import useDJSSRContext from "@/useDJSSRContext.ts";
import useDjSSRContext from "@/useDjSSRContext.ts";
declare global {
// deno-lint-ignore no-var
var appstate: Partial<Record<string, unknown>>;
}
@@ -10,8 +9,8 @@ export default function useAsyncState<T>(
key: string,
getter: (context: { hostUrl: string }) => Promise<T | null>,
options?: { suspensible: boolean },
): { result: ShallowRef<T | null>; stateIsReady: Promise<unknown> } {
const ssrContext = useDJSSRContext();
): { result: ShallowRef<T | null>; done: Promise<void> } {
const ssrContext = useDjSSRContext();
const isClient = typeof ssrContext === "undefined";
const registry = ssrContext?.registry ?? globalThis?.appstate;
@@ -51,5 +50,5 @@ export default function useAsyncState<T>(
}
}
return { result: state, stateIsReady: promise };
return { result: state, done: promise };
}

6
app/useDJSSRContext.ts → app/useDjSSRContext.ts
View File

@@ -1,6 +1,6 @@
import { type MaybeRefOrGetter, useSSRContext } from "vue";
export type DJSSRContext = {
export type DjSSRContext = {
head: {
title: MaybeRefOrGetter<string>;
metatags: MaybeRefOrGetter<Array<{ name: string, content: string }>>;
@@ -9,6 +9,6 @@ export type DJSSRContext = {
styles: Record<string, string>;
};
export default function useDJSSRContext() {
return useSSRContext<DJSSRContext>();
export default function useDjSSRContext() {
return useSSRContext<DjSSRContext>();
}

4
app/useHead.ts
View File

@@ -1,12 +1,12 @@
import { watch, toValue, type MaybeRefOrGetter } from 'vue';
import useDJSSRContext from "@/useDJSSRContext.ts";
import useDjSSRContext from "@/useDjSSRContext.ts";
import { h } from "@/util.ts";
export default function useHead(params: {
title: MaybeRefOrGetter<string>,
metatags?: MaybeRefOrGetter<Array<{ name: string, content: string }>>
}) {
const context = useDJSSRContext();
const context = useDjSSRContext();
if (context) {
context.head.title = params.title;

22
app/util.ts
View File

@@ -1,5 +1,5 @@
import { type InjectionKey, inject } from 'vue';
import useDJSSRContext from "@/useDJSSRContext.ts";
import useDjSSRContext from "@/useDjSSRContext.ts";
export function gid(id: string, doc: (Document | ShadowRoot) | undefined) {
return ((doc ?? document).getElementById(id));
@@ -46,7 +46,7 @@ export function css(strs: TemplateStringsArray, ...vals: string[]) {
export const cssRegistry = Symbol('css-registry') as InjectionKey<Set<string>>;
export function addCSS(key: string, css: string) {
const context = useDJSSRContext();
const context = useDjSSRContext();
if (context && !context.styles[key]) {
context.styles[key] = css;
} else {
@@ -58,21 +58,3 @@ export function addCSS(key: string, css: string) {
}
}
}
/*
export class DJElement extends HTMLElement {
static styles: CSSStyleSheet;
static template: HTMLTemplateElement;
root: ShadowRoot;
constructor() {
super();
const statics = this.constructor as typeof DJElement;
this.root = this.attachShadow({ mode: "open" });
this.root.appendChild(statics.template.content.cloneNode(true));
this.root.adoptedStyleSheets = statics.styles ? [statics.styles] : [];
}
}
*/