Merge branch 'main' into clean-broken-whats-new-links

.editorconfig

@@ -0,0 +1,5 @@
+root = true
+
+[*.yml]
+indent_style = space
+space_indentation = 2

.github/workflows/create-indices.yml

@@ -14,14 +14,17 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: yarn install, create-indices
+          node-version-file: '.nvmrc'
+      - name: pnpm install, create-indices
         run: |
-          yarn install
-          yarn create-indices
+          pnpm install
+          pnpm create-indices
         env:
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}

.github/workflows/dispatch-create-whats-new-page.yml

@@ -0,0 +1,58 @@
+name: Create What's New Page for TinaCMS or TinaCloud
+
+on:
+  workflow_dispatch:
+    inputs:
+      project:
+        description: 'The project to create the Whats New page for.'
+        required: true
+      versionNumber:
+        description: 'The version of the project to create the Whats New page for.'
+        required: true
+      dateReleased:
+        description: 'The date the version was released.'
+        required: true
+      releaseNotes:
+        description: 'The release notes for the version.'
+        required: true
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  create-whats-new-page:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Create What's New Page
+        run: |
+          ./scripts/create-release-notes.sh
+        env:
+          PROJECT_NAME: ${{ github.event.inputs.project }}
+          VERSION_NUMBER: ${{ github.event.inputs.versionNumber }}
+          DATE_RELEASED: ${{ github.event.inputs.dateReleased }}
+          RELEASE_NOTES: ${{ github.event.inputs.releaseNotes }}
+
+      - name: Create Pull Request
+        id: create-pull-request
+        uses: peter-evans/create-pull-request@v7
+        with:
+          commit-message: Release Notes - Add ${{ github.event.inputs.project }} ${{ github.event.inputs.versionNumber }}
+          title: Release Notes - Add ${{ github.event.inputs.project }} ${{ github.event.inputs.versionNumber }}
+          body: |
+            This PR adds the release notes for ${{ github.event.inputs.project }} ${{ github.event.inputs.versionNumber }}.
+
+            This was created automatically by a GitHub Action - `.github/workflows/dispatch-create-whats-new-page.yml`
+          branch: releaseNotes/${{ github.event.inputs.project }}-${{ github.event.inputs.versionNumber }}
+          # We only expect changes to these folders
+          add-paths: |
+            content/*
+
+      - name: Enable Auto-Merge
+        if: ${{ steps.create-pull-request.outputs.pull-request-number }}
+        run: gh pr merge -s --auto ${{ steps.create-pull-request.outputs.pull-request-number }}
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/nodejs.yml

@@ -14,27 +14,29 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [18.x]
-
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: yarn install, build, and test
-        run: |
-          yarn install
-          yarn build
-          yarn lint
-          yarn test
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - name: pnpm install
+        run: pnpm i
+      - name: pnpm build
+        run: pnpm build
+      - name: pnpm lint
+        run: pnpm lint
+      - name: pnpm test
+        run: pnpm test
         env:
           CI: true
-      - name: yarn export
+      - name: pnpm export
         run: |
-          yarn export
+          pnpm export
         env:
           CI: true
       - name: 📉 Check HTML

.gitignore

@@ -5,17 +5,12 @@ out
 
 # dependencies
 node_modules
-package-lock.json
-yarn.lock
-!/yarn.lock
 test/node_modules
 
 # logs & pids
 *.log
 pids
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # coverage
 .nyc_output

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.probe": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.formatOnSave": true,
+  // Runs Prettier, then ESLint
+  "editor.codeActionsOnSave": ["source.fixAll.eslint", "source.sortImports"],
+  "editor.formatOnPaste": false,
+  "editor.tabSize": 2,
+  "search.exclude": {
+    "**/.pnp.*": true
+  },
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -6,16 +6,26 @@ Source code for the [tina.io](https://tina.io) website.
 
 ```
 cp .env.example .env
-yarn install
-yarn dev
+pnpm i
+pnpm dev
 ```
 
+## Vision
+Make a wesbite to communicate the awesomeness of TinaCMS
+
+## Tech Stack
+- NextJS
+- TinaCMS
+- GitHub
+- Markdown
+
+
 ### Testing Local TinaCMS Changes
 
 If you have the **tinacms** repository cloned locally you can use it when running **tina.io**:
 
 ```
-TINA=../path/to/tinacms yarn dev
+TINA=../path/to/tinacms pnpm dev
 ```
 
 You can also specify which packages you want to watch:

components/DocumentationNavigation/DocsLeftSidebar.tsx

@@ -2,34 +2,39 @@ import styled, { css } from 'styled-components'
 
 export const DocsLeftSidebar = styled.div<{ open: boolean }>`
   line-height: 1.25;
-  background-color: white;
-  border-right: 1px solid var(--color-grey-2);
-  padding: 0;
+  background-color: rgba(255, 255, 255, 0.5);
+
+  padding: 10px;
   position: fixed;
-  z-index: 250;
-  left: 0;
+  z-index: 49;
+  left: 0; 
   top: 0;
   width: 80%;
   min-width: 16rem;
   max-width: 24rem;
-  height: 100%;
-  z-index: 1250;
+  height: 100%; 
+  z-index: 49;
   transform: translate3d(-100%, 0, 0);
   transition: all 140ms ease-in;
   display: flex;
   flex-direction: column;
   align-content: space-between;
   overflow: visible;
+  
+  border-radius: 0.75rem; 
+  box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.05), 
+              0 -5px 30px -5px rgba(0, 0, 0, 0.05), 
+              0 15px 20px -5px rgba(0, 0, 0, 0.05), 
+              0 -5px 20px -5px rgba(0, 0, 0, 0.05);
 
   > ul {
     flex: 1 1 auto;
     padding: 1rem 1px 1rem 0;
-    background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0) 1rem),
+    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0) 1rem), 
       linear-gradient(to bottom, var(--color-grey-1), white 1rem);
     background-attachment: local, scroll;
     background-repeat: no-repeat;
     background-size: 100% 1rem, 100% 1rem;
-    margin-right: -1px;
   }
 
   ${props =>
@@ -42,12 +47,23 @@ export const DocsLeftSidebar = styled.div<{ open: boolean }>`
 
   @media (min-width: 840px) {
     position: sticky;
-    height: 100vh;
-    top: 0;
+    height: calc(100vh - 80px); 
+    top: 40px;
     grid-area: sidebar;
     place-self: stretch;
     width: 100%;
-    left: 0;
+    left: 40px;
     transform: translate3d(0, 0, 0);
+    margin-top: 30px;
+    margin-bottom: 40px;
+     
+
+  }
+
+  @media (max-width: 840px) {
+    background-color: var(--color-light);
+    height: 100%; 
+    padding: 0; 
+    
   }
 `