openlawteam / openlaw-website

OpenLaw static website

OpenLaw Website

Welcome to the OpenLaw website repository. This site is built using Gatsby.

Local development

To develop on the app, run the steps below to get started. You will need to run with Node version 10 or below.

git clone https://github.com/openlawteam/openlaw-website.git

cd openlaw-website

npm install

npm run develop

Once the setup is complete you can navigate to localhost:8000 (or whatever host and/or port you've selected).

License

Copyright 2021 Aaron Wright, David Roon, and ConsenSys AG.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

openlaw-website's Issues

Private Instances Landing - Too much space at top of page and margins are too wide.

Problem
Too much space at top of page and margins are too wide.

Screenshot

Page
Request Private Instance Landing - https://openlaw.io/private-instances

Acceptance Criteria

• Spacing at top is not excessive
• Margins match the header

Create an OpenLaw Press/Media Kit

I've noticed a few articles written about us and the writer couldn't access our logo easily since it was an SVG (which isn't a bad thing), so they took a screenshot. They need the option of using multiple file formats (we don't know what their CMS accepts) and also having facts about us they don't have to email, or call us for.

• PDF (fact sheet, background, founders, etc.)
• opelaw-mediakit.zip file of Logos, nice images

---

References:

• https://en.wikipedia.org/wiki/Press_kit
• Example of a written Press Kit: https://kaleido.io/wp-content/uploads/2018/06/Kaleido_Press_Kit.pdf

cc: @atgrif

Frequently Asked Questions - Too much space at top of page and margins are too wide.

Problem
Too much space at top of page and margins are too wide.

Screenshot

Page
FAQ Page - https://openlaw.io/faq

Acceptance Criteria

• Spacing at top is not excessive
• Margins match the header

Optimize images

Optimize images on the main page. Replace where possible with SVG instead of PNG.

SEO Enhancements - Static homepage (not logged in)

Problem/Enhancement
Update H1 copy and meta tags on homepage (logged out view).

Pages
https://openlaw.io/ (logged out view)

Acceptance Criteria

• First H1 tag on the page: "Building the Future of Law, One Legal Agreement and Contract at a Time"
  • Previously: "Building the Future of Law"
• Meta keywords are: Contract, legal, agreement, contract law, smart contracts , contract template, free form, attorney

Special QA Directions:
This is on the static site, and thus, the user is not logged in

Update README with instructions for setting up local development environment / contributing

Update About and FAQ links

general ux / onboarding / process

hey there

we are currently working on a dao under swiss legislation, therefore i was checking for the current state of openlaw in terms of, how would we integrate contracts from openlaw into our organisation.

obviously these topics are pretty fresh, but coming from a strong product perspective knowning well about onboarding realworld clients, product teams and developers, my question is: what is the best process to interact with openlaw?

coming from the frontend, searching for contract types is hardly sufficient, what would be the desired approach to, e.g. start working on a topic like dao, how to fork contracts, version them, make this versioning and content ( tags / nlp ) searchable and findable to lower the entry barrier?

for example if we wanted to onboard our legal people, confronting them with a tool like this in its current state wouldnt help. at the end they would copy content to their word processor, edit it and send it back, possibly to a dev.

besides the interface, the contracts wouldnt be designed on the platform but using your markup language in some kind of editor?

cheers and keep it up —
offering support, too

Add project to "Awesome Companies Using Truffle" list

as seen here

Truffle is very open to a PR for this. Please reach out with any questions :)

Possible optimization on Contract viewing page

Hi, I'm not sure if its correct in saying this as I'm still reading through the API docs. I noticed that on the page that displays the contract (https://app.openlaw.io/contract/{contractId}), the call /contract/raw/?contractId is repeatedly made, even though the contract is already signed. I guess it makes sense to keep polling this while there is no signature so the UI is immediately updated once there is a signature, but after a valid signature is there then it doesn't seem like the data changes?

Navigation - Add All Templates to Not Logged In Users Navigation for Static Site

Problem/Enhancement

• Add All Templates to not logged in users navigation for static site

Wireframes

Pages
All static site pages accessible without logging in

• https://openlaw.io/
• https://openlaw.io/about
• https://openlaw.io/faq
• https://openlaw.io/private-instances

Acceptance Criteria

• Not logged in users can see All Templates in the navigation
• On click or tap of the All Templates page, the user is taken to the All Templates page

Special QA Instructions
User should not be logged in

Related Tasks
https://github.com/openlawteam/openlaw/issues/1316
https://github.com/openlawteam/openlaw/issues/1317
https://github.com/openlawteam/openlaw/issues/1318
https://github.com/openlawteam/openlaw/issues/1327

Cookie consent

Add cookie consent top bar for visitors coming from countries with a cookie law.

About Page - Text does not follow page margins in smaller breakpoints

Problem
Too much space at top of page and margins are too wide.

Screenshot

Page
About - https://openlaw.io/about

Acceptance Criteria

• Spacing at top is not excessive
• Margins match the header
• Resize images for the smaller breakpoints so they don't break the page

Mobile views for Terms of Use and Privacy Policy pages

Need to make small updates to accommodate smaller widths for subpages:

• Terms of Use
• Privacy Policy

Privacy Policy - Too much space at top of page and margins are too wide.

Problem
Too much space at top of page and margins are too wide.

Screenshot

Page
Privacy Policy - https://openlaw.io/privacy

Acceptance Criteria

• Spacing at top is not excessive
• Margins match the header

[testing] Cypress e2e

Run Cypress e2e tests on build in Netlify.

Netlify - clear build cache

whoever has the netlify access will need to clear the build cache on deploy:
In deploys tab, click trigger deploy and check "clear build cache"

Looks like stylesheet isn't being either compiled or copied over to static on build or deploy to Netlify.
Suggested solutions were do remove package-lock.json folder and "clear build cache" flag on Netlify

Terms of Use - Too much space at top of page and margins are too wide.

Problem
Too much space at top of page and margins are too wide.

Screenshot

Page
Terms of Use - https://openlaw.io/terms

Acceptance Criteria

• Spacing at top is not excessive
• Margins match the header

Change proxy address to website; change Netlify site name

I'll be away for part of the week this week, so the only window I am guaranteed is my Monday or Tuesday at night. If this doesn't get done before Wednesday, @mroth could you help @mingfang if you're not too busy?

---

• New proxied address: https://openlaw-website.netlify.com
• New Netlify site name: openlaw-website

From @mroth:

We should probably consider renaming the netlify project from openlaw-beta to something else since it’s no longer in beta, just to avoid confusing ourselves, and for public community PRs. openlaw-website to match the github repo? (cc Jacqueline Outka Jeremiah Trein and Ming Fang — there’s a bit of a chicken and egg coordination here, since I believe the AWS nginx proxy Ming Fang refers to the project name URL, so we’d have to coordinate changing it at both places to avoid breaking things I think?)

Fix og:image rich preview

Need to add a better logo is all :-)

Nav appearance on "tablet" size and down

Best option is to use the hamburger nav at the tablet point.

It's hard to tell from the screenshot, but there's no padding to the right and the menu items quickly become squeezed right after this point.

OG Tags for What Displays When Sharing

Problem/Enhancement
We need to set our OpenLaw OG tags so we control what images and content show up when people share our site on social media. We don't have any of these properties currently.

Assessment
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fopenlaw.io

Pages
All pages not behind login:

• https://openlaw.io/
• https://openlaw.io/about
• https://openlaw.io/private-instances
• https://app.openlaw.io/login
• https://app.openlaw.io/signup
• https://openlaw.io/faq/

Detail
og:url - URL for the specific page
og:type - website
og:title - corresponding page title
og:image - OpenLaw logo
og:description - We are home to a passionate group of people, technologists, and dreamers committed to rebuilding the legal industry.
fb:app_id - (must create one: https://stackoverflow.com/questions/8845082/getting-fb-app-id-from-a-fb-page)

Acceptance Criteria

• When the user shares a page from openlaw.io, the title, description, and thumbnail display what we set in the OG tags.
• When a user who is viewing the post on the corresponding social media site clicks on the link, they are taken to the correct corresponding page.

Special QA Instructions

• Need to be able to test via a social media network or chat platform like Slack

Related Links
https://www.optimizesmart.com/how-to-use-open-graph-protocol/
https://api.slack.com/docs/message-link-unfurling#classic_unfurling

Privacy Policy - Table breaking margins

Problem
Table within the privacy policy is causing things to go out of margins

Screenshot

Page
Privacy. Policy - https://openlaw.io/privacy

Acceptance Criteria

• In small breakpoint, table is scrollable from left to right so it doesn't go out of margins.

FAQ page body links not working

ref: https://github.com/openlawteam/openlaw/issues/1268

Homepage - Add Sign Up Fields to Homepage

Problem/Enhancement

• Add sign up fields to the first section on the homepage, above the "Sign up for OpenLaw" button

Wireframes

Pages
https://openlaw.io/

Acceptance Criteria

• On click or tap or tap of the name field, the user can type their name
• On click or tap of the email field, the user can type their email
• An inline error displays if the email is not properly formatted: "Enter a valid email format."
• On click or tap, the user can enter text in the password field
• The password must meet the following requirements: Password must be at least 8 characters with one upper-case letter, one lower-case letter, one number, and one accepted special character (!@#$&/). Otherwise an inline error will display: "Password must be at least 8 characters with one upper-case letter, one lower-case letter, one number, and one accepted special character (!@#$&/)."
• On click or tap, the user can enter text in the confirm password field.
• The confirm password field must match the password field exactly, otherwise an inline error displays: "Confirm password field must match the password field."
• I agree to the terms and conditions checkbox is unselected by default
• On click or tap of the I agree to the terms and conditions checkbox, the checkbox becomes selected
• On click or tap of the terms and conditions link, the user is taken to https://openlaw.io/terms in a new browser window.
• The Sign Up button is inactive until all the fields are filled out and meet the criteria per their field.
• If there is already user with the same email, on click or tap of the Sign Up button, an inline error displays: "User with id [email protected] already exists."

Special QA Instructions
User is not logged in

See https://app.openlaw.io/signup for functional reference

SVG files that are bitmap blobs

A number of SVG files are stored internally as binary bitmap images, rather than vector graphics, resulting in large file sizes:

• bg.svg (183kb)
• build.svg (158kb)
• community.svg (214kb)

Looks like the same for the following SVGs currently set in JSX have the same issue:

$ cd /src/components/svg; grep -l "data:image/png;base64" *.{js,jsx}                
BlueBoxesSVG.jsx
BuildSVG.jsx
CommunitySVG.jsx
ContractsModelSVG.jsx
DarkBlueBoxSVG.jsx
LightBlueBoxSVG.jsx

Different but related, but there are also a number of images that look like they were originally vector based, but only have PNG in the src currently, so having a SVG vector version could make things smaller:

• Lock
• Machine
• File-pattern
• Fun-bunch-*

I know we're still iterating on design, but figured I'd compile the list while I noticed it before I forgot.

xoxo,
person who loads websites on slow plane wifi far too often ✈️ 🤣

Fix Slack link in footer

ref: https://github.com/openlawteam/openlaw/issues/1246