├── .DS_Store ├── .gitignore ├── README.md ├── components ├── .DS_Store ├── Authors.vue ├── Badge.vue ├── Base │ └── Spinner.vue ├── Github.vue ├── Hero.vue ├── Post.vue ├── Test │ ├── Arrow.vue │ └── Sidebar.vue └── content │ └── Alert.vue ├── composables └── useClickOutside.js ├── content ├── .DS_Store └── posts │ ├── 1.this-is-our-first-post.md │ ├── 2.code-blocks.md │ ├── 3.built-helper-components.md │ └── 4.widgets.md ├── nuxt.config.ts ├── package.json ├── pages ├── index.vue ├── test.vue └── widget.vue ├── public ├── codeblocks.png ├── favicon.ico ├── icon.svg ├── logo.png ├── logo.svg ├── logspot-banner.png └── widgets.png ├── seoConfig └── index.js ├── tailwind.config.js ├── tsconfig.json └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fayazara/logspot/9e5ecd4152c9c042a0b7be07fc13b650bfa6520f/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | .vercel 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [](https://supersaas.dev?ref=github-logspot) 2 | 3 | # Logspot 4 | 5 | Logspot is a lightweight, free and open source template for your changelog made with Vue, Nuxt and Tailwindcss. 6 | 7 | ![image](https://user-images.githubusercontent.com/15716057/215351682-9f1032a5-7b71-4e5c-be22-951df57198d4.png) 8 | 9 | How it works? 10 | 11 | 1. Each `.md` file in `/content/posts/` counts as one changelog post, logspot uses the [nuxt content module](https://content.nuxtjs.org/) 12 | 13 | ### Features 14 | 1. Markdown support 15 | 2. Icons support using Iconify 16 | 3. Code syntax highlighting using Shiki.js 17 | 4. Frontmatter - dates, author supported 18 | 5. Vue components inside markdown using Nuxt contents MDC format - More on this [here](https://content.nuxtjs.org/guide/writing/mdc) 19 | 6. Icons support - `:icon{name="ph:user-circle-duotone"}` will show a user icon - find more icons at https://icones.js.org 20 | 7. Alert component with icon, title and description. 21 | 22 | Format 23 | ``` 24 | ::alert 25 | --- 26 | icon: fluent:error-circle-24-regular 27 | title: This is alert with default variant colors. 28 | description: This will pick up colors from your primary color set in the tailwind config file. You can use this to show some kind of message to your users. 29 | --- 30 | :: 31 | ``` 32 | This above content will render a alert component, something like this 33 | Screenshot2023-01-30 at 01 17 36@2x 34 | 8. Widget page, Logspot also has a page specifically meant for widgets, here's an [example](https://logspot.vercel.app/test) 35 | 36 | 37 | https://user-images.githubusercontent.com/15716057/215352102-7796a751-a18f-499b-8302-700092b739f1.mp4 38 | 39 | 40 | 41 | ## Setup Locally 42 | 43 | Make sure to install the dependencies: 44 | 45 | ```bash 46 | # yarn 47 | yarn install 48 | 49 | # npm 50 | npm install 51 | 52 | # pnpm 53 | pnpm install --shamefully-hoist 54 | ``` 55 | 56 | ## Development Server 57 | 58 | Start the development server on http://localhost:3000 59 | 60 | ```bash 61 | npm run dev 62 | ``` 63 | 64 | ## Production 65 | 66 | Build the application for production: 67 | 68 | ```bash 69 | npm run build 70 | ``` 71 | 72 | Locally preview production build: 73 | 74 | ```bash 75 | npm run preview 76 | ``` 77 | 78 | Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information. 79 | -------------------------------------------------------------------------------- /components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fayazara/logspot/9e5ecd4152c9c042a0b7be07fc13b650bfa6520f/components/.DS_Store -------------------------------------------------------------------------------- /components/Authors.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /components/Badge.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | -------------------------------------------------------------------------------- /components/Base/Spinner.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /components/Github.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /components/Hero.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 28 | 29 | 37 | -------------------------------------------------------------------------------- /components/Post.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 27 | 28 | 45 | -------------------------------------------------------------------------------- /components/Test/Arrow.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /components/Test/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 98 | -------------------------------------------------------------------------------- /components/content/Alert.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 34 | 35 | 60 | -------------------------------------------------------------------------------- /composables/useClickOutside.js: -------------------------------------------------------------------------------- 1 | import { computed } from "vue"; 2 | 3 | /** 4 | * 5 | * @param {*} el_target_ref The Root element for which clicking outside will trigger callback_fn 6 | * @param {*} on_click_outside The function to call when user clicks outside of 7 | * @param {Function} callback_condition Function, if provided, returns boolean indication if click outside should be allowed to happen 8 | * @returns 9 | */ 10 | export async function useClickOutside( 11 | el_target_ref, 12 | on_click_outside, 13 | callback_condition 14 | ) { 15 | if (!el_target_ref) return; 16 | if (!el_target_ref.value) { 17 | console.log( 18 | "useClickOutside", 19 | "target element was not supplied or is null" 20 | ); 21 | //return 22 | } 23 | 24 | var dont_use_first_click = 0; 25 | let listener = async (e) => { 26 | var enable_click_outside = true; 27 | if (typeof callback_condition == "function") { 28 | enable_click_outside = await callback_condition(); 29 | } 30 | if (!enable_click_outside) return; 31 | if (dont_use_first_click == 0) { 32 | dont_use_first_click++; 33 | return; 34 | } 35 | if ( 36 | e.target == el_target_ref.value || 37 | e.composedPath().includes(el_target_ref.value) 38 | ) { 39 | return; 40 | } 41 | 42 | if (enable_click_outside && typeof on_click_outside == "function") { 43 | on_click_outside(); 44 | } 45 | }; 46 | 47 | onMounted(() => { 48 | window.addEventListener("click", listener); 49 | }); 50 | onBeforeUnmount(() => { 51 | window.removeEventListener("click", listener); 52 | }); 53 | return { 54 | listener, 55 | }; 56 | } 57 | -------------------------------------------------------------------------------- /content/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fayazara/logspot/9e5ecd4152c9c042a0b7be07fc13b650bfa6520f/content/.DS_Store -------------------------------------------------------------------------------- /content/posts/1.this-is-our-first-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: First post in the changelog 3 | date: July 07, 2022 4 | authors: 5 | - { 6 | name: Fayaz Ahmed, 7 | avatar: https://www.thispersondoesnotexist.com/image?random=1234, 8 | } 9 | - { name: Jane Doe, avatar: https://www.thispersondoesnotexist.com/image } 10 | version: "1.03" 11 | --- 12 | 13 | Thrilled to announce the launch of [logspot](https://github.com/fayazara/logspot)! 14 | 15 | ![logspot-banner](/logspot-banner.png) 16 | 17 | Logspot is a lightweight, free and open source template for your changelog made with [Vue](https://vuejs.com), [Nuxt](https://nuxtjs.org) and [Tailwindcss](https://tailwindcss.com). It leverages [Nuxt Content] for your feed which allows you to write markdown and use them as a CMS. It has a beautiful UI and is easy to use. 18 | 19 | ### Features 20 | 21 | - Dark mode 22 | - Markdown support 23 | - RSS feed 24 | - Search 25 | - Themeable 26 | - Document driven mode 27 | - Access to over 100,000 icons with [Iconify](https://fontawesome.com) 28 | - Code highlighting with [Prism](https://prismjs.com) 29 | - Completely static 30 | - Use your own logo 31 | - Use your own favicon 32 | - Frontmatter support (Dates, Authors and other metadata) 33 | -------------------------------------------------------------------------------- /content/posts/2.code-blocks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Code Block Syntax highlighting 3 | date: July 06, 2022 4 | authors: 5 | - { 6 | name: Fayaz Ahmed, 7 | avatar: https://www.thispersondoesnotexist.com/image?random=12dsf34, 8 | } 9 | - { name: Jane Doe, avatar: https://www.thispersondoesnotexist.com/image } 10 | - { 11 | name: John Doe, 12 | avatar: https://www.thispersondoesnotexist.com/image?random=1234fds23, 13 | } 14 | version: "1.02" 15 | --- 16 | 17 | Logspot also supports code syntax highlighting as well 18 | 19 | ![codeblocks](/codeblocks.png) 20 | 21 | ```js{1,3-5}[server.js] 22 | // Javascript 23 | const url = "https://jsonplaceholder.typicode.com/posts/"; 24 | async function fetchPosts() { 25 | const response = await fetch(url); 26 | console.log(response); 27 | } 28 | ``` 29 | 30 | Currently this is only supported for the following languages, to keep the bundle small for this demo. 31 | 32 | - JavaScript 33 | - CSS 34 | - HTML 35 | - Markdown 36 | - TypeScript 37 | - Vue 38 | - Python 39 | - Ruby 40 | 41 | You can always add your own languages to the `highlight` array in the `nuxt.config.js` file. 42 | 43 | Support for inline code blocks is also available example `const name = "John Doe"`{lang="js"} 44 | 45 | Shiki also supports different themes for codeblocks, you can learn mode about them [here](https://content.nuxtjs.org/api/configuration/#highlight) 46 | -------------------------------------------------------------------------------- /content/posts/3.built-helper-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Built in UI Components 3 | date: July 05, 2022 4 | version: "1.00" 5 | --- 6 | 7 | This template also supports a few ui components that I have designed, which you can directly use within markdown. 8 | 9 | #### The Icon component 10 | 11 | Internally it uses the [Iconify](https://fontawesome.com) icons library. You can copy the icon key and just pass it as a prop like this `:icon{name="ph:user-circle-duotone"}`, which results in rendering the icon :icon{name="ph:user-circle-duotone"} 12 | 13 | **Examples** 14 | 15 | - Fluent Icons 16 | :icon{name="fluent:alert-urgent-20-regular"} :icon{name="fluent:desktop-pulse-48-regular"} 17 | 18 | - Hero Icons Solid 19 | :icon{name="heroicons-solid:academic-cap"} :icon{name="heroicons-solid:chart-bar"} 20 | 21 | - Google Material Icons 22 | :icon{name="material-symbols:android"} :icon{name="material-symbols:brightness-4"} 23 | 24 | #### The Alert component 25 | 26 | You can also an alert component, which accepts an icon, title and description. 27 | 28 | The alert component accepts three props, the icon(optional, defaults to the exclaimation icon), title and description. 29 | ```md 30 | ::alert 31 | --- 32 | icon: fluent:error-circle-24-regular 33 | title: This is alert with default variant colors. 34 | description: This will pick up colors from your primary color set in the tailwind config file. You can use this to show some kind of message to your users. 35 | --- 36 | :: 37 | ``` 38 | 39 | ::alert 40 | --- 41 | icon: fluent:error-circle-24-regular 42 | title: This is alert with default variant colors. 43 | description: This will pick up colors from your primary color set in the tailwind config file. You can use this to show some kind of message to your users. 44 | --- 45 | :: 46 | 47 | ::alert 48 | --- 49 | icon: ph:check-circle-duotone 50 | title: This is a simple alert with variant set as `success`. 51 | description: A simple green colored alert, with a different icon. 52 | variant: success 53 | --- 54 | :: 55 | 56 | ::alert 57 | --- 58 | icon: fluent:fingerprint-24-regular 59 | title: This is an alert with variant set to `danger`. 60 | description: Something aweful has happened 61 | variant: danger 62 | --- 63 | :: 64 | -------------------------------------------------------------------------------- /content/posts/4.widgets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Widgets - Floating and overlay 3 | date: July 10, 2022 4 | version: "1.0.4" 5 | --- 6 | 7 | ![widgets](/widgets.png) 8 | 9 | Logspot provides a built in [widget page](/widget), which is responsive, lightweight, minimal and easily customizable. Embed it in your website, blog, or any other website, using it as an iframe. Here is an example [page](/test) which has both the floating and overlay widgets. 10 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default ({ 2 | modules: ['@nuxtjs/tailwindcss', '@nuxt/content', 'nuxt-icon'], 3 | content: { 4 | highlight: { 5 | theme: 'nord', 6 | preload: ['js', 'css', 'html', 'md', 'ts', 'tsx', 'vue', 'python', 'ruby', 'java'], 7 | } 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview" 8 | }, 9 | "devDependencies": { 10 | "@nuxt/content": "^2.4.2", 11 | "@nuxtjs/tailwindcss": "^6.3.0", 12 | "@tailwindcss/typography": "^0.5.9", 13 | "nuxt": "^3.1.1", 14 | "nuxt-icon": "^0.2.10" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | -------------------------------------------------------------------------------- /pages/test.vue: -------------------------------------------------------------------------------- 1 | 139 | 140 | 148 | 149 | 154 | -------------------------------------------------------------------------------- /pages/widget.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 44 | -------------------------------------------------------------------------------- /public/codeblocks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fayazara/logspot/9e5ecd4152c9c042a0b7be07fc13b650bfa6520f/public/codeblocks.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fayazara/logspot/9e5ecd4152c9c042a0b7be07fc13b650bfa6520f/public/favicon.ico -------------------------------------------------------------------------------- /public/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fayazara/logspot/9e5ecd4152c9c042a0b7be07fc13b650bfa6520f/public/logo.png -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /public/logspot-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fayazara/logspot/9e5ecd4152c9c042a0b7be07fc13b650bfa6520f/public/logspot-banner.png -------------------------------------------------------------------------------- /public/widgets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fayazara/logspot/9e5ecd4152c9c042a0b7be07fc13b650bfa6520f/public/widgets.png -------------------------------------------------------------------------------- /seoConfig/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: "Logspot - Opensource changelog template", 3 | description: 4 | "Logspot is an open source change log template made with Nuxt, Vue, and Tailwindcss.", 5 | og: { 6 | title: "Logspot - Opensource changelog template", 7 | description: 8 | "Logspot is an open source change log template made with Nuxt, Vue, and Tailwindcss.", 9 | image: "https://logspot.vercel.app/logspot-banner.png", 10 | url: "https://logspot.vercel.app", 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | theme: { 4 | fontFamily: { 5 | sans: [ 6 | "Inter", 7 | "Avenir Next", 8 | "Roboto", 9 | "-apple-system", 10 | "BlinkMacSystemFont", 11 | '"Segoe UI"', 12 | "Ubuntu", 13 | '"Helvetica Neue"', 14 | "Arial", 15 | '"Noto Sans"', 16 | "sans-serif", 17 | '"Apple Color Emoji"', 18 | '"Segoe UI Emoji"', 19 | '"Segoe UI Symbol"', 20 | '"Noto Color Emoji"', 21 | ], 22 | mono: [ 23 | "ui-monospace", 24 | "SFMono-Regular", 25 | "Menlo", 26 | "Monaco", 27 | "Consolas", 28 | "Liberation Mono", 29 | "Courier New", 30 | "monospace", 31 | ], 32 | }, 33 | extend: { 34 | colors: { 35 | primary: "#0ea5e9", 36 | }, 37 | }, 38 | }, 39 | plugins: [require("@tailwindcss/typography")], 40 | content: [ 41 | `components/**/*.{vue,js}`, 42 | `layouts/**/*.vue`, 43 | `pages/**/*.vue`, 44 | `composables/**/*.{js,ts}`, 45 | `plugins/**/*.{js,ts}`, 46 | `App.{js,ts,vue}`, 47 | `app.{js,ts,vue}`, 48 | ], 49 | }; 50 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://v3.nuxtjs.org/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | --------------------------------------------------------------------------------