chore: init project

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.gitignore

@@ -0,0 +1,11 @@
+node_modules
+.DS_Store
+dist
+*.local
+.vite-inspect
+.remote-assets
+.idea/
+components.d.ts
+
+*.pdf
+*.tgz

.npmrc

@@ -0,0 +1,2 @@
+# for pnpm
+shamefully-hoist=true

.nvmrc

@@ -0,0 +1 @@
+20.17.0

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["antfu.slidev"]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Open {re}Source
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,64 @@
+# Slidev Theme LinkedIn Carousel
+
+[![NPM version](https://img.shields.io/npm/v/slidev-theme-linkedin-carousel?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-linkedin-carousel)
+
+A [Slidev](https://github.com/slidevjs/slidev) theme to create LinkedIn carousels.
+
+## Install
+
+Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
+
+<pre><code>---
+theme: <b>linkedin-carousel</b>
+---</code></pre>
+
+Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-theme).
+
+## Layouts
+
+This theme provides the following layouts:
+
+* `cover` - A cover slide
+* `default` - A default slide
+* `image-emphasis` - A slide with a big image, a title, and a subtitle
+
+## Components
+
+This theme provides the following components:
+
+* `Browser` - A browser window
+* `Code` - A code block with a terminal window
+* `GitHubProject` - A GitHub project card
+* `Phone` - A phone window
+
+## Contributing
+
+- `npm install`
+- `npm run dev` to start theme preview of `example.md`
+- Edit the `example.md` and style to see the changes
+- `npm run export` to generate the preview PDF
+- `npm run screenshot` to generate the preview PNG
+
+## Create a LinkedIn Carousel
+
+* Once you have your LinkedIn carousel ready, you can export it to a PDF using `npm run export`.
+
+* Rename the `example-export.pdf` to have a real name; LinkedIn documents are indexed by search engines by their file name.
+
+* Compress the PDF using [SmallPDF](https://smallpdf.com/compress-pdf) or any other tool.
+
+* Go to your LinkedIn profile, create a new post, and add the PDF as a document.
+
+## Screenshots
+
+![Screenshot](./example-export/1.png)
+
+![Screenshot](./example-export/2.png)
+
+![Screenshot](./example-export/3.png)
+
+![Screenshot](./example-export/4.png)
+
+![Screenshot](./example-export/5.png)
+
+![Screenshot](./example-export/6.png)

components/Author.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="slidev-component-author flex gap-2 items-center">
+    <div class="flex flex-col">
+      <div class="w-12 h-12 overflow-hidden rounded-full">
+        <img src="https://avatars.githubusercontent.com/u/129324099?s=96&v=4" alt="" />
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <p class="font-bold">Open {re}Source</p>
+      <a href="https://openresource.dev" class="leading-none">openresource.dev</a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .slidev-component-author {
+    font-family: "Roboto Condensed", sans-serif;
+  }
+
+  .slidev-component-author p {
+    margin: 0;
+  }
+</style>

components/Browser.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  url: {
+    default: "",
+  },
+})
+
+const url = ref(props.url);
+</script>
+
+<template>
+  <div class="slidev-mockup-browser bg-gray-200 border">
+    <div class="slidev-mockup-browser-toolbar">
+      <div class="input">{{ url }}</div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<!--
+  This component style comes from DaisyUI, a Tailwind CSS component library.
+  Learn more about DaisyUI at https://daisyui.com/
+  DaisyUI GitHub repository: https://github.com/saadeghi/daisyui
+  Licensed under the MIT License
+-->
+
+<style>
+  .input {
+    flex-shrink:1;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    height: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: 1rem;
+    line-height: 2;
+    line-height: 1.5rem;
+    border-radius: .5rem;
+    border-width: 1px;
+    border-color: transparent;
+  }
+
+  .slidev-mockup-browser {
+    position:relative;
+    overflow:hidden;
+    overflow-x:auto;
+    border-radius: .5rem;
+  }
+
+  .slidev-mockup-browser pre[data-prefix]:before {
+    content:attr(data-prefix);
+    display:inline-block;
+    text-align:right
+  }
+
+  .slidev-mockup-browser .slidev-mockup-browser-toolbar {
+    margin-top: .75rem;
+    margin-bottom: .75rem;
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    padding-right: 1.4em;
+  }
+
+  .slidev-mockup-browser .slidev-mockup-browser-toolbar:before {
+    content: "";
+    margin-right: 4.8rem;
+    display: inline-block;
+    aspect-ratio: 1/1;
+    height: .75rem;
+    border-radius: 9999px;
+    opacity: .3;
+    box-shadow: 1.4em 0,2.8em 0,4.2em 0
+  }
+
+  .slidev-mockup-browser .slidev-mockup-browser-toolbar .input {
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    height: 1.75rem;
+    width: 24rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: oklch(0.961151 0 0);
+    padding-left: 2rem;
+  }
+  .slidev-mockup-browser .slidev-mockup-browser-toolbar .input:before {
+    content: "";
+    position: absolute;
+    left: .5rem;
+    top: 50%;
+    aspect-ratio: 1/1;
+    height: .75rem;
+    transform: matrix(1, 0, 0, 1, 0, -6);
+    border-radius: 9999px;
+    border-width: 2px;
+    border-color: currentColor;
+    opacity: .6;
+  }
+  .slidev-mockup-browser .slidev-mockup-browser-toolbar .input:after {
+    content: "";
+    position: absolute;
+    left: 1.25rem;
+    top: 50%;
+    height: .5rem;
+    transform: matrix(0.707107, -0.707107, 0.707107, 0.707107, 0, 2);
+    border-radius: 9999px;
+    border-width: 1px;
+    border-color: currentColor;
+    opacity: .6
+  }
+</style>

components/Code.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="slidev-mockup-code">
+    <slot />
+  </div>
+</template>
+
+<!--
+  This component style comes from DaisyUI, a Tailwind CSS component library.
+  Learn more about DaisyUI at https://daisyui.com/
+  DaisyUI GitHub repository: https://github.com/saadeghi/daisyui
+  Licensed under the MIT License
+-->
+
+<style>
+  .slidev-mockup-code {
+    position:relative;
+    overflow:hidden;
+    overflow-x:auto;
+    min-width:18rem;
+    border-radius: 1rem;
+    --tw-bg-opacity: 1;
+    background-color: oklch(0.321785 0.02476 255.702);
+    padding-top:1.25rem;
+    padding-bottom:1.25rem;
+    --tw-text-opacity: 1;
+    color: oklch(0.894994 0.011585 252.096);
+    direction:ltr
+  }
+
+  .slidev-mockup-code pre[data-prefix]:before {
+    content: attr(data-prefix);
+    display: inline-block;
+    text-align: right;
+    width: 2rem;
+    opacity: .5
+  }
+
+  .slidev-mockup-code:before {
+    content: "";
+    margin-bottom: 1rem;
+    display: block;
+    height: .75rem;
+    width: .75rem;
+    border-radius: 9999px;
+    opacity: .3;
+    box-shadow: 1.4em 0,2.8em 0,4.2em 0
+  }
+
+  .slidev-mockup-code pre {
+    padding-right: 1.25rem
+  }
+
+  .slidev-mockup-code pre:before {
+    content: "";
+    margin-right: 2ch
+  }
+</style>

components/GitHubProject.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  org: {
+    default: "",
+  },
+  repo: {
+    default: "",
+  },
+  imgId: {
+    default: "",
+  },
+})
+
+const org = ref(props.org);
+const repo = ref(props.repo);
+const imgId = ref(props.imgId);
+</script>
+
+<template>
+  <a :href="`https://github.com/${org}/${repo}`" class="w-full flex space-between p-4 rounded-lg shadow-lg !border-b-0">
+    <div class="flex flex-col align-center gap-2 w-[90%]">
+      <p class="!font-normal !text-2xl !leading-none">{{ org }}/</p>
+      <p class="!text-2xl !m-0 !leading-none">{{ repo }}</p>
+      <p class="!text-gray-400 !text-lg !font-normal !leading-none">github.com</p>
+    </div>
+    <div class="h-full flex self-center">
+      <img class="!shadow-none" :src="`https://avatars.githubusercontent.com/u/${imgId}?s=150&v=4`" alt="" width="100" height="100">
+    </div>
+  </a>
+</template>