Merge pull request #103 from alineacms/pages

Pages

apps/web/.alinea/.keep

@@ -0,0 +1 @@
+# Contents of this folder are autogenerated by alinea

apps/web/alinea.config.tsx

@@ -19,7 +19,7 @@ const web = workspace('Alinea', {
   schema: webSchema,
   source: './content',
   mediaDir: './public',
-  color: '#5661E5',
+  color: '#EF437C', // '#5661E5', //
   roots: {
     data: root('Alinea website', {
       icon: IcRoundInsertDriveFile,

apps/web/content/data/docs/configuration/type.json

@@ -4,10 +4,6 @@
   "root": "data",
   "index": "Zx",
   "title": "Type",
-  "parents": [
-    "docs",
-    "259Ey7LXgqL7ZDGJ8XK1vBJmZrh"
-  ],
   "blocks": [
     {
       "id": "267QuoR4fyaDqlC9Y4e5bnRYtfj",
@@ -16,6 +12,7 @@
       "text": [
         {
           "type": "heading",
+          "textAlign": "left",
           "level": 1,
           "content": [
             {
@@ -26,6 +23,7 @@
         },
         {
           "type": "paragraph",
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -41,6 +39,7 @@
         {
           "type": "heading",
           "level": 2,
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -50,6 +49,7 @@
         },
         {
           "type": "paragraph",
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -65,6 +65,7 @@
         {
           "type": "heading",
           "level": 3,
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -74,6 +75,7 @@
         },
         {
           "type": "paragraph",
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -89,6 +91,7 @@
         {
           "type": "heading",
           "level": 3,
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -98,6 +101,7 @@
         },
         {
           "type": "paragraph",
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -113,6 +117,7 @@
         {
           "type": "heading",
           "level": 3,
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -122,6 +127,7 @@
         },
         {
           "type": "paragraph",
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -137,6 +143,7 @@
         {
           "type": "heading",
           "level": 3,
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -146,6 +153,7 @@
         },
         {
           "type": "paragraph",
+          "textAlign": "left",
           "content": [
             {
               "type": "text",
@@ -159,7 +167,7 @@
       "id": "286HsGRzFoyQsBZIUQgy23OyX9J",
       "index": "a1",
       "type": "TypesBlock",
-      "types": "Type"
+      "types": "TypeOptions"
     }
   ]
 }

apps/web/package.json

@@ -14,6 +14,7 @@
     "@alinea/auth.passwordless": "0.0.0",
     "@alinea/backend": "0.0.0",
     "@alinea/cli": "0.0.0",
+    "@alinea/content": "link:./.alinea",
     "@alinea/core": "0.0.0",
     "@alinea/dashboard": "0.0.0",
     "@alinea/ui": "0.0.0",

apps/web/src/data/Types.ts

@@ -1,4 +1,4 @@
-import {JSONOutput, ReflectionKind} from 'typedoc'
+import type {JSONOutput} from 'typedoc'
 import type {NavItem} from '../view/layout/NavTree'
 import {types} from './types-data'
 
@@ -102,7 +102,7 @@ function transformType(
   type: JSONOutput.DeclarationReflection
 ): JSONOutput.DeclarationReflection {
   switch (type.kind) {
-    case ReflectionKind.Reference:
+    case 16777216 /* ReflectionKind.Reference */:
       const ref = (type as any).target
       const target = index.get(ref)
       return target ? transformType(target) : type

apps/web/src/pages/[...slug].tsx

@@ -3,12 +3,12 @@ import {backend} from '../../alinea.backend'
 export async function getStaticPaths() {
   const pages = backend.loadPages('web')
   const urls = await pages
-    .findMany(page => page.type.isIn(['Doc']))
+    .where(page => page.type.isIn(['Doc']))
     .select(page => page.url)
   return {
     fallback: 'blocking',
     paths: urls.map(url => ({params: {slug: url.split('/').slice(1)}}))
   }
 }
 
-export {default, getStaticProps} from '.'
+export {default, getStaticProps} from './index'

apps/web/src/view/Demo.tsx

@@ -2,15 +2,15 @@ import {Backend} from '@alinea/backend/Backend'
 import {Cache} from '@alinea/backend/Cache'
 import {IndexedDBData} from '@alinea/backend/data/IndexedDBData'
 import {IndexedDBDrafts} from '@alinea/backend/drafts/IndexedDBDrafts'
+import {config} from '@alinea/content/config.js'
 import {accumulate, createConfig, workspace} from '@alinea/core'
 import {Dashboard, FieldsPreview} from '@alinea/dashboard'
 import {useMemo} from 'react'
-import {config} from '../../.alinea/config'
 
 const demoConfig = createConfig({
   workspaces: {
     web: workspace('Demo', {
-      ...config.workspaces.web.config,
+      ...config.workspaces.web.config.options,
       preview({entry}) {
         return <FieldsPreview entry={entry} />
       }
@@ -23,7 +23,7 @@ function createLocalClient() {
   return new Backend({
     config: demoConfig,
     createStore: async () => {
-      const {createStore} = await import('../../.alinea/store')
+      const {createStore} = await import('@alinea/content/store.js')
       const store = await createStore()
       const entries = await accumulate(data.entries())
       Cache.applyPublish(store, config, entries)

apps/web/src/view/DocPage.query.ts

@@ -1,10 +1,10 @@
+import {AnyPage, Doc, Docs, Pages} from '@alinea/content/web'
 import {Cursor, Store} from '@alinea/store'
-import {AnyPage, Doc, Docs, Pages} from '../../.alinea/web'
 import {blocksQuery} from './blocks/Blocks.query'
 
 function menuQuery(pages: Pages) {
   return pages
-    .findMany(AnyPage.type.is('Doc').or(AnyPage.type.is('Docs')))
+    .where(AnyPage.type.is('Doc').or(AnyPage.type.is('Docs')))
     .where(AnyPage.id.isNot('docs'))
     .select({
       id: AnyPage.id,

apps/web/src/view/DocsPage.tsx

@@ -1,7 +1,7 @@
+import {Docs} from '@alinea/content/web'
 import {Label} from '@alinea/core'
 import {TextLabel} from '@alinea/ui'
 import Link from 'next/link'
-import {Docs} from '../../.alinea/web'
 import {Container} from './layout/Container'
 
 type DocsPageProps = Docs & {

apps/web/src/view/HomePage.schema.tsx

@@ -18,14 +18,13 @@ export const HomePageSchema = type(
       headline: text('Headline', {multiline: true}),
       byline: text('Byline', {multiline: true}),
       action: link('Action', {
-        max: 1,
         fields: type('Fields', {
           label: text('Button label')
         })
       })
     }).configure({icon: IcRoundInsertDriveFile}),
     tab('Top navigation', {
-      links: link('Links', {
+      links: link.multiple('Links', {
         type: ['entry', 'external'],
         fields: type('Fields', {
           title: text('Title')

apps/web/src/view/HomePage.tsx

@@ -1,7 +1,7 @@
 import {fromModule, HStack, px, Typo, VStack} from '@alinea/ui'
 import {IcRoundOpenInNew} from '@alinea/ui/icons/IcRoundOpenInNew'
 import css from './HomePage.module.scss'
-import {HomePageProps} from './HomePage.query'
+import {HomePageSchema} from './HomePage.schema'
 import {Hero} from './layout/Hero'
 
 const styles = fromModule(css)
@@ -16,7 +16,7 @@ const exampleCode = `schema('Blog', {
   })
 })`
 
-export function HomePage({headline, byline, action}: HomePageProps) {
+export function HomePage({headline, byline, action}: HomePageSchema) {
   return (
     <div className={styles.root()}>
       <Hero>

apps/web/src/view/PageView.query.ts

@@ -1,13 +1,10 @@
+import {AnyPage, Pages} from '@alinea/content/web'
 import {Store} from '@alinea/store'
-import {Page, Pages} from '../../.alinea/web'
 import {docPageQuery} from './DocPage.query'
-import {homePageQuery} from './HomePage.query'
 import {layoutQuery} from './layout/Layout.query'
 
-async function loadPage(pages: Pages, page: Page) {
+async function loadPage(pages: Pages, page: AnyPage) {
   switch (page.type) {
-    case 'Home':
-      return homePageQuery(pages, page)
     case 'Doc':
       return docPageQuery(pages, page)
     default:
@@ -16,7 +13,7 @@ async function loadPage(pages: Pages, page: Page) {
 }
 
 export async function pageViewQuery(pages: Pages, url: string) {
-  const page = await pages.whereUrl(url)
+  const page = await pages.fetchUrl(url)
   if (!page) return null
   return {
     layout: await layoutQuery(pages, page),

apps/web/src/view/blocks/CodeVariantsBlock.query.ts

@@ -5,32 +5,35 @@ import {Pages} from '../../../.alinea/web'
 import {theme} from '../types/ShikiTheme'
 import {CodeVariantsBlockSchema} from './CodeVariantsBlock.schema'
 
+const highlighter = getHighlighter({
+  theme: {
+    ...theme,
+    type: 'light',
+    settings: [],
+    fg: '#24292f',
+    bg: '#fbf9f9'
+  },
+  langs: [{id: 'tsx', scopeName: 'source.tsx', grammar: tsxLanguage as any}]
+})
+
 export async function codeVariantsBlockQuery(
   pages: Pages,
   block: CodeVariantsBlockSchema
 ) {
-  const highlighter = await getHighlighter({
-    theme: {
-      ...theme,
-      type: 'light',
-      settings: [],
-      fg: '#24292f',
-      bg: '#fbf9f9'
-    },
-    langs: [{id: 'tsx', scopeName: 'source.tsx', grammar: tsxLanguage as any}]
-  })
   return {
     ...block,
-    variants: block.variants.map(variant => {
-      return {
-        ...variant,
-        code:
-          variant.code &&
-          highlighter.codeToHtml(variant.code, {
-            lang: /*variant.language ||*/ 'tsx'
-          })
-      }
-    })
+    variants: await Promise.all(
+      block.variants.map(async variant => {
+        return {
+          ...variant,
+          code:
+            variant.code &&
+            (await highlighter).codeToHtml(variant.code, {
+              lang: /*variant.language ||*/ 'tsx'
+            })
+        }
+      })
+    )
   }
 }
 

apps/web/src/view/blocks/ImageBlock.schema.ts

@@ -2,7 +2,7 @@ import {Schema, type} from '@alinea/core'
 import {link} from '@alinea/input.link'
 
 export const ImageBlockSchema = type('Image', {
-  image: link('Link', {type: 'image', max: 1, inline: true})
+  image: link.image('Link', {type: 'image', inline: true})
 })
 
 export type ImageBlockSchema = Schema.TypeOf<typeof ImageBlockSchema>