use Cloudflare Pages (#1035)

* use cloudflare pages * remove cf workers setup * Get youtube api key from context env * Update workflows * Lets/try long url withnum 123214bers and stuff one two three (#1069) * set slug-maxlength to 28 and use GITHUB_REF_SLUG_URL * Use dist/client instead of public in previews * api routes for dev server --------- Co-authored-by: lorcan-codes <[email protected]>
starknet-io · Jul 25, 2023 · dc05db4 · dc05db4
1 parent 9352528
commit dc05db4
Show file tree

Hide file tree

Showing 48 changed files with 203 additions and 311 deletions.
diff --git a/.github/workflows/netlify-cms.yml b/.github/workflows/netlify-cms.yml
@@ -6,7 +6,9 @@ on:
 jobs:
   build-and-deploy:
     name: Build and Deploy
-    environment: "netlify-cms"
+    environment:
+      name: Netlify CMS ${{ github.ref_name }}
+      url: https://${{ env.GITHUB_REF_SLUG_URL }}.starknet-netlify-cms.pages.dev
     permissions:
       contents: read
       deployments: write
@@ -40,15 +42,15 @@ jobs:
       - name: Inject slug/short variables
         uses: rlespinasse/github-slug-action@v4
         with:
-          slug-maxlength: 40
+          slug-maxlength: 28
 
       - name: Build Netlify CMS
         run: yarn workspace @starknet-io/netlify-cms build
         env:
-          VITE_LIVE_PREVIEW_URL: https://starknet-website-${{ env.GITHUB_REF_SLUG }}.yukilabs.workers.dev
+          VITE_LIVE_PREVIEW_URL: https://${{ env.GITHUB_REF_SLUG_URL }}.starknet-website.pages.dev
           VITE_GIT_BRANCH_NAME: ${{ github.ref_name }}
-          VITE_API_BASE_URL: https://starknet-website-${{ env.GITHUB_REF_SLUG }}.yukilabs.workers.dev/api
-          VITE_DATA_URL: https://starknet-website-${{ env.GITHUB_REF_SLUG }}.yukilabs.workers.dev/data
+          VITE_API_BASE_URL: https://${{ env.GITHUB_REF_SLUG_URL }}.starknet-website.pages.dev/api
+          VITE_DATA_URL: https://${{ env.GITHUB_REF_SLUG_URL }}.starknet-website.pages.dev/data
 
       - name: Deploy Netlify CMS
         uses: cloudflare/pages-action@1

diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -6,7 +6,9 @@ on:
 jobs:
   build-and-deploy:
     name: Build and Deploy
-    environment: "storybook"
+    environment:
+      name: Storybook ${{ github.ref_name }}
+      url: https://${{ env.GITHUB_REF_SLUG_URL }}.starknet-storybook.pages.dev
     permissions:
       contents: read
       deployments: write
@@ -37,6 +39,11 @@ jobs:
       - name: Install dependencies
         run: yarn
 
+      - name: Inject slug/short variables
+        uses: rlespinasse/github-slug-action@v4
+        with:
+          slug-maxlength: 28
+
       - name: Build storybook
         run: yarn workspace @starknet-io/storybook build-storybook
 

diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
@@ -8,7 +8,7 @@ jobs:
     name: Build and Deploy
     environment:
       name: Starknet Website ${{ github.ref_name }}
-      url: https://starknet-website-${{ env.GITHUB_REF_SLUG }}.yukilabs.workers.dev
+      url: https://${{ env.GITHUB_REF_SLUG_URL }}.starknet-website.pages.dev
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
@@ -48,31 +48,26 @@ jobs:
       - name: Inject slug/short variables
         uses: rlespinasse/github-slug-action@v4
         with:
-          slug-maxlength: 40
-
-      - name: Create Env
-        run: echo -e "\n[env.${{ env.GITHUB_REF_SLUG }}]\n" >> workspaces/website/wrangler.toml
-
-      - name: Create secrets.json
-        run: echo '{"YOUTUBE_API_KEY":"${{ secrets.YOUTUBE_API_KEY }}"}' > workspaces/website/secrets.json
-
-      - name: Upload secrets
-        run: yarn workspace @starknet-io/website exec wrangler secret:bulk secrets.json --env ${{ env.GITHUB_REF_SLUG }}
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          slug-maxlength: 28
 
       - name: Build project
         run: yarn workspace @starknet-io/website build
         env:
-          VITE_SITE_URL: https://starknet-website-${{ env.GITHUB_REF_SLUG }}.yukilabs.workers.dev
+          VITE_SITE_URL: https://${{ env.GITHUB_REF_SLUG_URL }}.starknet-website.pages.dev
           VITE_ALGOLIA_INDEX: ${{ github.ref_name == 'production' && 'production' || 'dev' }}
           VITE_ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           VITE_ALGOLIA_SEARCH_API_KEY: ${{ secrets.ALGOLIA_SEARCH_API_KEY }}
           VITE_CF_STREAM_URL: ${{ secrets.CF_STREAM_URL }}
 
       - name: Publish
-        run: yarn workspace @starknet-io/website exec wrangler publish --env ${{ env.GITHUB_REF_SLUG }}
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: starknet-website
+          directory: dist/client
+          workingDirectory: workspaces/website
+          wranglerVersion: '3'
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          branch: ${{ github.ref_name }}
+
diff --git a/workspaces/cms-data/src/announcements.ts b/workspaces/cms-data/src/announcements.ts
@@ -18,12 +18,12 @@ export interface AnnouncementsPost extends Meta, AnnouncementDetails {
 
 export async function getAnnouncementDetails(
   locale: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<AnnouncementDetails[]> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
-          (value) => async () => getJSON(`data/announcements-details/${value}`, event)
+          (value) => async () => getJSON(`data/announcements-details/${value}`, context)
       )
     );
   } catch (cause) {
@@ -33,12 +33,12 @@ export async function getAnnouncementDetails(
 export async function getAnnouncementsPostBySlug(
   locale: string,
   slug: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<AnnouncementsPost> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
-          (value) => async () => getJSON(`data/announcements/${value}/${slug}`, event)
+          (value) => async () => getJSON(`data/announcements/${value}/${slug}`, context)
       )
     );
   } catch (cause) {

diff --git a/workspaces/cms-data/src/categories.ts b/workspaces/cms-data/src/categories.ts
@@ -9,12 +9,12 @@ export interface Category {
 
 export async function getCategories(
   locale: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<readonly Category[]> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
-        (value) => async () => getJSON("data/categories/" + value, event)
+        (value) => async () => getJSON("data/categories/" + value, context)
       )
     );
   } catch (cause) {

diff --git a/workspaces/cms-data/src/events.ts b/workspaces/cms-data/src/events.ts
@@ -25,12 +25,12 @@ export interface Event {
 
 export async function getEvents(
   locale: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<readonly Event[]> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
-        (value) => async () => getJSON("data/events/" + value, event)
+        (value) => async () => getJSON("data/events/" + value, context)
       )
     );
   } catch (cause) {

diff --git a/workspaces/cms-data/src/getSharedData.ts b/workspaces/cms-data/src/getSharedData.ts
@@ -11,11 +11,11 @@ type SharedData = {
 }
 export async function getSharedData(
     locale: string,
-    event: null | WorkerGlobalScopeEventMap["fetch"],
+    context: EventContext<{}, any, Record<string, unknown>>,
   ): Promise<SharedData> {
     return getFirst(
       ...[locale, defaultLocale].map(
-        (value) => async () => getJSON("data/shared-data/" + value, event)
+        (value) => async () => getJSON("data/shared-data/" + value, context)
       )
     );
-  }
+  }
diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts
@@ -203,7 +203,7 @@ export interface Page extends Meta {
 const getPageWithRandomizedData = (data: Page): Page => {
   const randomizedData = {...data}
   randomizedData.blocks?.forEach((block: TopLevelBlock) => {
-    
+
     if (block.type === 'link_list' && block.randomize) {
       //@ts-expect-error
       block.blocks = getShuffledArray(block.blocks || []);
@@ -218,13 +218,13 @@ const getPageWithRandomizedData = (data: Page): Page => {
 export async function getPageBySlug(
   slug: string,
   locale: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<Page> {
   try {
     const data = await getFirst(
       ...[locale, defaultLocale].map(
         (value) => async () =>
-          getJSON("data/pages/" + value + "/" + slug, event)
+          getJSON("data/pages/" + value + "/" + slug, context)
       )
     );
 
@@ -239,12 +239,12 @@ export async function getPageBySlug(
 export async function getPageById(
   id: string,
   locale: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<Page> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
-        (value) => async () => getJSON("data/pages/" + value + "/" + id, event)
+        (value) => async () => getJSON("data/pages/" + value + "/" + id, context)
       )
     );
   } catch (cause) {

diff --git a/workspaces/cms-data/src/posts.ts b/workspaces/cms-data/src/posts.ts
@@ -30,13 +30,13 @@ export interface Post extends Meta {
 export async function getPostBySlug(
   slug: string,
   locale: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<Post> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
         (value) => async () =>
-          getJSON("data/posts/" + value + "/" + slug, event)
+          getJSON("data/posts/" + value + "/" + slug, context)
       ),
       async () => {
         const client = algoliasearch(
@@ -70,12 +70,12 @@ export async function getPostBySlug(
 export async function getPostById(
   id: string | string[] | undefined,
   locale: string | string[],
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<Post> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
-        (value) => async () => getJSON("data/posts/" + value + "/" + id, event)
+        (value) => async () => getJSON("data/posts/" + value + "/" + id, context)
       ),
       async () => {
         const client = algoliasearch(

diff --git a/workspaces/cms-data/src/roadmap.ts b/workspaces/cms-data/src/roadmap.ts
@@ -25,12 +25,12 @@ export interface RoadmapVersion extends Meta {
 
 export async function getRoadmapDetails(
   locale: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<readonly RoadmapDetails[]> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
-        (value) => async () => getJSON(`data/roadmap-details/${value}`, event)
+        (value) => async () => getJSON(`data/roadmap-details/${value}`, context)
       )
     );
   } catch (cause) {
@@ -43,12 +43,12 @@ export async function getRoadmapDetails(
 export async function getRoadmapPostBySlug(
   locale: string,
   slug: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<RoadmapPost> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
-        (value) => async () => getJSON(`data/roadmap-posts/${value}/${slug}`, event)
+        (value) => async () => getJSON(`data/roadmap-posts/${value}/${slug}`, context)
       )
     );
   } catch (cause) {
@@ -60,12 +60,12 @@ export async function getRoadmapPostBySlug(
 
 export async function getRoadmapVersions(
   locale: string,
-  event: null | WorkerGlobalScopeEventMap["fetch"]
+  context: EventContext<{}, any, Record<string, unknown>>
 ): Promise<readonly RoadmapVersion[]> {
   try {
     return await getFirst(
       ...[locale, defaultLocale].map(
-        (value) => async () => getJSON("data/roadmap-versions/" + value, event)
+        (value) => async () => getJSON("data/roadmap-versions/" + value, context)
       )
     );
   } catch (cause) {