Oxen.io Website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
William Grant 75a13aa682 updated all relative path imports to be absolute 2 months ago
@types Image loading performance (#38) 4 months ago
assets slowed down floating animation, optimised images and svgs and load them eagerly in certain cases 4 months ago
components updated all relative path imports to be absolute 2 months ago
constants updated all relative path imports to be absolute 2 months ago
contentful Docs day 1 (#49) 2 months ago
contexts updated all relative path imports to be absolute 2 months ago
hooks updated all relative path imports to be absolute 2 months ago
pages updated all relative path imports to be absolute 2 months ago
public Docs day 1 (#49) 2 months ago
services updated all relative path imports to be absolute 2 months ago
state updated all relative path imports to be absolute 2 months ago
types updated all relative path imports to be absolute 2 months ago
utils updated all relative path imports to be absolute 2 months ago
.env.example Docs day 1 (#49) 2 months ago
.eslintrc.json upgraded to next11, replaced eslint config with eslint-next-config-next, fixed eslint errors 4 months ago
.gitignore Docs day 1 (#49) 2 months ago
.prettierignore Templated structure 1 year ago
.prettierrc.js Templated structure 1 year ago
LICENSE Docs day 1 (#49) 2 months ago
README.md added env var staging secret to next config 2 months ago
_next onTouch mobile bubble sidemenu 11 months ago
jest.config.js BUILDING WORKS WOOHOOOO 11 months ago
next-env.d.ts upgraded to next11, replaced eslint config with eslint-next-config-next, fixed eslint errors 4 months ago
next.config.js added env var staging secret to next config 2 months ago
package.json dropped live prop from contentful in favour of previews, fixed linting 3 months ago
postcss.config.js changed sass to css and removed node-sass dep, added css-nano dep 5 months ago
tailwind.config.js Develop updates (#45) 4 months ago
tsconfig.json updated all relative path imports to be absolute 2 months ago
update.sh Removed discord 11 months ago
yarn.lock Image loading performance (#38) 4 months ago

README.md


Getting Started

This project is built with Contentful, Next.js, Tailwind CSS & Typescript.

System Requirements

Setup

  1. Install nvm

Follow nvm setup instructions here.

  1. Install Node.js locally
nvm install 14.15.0
nvm use 14.15.0
  1. Install yarn
npm install yarn -g
  1. Install dependencies
yarn install
  1. Signup for a free Contentful account and create an organisation and within that create a space.

    We called our organization Oxen and the space Website.

    • For the site to build correctly you need to import our Content models and assets into your Contentful space. We have created some example content so you can get comfortable with our Contentful setup.

      NOTE: Not all pages will load correctly because our Content is stored on Contentful.

    • Add your space ID and content management token inside of contentful/config.json

    • Run this command inside the root of this project

      npx contentful space import --config contentful/config.json
    
    • For more information about importing/exporting in Contentful see here.
  2. Setup your environment file. See our .env.example as a guide. Make sure to call the file .env.local.

    • You can leave the Campaign Monitor keys empty unless you are interested in how we handle mailing list subscriptions.

Developing

  • For accessbility testing we use the axe-react plugin.
  • We use the Headwind VSCode extension for sorting TailwindCSS classes.
  • We use classnames to organise our classes into groups that combine at build time.

If you are new to Next.js, this is a helpful introduction: https://nextjs.org/docs

Now you can run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the Session homepage.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Contentful

  • Use the Link Preview and Media content models for embedding content into blog posts.
  • If linking content that is on the site itself try to omit omit https://getsession.org. e.g. https://getsession.org/blog/onion-requests-session-new-message-routing-solution/ => /blog/onion-requests-session-new-message-routing-solution/.
  • To use superscript, subscript, strikethroughs or style text use the Markup content model.

Next.js

  • Try to use the next/image component in place of img tags where possible.
  • If you want to make a link to a location on the website use the next/link component with a relative path. i.e. https://getsession.org/blog -> /blog

TailwindCSS

Class organisation

This helps with readability and is encouraged. Consider it to be a guideline and not a set of rules.

React Component
  <div className={classNames(
    "general classes here - colors, fonts, padding, margin etc",
    "responsive class changes should have it's own string md: lg: etc."
    "placeholder classes",
    "animations, transforms, effect",
    "pseudo classes i.e hover, focus, active, etc.",
    "toggling classes i.e. NavMenu isExpanded"
  )}></div>
Custom CSS Class
.custom-class {
  @apply general classes here - colors, fonts, padding, margin etc;
  @apply responsive class changes should have it's own string md: lg: etc.;
  @apply placeholder classes;
  @apply animations, transforms, effect;
  @apply pseudo classes i.e hover, focus, active, etc.;
  @apply toggling classes i.e. NavMenu isExpanded;
}

Issues with Tailwind

We can't use template literals with classes if we want to purge (shrink) the CSS files at build time.

<div className="hover:bg-black hover:text-${bgColor}"></div> // Won't work in production

Deploying to Production

You can run the project in a production environment by running:

yarn run build && yarn run start

Make sure to do this locally and check for errors before pushing any code changes to your hosted repository

Any changes made on Contentful will be reflected on the production server hourly.

If you want to see your Contentful changes faster while using a production server you can use the Staging Environement.

Staging Environment

You can test the project in a staging environment by running:

yarn run build:staging && yarn run start:staging

Staging environments are password protected using the password you assign to STAGING_SECRET in .env.local.

To unlock the staging environment go to http://localhost:3000/login?secret=YOUR_PASSWORD_HERE

System environment variables and page metadata will also be updated to show it's a staging website.

Any changes made on Contentful will be reflected on the staging server every 30 seconds.

License

Distributed under the GNU GPLv3 License. See LICENSE for more information.