diff --git a/.gitignore b/.gitignore index 3305958..c2ccff6 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ index.html .remote-assets .idea/ components.d.ts +example-export diff --git a/.npmignore b/.npmignore index e0e41d3..81004c4 100644 --- a/.npmignore +++ b/.npmignore @@ -1,3 +1,4 @@ screenshots .github -dist \ No newline at end of file +dist +example-export \ No newline at end of file diff --git a/README.md b/README.md index c8b52d0..044d288 100644 --- a/README.md +++ b/README.md @@ -130,11 +130,12 @@ Dark | Light Usage: -- Add `text-image` in the layout field. +- Add `text-image` in the layout field and add the image url on the `media` field. ``` --- layout: text-image +media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif' --- ``` @@ -142,8 +143,67 @@ Dark | Light :-------------------------:|:-------------------------: ![textImageDark](./screenshots/dark/text-image.png) | ![textImageLight](./screenshots/light/text-image.png) +- Add `reverse:true` to reverse the order of the layout + + +``` +--- +layout: text-image +media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif' +reverse: true +--- +``` +Dark | Light +:-------------------------:|:-------------------------: +![textImageDark](./screenshots/dark/text-image-reverse.png) | ![textImageLight](./screenshots/light/text-image-reverse.png) +--- + +### Text Window `text-window` + +Usage: + +- Add `text-window` in the layout field. + +``` +--- +layout: text-window +--- +``` + +Dark | Light +:-------------------------:|:-------------------------: +![textWindowDark](./screenshots/dark/text-window.png) | ![textWindowLight](./screenshots/light/text-window.png) + +- Add `reverse:true` to reverse the order of the layout + + +``` +--- +layout: text-window +reverse: true +--- +``` +Dark | Light +:-------------------------:|:-------------------------: +![textWindowDark](./screenshots/dark/text-window-reverse.png) | ![textWindowLight](./screenshots/light/text-window-reverse.png) + +To set the content inside the window console, just use the syntax sugar `::window::` for slot name: + +``` +--- +layout: text-window --- +# Consoles + +Use code snippets and get the highlighting directly into a nice looking window! + +::window:: + +I go inside the window + +``` + ## Components This theme provides the following components: @@ -160,6 +220,20 @@ To use it you just need to add it to your `examples.md` like this: Say hi at @alvaro_code ``` +### Console window `the-console` + + +```ts + + +s +``` + + > TODO: ## Contributing diff --git a/components/TheConsole.vue b/components/TheConsole.vue new file mode 100644 index 0000000..008f76b --- /dev/null +++ b/components/TheConsole.vue @@ -0,0 +1,12 @@ + + diff --git a/example-export/03.png b/example-export/03.png index cafda71..e85d982 100644 Binary files a/example-export/03.png and b/example-export/03.png differ diff --git a/example-export/04.png b/example-export/04.png deleted file mode 100644 index 88d76d4..0000000 Binary files a/example-export/04.png and /dev/null differ diff --git a/example-export/05.png b/example-export/05.png index cba747a..88d76d4 100644 Binary files a/example-export/05.png and b/example-export/05.png differ diff --git a/example-export/06.png b/example-export/06.png index 791fc5d..cba747a 100644 Binary files a/example-export/06.png and b/example-export/06.png differ diff --git a/example-export/07.png b/example-export/07.png index 6a2b2fb..277b99e 100644 Binary files a/example-export/07.png and b/example-export/07.png differ diff --git a/example-export/08.png b/example-export/08.png index 46a21b5..6a2b2fb 100644 Binary files a/example-export/08.png and b/example-export/08.png differ diff --git a/example.md b/example.md index 7cd21c8..eeed5ff 100644 --- a/example.md +++ b/example.md @@ -1,6 +1,6 @@ --- theme: none -colorSchema: 'dark' +colorSchema: 'auto' layout: intro logoHeader: '/logo.svg' eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png' @@ -51,6 +51,21 @@ media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif' # This is a peguin +Arepa ipsum dolor amet jalabola! aenean sit tequeños se prendio esta mierdaa menool ladilla chamito;? Nisl nojoda eu amet in? Nisl cuál es la guachafita ni lava ni presta la batea háblame cloro gravida sifrino macundal panita; Sed háblame cloro nunc empanada ac coroto Na webona vladimil parchita? Cacique ladilla sit Se prendio el peo labia gravida Praesent tequeño. Qué paso mi pana?! elit parchita molleja aguacate vergación, háblame mollejúo chamito est burda mauris morbi; + +--- +layout: text-image +reverse: true +eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png' +eventUrl: 'https://vuejs.amsterdam/' +twitter: '@alvaro_code' + +twitterUrl: 'https://twitter.com/alvaro_code' +media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif' +--- + +# This is a reverse peguin + Arepa ipsum dolor amet jalabola! aenean sit tequeños se prendio esta mierdaa menool ladilla chamito;? Nisl nojoda eu amet in? Nisl cuál es la guachafita ni lava ni presta la batea háblame cloro gravida sifrino macundal panita; Sed háblame cloro nunc empanada ac coroto Na webona vladimil parchita? Cacique ladilla sit Se prendio el peo labia gravida Praesent tequeño. Qué paso mi pana?! elit parchita molleja aguacate vergación, háblame mollejúo chamito est burda mauris morbi; --- @@ -126,6 +141,58 @@ export const app = createApp(App); app.use(VueDynamicForms); ``` +--- +layout: text-window +logoHeader: '/logo.svg' +eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png' +eventUrl: 'https://vuejs.amsterdam/' +twitter: '@alvaro_code' +twitterUrl: 'https://twitter.com/alvaro_code' +--- + +# Consoles + +Use code snippets and get the highlighting directly into a nice looking window! + +::window:: + +```ts +// main.ts + +import { createApp } from 'vue'; +import { createDynamicForms } from '@asigloo/vue-dynamic-forms'; + +const VueDynamicForms = createDynamicForms({ + // Global Options go here +}); + +export const app = createApp(App); + +app.use(VueDynamicForms); +``` +--- +layout: text-window +reverse: true +logoHeader: '/logo.svg' +eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png' +eventUrl: 'https://vuejs.amsterdam/' +twitter: '@alvaro_code' +twitterUrl: 'https://twitter.com/alvaro_code' +--- + +# Embedded stuff + +Use window to show a live demo of any page, or even a sub component! + +::window:: + +
+ +
--- logoHeader: '/logo.svg' eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png' diff --git a/layouts/text-image.vue b/layouts/text-image.vue index 785d88c..d8eb77d 100644 --- a/layouts/text-image.vue +++ b/layouts/text-image.vue @@ -20,6 +20,9 @@ const props = defineProps({ media: { type: String, }, + reverse: { + type: Boolean + } }) @@ -34,16 +37,16 @@ const props = defineProps({ :twitter="twitter" :twitter-url="twitterUrl" > -
+
-
+
-
- +
+
diff --git a/layouts/text-window.vue b/layouts/text-window.vue new file mode 100644 index 0000000..3f6e656 --- /dev/null +++ b/layouts/text-window.vue @@ -0,0 +1,55 @@ + + + diff --git a/screenshots/dark/text-image-reverse.png b/screenshots/dark/text-image-reverse.png new file mode 100644 index 0000000..9dc8c1c Binary files /dev/null and b/screenshots/dark/text-image-reverse.png differ diff --git a/screenshots/dark/text-window-reverse.png b/screenshots/dark/text-window-reverse.png new file mode 100644 index 0000000..4244a55 Binary files /dev/null and b/screenshots/dark/text-window-reverse.png differ diff --git a/screenshots/dark/text-window.png b/screenshots/dark/text-window.png new file mode 100644 index 0000000..1b3ee9e Binary files /dev/null and b/screenshots/dark/text-window.png differ diff --git a/screenshots/light/text-image-reverse.png b/screenshots/light/text-image-reverse.png new file mode 100644 index 0000000..2fc0ba0 Binary files /dev/null and b/screenshots/light/text-image-reverse.png differ diff --git a/screenshots/light/text-window-reverse.png b/screenshots/light/text-window-reverse.png new file mode 100644 index 0000000..f19963d Binary files /dev/null and b/screenshots/light/text-window-reverse.png differ diff --git a/screenshots/light/text-window.png b/screenshots/light/text-window.png new file mode 100644 index 0000000..9e87745 Binary files /dev/null and b/screenshots/light/text-window.png differ diff --git a/setup/windicss.ts b/setup/windicss.ts index f888182..b188d93 100644 --- a/setup/windicss.ts +++ b/setup/windicss.ts @@ -3,6 +3,24 @@ import { defineWindiSetup } from '@slidev/types' const colors = require('windicss/colors') const plugin = require('windicss/plugin') +const aspectRatioPlugin = plugin(({ addUtilities }) => { + const newUtilities = { + '.aspect-none': { + aspectRatio: 'none', + }, + '.aspect-16-9': { + aspectRatio: '16/9', + }, + '.aspect-4-3': { + aspectRatio: '4/3', + }, + '.aspect-1-1': { + aspectRatio: '1/1', + }, + } + addUtilities(newUtilities, ['responsive', 'hover']) +}) + export default defineWindiSetup(() => ({ darkMode: 'class', extract: { @@ -22,6 +40,8 @@ export default defineWindiSetup(() => ({ white: colors.white, gray: colors.trueGray, red: colors.red, + yellow: colors.yellow, + green: colors.green, primary: { // oxford DEFAULT: '#3E5166', @@ -74,6 +94,7 @@ export default defineWindiSetup(() => ({ } }, plugins: [ + aspectRatioPlugin, plugin(function ({ addUtilities, theme, variants }) { const newUtilities = { '.flip-y': {