adb/ddix-solid
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add content

Browse Source
This commit is contained in:
adb-sh 2024-05-28 14:14:49 +02:00
parent 500e6c69db
commit 3ef52e5915
8 changed files with 279 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
src/components/Nav.tsx
View File

@ -1,5 +1,5 @@
import { useLocation } from "@solidjs/router";
import { A } from "@solidjs/router";
import { useLocation, A } from "@solidjs/router";
import { For } from "solid-js";
export default function Nav() {
const location = useLocation();
@ -7,66 +7,158 @@ export default function Nav() {
path == location.pathname
? "border-sky-600"
: "border-transparent hover:border-sky-600";
const menuItems = [
{
name: "News",
link: "/news",
},
{
name: "Network",
link: "/network",
},
{
name: "Peering",
link: "/peering",
},
{
name: "Association",
link: "/association",
},
// {
// name: "Stats",
// link: "/statistics",
// },
];
return (
<header class="p-4 fixed w-full top-0 z-10">
<div class="navbar backdrop-blur-md bg-base-200/50 shadow-xl">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
<div class="drawer">
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col p-4 fixed w-full top-0 z-10">
<header class="navbar backdrop-blur-md bg-base-200/50 shadow-xl">
<div class="navbar-start">
<div class="flex-none lg:hidden">
<label
for="my-drawer-3"
aria-label="open sidebar"
class="btn btn-square btn-ghost"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="inline-block w-6 h-6 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</label>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
>
<li>
<a>Item 1</a>
</li>
<li>
<a>Parent</a>
<ul class="p-2">
<li>
<a>Submenu 1</a>
</li>
<li>
<a>Submenu 2</a>
</li>
</ul>
</li>
<li>
<a>Item 3</a>
</li>
</ul>
<A class="btn btn-ghost text-xl" href="/">
<img src="/assets/ddix-logo.svg" class="h-full py-2" />
</A>
</div>
<A class="btn btn-ghost text-xl" href="/">
<img src="/assets/ddix-logo.svg" class="h-full p-2" />
</A>
</div>
<div class="navbar-end">
<A class="btn btn-ghost mr-2" href="/statistics">
Stats
</A>
<A class="btn btn-ghost mr-2" href="/news">
News
</A>
<A class="btn btn-ghost" href="/network">
Network
</A>
</div>
<div class="navbar-end hidden lg:flex gap-2">
<For each={menuItems}>
{(item) => (
<A class="btn btn-ghost" href={item.link}>
{item.name}
</A>
)}
</For>
</div>
</header>
{/* Content */}
</div>
</header>
<div class="drawer-side z-20">
<label
for="my-drawer-3"
aria-label="close sidebar"
class="drawer-overlay"
></label>
<nav class="menu p-4 w-80 min-h-full bg-base-200">
<ul>
<li>
<A class="btn btn-ghost text-xl" href="/">
<img src="/assets/ddix-logo.svg" class="h-full py-2" />
</A>
</li>
<For each={menuItems}>
{(item) => (
<li>
<A class="btn btn-ghost" href={item.link}>
{item.name}
</A>
</li>
)}
</For>
</ul>
</nav>
</div>
</div>
// <header class="p-4 fixed w-full top-0 z-10">
// <div class="navbar backdrop-blur-md bg-base-200/50 shadow-xl">
// <div class="navbar-start">
// <div class="dropdown">
// <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
// <svg
// xmlns="http://www.w3.org/2000/svg"
// class="h-5 w-5"
// fill="none"
// viewBox="0 0 24 24"
// stroke="currentColor"
// >
// <path
// stroke-linecap="round"
// stroke-linejoin="round"
// stroke-width="2"
// d="M4 6h16M4 12h8m-8 6h16"
// />
// </svg>
// </div>
// <ul
// tabindex="0"
// class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
// >
// <li>
// <a>Item 1</a>
// </li>
// <li>
// <a>Parent</a>
// <ul class="p-2">
// <li>
// <a>Submenu 1</a>
// </li>
// <li>
// <a>Submenu 2</a>
// </li>
// </ul>
// </li>
// <li>
// <a>Item 3</a>
// </li>
// </ul>
// </div>
// <A class="btn btn-ghost text-xl" href="/">
// <img src="/assets/ddix-logo.svg" class="h-full p-2" />
// </A>
// </div>
// <div class="navbar-end">
// <A class="btn btn-ghost mr-2" href="/statistics">
// Stats
// </A>
// <A class="btn btn-ghost mr-2" href="/news">
// News
// </A>
// <A class="btn btn-ghost" href="/network">
// Network
// </A>
// </div>
// </div>
// </header>
);
}

3
src/routes/[...404].tsx
View File

@ -3,7 +3,8 @@ import { A } from "@solidjs/router";
export default function NotFound() {
return (
<main class="text-center p-4">
<h1>Not Found :/</h1>
<h1 class="mb-12 mt-40">Not Found :/</h1>
<A href="/" class="btn btn-primary">Go to home</A>
</main>
);
}

26
src/routes/association.mdx Normal file
View File

@ -0,0 +1,26 @@
<main class="container mx-auto p-4">
<article>
<h1 class="mb-12 mt-40">Association</h1>
## Our Vision
We want to promote Saxony as an attractive IT location with a focus on Dresden. Our main focus is the further expansion of the internet communication network. We committ as non-profit organisation.
### Operation of DD-IX
In addition to supporting the community, we run the internet exchange DD-IX at locations in Dresden. DD-IX sees itself as an open, non-profit platform for all internet participants with a AS in the region of Saxony.
Besides the peering LAN and our route servers for the core operation of the IXP, we run most of the systems of the association ourselves.
### Networking and Sharing Experiences
We are a reliable point of contact for organizations, science, business, and the public on issues relating to the internet. In addition to the exchange of experiences within the association and with external third parties, we conduct information and training events. Furthermore, we participate in community events.
## Association Work
The association is made up of committed members who work voluntarily for the achievement of the goals. Even though the association seems to be technical through IXP operations we are also involved in non-technical areas.
## Participation & Joining
Are you interested in working for the association? We are looking forward to you!
You do not have to be a member of the association to participate. But as a full member you have your own voting rights in the corresponding boards of the association. All legal documents of the association are linked at the bottom of this page.
</article>
</main>

73
src/routes/index.mdx
View File

@ -1,26 +1,34 @@
import { A } from "@solidjs/router";
import { NewsList } from "~/components/NewsList"
import { NewsList } from "~/components/NewsList";
<main>
<section>
<div
class="hero h-[70vh] min-h-96 shadow-lg"
style="background-image: url(/dresden.webp);"
>
<div class="hero-overlay bg-opacity-40 backdrop-blur-sm"></div>
<div class="hero-content text-center text-neutral-content">
<div class="hero-overlay bg-opacity-50 backdrop-blur-sm" />
<div class="hero-content text-center text-neutral-content pt-24">
<div class="max-w-xl">
<h1 class="text-5xl md:text-7xl">Keep Local<br/>Traffic Local</h1>
<h1 class="text-5xl md:text-7xl">
Keep Local
Traffic Local
</h1>
<div class="divider"></div>
<div class="flex gap-2 justify-center">
<A href="/peering" class="btn btn-primary">Start Peering</A>
<A href="" class="btn btn-outline">Support Us</A>
<A href="/peering" class="btn btn-primary">
Start Peering
</A>
<A href="" class="btn btn-secondary btn-outline">
Support Us
</A>
</div>
</div>
</div>
</div>
</section>
<section class="container mx-auto p-4 pt-0">
<section class="container mx-auto p-4 pt-0 mb-40">
<div class="flex flex-col md:flex-row mx-8 justify-center min-h-[40vh]">
<div class="grow p-8">
<div class="flex items-center sticky top-[40vh] text-5xl relative">
@ -28,18 +36,42 @@ import { NewsList } from "~/components/NewsList"
<div class="circle bg-primary shadow h-5 w-5 rounded-full absolute left-[-2.5rem] md:left-auto md:right-[-2.75rem]"></div>
</div>
</div>
<div class="grow flex flex-col justify-center gap-4 p-8 border-primary" style="border-bottom-width: 0.25rem; border-left-width: 0.25rem;">
<p class="text-xl">DD-IX is an Internet exchange for Dresden and whole Saxony. As a non-commercial platform, we are open to all Internet stakeholders that are interested in multilateral exchange of Internet traffic.</p>
<A href="" class="btn btn-outline w-fit">Learn More</A>
<div
class="grow flex flex-col justify-center gap-4 p-8 border-primary"
style="border-bottom-width: 0.25rem; border-left-width: 0.25rem;"
>
<p class="text-xl">
DD-IX is an Internet exchange for Dresden and whole Saxony. As a
non-commercial platform, we are open to all Internet stakeholders that are
interested in multilateral exchange of Internet traffic.
</p>
<A href="/peering" class="btn btn-outline w-fit">
Learn More
</A>
</div>
</div>
<div class="flex flex-col-reverse md:flex-row mx-8 mt-[-0.25rem] justify-center min-h-[40vh]">
<div class="grow flex flex-col justify-center gap-4 p-8 border-primary" style="border-bottom-width: 0.25rem; border-right-width: 0.25rem">
<p class="text-xl">The DD-IX is operated by committed people of the DD-IX Dresden Internet Exchange e.V. The DD-IX Dresden Internet Exchange e.V. is a registered association under German law. Our mission is the economical, ecological, and robust exchange of data over the Internet. To enable direct data delivery between source and destination, we leverage the unique advantages of an Internet Exchage Point (IXP).</p>
<A href="" class="btn btn-outline w-fit">Support Us</A>
<div
class="grow flex flex-col justify-center gap-4 p-8 border-primary"
style="border-bottom-width: 0.25rem; border-right-width: 0.25rem"
>
<p class="text-xl">
DD-IX is operated by committed people of the DD-IX Dresden Internet
Exchange e.V. The DD-IX Dresden Internet Exchange e.V. is a registered
association under German law. Our mission is the economical, ecological,
and robust exchange of data over the Internet. To enable direct data
delivery between source and destination, we leverage the unique advantages
of an Internet Exchage Point (IXP).
</p>
<A href="/association" class="btn btn-outline w-fit">
Learn More
</A>
</div>
<div class="grow p-8 border-transparent md:border-base-100" style="border-top-width: 0.25rem;">
<div
class="grow p-8 border-transparent md:border-base-100"
style="border-top-width: 0.25rem;"
>
<div class="flex items-center sticky top-[40vh] text-5xl relative">
<div class="circle bg-primary shadow h-5 w-5 rounded-full absolute right-[-2.5rem] md:right-auto md:left-[-2.75rem]"></div>
<h2>Association</h2>
@ -59,10 +91,13 @@ import { NewsList } from "~/components/NewsList"
<A href="" class="btn btn-outline w-fit">Support Us</A>
</div>
</div>
<h2 class="mt-40 mb-16 text-5xl">News</h2>
<NewsList limit={3} />
<A href="/news" class="btn btn-primary mt-4">View More</A>
</section>
<section class="container mx-auto p-4">
<h2 class="mt-40 mb-16 text-5xl">News</h2>
<NewsList limit={3} />
<A href="/news" class="btn btn-primary mt-4">
View More
</A>
</section>
</main>

10
src/routes/network.mdx
View File

@ -1,8 +1,10 @@
<section class="container mx-auto p-4">
<main class="container mx-auto p-4">
<h1 class="mb-12 mt-40">Network</h1>
Currently there are 3 participants. Have a look at the list below for more information.
## List of Participants
<div class="overflow-x-auto">
<table class="table">
@ -30,7 +32,7 @@ Currently there are 3 participants. Have a look at the list below for more infor
<tr>
<th>2</th>
<td>yes</td>
<td>hair of Distributed and Networked Systems at TUD</td>
<td>Chair of Distributed and Networked Systems at TUD</td>
</tr>
<tr>
<th>3</th>
@ -45,4 +47,4 @@ Currently there are 3 participants. Have a look at the list below for more infor
</table>
</div>
</section>
</main>

12
src/routes/news/[slug].tsx
View File

@ -37,8 +37,18 @@ export default () => {
<div class="container mx-auto p-4">
<article>
<h1>{post()?.title}</h1>
<div class="flex gap-2">
<For each={post()?.keywords}>
{(tag) => <div class="badge badge-secondary">{tag}</div>}
</For>
</div>
<p>
{post()?.published} by {post()?.authors.join(", ")}
{new Date(post()?.published).toLocaleDateString("us-US", {
year: "numeric",
month: "long",
day: "numeric",
})}{" "}
by {post()?.authors.join(", ")}
</p>
<div innerHTML={post()?.body} />
</article>

37
src/routes/news/index.tsx
View File

@ -1,5 +1,11 @@
import { createSignal, For, createMemo } from "solid-js";
import { cache, createAsync, A, type RouteDefinition } from "@solidjs/router";
import { createSignal, For, createMemo, createEffect } from "solid-js";
import {
cache,
createAsync,
A,
useLocation,
type RouteDefinition,
} from "@solidjs/router";
import { classList } from "solid-js/web";
const getNewsList = cache(async () => {
@ -26,11 +32,15 @@ export const route = {
export default () => {
const newsList = createAsync(() => getNewsList());
const tagsData = createAsync(() => getNewsTags());
const [tags, setTags] = createSignal(
Object.fromEntries(
tagsData()?.map((tag: string) => [tag, { active: false }]) ?? []
)
);
const [tags, setTags] = createSignal({});
createEffect(() => {
setTags(
Object.fromEntries(
tagsData()?.map((tag: string) => [tag, { active: false }]) ?? []
)
);
});
const tagsActive = createMemo(() =>
Object.entries(tags())
@ -46,7 +56,7 @@ export default () => {
{([tag, { active }]) => (
<button
class="btn btn-sm"
classList={{ "btn-primary": active }}
classList={{ "btn-secondary": active }}
onClick={() =>
setTags({
...tags(),
@ -80,13 +90,20 @@ export default () => {
/>
<div class="card-body">
<h2 class="card-title">{post.title}</h2>
<p>{post.published}</p>
<p>{post.description}</p>
<div class="flex gap-2">
<For each={post.keywords}>
{(tag) => <div class="badge badge-secondary">{tag}</div>}
</For>
</div>
<p>
{new Date(post.published).toLocaleDateString("us-US", {
year: "numeric",
month: "long",
day: "numeric",
})}{" "}
by {post.authors.join(", ")}
</p>
<p>{post.description}</p>
</div>
</figure>
</A>

5
src/routes/peering.mdx
View File

@ -1,4 +1,4 @@
<section class="container mx-auto p-4">
<main class="container mx-auto p-4">
<h1 class="mb-12 mt-40">Peering</h1>
@ -11,8 +11,9 @@ The aim of peering is to route traffic between the participating networks more e
Optimal network packet forwarding is an important aspect of building a robust and efficient Internet. Peering with an IXP allows access to content and services provided by other network operators or ISPs without the need to establish many direct peerings among each other.
---
An IXP also enables better resilience, as traffic can be transmitted even if a link to a particular network fails, as long as there are routes through alternative peering partners.
Peering through an IXP like the DD-IX reduces the need for expensive Internet transit services. Because only the connection are paid for and not the data volume used.
</section>
</main>