Skip to content

Commit

Permalink
feat: add îles support
Browse files Browse the repository at this point in the history
  • Loading branch information
harlan-zw committed Aug 26, 2022
1 parent 4054568 commit b7ed23b
Show file tree
Hide file tree
Showing 38 changed files with 4,457 additions and 13 deletions.
4 changes: 2 additions & 2 deletions docs/v1/content/1.guide/1.getting-started/2.nuxt.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ This should be done in either your `app.vue` or `layout/default.vue` file.
```vue [Composition API]
<script lang="ts" setup>
useSchemaOrg([
// @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt
// @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity
defineWebSite({
name: 'My Awesome Website',
}),
Expand All @@ -90,7 +90,7 @@ useSchemaOrg([

```vue [Component API]
<template>
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt -->
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity -->
<SchemaOrgWebSite name="My Awesome Website" />
<SchemaOrgWebPage />
</template>
Expand Down
4 changes: 2 additions & 2 deletions docs/v1/content/1.guide/1.getting-started/3.vitesse.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ This should be done in your `App.vue`.
```vue [Composition API]
<script lang="ts" setup>
useSchemaOrg([
// @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt
// @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity
defineWebSite({
name: 'My Awesome Website',
}),
Expand All @@ -126,7 +126,7 @@ useSchemaOrg([

```vue [Component API]
<template>
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt -->
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity -->
<SchemaOrgWebSite name="My Awesome Website" />
<SchemaOrgWebPage />
</template>
Expand Down
109 changes: 109 additions & 0 deletions docs/v1/content/1.guide/1.getting-started/4.iles.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
---
title: îles
icon: noto:desert-island
description: Setup Schema.org with your îles app.
---

## Install

::code-group

```bash [yarn]
yarn add -D @vueuse/schema-org-vite
```

```bash [npm]
npm install -D @vueuse/schema-org-vite
```

```bash [pnpm]
pnpm add -D @vueuse/schema-org-vite
```

::


## Setup Module

### 1. Add Module

Start by adding in the îles Schema.org module which handles aliasing and component auto-imports.

```ts [iles.config.ts]
import { defineConfig } from 'iles'
import { schemaOrgIles } from '@vueuse/schema-org-vite/iles-module'

export default defineConfig({
siteUrl: 'https://iles-docs.netlify.app/',
modules: [
schemaOrgIles({
// select which types you'd like
full: false,
}),
],
})
```

Note: Make sure you set your `siteUrl` if you haven't already.

### 2. Install Vue Plugin

Add the vue plugin in your `app.ts` file.

```ts [app.ts]
import { defineApp } from 'iles'
import { installSchemaOrg } from '@vueuse/schema-org-vite/iles-app'

export default defineApp({
async enhanceApp(ctx) {
installSchemaOrg(ctx, {
// any default meta
})
},
})

```

See the [User Config page](/guide/guides/user-config) for all options you can pass.

### 3. Add Site Schema.org

Within your `layouts/default.vue` file you can add your site-wide schema.

::code-group

```vue [Composition API]
<script lang="ts" setup>
import { defineWebPage, defineWebSite, useSchemaOrg } from '@vueuse/schema-org/runtime'
useSchemaOrg([
defineWebPage(),
defineWebSite({
name: 'test',
}),
])
</script>
```

```vue [Component API]
<template>
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity -->
<SchemaOrgWebPage />
<SchemaOrgWebSite name="îles" />
</template>
```

::

### Next Steps

Your îles app is now serving basic Schema.org, congrats! 🎉

The next steps are:
1. Choose an [Identity](/guide/guides/identity)
2. Set up your pages for [Runtime Inferences](/guide/getting-started/how-it-works#runtime-inferences)
3. Then feel free to follow some recipes:

- [Breadcrumbs](/guide/recipes/breadcrumbs)
- [FAQ Page](/guide/recipes/faq)
- [Site Search](/guide/recipes/site-search)
6 changes: 3 additions & 3 deletions docs/v1/content/1.guide/1.getting-started/4.vite.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ useSchemaOrg([
import { SchemaOrgWebPage, SchemaOrgWebSite } from '#vueuse/schema-org/runtime'
</script>
<template>
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt -->
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity -->
<SchemaOrgWebSite name="My Awesome Website" />
<SchemaOrgWebPage />
</template>
Expand All @@ -183,7 +183,7 @@ This should be done in your `App.vue`.
```vue [Composition API]
<script lang="ts" setup>
useSchemaOrg([
// @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt
// @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity
defineWebSite({
name: 'My Awesome Website',
}),
Expand All @@ -194,7 +194,7 @@ useSchemaOrg([

```vue [Component API]
<template>
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt -->
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity -->
<SchemaOrgWebSite name="My Awesome Website" />
<SchemaOrgWebPage />
</template>
Expand Down
6 changes: 3 additions & 3 deletions docs/v1/content/1.guide/1.getting-started/5.vitepress.md
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ useSchemaOrg([
import { SchemaOrgWebPage, SchemaOrgWebSite } from '#vueuse/schema-org/runtime'
</script>
<template>
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt -->
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity -->
<SchemaOrgWebSite name="My Awesome Website" />
<SchemaOrgWebPage />
</template>
Expand All @@ -156,7 +156,7 @@ To add global Schema in VitePress, you need to override the default layout.
```vue [Composition API]
<script lang="ts" setup>
useSchemaOrg([
// @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt
// @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity
defineWebSite({
name: 'My Awesome Website',
}),
Expand All @@ -167,7 +167,7 @@ useSchemaOrg([

```vue [Component API]
<template>
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/getting-started/nuxt -->
<!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity -->
<SchemaOrgWebSite name="My Awesome Website" />
<SchemaOrgWebPage />
</template>
Expand Down
3 changes: 3 additions & 0 deletions packages/vite/build.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@ export default defineBuildConfig({
{ input: 'src/vitesse' },
{ input: 'src/vitepress' },
{ input: 'src/vite' },
{ input: 'src/iles-app' },
{ input: 'src/iles-module' },
],
externals: [
'iles',
'@vueuse/head',
'vite-ssg',
'vitepress',
Expand Down
11 changes: 11 additions & 0 deletions packages/vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,16 @@
"types": "./dist/vitepress.d.ts",
"require": "./dist/vitepress.cjs",
"import": "./dist/vitepress.mjs"
},
"./iles-app": {
"types": "./dist/iles-app.d.ts",
"require": "./dist/iles-app.cjs",
"import": "./dist/iles-app.mjs"
},
"./iles-module": {
"types": "./dist/iles-module.d.ts",
"require": "./dist/iles-module.cjs",
"import": "./dist/iles-module.mjs"
}
},
"main": "dist/index.cjs",
Expand All @@ -62,6 +72,7 @@
"schema-dts": "^1.1.0"
},
"devDependencies": {
"iles": "^0.8.3",
"vite": "^3.0.9",
"vite-ssg": "^0.20.2",
"vitepress": "1.0.0-alpha.10",
Expand Down
57 changes: 57 additions & 0 deletions packages/vite/src/iles-app.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import type { UserConfig } from '@vueuse/schema-org'
import { createSchemaOrg, resolveUserConfig } from '@vueuse/schema-org'
import type { EnhanceAppContext } from 'iles'

export function installSchemaOrg(ctx: EnhanceAppContext, config: UserConfig) {
if (!config.canonicalHost)
config.canonicalHost = ctx.site.url
const resolvedConfig = resolveUserConfig(config)

const client = createSchemaOrg({
position: 'head',
updateHead(fn) {
ctx.head.addHeadObjs(fn)
if (typeof document !== 'undefined')
ctx.head.updateDOM()
},
meta() {
const inferredMeta: Record<string, any> = {}

const tags = ctx.head.headTags?.reverse()
if (tags) {
const headTag = tags.filter(t => t.tag === 'title' && !!t.props.children)
if (headTag.length)
inferredMeta.title = headTag[0].props.children
const descTag = tags.filter(t => t.tag === 'meta' && t.props.name === 'description' && !!t.props.content)
if (descTag.length)
inferredMeta.description = descTag[0].props.content
const imageTag = tags.filter(t => t.tag === 'meta' && t.props.property === 'og:image' && !!t.props.content)
if (imageTag.length)
inferredMeta.image = imageTag[0].props.content
}

return {
path: ctx.router?.currentRoute.value.path || '/',
...inferredMeta,
...resolvedConfig.meta,
...ctx.meta,
...ctx.frontmatter,
...ctx.router?.currentRoute.value.meta || {},
}
},
})

ctx.app.use(client)

if (typeof document === 'undefined') {
client.generateSchema()
client.setupDOM()
return
}

ctx.router.afterEach(() => {
client.generateSchema()
client.setupDOM()
})
return client
}
33 changes: 33 additions & 0 deletions packages/vite/src/iles-module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { SchemaOrgResolver } from '@vueuse/schema-org'
import type { SchemaOrgPluginOptions } from '@vueuse/schema-org'
import type { IlesModule } from 'iles'
import type { UserConfig as IlesUserConfig } from 'iles/types/shared'
import { SchemaOrg } from '.'

export function schemaOrgIles(pluginOptions: SchemaOrgPluginOptions) {
return <IlesModule> {
name: '@vueuse-schema-org/schema-org-iles',
components: {
resolvers: [
SchemaOrgResolver(),
],
},
config(config: IlesUserConfig) {
config.vite = config.vite || {}
// config.vite.optimizeDeps = config.vite.optimizeDeps || {}
// config.vite.optimizeDeps.exclude = config.vite.optimizeDeps.exclude || []
// config.vite.optimizeDeps.exclude.push(...['webpack-virtual-modules', 'unplugin', '@vueuse/schema-org/vite', '@vueuse/schema-org'])
config.vite.plugins = config.vite.plugins || []
config.vite.plugins.push(SchemaOrg({
// use simple types
full: false,
// write type alias to tsconfig.json
dts: true,
// Note: iles will already strip out all javascript so we don't need to do it
mock: false,
...pluginOptions,
}))
},
}
}

29 changes: 29 additions & 0 deletions playgrounds/iles/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
.DS_Store
dist
dist-ssr
*.local

/cypress/videos/
/cypress/screenshots/

# Editor directories and files
.vscode
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

.iles-ssg-temp/
2 changes: 2 additions & 0 deletions playgrounds/iles/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
ignore-workspace-root-check=true
shamefully-hoist=true
Loading

0 comments on commit b7ed23b

Please sign in to comment.