Merge pull request #2592 from responsible-ai-collaborative/staging

Deploy to Production – 2024-01-29

.github/workflows/deploy.yml

@@ -61,7 +61,7 @@ jobs:
         run: npm install netlify-cli -g
 
       - name: Build using Netlify
-        run: netlify build --context ${{ inputs.context }} --offline
+        run: netlify build --context ${{ inputs.netlify-context }} --offline
         env:
           NETLIFY_SITE_ID: ${{ vars.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -92,6 +92,7 @@ jobs:
           CLOUDFLARE_R2_ACCESS_KEY_ID: ${{ secrets.CLOUDFLARE_R2_ACCESS_KEY_ID }}
           CLOUDFLARE_R2_SECRET_ACCESS_KEY: ${{ secrets.CLOUDFLARE_R2_SECRET_ACCESS_KEY }}
           REALM_GRAPHQL_API_KEY: ${{ secrets.REALM_GRAPHQL_API_KEY }}
+          GATSBY_COMMIT_SHA: ${{ inputs.sha }}
 
       - name: Upload to netlify
         id: deploy-netlify

.github/workflows/preview.yml

@@ -34,6 +34,7 @@ jobs:
     with:
       sha: ${{ github.event.pull_request.head.sha }}
       environment: staging
+      netlify-context: deploy-preview
 
   call-test:
     if: ${{ !failure() }}

.github/workflows/realm.yml

@@ -0,0 +1,36 @@
+name: Realm Deploy
+
+on:
+  workflow_call:
+    inputs:
+      environment:
+        description: The Github environment to load secrets from
+        type: string
+        required: true
+      sha:
+        description: The commit SHA to deploy
+        type: string
+        required: true
+
+jobs:
+  push:
+    runs-on: ubuntu-latest
+    environment: ${{ inputs.environment }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.sha }}
+
+      - name: "Install the Realm (Atlas) CLI"
+        run: |
+          npm install -g mongodb-realm-cli
+
+      - name: Login
+        run: |
+          realm-cli login --api-key="${{ secrets.REALM_API_PUBLIC_KEY }}" --private-api-key="${{ secrets.REALM_API_PRIVATE_KEY }}" --realm-url https://realm.mongodb.com --atlas-url https://cloud.mongodb.com
+
+      - name: Push
+        run: |
+          cd site/realm
+          realm-cli push --remote="${{ vars.GATSBY_REALM_APP_ID }}" -y

.github/workflows/staging.yml

@@ -7,12 +7,21 @@ on:
 
 jobs:
 
+  call-atlas:
+    uses: ./.github/workflows/realm.yml
+    secrets: inherit
+    with:
+      sha: ${{ github.sha }}
+      environment: staging
+
   call-test-build:
     uses: ./.github/workflows/test-build.yml
     secrets: inherit
+    needs: call-atlas
     with:
       sha: ${{ github.sha }}
       environment: staging
+      netlify-context: production
 
   call-test:
     uses: ./.github/workflows/test.yml

.github/workflows/test-build.yml

@@ -10,6 +10,10 @@ on:
         description: 'The SHA of the commit to build'
         type: string
         required: true
+      netlify-context:
+        description: The Netlify context use when building
+        type: string
+        required: true
 
 jobs:
   test:
@@ -51,7 +55,7 @@ jobs:
         run: npm install netlify-cli -g
 
       - name: Build using Netlify
-        run: netlify build --context deploy-preview --offline
+        run: netlify build --context ${{ inputs.netlify-context }} --offline
         working-directory: site/gatsby-site
         env:
           INSTRUMENT: true
@@ -84,6 +88,7 @@ jobs:
           CLOUDFLARE_R2_ACCESS_KEY_ID: ${{ secrets.CLOUDFLARE_R2_ACCESS_KEY_ID }}
           CLOUDFLARE_R2_SECRET_ACCESS_KEY: ${{ secrets.CLOUDFLARE_R2_SECRET_ACCESS_KEY }}
           REALM_GRAPHQL_API_KEY: ${{ secrets.REALM_GRAPHQL_API_KEY }}
+          GATSBY_COMMIT_SHA: ${{ inputs.sha }}
 
       - name: Cache build
         uses: actions/cache/save@v3

README.md

@@ -472,6 +472,54 @@ CLOUDFLARE_R2_SECRET_ACCESS_KEY=[The Cloudflare R2 secret access key]
 CLOUDFLARE_R2_BUCKET_NAME=[The Cloudflare R2 bucket name (e.g.: 'aiid-public')]
 GATSBY_CLOUDFLARE_R2_PUBLIC_BUCKET_URL=[The Cloudflare R2 public bucket URL (e.g.: https://pub-daddb16dc28841779b83690f75eb5c58.r2.dev)]
 ```
+
+### New Netlify Setup
+
+This guide walks you through the steps to set up a Netlify site for your project by importing an existing project from GitHub.
+
+### Prerequisites
+
+- Ensure you have a GitHub account and your project is already pushed to a repository.
+- Make sure you have a Netlify account. If not, sign up at [Netlify](https://www.netlify.com/).
+
+### Steps to Set Up
+
+#### 1. Add New Site
+
+- Go to your Netlify dashboard.
+- Click on **Add New Site**.
+
+#### 2. Import Existing Project
+
+- Choose **Import Existing Project**.
+
+#### 3. Deploy with GitHub
+
+- Select **Deploy with GitHub** to connect your GitHub account.
+
+#### 4. Select Repository
+
+- Choose the repository where your project is located.
+
+#### 5. Configure Deployment
+
+- Under **Branch to Deploy**, select `master`. This setting doesn't matter for now.
+- Leave all other settings as default.
+- Click on **Deploy Site**.
+
+#### 6. Site Configuration
+
+##### Build and Deploy
+
+- Navigate to **Site Configuration** > **Build & Deploy**.
+- Under **Build Settings** > **Build Status**, find **Stopped Builds**.
+- Click **Save**.
+
+##### Site Details
+
+- Go to **Site Configuration** > **Site Details**.
+- Copy the `NETLIFY_SITE_ID`. This will be useful when setting up the GitHub environment.
+
 ### Github Actions
 Two workflows take care of deploying the Realm app to both `production` and `staging` environments, defined in `realm-production.yml` and `realm-staging.yml`. Each workflow looks for environment variables defined in a GitHub Environment named `production` and `staging`. 
 
@@ -481,9 +529,71 @@ GATSBY_REALM_APP_ID=
 REALM_API_PRIVATE_KEY=
 REALM_API_PUBLIC_KEY=
 ```
-
 To get your Public and Private API Key, follow these [instructions](https://www.mongodb.com/docs/atlas/configure-api-access/#std-label-create-org-api-key).
 
+### Deployment Workflows on GitHub Actions
+
+We have integrated our testing and deployment processes with GitHub Actions. There are three primary workflows for deployment: Deploy Previews, Staging, and Production. The goal of these workflows is to continuously test and integrate changes in pull requests across environments. 
+
+#### 1) Deploy Previews Workflow 
+
+- **File:** [/.github/workflows/preview.yml](/.github/workflows/preview.yml)
+- **Trigger:** This workflow is activated for pushes to pull requests that target the `staging` branch.
+- **Process:** Executes both the integration tests and deploys the application to Netlify.
+- **Post-Deployment:** Upon a successful deployment, the workflow automatically posts a comment on the pull request. This comment includes a link to the Netlify preview of the changes and a link to the Netlify deploy log.
+- **Environment:** This workflow uses the `staging` GitHub environment.
+
+#### 2) Staging Workflow (WIP)
+
+- **Trigger:** Runs only on pushes to the `staging` branch.
+- **Process:** Executes both the integration tests and deploys to Netlify.
+- **Deployment Criteria:** If the tests fail, no deployment will be carried out.
+- **Environment:** This workflow uses the `staging` GitHub environment.
+
+#### 3) Production Workflow (WIP)
+
+- **Trigger:** Runs only on pushes to the `master` branch.
+- **Process:** Executes both the integration tests and deploys to Netlify.
+- **Deployment Criteria:** If the tests fail, no deployment will be carried out.
+- **Environment:** This workflow uses the `production` GitHub environment.
+
+### GitHub Environment Configuration
+
+All three workflows share a common set of environment variables, which need to be defined for each environment. (Currently, we have only two environments: `staging` and `production`.) These variables are categorized into secrets and standard variables, and are accessed via GitHub actions as such.
+
+#### Secrets
+
+- `ALGOLIA_ADMIN_KEY`
+- `CLOUDFLARE_R2_ACCESS_KEY_ID`
+- `CLOUDFLARE_R2_ACCOUNT_ID`
+- `CLOUDFLARE_R2_BUCKET_NAME`
+- `CLOUDFLARE_R2_SECRET_ACCESS_KEY`
+- `CYPRESS_RECORD_KEY`
+- `E2E_ADMIN_PASSWORD`
+- `E2E_ADMIN_USERNAME`
+- `GOOGLE_TRANSLATE_API_KEY`
+- `MONGODB_CONNECTION_STRING`
+- `MONGODB_MIGRATIONS_CONNECTION_STRING`
+- `MONGODB_REPLICA_SET`
+- `MONGODB_TRANSLATIONS_CONNECTION_STRING`
+- `NETLIFY_AUTH_TOKEN`
+- `PRISMIC_ACCESS_TOKEN`
+- `REALM_API_PRIVATE_KEY`
+- `REALM_GRAPHQL_API_KEY`
+- `REALM_API_PUBLIC_KEY`
+- `GATSBY_ROLLBAR_TOKEN`
+
+#### Variables
+
+- `CYPRESS_PROJECT_ID`
+- `GATSBY_ALGOLIA_APP_ID`
+- `GATSBY_ALGOLIA_SEARCH_KEY`
+- `GATSBY_AVAILABLE_LANGUAGES`
+- `GATSBY_CLOUDFLARE_R2_PUBLIC_BUCKET_URL`
+- `GATSBY_PRISMIC_REPO_NAME`
+- `GATSBY_REALM_APP_ID`
+- `NETLIFY_SITE_ID`
+
 ### Testing
 
 For integration testing, we use Cypress. You can run the desktop app continuously as part of your development environment or run it on demand in headless mode.

site/gatsby-site/blog/deepfakes-child-safety/index.es.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Deepfakes y seguridad infantil: encuesta y análisis de incidentes y respuestas de 2023'
 metaTitle: 'Deepfakes y seguridad infantil: encuesta y análisis de incidentes y respuestas de 2023'
-metaDescription: ""
+metaDescription: "Preocupaciones crecientes y desafíos legales en relación a la creación y distribución de materiales de abuso sexual infantil generados por IA en 2023."
 date: '2024-01-09'
 image: './images/image_doj.jpg'
 author: 'Daniel Atherton'

site/gatsby-site/blog/deepfakes-child-safety/index.fr.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Deepfakes et sécurité des enfants : une enquête et une analyse des incidents et des réponses de 2023'
 metaTitle: 'Deepfakes et sécurité des enfants : une enquête et une analyse des incidents et des réponses de 2023'
-metaDescription: ""
+metaDescription: "Préoccupations croissantes et défis juridiques concernant la création et la distribution de matériaux d'abus sexuels sur enfants générés par IA en 2023."
 date: '2024-01-09'
 image: './images/image_doj.jpg'
 author: 'Daniel Atherton'

site/gatsby-site/blog/deepfakes-child-safety/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Deepfakes and Child Safety: A Survey and Analysis of 2023 Incidents and Responses'
 metaTitle: 'Deepfakes and Child Safety: A Survey and Analysis of 2023 Incidents and Responses'
-metaDescription: ""
+metaDescription: "Rising concerns and legal challenges regarding the creation and distribution of AI-generated child sexual abuse materials in 2023."
 date: '2024-01-09'
 image: './images/image_doj.jpg'
 author: 'Daniel Atherton'

site/gatsby-site/cypress/e2e/integration/landingPage.cy.js

@@ -175,4 +175,10 @@ describe('The Landing page', () => {
 
     cy.get('[data-cy="random-incidents-carousel-item"]').should('have.length', 5);
   });
+
+  it('Renders commit sha in the footer', () => {
+    cy.visit('/');
+
+    cy.get('[data-cy="commit-sha"]').should('be.visible');
+  });
 });

site/gatsby-site/gatsby-node.js

@@ -158,6 +158,12 @@ exports.onCreateNode = async ({ node, getNode, actions }) => {
       node,
       value: node.frontmatter.title || startCase(parent.name),
     });
+
+    createNodeField({
+      name: 'previewText',
+      node,
+      value: node.frontmatter.previewText || startCase(parent.name),
+    });
   }
 
   if (node.internal.type == 'mongodbAiidprodClassifications') {

site/gatsby-site/src/components/blog/PostPreview.js

@@ -5,6 +5,27 @@ import { Trans } from 'react-i18next';
 import DateLabel from 'components/ui/DateLabel';
 
 function PostPreview({ post, latestPost = false }) {
+  let previewText = '';
+
+  if (post.excerpt && post.excerpt !== '') {
+    previewText = post.excerpt;
+  } else if (post.frontmatter.previewText && post.frontmatter.previewText !== '') {
+    previewText = post.frontmatter.previewText;
+  } else {
+    // Remove HTML tags
+    previewText = post?.body.replace(/<[^>]*>?/gm, '');
+
+    // Remove Markdown image syntax
+    previewText = previewText.replace(/!\[.*?\]\(.*?\)/g, '');
+
+    // Remove Markdown
+    previewText = previewText.replace(/!\[.*?\]\(.*?\)|\]\(.*?\)/g, '$1');
+
+    previewText = previewText.substring(0, 200);
+
+    previewText = previewText.trim();
+  }
+
   return (
     <>
       <div className="flex flex-col w-full h-full bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
@@ -35,7 +56,7 @@ function PostPreview({ post, latestPost = false }) {
           <p className="text-sm text-muted-gray">
             <DateLabel date={new Date(post.frontmatter.date)} />
           </p>
-          <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">{post.excerpt}... </p>
+          <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">{previewText}... </p>
         </div>
         <div className="flex items-end flex-1 p-6">
           <a

site/gatsby-site/src/components/doc/PrismicDocPost.js

@@ -19,6 +19,8 @@ const PrismicDocPost = ({ doc, location }) => {
     Sponsors: <Sponsors />,
   };
 
+  if (!doc) return <></>;
+
   const metaTitle = doc.data.metatitle;
 
   const metaDescription = doc.data.metadescription;

site/gatsby-site/src/components/layout/Footer.js

@@ -115,7 +115,7 @@ export default function Footer() {
       id="main-footer"
       className="bg-text-light-gray relative sm:grid sm:grid-cols-2 md:grid-cols-4 gap-5 p-5 z-50"
     >
-      {footerContent.map((group) => {
+      {footerContent.map((group, i) => {
         const title = group.title;
 
         const items = group.items;
@@ -203,6 +203,14 @@ export default function Footer() {
                   })}
                 </div>
               )}
+
+              {i == footerContent.length - 1 && process.env.GATSBY_COMMIT_SHA && (
+                <li>
+                  <div className="text-muted-gray text-xs" data-cy="commit-sha">
+                    {process.env.GATSBY_COMMIT_SHA.toString().substring(0, 7)}
+                  </div>
+                </li>
+              )}
             </ul>
           </div>
         );

site/gatsby-site/src/pages/blog/index.js

@@ -61,9 +61,12 @@ export const IndexQuery = graphql`
         fields {
           slug
           title
+          previewText
         }
+        body
         excerpt
         frontmatter {
+          metaDescription
           date
           author
           slug