🆕 Add Tutorial content type

.github/workflows/tbd-cms.yml

@@ -78,3 +78,4 @@ jobs:
           SANITY_AUTH_TOKEN: ${{ secrets.SANITY_DEPLOY_TOKEN }}
           SANITY_STUDIO_PROJECT: ${{ secrets.SANITY_PROJECT_ID }}
           SANITY_STUDIO_PROD_DATASET: ${{ secrets.SANITY_DATASET }}
+          SANITY_STUDIO_PREVIEW_KEY: ${{ secrets.PREVIEW_KEY }}

.github/workflows/tbd-site.yml

@@ -101,6 +101,10 @@ jobs:
         with:
           envkey_SANITY_WEBHOOK_SECRET: ${{ secrets.SANITY_WEBHOOK_SECRET }}
           envkey_GITHUB_TOKEN: ${{ secrets.WORKFLOW_PAT }}
+          envkey_SANITY_PROJECT_ID: ${{ secrets.SANITY_PROJECT_ID }}
+          envkey_SANITY_DATASET: ${{ secrets.SANITY_DATASET }}
+          envkey_SANITY_TOKEN: ${{ secrets.SANITY_TOKEN }}
+          envkey_PREVIEW_KEY: ${{ secrets.PREVIEW_KEY }}
           directory: site
       - name: Deploy Hosting
         uses: FirebaseExtended/action-hosting-deploy@v0

cms/lib/desk.ts

@@ -27,7 +27,7 @@ import { RiTodoLine } from 'react-icons/ri';
 import { MdOutlineNewReleases } from 'react-icons/md';
 
 import { AiOutlineFileSearch } from 'react-icons/ai';
-import { IoLogoPwa } from 'react-icons/io5';
+import { IoLogoPwa, IoSchoolOutline } from 'react-icons/io5';
 import { LuPaintbrush2, LuScissors } from 'react-icons/lu';
 // import { TfiAnnouncement } from 'react-icons/tfi';
 import { SINGLETONS, LANGUAGES } from './constants';
@@ -113,6 +113,15 @@ export const deskStructure = (
             `_type == 'documentation' && (language == 'en' || !defined(language) || language == 'en')`,
           ),
         ),
+      // All base-language tutorial
+      S.listItem()
+        .title('Tutorials')
+        .icon(IoSchoolOutline)
+        .child(
+          S.documentTypeList('tutorial').filter(
+            `_type == 'tutorial' && (language == 'en' || !defined(language) || language == 'en')`,
+          ),
+        ),
       // All base-language release notes
       S.listItem()
         .title('Release Notes')

cms/lib/desk/Preview.tsx

@@ -1,33 +1,110 @@
-import { ComponentView } from 'sanity/desk';
+import { DeskToolContextValue } from 'sanity/desk';
+import { FaRegCopy } from 'react-icons/fa';
+import { IoReload } from 'react-icons/io5';
+import { RxOpenInNewWindow } from 'react-icons/rx';
 
 /**
  *
  * @param {Object} context
  * @return {ComponentView}
  */
-export const Preview = (context: ComponentView) => {
-  const { document, documentId, schemaType } = context;
+export const Preview = (context: DeskToolContextValue) => {
+  const { document: d, schemaType } = context;
+  const types = [
+    'documentation',
+    'post',
+    'story',
+    'tutorial',
+    // 'landing',
+    // 'release',
+  ];
+
+  if (!types.includes(schemaType.name)) {
+    return <h1>Preview not supported for this content type</h1>;
+  }
+
+  const base =
+    process.env.MODE === 'development'
+      ? 'http://localhost:4321'
+      : 'https://chromeos.dev';
   // Site preview URL?
-  const previewURL = `https://staging.chromeos.dev/en/posts/${document.displayed.slug.current}?id=${document.displayed._id}&rev=${document.displayed._rev}&preview=true`;
-  console.log(document);
-  console.log(documentId);
-  console.log(schemaType);
-  console.log(previewURL);
+  const previewURL = `${base}/preview?id=${d.displayed._id}&rev=${
+    d.displayed._rev
+  }&key=${encodeURIComponent(process.env.SANITY_STUDIO_PREVIEW_KEY)}`;
 
-  const style = {
-    width: '100%',
-    height: '50vh',
-  };
+  const id = `preview-${Math.round(Math.random() * 1000)}`;
 
   return (
     <div>
-      <h1>Document Preview</h1>
-      <p>Preview URL: {previewURL}</p>
+      <h1>Preview</h1>
+      <div
+        className="actions"
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          paddingInline: '1rem',
+          paddingBlock: '.5rem',
+          backgroundColor: '#111',
+          gap: '1rem',
+        }}
+      >
+        <button
+          style={{
+            appearance: 'none',
+            border: 'none',
+            backgroundColor: '#111',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '.5rem',
+            cursor: 'pointer',
+          }}
+          onClick={async () => {
+            await navigator.clipboard.writeText(previewURL);
+          }}
+        >
+          <FaRegCopy></FaRegCopy> Copy URL
+        </button>
+        <span
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '1rem',
+          }}
+        >
+          <button
+            style={{
+              appearance: 'none',
+              border: 'none',
+              backgroundColor: '#111',
+              cursor: 'pointer',
+            }}
+            onClick={() => {
+              const iframe = document.querySelector(`#${id}`);
+              if (iframe) iframe.src = previewURL;
+            }}
+          >
+            <IoReload></IoReload>
+          </button>
+          <a
+            href={previewURL}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              color: 'white',
+            }}
+          >
+            <RxOpenInNewWindow />
+          </a>
+        </span>
+      </div>
       <iframe
         title="preview"
-        src="https://chromeos.dev"
-        frameBorder="0"
-        style={style}
+        src={previewURL}
+        style={{
+          width: '100%',
+          height: '50vh',
+        }}
+        id={id}
       ></iframe>
     </div>
   );

cms/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "main": "package.json",
-  "license": "UNLICENSED",
+  "license": "Apache-2.0",
   "scripts": {
     "dev": "sanity dev",
     "start": "sanity start",
@@ -22,7 +22,8 @@
     "prettier:fix": "prettier --write .",
     "sanity": "sanity",
     "sanity:create:singletons": "sanity exec scripts/createSingletons.ts --with-user-token",
-    "sanity:test:singletons": "TARGET=dev sanity exec scripts/createSingletons.ts --with-user-token"
+    "sanity:test:singletons": "TARGET=dev sanity exec scripts/createSingletons.ts --with-user-token",
+    "sanity:pull": "sanity dataset export production && sanity dataset import --replace production.tar.gz development && rm production.tar.gz"
   },
   "keywords": [
     "sanity"

cms/schemas/announcement.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { defineField, defineType, defineArrayMember } from 'sanity';
+import { defineField, defineType } from 'sanity';
 import { preview } from '$lib/previews/localization';
 
 export default defineType({
@@ -29,43 +29,7 @@ export default defineType({
     defineField({
       name: 'body',
       title: 'Announcement',
-      type: 'array',
-      of: [
-        defineArrayMember({
-          title: 'Block',
-          type: 'block',
-          // Styles let you set what your user can mark up blocks with. These
-          // correspond with HTML tags, but you can set any title or value
-          // you want and decide how you want to deal with it where you want to
-          // use your content.
-          styles: [{ title: 'Normal', value: 'normal' }],
-          lists: [],
-          // Marks let you mark up inline text in the block editor.
-          marks: {
-            // Decorators usually describe a single property – e.g. a typographic
-            // preference or highlighting by editors.
-            decorators: [
-              { title: 'Strong', value: 'strong' },
-              { title: 'Emphasis', value: 'em' },
-            ],
-            // Annotations can be any object structure – e.g. a link or a footnote.
-            annotations: [
-              {
-                title: 'Link',
-                name: 'link',
-                type: 'object',
-                fields: [
-                  defineField({
-                    title: 'Source',
-                    name: 'source',
-                    type: 'link',
-                  }),
-                ],
-              },
-            ],
-          },
-        }),
-      ],
+      type: 'restricted-inline-block',
       validation: (Rule) => Rule.required(),
     }),
   ],

cms/schemas/fields/restricted-inline-block.ts

@@ -0,0 +1,82 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * 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
+ *
+ *   https://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.
+ */
+import { defineType, defineArrayMember, defineField } from 'sanity';
+import { KBDDecorator } from '$components/KBD';
+
+/**
+ * This is the schema definition for the rich text fields used for
+ * for this blog studio. When you import it in schemas.js it can be
+ * reused in other parts of the studio with:
+ *  {
+ *    name: 'someName',
+ *    title: 'Some title',
+ *    type: 'blockContent'
+ *  }
+ */
+export default defineType({
+  title: 'Restricted Inline Block Content',
+  name: 'restricted-inline-block',
+  type: 'array',
+  of: [
+    defineArrayMember({
+      title: 'Block',
+      type: 'block',
+      // Styles let you set what your user can mark up blocks with. These
+      // correspond with HTML tags, but you can set any title or value
+      // you want and decide how you want to deal with it where you want to
+      // use your content.
+      styles: [{ title: 'Normal', value: 'normal' }],
+      lists: [],
+      // Marks let you mark up inline text in the block editor.
+      marks: {
+        // Decorators usually describe a single property – e.g. a typographic
+        // preference or highlighting by editors.
+        decorators: [
+          { title: 'Strong', value: 'strong' },
+          { title: 'Emphasis', value: 'em' },
+          KBDDecorator,
+          { title: 'Code', value: 'code' },
+        ],
+        // Annotations can be any object structure – e.g. a link or a footnote.
+        annotations: [
+          {
+            title: 'Link',
+            name: 'link',
+            type: 'object',
+            fields: [
+              defineField({
+                title: 'Source',
+                name: 'source',
+                type: 'link',
+              }),
+            ],
+          },
+          {
+            title: 'Abbreviation',
+            name: 'abbreviation',
+            type: 'object',
+            fields: [
+              defineField({
+                name: 'abbreviation',
+                type: 'abbreviation',
+              }),
+            ],
+          },
+        ],
+      },
+    }),
+  ],
+});

cms/schemas/index.ts

@@ -17,6 +17,7 @@
 import fullBlockField from '$fields/full-block';
 import restrictedBlockField from '$fields/restricted-block';
 import inlineBlockField from '$fields/inline-block';
+import restrictedInlineBlockField from '$fields/restricted-inline-block';
 import cellBlockField from '$fields/cell-block';
 import pictureField from '$fields/picture';
 import titleField from '$fields/title';
@@ -79,6 +80,7 @@ import releases from './releases';
 import release from './release';
 import snippet from './snippet';
 import announcement from './announcement';
+import tutorial from './tutorial';
 
 export const schemaTypes = [
   // Schemas
@@ -103,11 +105,13 @@ export const schemaTypes = [
   release,
   snippet,
   announcement,
+  tutorial,
 
   // Fields
   fullBlockField,
   restrictedBlockField,
   inlineBlockField,
+  restrictedInlineBlockField,
   cellBlockField,
   pictureField,
   titleField,