inital commit

src/features/content/data.ts

@@ -0,0 +1,30 @@
+import type { Entry } from "./types";
+
+export const entries = new Map<number, Entry>([
+  { id: 1, title: 'Realtime with Bill Maher', thumbnail: 'https://www.themoviedb.org/t/p/w342/pbpoLLp4kvnYVfnEGiEhagpJuVZ.jpg' },
+  { id: 2, title: 'Binnelanders', thumbnail: 'https://www.themoviedb.org/t/p/w342/v9nGSRx5lFz6KEgfmgHJMSgaARC.jpg' },
+  { id: 3, title: 'Family guy', thumbnail: 'https://www.themoviedb.org/t/p/w342/y0HUz4eUNUe3TeEd8fQWYazPaC7.jpg' },
+  { id: 4, title: 'The Simpsons', thumbnail: 'https://www.themoviedb.org/t/p/w342/vHqeLzYl3dEAutojCO26g0LIkom.jpg' },
+  { id: 5, title: 'Breaking Bad', thumbnail: 'https://www.themoviedb.org/t/p/w342/ztkUQFLlC19CCMYHW9o1zWhJRNq.jpg' },
+  { id: 6, title: 'Loki', thumbnail: 'https://www.themoviedb.org/t/p/w342/oJdVHUYrjdS2IqiNztVIP4GPB1p.jpg' },
+  { id: 7, title: 'Dark desire', thumbnail: 'https://www.themoviedb.org/t/p/w342/uxFNAo2A6ZRcgNASLk02hJUbybn.jpg' },
+  { id: 8, title: 'Bridgerton', thumbnail: 'https://www.themoviedb.org/t/p/w342/luoKpgVwi1E5nQsi7W0UuKHu2Rq.jpg' },
+  { id: 9, title: 'Naruto', thumbnail: 'https://www.themoviedb.org/t/p/w342/xppeysfvDKVx775MFuH8Z9BlpMk.jpg' },
+  { id: 11, title: 'Teenwolf', thumbnail: 'https://www.themoviedb.org/t/p/w342/fmlMmxSBgPEunHS5gjokIej048g.jpg' },
+  { id: 12, title: 'Record of Ragnarok', thumbnail: 'https://www.themoviedb.org/t/p/w342/kTs2WNZOukpWdNhoRlH94pSJ3xf.jpg' },
+  { id: 13, title: 'The Mandalorian', thumbnail: 'https://www.themoviedb.org/t/p/w342/eU1i6eHXlzMOlEq0ku1Rzq7Y4wA.jpg' },
+  {
+    id: 14,
+    title: 'Wednesday',
+    thumbnail: 'https://www.themoviedb.org/t/p/w342/9PFonBhy4cQy7Jz20NpMygczOkv.jpg',
+    image: 'https://www.themoviedb.org/t/p/original/iHSwvRVsRyxpX7FE7GbviaDvgGZ.jpg',
+    summary: 'Wednesday Addams is sent to Nevermore Academy, a bizarre boarding school where she attempts to master her psychic powers, stop a monstrous killing spree of the town citizens, and solve the supernatural mystery that affected her family',
+    releaseDate: '2022',
+    sources: [
+      { label: 'TMDB', url: new URL('https://themoviedb.org/tv/119051'), rating: { score: 8.5, max: 10 } }
+    ]
+  },
+].map((entry) => [ entry.id, entry ]));
+
+
+export const emptyEntry = Object.freeze<Entry>({ id: 0, title: '' });

src/features/content/index.ts

@@ -0,0 +1,4 @@
+export type * from './types';
+
+export { emptyEntry } from './data';
+export * from './service';

src/features/content/service.ts

@@ -0,0 +1,32 @@
+import type { Category, Entry } from './types';
+import { cache } from "@solidjs/router";
+import { entries } from './data';
+
+export const listCategories = cache(async (): Promise<Category[]> => {
+  "use server";
+
+  return [
+    {
+      label: 'Popular',
+      entries: [ entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+    },
+    {
+      label: 'Drama',
+      entries: [ entries.get(5)!, entries.get(6)!, entries.get(7)!, entries.get(8)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+    },
+    {
+      label: 'Now streaming',
+      entries: [ entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+    },
+    {
+      label: 'Sci-Fi & Fantasy',
+      entries: [ entries.get(9)!, entries.get(11)!, entries.get(12)!, entries.get(13)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+    },
+  ];
+}, "series.categories.list");
+
+export const getEntry = cache(async (id: Entry['id']): Promise<Entry|undefined> => {
+  "use server";
+
+  return entries.get(id);
+}, "series.get");

src/features/content/types.ts

@@ -0,0 +1,31 @@
+
+export interface Category {
+  label: string;
+  entries: Entry[];
+}
+
+export interface Entry {
+  id: number;
+  title: string;
+  summary?: string;
+  releaseDate?: string;
+  sources?: Entry.Source[];
+  thumbnail?: string;
+  image?: string;
+}
+
+export namespace Entry {
+  export interface Source {
+    label: string;
+    url: URL;
+    rating: Source.Rating;
+  }
+
+  export namespace Source {
+    export interface Rating {
+      score: number;
+      max: number;
+    }
+  }
+}
+

src/features/overview/index.ts

@@ -0,0 +1,3 @@
+
+
+export { Overview } from './overview';

src/features/overview/list-item.tsx

@@ -0,0 +1,130 @@
+import { ParentComponent, Index, mergeProps, Component } from 'solid-js';
+import { Hero } from '~/common/components/hero';
+import { List } from '~/common/components/list';
+import { emptyEntry } from '../content';
+import type { Entry, Category } from '../content';
+import { css } from 'styled-system/css';
+
+export const ListItem: Component<{ entry: Entry }> = (props) => {
+  return (
+    <div class={tile}>
+      <img src={props.entry.thumbnail} />
+
+      <main>
+        <a href={`/content/${props.entry.id}`}>Lets go!</a>
+      </main>
+    </div>
+  );
+};
+
+const tile = css({
+  '--padding': '2em',
+
+  display: 'grid',
+  grid: '100% / 100%',
+  placeItems: 'start center',
+  position: 'relative',
+  inlineSize: 'clamp(15em, 20vw, 30em)',
+  aspectRatio: '3 / 5',
+  transform: 'translateY(calc(-2 * var(--padding)))',
+  zIndex: '1',
+  contain: 'layout size style',
+
+  '& > img': {
+    gridArea: '1/ 1',
+    inlineSize: '100%',
+    blockSize: '100%',
+    borderRadius: '1em',
+    objectFit: 'cover',
+    objectPosition: 'center',
+    zIndex: '1',
+
+    boxShadow: '0 0 1em #000',
+    background: `
+      /* Dot */
+      radial-gradient(circle at 25% 30%, #7772, #7774 1em, transparent 1em),
+
+      /* Dot */
+      radial-gradient(circle at 85% 15%, #7772, #7774 1em, transparent 1em),
+
+      /* Bottom fade */
+      linear-gradient(165deg, transparent 60%, #555 60%, #333),
+
+      /* wave dark part */
+      radial-gradient(ellipse 5em 2.25em at .5em calc(50% - 1em), #333 100%, transparent 100%),
+
+      /* wave light part */
+      radial-gradient(ellipse 5em 2.25em at calc(100% - .5em) calc(50% + 1em), #555 100%, transparent 100%),
+
+      /* Base */
+      linear-gradient(to bottom, #333 50%, #555 50%)
+    `,
+
+    transformOrigin: '50% 0',
+    transform: 'scale(.8) translateY(calc(-4 * var(--padding)))',
+
+    userSelect: 'none',
+  },
+
+  '& > main': {
+    '--offset': 'calc(1.5 * var(--padding))',
+    gridArea: '1/ 1',
+    display: 'grid',
+    alignContent: 'end',
+    position: 'relative',
+    inlineSize: 'calc(100% + (3 * var(--padding)))',
+    blockSize: 'calc(100% + (4 * var(--padding)))',
+    padding: 'calc(.5 * var(--padding))',
+    backgroundColor: '#444',
+    borderRadius: '.5em',
+    transform: 'translate3d(0, 0, 0)',
+    clipPath: 'inset(-1em)',
+    boxShadow: '0 0 1em #000',
+    zIndex: '0',
+
+    '&:focus-within': {
+      outline: '1px solid #fff',
+      outlineOffset: '10px',
+    },
+  },
+
+  '@media (prefers-reduced-data: no-preference)': {},
+
+  '@media(hover)': {
+    '&:not(:hover):not(:focus-within)': {
+      transform: 'translateY(0)',
+      zIndex: '0',
+      willChange: 'transform',
+
+      '& > img': {
+        transform: 'scale(1) translateY(0)',
+        willChange: 'transform',
+      },
+
+      '& > main': {
+        clipPath: 'inset(40%)',
+      },
+    },
+
+    '@media (prefers-reduced-motion: no-preference)': {
+      transition: 'transform .2s linear',
+
+      '& > img': {
+        transition: 'transform .2s ease-in-out',
+      },
+
+      '& > main': {
+        transition: 'clip-path .2s ease-in-out',
+      },
+
+      '&:is(:hover, :focus-within)': {
+        transitionDelay: '0s, .3s',
+        zIndex: '1',
+
+        '& > img': {
+          transition: 'transform .2s ease-in-out',
+        },
+      },
+    },
+  },
+});

src/features/overview/overview.tsx

@@ -0,0 +1,38 @@
+import { ParentComponent, Index, mergeProps, Component } from 'solid-js';
+import { Hero } from '~/common/components/hero';
+import { List } from '~/common/components/list';
+import { emptyEntry } from '../content';
+import type { Entry, Category } from '../content';
+import { ListItem } from './list-item';
+import { css } from 'styled-system/css';
+
+type OverviewProps = {
+  highlight: Entry;
+  categories: Category[];
+};
+
+export function Overview(props: OverviewProps) {
+  const finalProps = mergeProps(
+    {
+      highlight: emptyEntry,
+      categories: [],
+    },
+    props,
+  );
+
+  return (
+    <div class={container}>
+      <Hero entry={finalProps.highlight}></Hero>
+
+      <Index each={finalProps.categories}>
+        {(category) => (
+          <List label={category().label} items={category().entries}>
+            {(entry) => <ListItem entry={entry()} />}
+          </List>
+        )}
+      </Index>
+    </div>
+  );
+}
+
+const container = css({ display: 'grid', gridAutoFlow: 'row', gap: '2em' });

src/features/shell/index.ts

@@ -0,0 +1 @@
+export { Shell } from './shell';

src/features/shell/shell.tsx

@@ -0,0 +1,74 @@
+import { RouteSectionProps, A } from '@solidjs/router';
+import { css } from 'styled-system/css';
+import { Link, LinkProps } from '~/common/components/ui/link';
+
+export function Shell(props: RouteSectionProps) {
+  const items = [
+    { label: 'React', value: 'react' },
+    { label: 'Solid', value: 'solid' },
+    { label: 'Svelte', value: 'svelte', disabled: true },
+    { label: 'Vue', value: 'vue' },
+  ];
+
+  return (
+    <main class={container}>
+      <Nav />
+
+      <div class={body}>{props.children}</div>
+    </main>
+  );
+}
+
+function Nav(props) {
+  return (
+    <nav class={nav}>
+      <Link asChild={(props) => <span>kaas</span>}>
+        <A href="/">Home</A>
+      </Link>
+      <A href="/shows">Shows</A>
+      <A href="/movies">Movies</A>
+      <A href="/library">Library</A>
+      <A href="/search">Search</A>
+    </nav>
+  );
+}
+
+const container = css({
+  display: 'grid',
+  grid: '100% / 100%',
+
+  zIndex: '0',
+
+  overflowInline: 'clip',
+  overflowBlock: 'auto',
+  containerType: 'inline-size',
+});
+
+const body = css({
+  gridArea: '1 / 1',
+  inlineSize: '100%',
+  blockSize: 'fit-content',
+  paddingInline: '2em',
+  paddingBlockEnd: '5em',
+  background:
+    'linear-gradient(180deg, transparent, transparent 90vh, #333 90vh, #333)',
+
+  '@container (inline-size >= 600px)': {
+    paddingInlineStart: '7.5em',
+  },
+});
+
+const nav = css({
+  gridArea: '1 / 1',
+  display: 'none',
+  gridAutoFlow: 'row',
+  alignContent: 'start',
+  inlineSize: '7.5em',
+  padding: '1em',
+  position: 'sticky',
+  insetBlockStart: '0',
+
+  '@container (inline-size >= 600px)': {
+    display: 'grid',
+  },
+});