feat(cli): get started template

Co-authored-by: Per-Kristian Nordnes <[email protected]>

refactor(cli): update hello sanity template

refactor(cli): add restrictive dev env for banner

refactor(cli): add restriction to banner when not logged in

refactor(cli): use window.localStorage instead of localStorage

fix(cli): remove superfluous .eslintrc file causing warnings with template

packages/@sanity/cli/src/actions/init-project/templates/get-started.js

@@ -0,0 +1,19 @@
+export const dependencies = {}
+
+export const generateSanityManifest = (base) => ({
+ ...base,
+ parts: [
+ {
+ name: 'part:@sanity/base/schema',
+ path: './schemas/schema',
+ },
+ {
+ name: 'part:@sanity/desk-tool/structure',
+ path: './deskStructure.js',
+ },
+ {
+ implements: 'part:@sanity/base/root',
+ path: 'plugins/sanity-plugin-tutorial/CustomDefaultLayout',
+ },
+ ],
+})

packages/@sanity/cli/src/actions/init-project/templates/index.js

@@ -1,6 +1,7 @@
 module.exports = {
  blog: require('./blog'),
  clean: require('./clean'),
+ 'get-started': require('./get-started'),
  moviedb: require('./moviedb'),
  ecommerce: require('./ecommerce'),
  shopify: require('./shopify'),

packages/@sanity/cli/templates/get-started/.npmignore

@@ -0,0 +1,12 @@
+# Logs
+/logs
+*.log
+
+# Coverage directory used by tools like istanbul
+/coverage
+
+# Dependency directories
+node_modules
+
+# Compiled sanity studio
+/dist

packages/@sanity/cli/templates/get-started/README.md

@@ -0,0 +1,9 @@
+# Sanity Clean Content Studio
+
+Congratulations, you have now installed the Sanity Content Studio, an open source real-time content editing environment connected to the Sanity backend.
+
+Now you can do the following things:
+
+- [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme)
+- [Join the community Slack](https://slack.sanity.io/?utm_source=readme)
+- [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)

packages/@sanity/cli/templates/get-started/config/.checksums

@@ -0,0 +1,8 @@
+{
+ "#": "Used by Sanity to keep track of configuration file checksums, do not delete or modify!",
+ "@sanity/default-layout": "bb034f391ba508a6ca8cd971967cbedeb131c4d19b17b28a0895f32db5d568ea",
+ "@sanity/default-login": "e2ed4e51e97331c0699ba7cf9f67cbf76f1c6a5f806d6eabf8259b2bcb5f1002",
+ "@sanity/form-builder": "b38478227ba5e22c91981da4b53436df22e48ff25238a55a973ed620be5068aa",
+ "@sanity/data-aspects": "d199e2c199b3e26cd28b68dc84d7fc01c9186bf5089580f2e2446994d36b3cb6",
+ "@sanity/vision": "da5b6ed712703ecd04bf4df560570c668aa95252c6bc1c41d6df1bda9b8b8f60"
+}

packages/@sanity/cli/templates/get-started/config/@sanity/data-aspects.json

@@ -0,0 +1,3 @@
+{
+ "listOptions": {}
+}

packages/@sanity/cli/templates/get-started/config/@sanity/default-layout.json

@@ -0,0 +1,6 @@
+{
+ "toolSwitcher": {
+ "order": [],
+ "hidden": []
+ }
+}

packages/@sanity/cli/templates/get-started/config/@sanity/default-login.json

@@ -0,0 +1,8 @@
+{
+ "providers": {
+ "mode": "append",
+ "redirectOnSingle": false,
+ "entries": []
+ },
+ "loginMethod": "dual"
+}

packages/@sanity/cli/templates/get-started/config/@sanity/form-builder.json

@@ -0,0 +1,5 @@
+{
+ "images": {
+ "directUploads": true
+ }
+}

packages/@sanity/cli/templates/get-started/config/@sanity/vision.json

@@ -0,0 +1,3 @@
+{
+ "defaultApiVersion": "2021-10-21"
+}

packages/@sanity/cli/templates/get-started/deskStructure.js

@@ -0,0 +1,13 @@
+// deskStructure.js
+import S from "@sanity/desk-tool/structure-builder";
+import { CogIcon } from "@sanity/icons";
+
+export default () =>
+ S.list()
+ .title("Base")
+ .items([
+ S.listItem()
+ .title("Site Settings")
+ .icon(CogIcon)
+ .child(S.document().schemaType("ss").documentId("siteSettings")),
+ ]);

packages/@sanity/cli/templates/get-started/plugins/.gitkeep

@@ -0,0 +1 @@
+User-specific packages can be placed here

packages/@sanity/cli/templates/get-started/plugins/sanity-plugin-tutorial/CustomDefaultLayout.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import StudioRoot from 'part:@sanity/default-layout/root'
+import {useCurrentUser} from '@sanity/base/hooks'
+import HelloSanityTutorial from './HelloSanityTutorial'
+
+export default function CustomDefaultLayout() {
+ const currentUser = useCurrentUser()
+
+ return (
+ <>
+ {currentUser.value && <HelloSanityTutorial />}
+ <StudioRoot />
+ </>
+ )
+}

packages/@sanity/cli/templates/get-started/plugins/sanity-plugin-tutorial/HelloSanityTutorial.js

@@ -0,0 +1,105 @@
+import React, {useState} from 'react'
+import {
+ Card,
+ Container,
+ Button,
+ Flex,
+ Label,
+ Heading,
+ Text,
+ Stack,
+ useElementRect,
+ useTheme,
+} from '@sanity/ui'
+import {CloseIcon} from '@sanity/icons'
+import styled, {css} from 'styled-components'
+
+const BlueColor = css`
+ color: ${({theme}) => theme.sanity.color.muted.primary.enabled.fg};
+`
+
+const LabelContainer = styled(Label)`
+ ${BlueColor}
+`
+
+const TextContainer = styled(Text)`
+ ${BlueColor}
+`
+
+export const HelloSanityTutorial = () => {
+ const [hideTutorial, setShowTutorial] = useState(
+ window.localStorage.getItem('hellosanity_closedTutorial') !== null
+ )
+
+ const {sanity} = useTheme()
+ const [rootElement, setRootElement] = useState()
+ const rect = useElementRect(rootElement)
+ const isSmallScreen = rect?.width < sanity.media[1]
+ const isProdEnv = process.env.NODE_ENV !== 'development'
+
+ const onClose = () => {
+ window.localStorage.setItem('hellosanity_closedTutorial', 'true')
+ setShowTutorial(true)
+ }
+
+ if (hideTutorial || isProdEnv) {
+ return null
+ }
+
+ return (
+ <div ref={setRootElement}>
+ <Card tone="primary" padding={isSmallScreen ? 3 : 5} paddingBottom={isSmallScreen ? 4 : 6}>
+ <Flex justify={isSmallScreen ? 'space-between' : 'flex-end'} align="center">
+ {isSmallScreen && (
+ <LabelContainer forwardedAs="p">Your Sanity Studio is all set up!</LabelContainer>
+ )}
+
+ <Button
+ aria-label="Close dialog"
+ icon={CloseIcon}
+ mode="bleed"
+ onClick={onClose}
+ padding={isSmallScreen ? undefined : 3}
+ />
+ </Flex>
+ <Stack space={5}>
+ {!isSmallScreen && (
+ <>
+ <LabelContainer forwardedAs="p" align="center">
+ Get started with sanity
+ </LabelContainer>
+
+ <Heading as="h1" size={4} align="center">
+ Your Sanity Studio is all set up!
+ </Heading>
+ </>
+ )}
+
+ <Container width={1}>
+ <TextContainer
+ forwardedAs="p"
+ size={isSmallScreen ? 1 : undefined}
+ align={isSmallScreen ? 'start' : 'center'}
+ >
+ Next, our docs will guide you through building schemas, adding content, and connecting
+ a frontend. You’ll see updates reflected in your Studio below.
+ </TextContainer>
+ </Container>
+
+ <Flex justify={isSmallScreen ? 'start' : 'center'}>
+ <Button
+ as="a"
+ href="https://www-sanity-io-ir5wewhq6.sanity.build/docs/create-your-first-schema"
+ target="_blank"
+ padding={isSmallScreen ? undefined : 4}
+ tone="primary"
+ text="Go to docs"
+ />
+ </Flex>
+ </Stack>
+ </Card>
+ </div>
+ )
+}
+
+export default HelloSanityTutorial

packages/@sanity/cli/templates/get-started/plugins/sanity-plugin-tutorial/HelloSanityTutorialIcon.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+/**
+ * Couple of things to note:
+ * - width and height is set to 1em
+ * - fill is `currentColor` - this will ensure that the icon looks uniform and
+ * that the hover/active state works. You can of course render anything you
+ * would like here, but for plugins that are to be used in more than one
+ * studio, we suggest these rules are followed
+ **/
+export default () => (
+ <svg xmlns="https://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 250 250">
+ <path fill="none" stroke="currentColor" strokeWidth="40" d="M5 5h240v240H5z" />
+ </svg>
+)

packages/@sanity/cli/templates/get-started/plugins/sanity-plugin-tutorial/index.js

@@ -0,0 +1,9 @@
+import HelloSanityTutorial from "./HelloSanityTutorial";
+import HelloSanityTutorialIcon from "./HelloSanityTutorialIcon";
+
+export default {
+ title: "HelloSanityTutorial",
+ name: "hellosanitytutorial",
+ icon: HelloSanityTutorialIcon,
+ component: HelloSanityTutorial,
+};

packages/@sanity/cli/templates/get-started/plugins/sanity-plugin-tutorial/sanity.json

@@ -0,0 +1,8 @@
+{
+ "parts": [
+ {
+ "implements": "part:@sanity/base/tool",
+ "path": "./index.js"
+ }
+ ]
+}

packages/@sanity/cli/templates/get-started/schemas/schema.js

@@ -0,0 +1,13 @@
+// First, we must import the schema creator
+import createSchema from "part:@sanity/base/schema-creator";
+
+// Then import schema types from any plugins that might expose them
+import schemaTypes from "all:part:@sanity/base/schema-type";
+
+import siteSettings from "./siteSettings";
+
+// Then we give our schema to the builder and provide the result to Sanity
+export default createSchema({
+ name: "default",
+ types: schemaTypes.concat([siteSettings]),
+});

packages/@sanity/cli/templates/get-started/schemas/siteSettings.js

@@ -0,0 +1,20 @@
+import { CogIcon } from "@sanity/icons";
+
+export default {
+ name: "ss",
+ icon: CogIcon,
+ title: "Site Settings",
+ type: "document",
+ fields: [
+ {
+ name: "title",
+ title: "Site Title",
+ type: "string",
+ },
+ {
+ name: "description",
+ title: "Site Description",
+ type: "text",
+ },
+ ],
+};

packages/@sanity/cli/templates/get-started/static/.gitkeep

@@ -0,0 +1 @@
+Files placed here will be served by the Sanity server under the `/static`-prefix

packages/@sanity/cli/templates/get-started/tsconfig.json

@@ -0,0 +1,6 @@
+{
+ // Note: This config is only used to help editors like VS Code understand/resolve
+ // parts, the actual transpilation is done by babel. Any compiler configuration in
+ // here will be ignored.
+ "include": ["./node_modules/@sanity/base/types/**/*.ts", "./**/*.ts", "./**/*.tsx"]
+}