Add content

main
adb-sh 5 months ago
parent 500e6c69db
commit 3ef52e5915

@ -1,5 +1,5 @@
import { useLocation } from "@solidjs/router"; import { useLocation, A } from "@solidjs/router";
import { A } from "@solidjs/router"; import { For } from "solid-js";
export default function Nav() { export default function Nav() {
const location = useLocation(); const location = useLocation();
@ -7,66 +7,158 @@ export default function Nav() {
path == location.pathname path == location.pathname
? "border-sky-600" ? "border-sky-600"
: "border-transparent hover: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 ( return (
<header class="p-4 fixed w-full top-0 z-10"> <div class="drawer">
<div class="navbar backdrop-blur-md bg-base-200/50 shadow-xl"> <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="navbar-start">
<div class="dropdown"> <div class="flex-none lg:hidden">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden"> <label
for="my-drawer-3"
aria-label="open sidebar"
class="btn btn-square btn-ghost"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" class="inline-block w-6 h-6 stroke-current"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16" d="M4 6h16M4 12h16M4 18h16"
/> />
</svg> </svg>
</div> </label>
<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> </div>
<A class="btn btn-ghost text-xl" href="/"> <A class="btn btn-ghost text-xl" href="/">
<img src="/assets/ddix-logo.svg" class="h-full p-2" /> <img src="/assets/ddix-logo.svg" class="h-full py-2" />
</A> </A>
</div> </div>
<div class="navbar-end">
<A class="btn btn-ghost mr-2" href="/statistics"> <div class="navbar-end hidden lg:flex gap-2">
Stats <For each={menuItems}>
{(item) => (
<A class="btn btn-ghost" href={item.link}>
{item.name}
</A> </A>
<A class="btn btn-ghost mr-2" href="/news"> )}
News </For>
</div>
</header>
{/* Content */}
</div>
<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> </A>
<A class="btn btn-ghost" href="/network"> </li>
Network <For each={menuItems}>
{(item) => (
<li>
<A class="btn btn-ghost" href={item.link}>
{item.name}
</A> </A>
</li>
)}
</For>
</ul>
</nav>
</div> </div>
</div> </div>
</header> // <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,7 +3,8 @@ import { A } from "@solidjs/router";
export default function NotFound() { export default function NotFound() {
return ( return (
<main class="text-center p-4"> <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> </main>
); );
} }

@ -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>

@ -1,26 +1,34 @@
import { A } from "@solidjs/router"; import { A } from "@solidjs/router";
import { NewsList } from "~/components/NewsList" import { NewsList } from "~/components/NewsList";
<main> <main>
<section>
<div <div
class="hero h-[70vh] min-h-96 shadow-lg" class="hero h-[70vh] min-h-96 shadow-lg"
style="background-image: url(/dresden.webp);" style="background-image: url(/dresden.webp);"
> >
<div class="hero-overlay bg-opacity-40 backdrop-blur-sm"></div> <div class="hero-overlay bg-opacity-50 backdrop-blur-sm" />
<div class="hero-content text-center text-neutral-content"> <div class="hero-content text-center text-neutral-content pt-24">
<div class="max-w-xl"> <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="divider"></div>
<div class="flex gap-2 justify-center"> <div class="flex gap-2 justify-center">
<A href="/peering" class="btn btn-primary">Start Peering</A> <A href="/peering" class="btn btn-primary">
<A href="" class="btn btn-outline">Support Us</A> Start Peering
</A>
<A href="" class="btn btn-secondary btn-outline">
Support Us
</A>
</div> </div>
</div> </div>
</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="flex flex-col md:flex-row mx-8 justify-center min-h-[40vh]">
<div class="grow p-8"> <div class="grow p-8">
<div class="flex items-center sticky top-[40vh] text-5xl relative"> <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 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> </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;"> <div
<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> class="grow flex flex-col justify-center gap-4 p-8 border-primary"
<A href="" class="btn btn-outline w-fit">Learn More</A> 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> </div>
<div class="flex flex-col-reverse md:flex-row mx-8 mt-[-0.25rem] justify-center min-h-[40vh]"> <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"> <div
<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> class="grow flex flex-col justify-center gap-4 p-8 border-primary"
<A href="" class="btn btn-outline w-fit">Support Us</A> 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>
<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="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> <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> <h2>Association</h2>
@ -59,10 +91,13 @@ import { NewsList } from "~/components/NewsList"
<A href="" class="btn btn-outline w-fit">Support Us</A> <A href="" class="btn btn-outline w-fit">Support Us</A>
</div> </div>
</div> </div>
</section>
<section class="container mx-auto p-4">
<h2 class="mt-40 mb-16 text-5xl">News</h2> <h2 class="mt-40 mb-16 text-5xl">News</h2>
<NewsList limit={3} /> <NewsList limit={3} />
<A href="/news" class="btn btn-primary mt-4">View More</A> <A href="/news" class="btn btn-primary mt-4">
View More
</A>
</section> </section>
</main> </main>

@ -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> <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"> <div class="overflow-x-auto">
<table class="table"> <table class="table">
@ -30,7 +32,7 @@ Currently there are 3 participants. Have a look at the list below for more infor
<tr> <tr>
<th>2</th> <th>2</th>
<td>yes</td> <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>
<tr> <tr>
<th>3</th> <th>3</th>
@ -45,4 +47,4 @@ Currently there are 3 participants. Have a look at the list below for more infor
</table> </table>
</div> </div>
</section> </main>

@ -37,8 +37,18 @@ export default () => {
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<article> <article>
<h1>{post()?.title}</h1> <h1>{post()?.title}</h1>
<div class="flex gap-2">
<For each={post()?.keywords}>
{(tag) => <div class="badge badge-secondary">{tag}</div>}
</For>
</div>
<p> <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> </p>
<div innerHTML={post()?.body} /> <div innerHTML={post()?.body} />
</article> </article>

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

@ -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> <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. 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. 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. 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>

Loading…
Cancel
Save