Initial commit

.env.local.example

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_SANITY_PROJECT_ID=
+NEXT_PUBLIC_SANITY_DATASET=
+NEXT_PUBLIC_SANITY_API_VERSION=

.eslintrc.json

@@ -0,0 +1,28 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "extends": ["eslint:recommended", "next/core-web-vitals"],
+  "plugins": ["react"],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+    }
+  },
+  "rules": {
+    "no-console": ["warn"],
+    "no-nested-ternary": 0,
+    "no-multi-spaces": "warn",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "next/no-img-element": "off"
+  },
+  "globals": {
+    "JSX": true
+  }
+}

.github/workflows/build.yml

@@ -0,0 +1,123 @@
+name: Skyward
+
+on: [push]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.OS }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.OS }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Linting
+        run: pnpm lint:check
+
+  formatting:
+    name: Format
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.OS }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.OS }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Formatting
+        run: pnpm format:check
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.OS }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.OS }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+        env:
+          NEXT_PUBLIC_BASE_URL: ${{ secrets.NEXT_PUBLIC_BASE_URL }}
+          NEXT_PUBLIC_SANITY_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_SANITY_PROJECT_ID }}
+          NEXT_PUBLIC_SANITY_DATASET: ${{ secrets.NEXT_PUBLIC_SANITY_DATASET }}
+          NEXT_PUBLIC_SANITY_API_VERSION: ${{ secrets.NEXT_PUBLIC_SANITY_API_VERSION }}

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Skyward Digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,116 @@
+# Introduction
+
+Hey 👋 thanks for taking the time to look through our resources!
+
+Welcome to our Page Builder Starter Project, a simple and effective tool powered by Next.js and Sanity.
+
+With this setup, you can create web pages, add and customise components, and reorder them to your liking, all directly in Sanity Studio. What's more, you get to see your changes in real time with the live preview feature, all without needing to write any code.
+
+**Note:** This application uses the `/pages` directory in Next.js.
+
+# Getting Started
+
+To use our starter project, you'll need to clone this GitHub repository locally and open it up in your favourite code editor.
+
+## Install dependencies
+
+We use pnpm to install our dependencies
+
+`pnpm install`
+
+## Sanity set up
+
+To run this project, you'll need a Sanity account and project. If you haven't got an account, [create one here](<(https://www.sanity.io/get-started/)>) - the process will also automatically generate your first Sanity project.
+
+Go to [Sanity's management page](https://www.sanity.io/manage), select your project, and navigate to the **API** tab. Under **CORS Origin**, add http://localhost:3000, check "Allow Credentials", and click Save. This permits our Next.js project to access Sanity Studio. Don't forget to come back here later and add your production URL when you deploy your project.
+
+Lastly, note down the **Project Id** from the Sanity project homepage.
+
+## Environment settings
+
+We use environment variables to set things up.
+
+Create `.env.local` file at the root of the project and paste the following into it, replacing `your-project-id` with the Project Id of your Sanity project and `todays-date` with today's date in the format YYYY-MM-DD:
+
+```
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
+NEXT_PUBLIC_SANITY_DATASET=production
+NEXT_PUBLIC_SANITY_API_VERSION=todays-date
+```
+
+**Note:** You'll also need to use these for any deployment, including on GitHub.
+
+## Running your code
+
+Once you're set up, you can run your code through the development server
+
+```
+pnpm run dev
+```
+
+Navigate to http://localhost:3000 to view the website. For now it will be a blank page.
+
+## Using Sanity Studio
+
+Navigate to http://localhost:3000/studio to view Sanity Studio.
+
+Log into Sanity using the same login method as the account you used in your set up.
+
+Here, you can add pages and components and preview the changes before publishing.
+
+# How the project works
+
+Sanity is a content platform used to build, manage, and distribute structured content. It stores your content centrally in the "Content Lake", ready to be utilised in various contexts. To interact with this Content Lake, Sanity provides Sanity Studio, a customisable interface for creating, managing and publishing content.
+
+The structure of your content is determined by schemas, defining what types of content can be created and how they interrelate. In this project, we define schemas for each page component and they live in the `/sanity/schemas` folder.
+
+We use Sanity's powerful GROQ (Graph-Relational Object Queries) language to fetch the structured data on our pages. This fetched data is then rendered by corresponding components residing in our project's `/components` directory.
+
+One of the key features of Sanity implemented into this project is Live Preview, which allows you to visualise changes to your content in real-time in Sanity Studio. As the data changes in the Content Lake, our components dynamically update to reflect these changes.
+
+## Important files and folders
+
+| File(s)                          | Description                                                                                    |
+| -------------------------------- | ---------------------------------------------------------------------------------------------- |
+| `sanity.config.ts`               | Config file for Sanity Studio                                                                  |
+| `/pages/index.tsx`               | Landing page for `/` (homepage)                                                                |
+| `/pages/studio/[[...index]].tsx` | Where Sanity Studio is mounted                                                                 |
+| `/pages/api/preview.ts`          | Serverless route for triggering Preview mode (handles page slugs)                              |
+| `/pages/api/exit-preview.ts`     | Serverless route for exiting Preview mode                                                      |
+| `/sanity/env.ts`                 | Configuration for the Sanity project and dataset                                               |
+| `/sanity/schemas`                | Where Sanity Studio gets its content types from                                                |
+| `/sanity/structure.ts`           | Defines the setup for Sanity Studio's document editor view, adding an iFrame preview for pages |
+| `/sanity/lib/sanity.client.ts`   | Sanity client configured based on `env.ts`                                                     |
+| `/sanity/lib/sanity.preview.ts`  | Configures the Preview functionality                                                           |
+
+## Adding new components
+
+If you want to create more components, add additional files to the `/sanity/schemas` folder.
+
+After creating a new schema, ensure to import it and include it in the `/sanity/schemas/index.ts` file. This step is necessary for the schema to be recognised and used within Sanity Studio.
+
+Your new component must also be added to the `pageBuilder` array in the `/sanity/schema/page-schema.ts` file, like so:
+
+```
+const page = {
+  //...existing code
+  name: "pageBuilder",
+  type: "array",
+  title: "Page builder",
+  of: [
+    //...existing components
+    {
+      type: "yourNewComponent",
+    },
+  ],
+};
+```
+
+Replace `yourNewComponent` with the actual type of your new schema. This allows the new component to be used in the page building process within Sanity Studio.
+
+## Live Preview
+
+This project is configured with Live Preview where you can see your changes in real-time within Sanity Studio. This is part of `next-sanity` and you can read more about how it works in [their documentation](https://github.com/sanity-io/next-sanity#next-sanitypreview-live-real-time-preview).
+
+We're using the Built-in Sanity authentication. Please follow the instructions in [their docs](https://github.com/sanity-io/next-sanity#next-sanitypreview-live-real-time-preview) if you'd like to set up custom token authentication.

components/CallToAction/index.tsx

@@ -0,0 +1,22 @@
+import CallToAction from "@/types/CallToAction";
+import Link from "next/link";
+
+export default function CallToActionSection({
+  title,
+  description,
+  buttonText,
+  url = "",
+}: CallToAction) {
+  return (
+    <section className="mx-auto max-w-4xl p-10">
+      <h2 className="mb-3 text-4xl">{title}</h2>
+      <p className="mb-2 text-lg font-light">{description}</p>
+      <Link
+        className="my-4 inline-flex rounded-lg bg-gray-800 px-6 py-2 text-lg text-white no-underline transition duration-200 ease-in-out hover:bg-black focus:ring-2 focus:ring-gray-600 focus:ring-offset-2"
+        href={url}
+      >
+        {buttonText}
+      </Link>
+    </section>
+  );
+}

components/Hero/index.tsx

@@ -0,0 +1,12 @@
+import Hero from "@/types/Hero";
+
+export default function HeroSection({ heading, tagline }: Hero) {
+  return (
+    <section className="bg-gray-200">
+      <div className="mx-auto max-w-4xl px-10 py-16">
+        <h1 className="mb-6 text-6xl">{heading}</h1>
+        <p className="text-lg font-light">{tagline}</p>
+      </div>
+    </section>
+  );
+}

components/NoComponentsMessage/index.tsx

@@ -0,0 +1,18 @@
+/* This message is for development purposes only and should not be on production */
+import Link from "next/link";
+
+export default function NoComponentsMessage() {
+  return (
+    <main className="m-12 mx-auto w-96 rounded-md border px-8 py-6">
+      <h1 className="mb-3 text-lg font-semibold">No components found</h1>
+      Navigate to the{" "}
+      <Link
+        className="underline underline-offset-2 hover:no-underline"
+        href="/studio"
+      >
+        Sanity Studio
+      </Link>{" "}
+      to add some components for this page.
+    </main>
+  );
+}