p5.js-website/src/layouts/SketchLayout.astro at 7843910c6895d45f524cc100d8a5f0264214eeab · processing/p5.js-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
---
import BaseLayout from "@layouts/BaseLayout.astro";
import RelatedItems from "@components/RelatedItems/index.astro";
import Head from "@components/Head/index.astro";
import {
  getRandomCurationSketches,
  getSketch,
  makeSketchEmbedUrl,
  makeSketchLinkUrl,
  makeThumbnailUrl
} from "@/src/api/OpenProcessing";
import LinkButton from "@components/LinkButton/index.astro";
import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
import { setJumpToState } from "../globals/state";
import { ScalingIframe } from "@components/ScalingIframe";

interface Props {
  sketchId: string;
  authorName: string;
}

const { sketchId, authorName } = Astro.props;

const sketchIdNumber = Number(sketchId);

const { title, createdOn, instructions } = await getSketch(sketchIdNumber);

const currentLocale = getCurrentLocale(Astro.url.pathname);
const t = await getUiTranslator(currentLocale);
const dateString = new Date(createdOn).toLocaleDateString(currentLocale, {
  year: "numeric",
  month: "long",
  day: "numeric",
});

setJumpToState(null);
const moreSketches = await getRandomCurationSketches(4);
const featuredImageURL = makeThumbnailUrl(sketchIdNumber);

let { width, height } = await getSketch(sketchIdNumber);
let heightOverWidth = 1 / 1.5;
if (width && height) {
  // Account for OP header bar
  height += 50;
  heightOverWidth = height / width;
}

const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
---

<Head
  title={title}
  locale={currentLocale}
  featuredImageSrc={featuredImageURL}
  description={instructions}
/>

<BaseLayout
  title={title}
  titleAuthor={authorName}
  subtitle={dateString}
  variant="item"
  topic={"community"}
>
  <div class="max-w-[770px]">
    <div
      style={{
        position: "relative",
        width: "100%",
        paddingBottom: `${(heightOverWidth * 100).toFixed(4)}%`,
      }}
    >
      {
        width ? (
          <ScalingIframe
            client:load
            src={makeSketchEmbedUrl(sketchIdNumber)}
            width={width}
            height={height}
            title={iframeTitle}
          />
        ) : (
          <iframe
            src={makeSketchEmbedUrl(sketchIdNumber)}
            width="100%"
            height="100%"
            sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
            allow="fullscreen; clipboard-write"
            loading="lazy"
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
            }}
            title={iframeTitle}
          />
        )
      }
    </div>
    <div class="py-md grid gap-y-sm md:gap-y-md">
      <LinkButton
        variant="code"
        url={`${makeSketchLinkUrl(sketchIdNumber)}/#code`}
        class="min-w-[184px] lg:min-w-[220px]">{t("Show Code")}</LinkButton
      >
      <LinkButton
        variant="link"
        url="https://openprocessing.org"
        class="min-w-[184px] lg:min-w-[220px]">OpenProcessing</LinkButton
      >
    </div>

    {instructions && <p class="text-md my-sm md:my-lg">{instructions}</p>}

    <p class="text-xs md:text-base mb-3xl">
      This <a class="text-type-magenta" href={makeSketchLinkUrl(sketchIdNumber)}
        >sketch</a
      > is ported from the <a
        class="text-type-magenta"
        href="https://openprocessing.org">OpenProcessing</a
      >
      sketch archive.
    </p>
  </div>
  <RelatedItems title={t("More Sketches") as string} items={moreSketches} />
</BaseLayout>