Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bump elliptic from 6.5.3 to 6.5.4 #81

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .env.local
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
NEXT_PUBLIC_ONEGRAPH_APP_ID="570a3d6b-6ff3-4b7a-9b0d-fe4cf6384388"
NEXT_PUBLIC_GITHUB_REPO_OWNER="onegraph"
NEXT_PUBLIC_GITHUB_REPO_NAME="onegraph-changelog"
NEXT_PUBLIC_TITLE="OneGraph Product Updates"
NEXT_PUBLIC_DESCRIPTION="Follow along with OneGraph as we take over the world with GraphQL."
NEXT_PUBLIC_SITE_HOSTNAME="https://onegraph.com"
NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID="UA-122815795-1"
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,10 @@

# production
/build
src/__generated__

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
Expand Down
130 changes: 15 additions & 115 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,135 +1,35 @@
# Build a blog powered by GitHub issues
This repo powers the [OneGraph changelog](https://onegraph.com/changelog). All of the entries in the changelog are issues in this repo.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2FOneGraph%2Foneblog%2Ftree%2Fnext&env=NEXT_PUBLIC_ONEGRAPH_APP_ID,NEXT_PUBLIC_TITLE,OG_GITHUB_TOKEN,OG_DASHBOARD_ACCESS_TOKEN,VERCEL_URL,VERCEL_GITHUB_ORG,VERCEL_GITHUB_REPO&envDescription=Variables%20needed%20to%20build%20your%20OneBlog&envLink=https%3A%2F%2Fgithub.com%2FOneGraph%2Foneblog%2Ftree%2Fnext%23environment-variables&project-name=oneblog&repo-name=oneblog)
See the [https://onegraph.com/oneblog](https://onegraph.com/oneblog) for how to deploy your own changelog backed by GitHub issues.

This repo allows you to generate a blog from GitHub issues on a repo. It powers the [OneGraph Product Updates blog](https://www.onegraph.com/changelog), [Stepan Parunashvili's blog](https://stopa.io/), [bdougie.live](https://www.bdougie.live/), and more.
### Developing on this repo

All of the posts are stored as issues on the repo (e.g. [OneGraph/onegraph-changelog](https://github.com/OneGraph/onegraph-changelog/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Apublish+)).
What follows are implementation details specific to this repo. For setting up a general oneblog, see [https://github.com/oneblog](https://github.com/oneblog).

When you visit the page at [onegraph.com/changelog](https://www.onegraph.com/changelog), a GraphQL query fetches the issues from GitHub via OneGraph's persisted queries and renders them as blog posts.
Staging triggers a build on [staging cloudbuild](https://console.cloud.google.com/cloud-build/builds?project=sourcecodeshots) on every push to non-master and deploys to staging firebase hosting/cloud run.

The persisted queries are stored with authentication credentials for GitHub that allows them to make authenticated requests. Persisting the queries locks them down so that they can't be made to send arbitrary requests to GitHub.
Production triggers a build on (https://console.cloud.google.com/cloud-build/builds?project=onegraph-dashboard) on pushes to master and deploys to prod firebase hosting/cloud run.

You can learn more about [persisted queries in the docs](https://www.onegraph.com/docs/persisted_queries.html).
Check the cloudbuild-staging.yaml, cloudbuild.yaml, and Dockerfile for implementation details.

## Setup

Use an existing OneGraph app or sign up sign up at [OneGraph](https://www.onegraph.com) to create a new app.

Copy `/.env.example` to `/.env` and set the following environment variables.

### Environment variables

| Environment Variable | Description |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `OG_GITHUB_TOKEN` | A server-side access token created on OneGraph, used as the default auth for the persisted queries that will fetch the issues. To create a new one, go the "Server-side Auth" tab in the [OneGraph dashboard](https://www.onegraph.com/dashboard) for your app, click the "Create Token" button, and add GitHub to the services. Keep this token safe, because it has access to your GitHub data. |
| `OG_DASHBOARD_ACCESS_TOKEN` | An API token that allows you to create persisted queries on OneGraph. Go to the "Persisted queries" tab on the OneGraph dashboard, scroll down, and click "Create token". This will create a scoped token for your app that can create persisted queries on your behalf. |
| `NEXT_PUBLIC_ONEGRAPH_APP_ID` | The id of your OneGraph app. You can get this from the [OneGraph dashboard](https://www.onegraph.com/dashboard) |
| `NEXT_PUBLIC_TITLE` | The title of your site |
| `NEXT_PUBLIC_DESCRIPTION` | A short description of your site. |
| `NEXT_PUBLIC_GITHUB_REPO_OWNER` | The owner of the repo that we should pull issues from (e.g. linus in linus/oneblog). If you're using the Vercel deploy button, you don't need to provide this. |
| `NEXT_PUBLIC_GITHUB_REPO_NAME` | The name of the repo that we should pull issues from (e.g. oneblog in linus/oneblog). If you're using the Vercel deploy button, you don't need to provide this. |

### Setup relay

Remove the generated files (they're tied to the OneGraph app they were generated with):

```
yarn relay:clean
# which runs rm -r src/__generated__
```

(Note: any time you change the variables in `.env`, it's a good idea to stop the relay compiler, remove the files in `src/__generated__`, and restart the compiler)
### Developing locally

Install dependencies

```
yarn install
yarn dev
```

### Run the Relay compiler
If you need to change one of the queries

This project uses Relay as its GraphQL client because of its high-quality compiler and great support for persisted queries.
Go to [the Server-Side auth page for the OneGraph changelog app](https://www.onegraph.com/dashboard/app/570a3d6b-6ff3-4b7a-9b0d-fe4cf6384388/auth/server-side) and get a personal token with access to GitHub.

In another terminal window, start the relay compiler

```
yarn relay --watch
```
Go to [the Persisted queries page for the OneGraph changelog app](https://www.onegraph.com/dashboard/app/570a3d6b-6ff3-4b7a-9b0d-fe4cf6384388/persisted-queries) and get a dashboard access token to persist queries.

You may need to install [watchman](https://facebook.github.io/watchman/), a file watching service. On mac, do `brew install watchman`. On Windows or Linux, follow the instructions at [https://facebook.github.io/watchman/docs/install.html](https://facebook.github.io/watchman/docs/install.html).
Create a `.env` file with the following

### Start the server

Now that we've generated the relay files, we can start the server.

```
yarn start
```

The project will load at [http://localhost:3000](http://localhost:3000).

## Deploying

The project comes with setups for deploying to Google's Firebase, Zeit's Now, Netlify, and Fly.io.

For each of these, you'll have to add the site that you're deploying to on the CORS origins on the OneGraph dashboard.

### Deploy with Vercel

Use the deploy button to set up a new repo:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2FOneGraph%2Foneblog%2Ftree%2Fnext&env=NEXT_PUBLIC_ONEGRAPH_APP_ID,NEXT_PUBLIC_TITLE,OG_GITHUB_TOKEN,OG_DASHBOARD_ACCESS_TOKEN,VERCEL_URL,VERCEL_GITHUB_ORG,VERCEL_GITHUB_REPO&envDescription=Variables%20needed%20to%20build%20your%20OneBlog&envLink=https%3A%2F%2Fgithub.com%2FOneGraph%2Foneblog%2Ftree%2Fnext%23environment-variables&project-name=oneblog&repo-name=oneblog)

If you've already set up the repo, just run the vercel command.

OG_GITHUB_TOKEN="YOUR_SERVER_SIDE_AUTH_TOKEN"
OG_DASHBOARD_ACCESS_TOKEN="YOUR_TOKEN_TO_PERSIST_QUERIES"
```
# If not installed
# npm i -g vercel

vercel
```

If you see an error when you visit the site, make sure the site's origin is listed in the CORS origins for your app on the OneGraph dashboard.

### Deploying with Firebase

Please open an issue if you'd like help deploying with Firebase.

### Deploying with Netlify

Please open an issue if you'd like help deploying with Netlify.

### Deploying with Fly.io

Please open an issue if you'd like help deploying with Fly.io

## Project setup

### Client

The client is an ordinary React app. The best to place to start is `/src/App.js`.

It uses Grommet as the UI library. Visit [https://v2.grommet.io/components](https://v2.grommet.io/components) to view the documentation for Grommet.

It uses Relay as the GraphQL client. [https://relay.dev/docs/en/graphql-in-relay](https://relay.dev/docs/en/graphql-in-relay) has a good introduction to Relay.

To refresh the GraphQL schema, run `yarn fetch-schema`. That will fetch the schema from OneGraph and add some client-only directives that we use when we persist the queries to OneGraph.

#### How persisting works

The `persistFunction` for the relay compiler is set to `/scripts/persistQuery.js`. Every time a GraphQL query in the project changes, the relay compiler will call that function with the new query.

That function will parse the query and pull out the `@persistedQueryConfiguration` directive to determine if any auth should be stored alongside the query. In the changelog, the queries for fetching posts use persisted auth, but the mutations for adding reactions require the user to log in with OneGraph and use their auth.

The `@persistedQueryConfiguration` directive is stripped from the query and it is uploaded to OneGraph via a GraphQL mutation. Then the id for the persisted query is returned from the function. Relay stores the id in its generated file and it's used the next time the query is sent to the server.

### Server

The server uses [Next.js](https://nextjs.org) to allow us to render the content on the server. This helps with SEO and allows people to view the blog with Javascript turned off.

When a request comes in to the server, the server creates a mock Relay environment and prefetches the query for the route using `fetchQuery` from `relay-runtime`. This populates the record source that Relay uses to render.

React renders the app to a string, which is sent to the client.

On the client, React rehydates the app. To prevent Relay from showing a loading state, we inject the serialized record source with `getStaticProps`. That data is stored in the environment before Relay makes its first query. The `fetchPolicy` opt is set to "store-and-network" so that it uses the data from the store instead of showing a loading state.
20 changes: 20 additions & 0 deletions cloudbuild-staging.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
steps:
- name: 'gcr.io/cloud-builders/docker'
args: ['build',
'--network=cloudbuild',
'--build-arg', 'gcp_project=oph-dashboard-staging',
'-t', 'gcr.io/oph-dashboard-staging/changelog', '.']
- name: 'gcr.io/cloud-builders/docker'
args: ['push', 'gcr.io/oph-dashboard-staging/changelog']
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
entrypoint: gcloud
args: ['run', 'deploy', 'changelog',
'--image', 'gcr.io/oph-dashboard-staging/changelog',
'--region', 'us-central1',
'--platform', 'managed',
'--concurrency', '80',
'--max-instances', '100',
'--timeout', '5m',
'--memory', '512Mi']
images: ['gcr.io/oph-dashboard-staging/changelog']
timeout: '20m'
20 changes: 20 additions & 0 deletions cloudbuild.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
steps:
- name: 'gcr.io/cloud-builders/docker'
args: ['build',
'--network=cloudbuild',
'--build-arg', 'gcp_project=onegraph-dashboard',
'-t', 'gcr.io/onegraph-dashboard/changelog', '.']
- name: 'gcr.io/cloud-builders/docker'
args: ['push', 'gcr.io/onegraph-dashboard/changelog']
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
entrypoint: gcloud
args: ['run', 'deploy', 'changelog',
'--image', 'gcr.io/onegraph-dashboard/changelog',
'--region', 'us-central1',
'--platform', 'managed',
'--concurrency', '80',
'--max-instances', '100',
'--timeout', '5m',
'--memory', '512Mi']
images: ['gcr.io/onegraph-dashboard/changelog']
timeout: '20m'
13 changes: 9 additions & 4 deletions dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@ FROM node:14 as builder

COPY package.json .
COPY yarn.lock .
COPY .env .

RUN yarn install
RUN yarn install --frozen-lockfile

COPY . .

ENV BASE_PATH="/changelog"
ENV NODE_ENV=production
ARG gcp_project

RUN yarn build && rm -rf .next/cache
RUN yarn firebase-deploy-directory --project $gcp_project --subpath changelog/_next/static --directory .next/static/ --commit

# Make smaller prod image
FROM node:14 as node_installer
Expand All @@ -24,14 +26,17 @@ RUN yarn install --production

FROM node:14

ENV BASE_PATH="/changelog"
ENV NODE_ENV=production

COPY package.json .
COPY yarn.lock .
COPY .env .
# Copies public environment variables
COPY .env.local .env
COPY server.js.example server.js
COPY next.config.js .

COPY --from=builder .next .next
COPY --from=node_installer node_modules node_modules
COPY --from=builder .next .next

CMD [ "node", "server.js" ]
1 change: 1 addition & 0 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
module.exports = () => {
const opts = {
poweredByHeader: false,
basePath: process.env.BASE_PATH,
env: {
// Backwards compatibility for people migrating from RAZZLE
Expand Down
7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@
"pixel-stream": "^1.0.3",
"react": "0.0.0-experimental-94c0244ba",
"react-dom": "0.0.0-experimental-94c0244ba",
"react-embed": "^3.3.2",
"react-intersection-observer": "^8.28.5",
"react-markdown": "^4.3.1",
"react-player": "^2.6.2",
"react-player": "^2.7.0",
"react-relay": "0.0.0-experimental-183bdd28",
"relay-runtime": "^10.0.1",
"scriptjs": "^2.5.9",
"sentence-case": "^3.0.3",
"sitemap": "^6.3.2",
"styled-components": "^5.0.0"
Expand All @@ -38,7 +38,7 @@
"scripts": {
"dev": "next",
"start": "next",
"build": "yarn ensure-publish-label && yarn relay && next build",
"build": "next build",
"start:prod": "NODE_ENV=production node build/server.js",
"relay": "relay-compiler --src ./src --schema ./schema.graphql --persistFunction scripts/persistQuery.js",
"relay:clean": "rm -r src/__generated__",
Expand Down Expand Up @@ -76,6 +76,7 @@
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-react": "7.x",
"eslint-plugin-react-hooks": "2.x",
"firebase-deploy-directory": "^1.0.4",
"flow-bin": "^0.133.0",
"flow-typed": "^3.2.1",
"graphql": "^14.4.2",
Expand Down
2 changes: 2 additions & 0 deletions scripts/persistQuery.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
const https = require('https');
const path = require('path');
const GraphQLLanguage = require('graphql/language');
const {parse, print} = require('graphql');

require('dotenv').config();
require('dotenv').config({path: path.resolve(process.cwd(), '.env.local')});

if (
(!process.env.REPOSITORY_FIXED_VARIABLES &&
Expand Down
24 changes: 13 additions & 11 deletions src/Header.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import {Box, Heading} from 'grommet';
import {Box, Heading, Text} from 'grommet';
import Avatar from './Avatar';
import Link from 'next/link';
import ConfigContext from './ConfigContext';
Expand All @@ -16,21 +16,19 @@ function Header({gitHub, adminLinks}) {
<Box margin="medium" style={{position: 'absolute', top: 0, right: 0}}>
<Avatar gitHub={gitHub} adminLinks={adminLinks} />
</Box>
<Box
pad={{horizontal: 'medium'}}
style={{
maxWidth: 704,
width: '100%',
}}>
<PostBox>
<Box
style={{maxWidth: 704, width: '100%'}}
pad={{top: 'medium', horizontal: 'medium'}}
direction="row"
align="baseline"
justify="between"
pad={{horizontal: 'medium', bottom: 'medium'}}
wrap={true}
border={{
size: 'xsmall',
side: 'bottom',
color: 'rgba(0,0,0,0.1)',
}}>
<Heading style={{marginTop: 0}} level={1}>
<Heading style={{margin: 0}} level={2}>
<Link href="/">
<a
style={
Expand All @@ -46,8 +44,12 @@ function Header({gitHub, adminLinks}) {
</a>
</Link>
</Heading>

<a href="https://onegraph.com">
<Text size="small">Learn more about OneGraph</Text>
</a>
</Box>
</Box>
</PostBox>
</>
);
}
Expand Down
17 changes: 2 additions & 15 deletions src/Post.js
Original file line number Diff line number Diff line change
Expand Up @@ -618,7 +618,7 @@ export const Post = ({relay, post, context}: Props) => {
) : null}
</Head>
<Box pad="medium">
<Heading level={1} margin="none">
<Heading level={2} margin="none">
{context === 'details' ? (
post.title
) : (
Expand Down Expand Up @@ -668,20 +668,7 @@ export const Post = ({relay, post, context}: Props) => {
) : null}
<Box direction="row" justify="between"></Box>
<Text>
<MarkdownRenderer
trustedInput={true}
source={post.body}
addHeadingIds={context === 'details'}
HashLink={function HashLink(props) {
return (
<Link
href="/post/[...slug]"
as={`${postPath({post})}${props.hash}`}>
<a>{props.children}</a>
</Link>
);
}}
/>
<MarkdownRenderer trustedInput={true} source={post.body} />
</Text>
</Box>
<ReactionBar
Expand Down
1 change: 1 addition & 0 deletions src/Sitemap.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

//@flow

import {SitemapStream, streamToPromise} from 'sitemap';
Expand Down
Loading