├── .gitignore
├── .vscode
    ├── extensions.json
    └── launch.json
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── fonts
    │   ├── Hubot-Sans.ttf
    │   ├── Hubot-Sans.woff
    │   ├── Hubot-Sans.woff2
    │   ├── Mona-Sans.ttf
    │   ├── Mona-Sans.woff
    │   └── Mona-Sans.woff2
    ├── images
    │   ├── bot-user.png
    │   ├── btn-add-to-slack-small.png
    │   ├── btn-add-to-slack.png
    │   ├── console-connect.png
    │   ├── console-subscribe.png
    │   ├── graph-billing-portal.png
    │   ├── graph-billing-subscribe.png
    │   ├── graph-connect.png
    │   ├── graph-forget.png
    │   ├── graph-help.png
    │   ├── graph-me-1.png
    │   ├── graph-me-2.png
    │   ├── graph-me-3.png
    │   ├── graph-me-4.png
    │   ├── graph-me.png
    │   ├── graph-save.png
    │   ├── graph-search.png
    │   ├── remove-app.png
    │   ├── screenshot.png
    │   └── slack-mark.png
    ├── logo.png
    └── robots.txt
├── src
    ├── components
    │   ├── DocsSidebar.astro
    │   ├── DocsToc.astro
    │   ├── Faq.astro
    │   ├── Features.astro
    │   ├── Footer.astro
    │   ├── Hero.astro
    │   └── Navbar.astro
    ├── env.d.ts
    ├── layouts
    │   ├── DocsLayout.astro
    │   ├── Layout.astro
    │   └── PageLayout.astro
    ├── pages
    │   ├── 404.astro
    │   ├── _faq
    │   │   ├── 01-free-plan.md
    │   │   ├── 02-trial.md
    │   │   ├── 03-manage-subscription.md
    │   │   └── 04-more-than-max-users.md
    │   ├── docs
    │   │   ├── billing.md
    │   │   ├── connect.md
    │   │   ├── get-started.md
    │   │   ├── index.md
    │   │   ├── share.md
    │   │   └── slack.md
    │   ├── index.astro
    │   ├── pricing.astro
    │   ├── privacy.md
    │   ├── support.md
    │   └── terms.md
    └── styles
    │   └── global.css
├── tailwind.config.cjs
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | .output/
 4 | 
 5 | # dependencies
 6 | node_modules/
 7 | 
 8 | # logs
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | pnpm-debug.log*
13 | 
14 | 
15 | # environment variables
16 | .env
17 | .env.production
18 | 
19 | # macOS-specific files
20 | .DS_Store
21 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # GraphMe website
 2 | 
 3 | ## Local development
 4 | 
 5 | All commands are run from the root of the project, from a terminal:
 6 | 
 7 | | Command                | Action                                             |
 8 | | :--------------------- | :------------------------------------------------- |
 9 | | `npm install`          | Installs dependencies                              |
10 | | `npm run dev`          | Starts local dev server at `localhost:3000`        |
11 | | `npm run build`        | Build your production site to `./dist/`            |
12 | | `npm run preview`      | Preview your build locally, before deploying       |
13 | 
14 | ## License
15 | 
16 | Layout is based on [Landwind](https://github.com/themesberg/landwind), licensed under the MIT license:
17 | 
18 | ```
19 | MIT License
20 | 
21 | Copyright (c) 2022 Themesberg
22 | 
23 | Permission is hereby granted, free of charge, to any person obtaining a copy
24 | of this software and associated documentation files (the "Software"), to deal
25 | in the Software without restriction, including without limitation the rights
26 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
27 | copies of the Software, and to permit persons to whom the Software is
28 | furnished to do so, subject to the following conditions:
29 | 
30 | The above copyright notice and this permission notice shall be included in all
31 | copies or substantial portions of the Software.
32 | ```


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config';
 2 | import tailwind from "@astrojs/tailwind";
 3 | import react from "@astrojs/react";
 4 | import remarkDirective from "remark-directive";
 5 | import remarkCalloutDirectives from "@microflash/remark-callout-directives";
 6 | import sitemap from "@astrojs/sitemap";
 7 | 
 8 | // https://astro.build/config
 9 | export default defineConfig({
10 |   site: 'https://graphme.app',
11 |   markdown: {
12 |     remarkPlugins: [remarkDirective, remarkCalloutDirectives],
13 |     extendDefaultPlugins: true
14 |   },
15 |   integrations: [tailwind({
16 |     config: {
17 |       applyBaseStyles: false
18 |     }
19 |   }), react(), sitemap()]
20 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@example/basics",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "astro dev",
 8 |     "start": "astro dev",
 9 |     "build": "astro build",
10 |     "preview": "astro preview",
11 |     "astro": "astro"
12 |   },
13 |   "dependencies": {
14 |     "@astrojs/react": "^1.2.2",
15 |     "@astrojs/sitemap": "^1.0.0",
16 |     "@astrojs/tailwind": "^2.1.3",
17 |     "@microflash/remark-callout-directives": "^1.5.0",
18 |     "@tailwindcss/typography": "^0.5.8",
19 |     "@types/react": "^18.0.26",
20 |     "@types/react-dom": "^18.0.10",
21 |     "astro": "^1.8.0",
22 |     "framer-motion": "^8.0.2",
23 |     "react": "^18.2.0",
24 |     "react-dom": "^18.2.0",
25 |     "remark-directive": "^2.0.1",
26 |     "tailwindcss": "^3.2.4"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/favicon.ico


--------------------------------------------------------------------------------
/public/fonts/Hubot-Sans.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/fonts/Hubot-Sans.ttf


--------------------------------------------------------------------------------
/public/fonts/Hubot-Sans.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/fonts/Hubot-Sans.woff


--------------------------------------------------------------------------------
/public/fonts/Hubot-Sans.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/fonts/Hubot-Sans.woff2


--------------------------------------------------------------------------------
/public/fonts/Mona-Sans.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/fonts/Mona-Sans.ttf


--------------------------------------------------------------------------------
/public/fonts/Mona-Sans.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/fonts/Mona-Sans.woff


--------------------------------------------------------------------------------
/public/fonts/Mona-Sans.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/fonts/Mona-Sans.woff2


--------------------------------------------------------------------------------
/public/images/bot-user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/bot-user.png


--------------------------------------------------------------------------------
/public/images/btn-add-to-slack-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/btn-add-to-slack-small.png


--------------------------------------------------------------------------------
/public/images/btn-add-to-slack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/btn-add-to-slack.png


--------------------------------------------------------------------------------
/public/images/console-connect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/console-connect.png


--------------------------------------------------------------------------------
/public/images/console-subscribe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/console-subscribe.png


--------------------------------------------------------------------------------
/public/images/graph-billing-portal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-billing-portal.png


--------------------------------------------------------------------------------
/public/images/graph-billing-subscribe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-billing-subscribe.png


--------------------------------------------------------------------------------
/public/images/graph-connect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-connect.png


--------------------------------------------------------------------------------
/public/images/graph-forget.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-forget.png


--------------------------------------------------------------------------------
/public/images/graph-help.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-help.png


--------------------------------------------------------------------------------
/public/images/graph-me-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-me-1.png


--------------------------------------------------------------------------------
/public/images/graph-me-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-me-2.png


--------------------------------------------------------------------------------
/public/images/graph-me-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-me-3.png


--------------------------------------------------------------------------------
/public/images/graph-me-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-me-4.png


--------------------------------------------------------------------------------
/public/images/graph-me.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-me.png


--------------------------------------------------------------------------------
/public/images/graph-save.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-save.png


--------------------------------------------------------------------------------
/public/images/graph-search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/graph-search.png


--------------------------------------------------------------------------------
/public/images/remove-app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/remove-app.png


--------------------------------------------------------------------------------
/public/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/screenshot.png


--------------------------------------------------------------------------------
/public/images/slack-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/images/slack-mark.png


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/graphme-app/website/1fd9ee19388f1ae2f5b8c93fdc3bf130221fe9f7/public/logo.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /


--------------------------------------------------------------------------------
/src/components/DocsSidebar.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import fs from 'node:fs/promises';
 3 | 
 4 | const pathname = trimTrailingSlash(Astro.url.pathname);
 5 | const links = [];
 6 | 
 7 | function trimTrailingSlash(str) {
 8 |     return str.endsWith('/') ? str.slice(0, -1) : str;
 9 | }
10 | 
11 | const pages = await Astro.glob('/src/pages/docs/*.{md,mdx}');
12 | pages.sort((a, b) => (a.frontmatter.position < b.frontmatter.position) ? -1 : 1);
13 | pages.forEach(page => {
14 |     links.push({
15 |         "label": page.frontmatter.title,
16 |         "url": page.url,
17 |         "active": pathname == page.url,
18 |     });
19 | });
20 | ---
21 | <aside class="" aria-label="Sidebar">
22 |     <div class="overflow-y-auto h-full py-4 pt-6 px-3 border-l-1 border-right-200 rounded w-60">
23 |         <ul class="space-y-1">
24 |             {links.map((link, idx) => (
25 |                 !link.children ? (
26 |                     <li>
27 |                         <a href={link.url} class:list={["flex", "items-center", "py-1", "px-3", "text-base", "font-normal", "text-gray-900", "rounded-lg", "hover:bg-gray-100", {"text-primary-800": link.active}]}>
28 |                             {link.label}
29 |                         </a>
30 |                     </li>
31 |                 ) : (
32 |                     <button type="button"
33 |                             class="flex items-center py-1 px-3 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100" 
34 |                             aria-controls="dropdown-example"
35 |                             data-collapse-toggle={`sidebar-section-${idx}`}>
36 |                         <span class="flex-1 text-left whitespace-nowrap" sidebar-toggle-item>{link.label}</span>
37 |                         <svg sidebar-toggle-item class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
38 |                     </button>
39 |                     <ul id={`sidebar-section-${idx}`} class:list={["ml-4", "space-y-1", {"hidden": !link.active}]}>
40 |                         {link.children.map(child => (
41 |                             <li>
42 |                                 <a href={child.url}
43 |                                    class:list={["flex", "items-center", "py-1", "px-3", "w-full", "text-base", "font-normal", "text-gray-900", "rounded-lg", "transition duration-75", "hover:bg-gray-100", {"text-primary-800": child.active}]}
44 |                                 >
45 |                                     {child.label}
46 |                                 </a>
47 |                             </li>
48 |                         ))}
49 |                     </ul>
50 |                 )
51 |             ))}
52 |       </ul>
53 |    </div>
54 | </aside>
55 | 


--------------------------------------------------------------------------------
/src/components/DocsToc.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const { headings } = Astro.props;
 3 | // Only display level 2 and 3 headings. Level 1 is the main title.
 4 | const items = headings.filter(heading => heading.depth > 1 && heading.depth <= 3);
 5 | ---
 6 | <aside aria-label="Table of contents">
 7 |     <div class="sticky top-0 pt-4">
 8 |         <div class="overflow-y-auto py-4 px-2 border-l border-gray-200 w-60">
 9 |             <ul class="space-y-1">
10 |                 {items.map(item => (
11 |                     <li>
12 |                         <a href={'#' + item.slug} class:list={["flex", "items-center", "py-1", {"px-3": item.depth == 2, "px-8": item.depth == 3}, "text-sm", "text-gray-900", "hover:text-primary-800"]}>
13 |                             {item.text}
14 |                         </a>
15 |                     </li>
16 |                 ))}
17 |         </ul>
18 |     </div>
19 |    </div>
20 | </aside>
21 | 


--------------------------------------------------------------------------------
/src/components/Faq.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const questions = await Astro.glob('../pages/_faq/*.md');
 3 | ---
 4 | <h2 class="mb-6 text-3xl font-extrabold tracking-tight text-center text-gray-900 lg:mb-8 lg:text-3xl">Frequently asked questions</h2>
 5 | <div class="max-w-screen-sm lg:max-w-screen-md mx-auto">
 6 |     <div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white text-gray-900" data-inactive-classes="text-gray-500">
 7 |         {questions.map((question, idx) => (
 8 |             <h3 id={`accordion-flush-heading-${idx}`}>
 9 |                 <button type="button"
10 |                         class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-900 bg-white border-b border-gray-200"
11 |                         data-accordion-target={`#accordion-flush-body-${idx}`}
12 |                         aria-expanded={(idx > 0) ? 'false' : 'true'}
13 |                         aria-controls={`accordion-flush-body-${idx}`}
14 |                 >
15 |                     <span>{question.frontmatter.title}</span>
16 |                     <svg data-accordion-icon="" class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
17 |                 </button>
18 |             </h3>
19 |             <div id={`accordion-flush-body-${idx}`}
20 |                     class={(idx > 0) ? 'hidden' : ''}
21 |                     aria-labelledby={`accordion-flush-heading-${idx}`}>
22 |                 <div class="py-5 border-b border-gray-200">
23 |                     <article class="mb-2 prose max-w-none">
24 |                         <question.Content/>
25 |                     </article>
26 |                 </div>
27 |             </div>
28 |         ))}
29 |     </div> 
30 | </div>


--------------------------------------------------------------------------------
/src/components/Features.astro:
--------------------------------------------------------------------------------
 1 | <section class="bg-gray-50">
 2 |     <div class="max-w-screen-xl px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-16 lg:px-6">
 3 |         <div class="items-center gap-8 lg:grid lg:grid-cols-2 xl:gap-16">
 4 |             <div class="text-gray-500 sm:text-lg">
 5 |                 <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900">
 6 |                     Query dashboards directly from Slack
 7 |                 </h2>
 8 |                 <p class="mb-4 font-light lg:text-xl">
 9 |                     Do you still take screenshots and upload them in Slack?
10 |                     GraphMe automates this process without leaving Slack.
11 |                 </p>
12 |                 <p class="font-light lg:text-xl">
13 |                     <code>/graph me service-health:requests</code>
14 |                 </p>
15 |             </div>
16 |             <div class="border border-gray-400 rounded w-96 mx-auto hidden lg:flex ">
17 |                 <img class="w-full rounded" src="/images/graph-me-1.png" alt="Sample /graph me">
18 |             </div>
19 |         </div>
20 |     </div>
21 | </section>
22 | 
23 | <section class="bg-white">
24 |     <div class="max-w-screen-xl px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-16 lg:px-6">
25 |         <div class="items-center gap-8 lg:grid lg:grid-cols-2 xl:gap-16">
26 |             <div class="border border-gray-400 rounded w-96 mx-auto hidden lg:flex ">
27 |                 <img class="w-full rounded" src="/images/graph-me-2.png" alt="Sample /graph me">
28 |             </div>
29 |             <div class="text-gray-500 sm:text-lg">
30 |                 <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900">
31 |                     Save and reuse common queries
32 |                 </h2>
33 |                 <p class="mb-4 font-light lg:text-xl">
34 |                     Do you commonly share the same dashboards?<br>
35 |                     GraphMe allows to save common queries under an alias.
36 |                 </p>
37 |                 <p class="font-light lg:text-xl">
38 |                     <code>
39 |                         /graph save as logins<br>
40 |                         /graph me logins
41 |                     </code>
42 |                 </p>
43 |             </div>
44 |         </div>
45 |     </div>
46 | </section>
47 | 
48 | <section class="bg-gray-50">
49 |     <div class="max-w-screen-xl px-4 py-8 mx-auto space-y-12 lg:space-y-16 lg:py-24 lg:px-6">
50 |         <div class="items-center gap-8 lg:grid lg:grid-cols-2 xl:gap-16">
51 |             <div class="text-gray-500 sm:text-lg">
52 |                 <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900">
53 |                     Parameterize your queries
54 |                 </h2>
55 |                 <p class="mb-8 font-light lg:text-xl">
56 |                     GraphMe allows you to use the full power of Grafana, but providing variables, a timezone, dimensions or a time range.
57 |                 </p>
58 |                 <p class="font-light lg:text-xl">
59 |                     <code>/graph me traffic now-7d host=srv1.graphme.app</code>
60 |                 </p>
61 |             </div>
62 |             <div class="border border-gray-400 rounded w-96 mx-auto hidden lg:flex ">
63 |                 <img class="hiddenrounded" src="/images/graph-me-3.png" alt="Sample /graph me">
64 |             </div>
65 |         </div>
66 |         </div>
67 | </section>


--------------------------------------------------------------------------------
/src/components/Footer.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const year = new Date().getFullYear();
 3 | ---
 4 | <footer class="bg-white border-gray-200 border-t px-4">
 5 |     <div class="max-w-screen-xl py-6 mx-auto lg:py-8">
 6 |         <div class="flex">
 7 |             <div class="grow">
 8 |                 <a href="#" class="flex items-center mb-5 text-2xl font-semibold text-gray-900">
 9 |                     <img src="/logo.png" class="h-6 mr-3 sm:h-9" alt="GraphMe Logo" />
10 |                     GraphMe    
11 |                 </a>
12 |                 <span class="block text-sm text-gray-500">
13 |                     © {year} GraphMe. All rights reserved.
14 |                 </span>
15 |             </div>
16 |             <div class="grid gap-16 grid-cols-3">
17 |                 <div>
18 |                     <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase">Product</h3>
19 |                     <ul class="text-gray-500">
20 |                         <li class="mb-4">
21 |                             <a href="/" class="hover:underline">Features</a>
22 |                         </li>
23 |                         <li class="mb-4">
24 |                             <a href="/pricing" class="hover:underline">Pricing</a>
25 |                         </li>
26 |                         <li class="mb-4">
27 |                             <a href="/docs" class="hover:underline">Docs</a>
28 |                         </li>
29 |                     </ul>
30 |                 </div>
31 |                 <div>
32 |                     <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase">Contact</h3>
33 |                     <ul class="text-gray-500">
34 |                         <li class="mb-4">
35 |                             <a href="https://github.com/graphme-app" class="hover:underline">GitHub</a>
36 |                         </li>
37 |                         <li class="mb-4">
38 |                             <a href="https://twitter.com/graphmeapp" class="hover:underline">Twitter</a>
39 |                         </li>
40 |                         <li class="mb-4">
41 |                             <a href="mailto:hello@graphme.app" class="hover:underline">Email</a>
42 |                         </li>
43 |                     </ul>
44 |                 </div>
45 |                 <div>
46 |                     <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase">Legal</h3>
47 |                     <ul class="text-gray-500">
48 |                         <li class="mb-4">
49 |                             <a href="/privacy" class="hover:underline">Privacy</a>
50 |                         </li>
51 |                         <li class="mb-4">
52 |                             <a href="/terms" class="hover:underline">Terms</a>
53 |                         </li>
54 |                     </ul>
55 |                 </div>
56 |             </div>
57 |         </div>
58 |     </div>
59 | </footer>


--------------------------------------------------------------------------------
/src/components/Hero.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | // Rotating words inspired by https://github.com/Shroud-email/website/blob/main/src/components/atoms/ScrollingText.vue
 3 | ---
 4 | 
 5 | <section class="bg-white">
 6 |     <div class="grid max-w-screen-xl px-4 pb-8 mx-auto lg:gap-8 xl:gap-0 py-8 lg:py-16 lg:grid-cols-12">
 7 |         <div class="mr-auto place-self-center lg:col-span-7">
 8 |             <h1 class="max-w-2xl text-4xl font-extrabold tracking-tight md:text-5xl">
 9 |                 <div>Dashboards from Grafana</div>
10 |                 <div class="mt-2 text-primary-500">
11 |                     at your fingertips in Slack
12 |                 </div>
13 |             </h1>
14 |             <p class="max-w-2xl mt-6 font-light text-gray-500 md:text-lg lg:text-xl">
15 |                 🚀 Querying dashboards from Grafana and sharing them in Slack is now a fast and enjoyable experience!
16 |             </p>
17 |             <div class="space-y-4 mt-8 sm:flex sm:space-y-0 sm:space-x-4">
18 |                 <a href="https://console.graphme.app/slack/install">
19 |                     <img src="/images/btn-add-to-slack.png" class="h-12" alt="Add to Slack"/>
20 |                 </a>
21 |             </div>
22 |         </div>
23 |         <div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
24 |             <div class="bg-aubergine p-2 flex flex-col rounded-lg">
25 |                 <img src="/images/slack-mark.png" class="h-8 object-scale-down" alt="Slack logo"/>
26 |                 <img class="hidden w-full mt-1 rounded-lg lg:mb-0 lg:flex" src="/images/screenshot.png" alt="Sample usage of GraphMe">
27 |             </div>
28 |         </div>                
29 |     </div>
30 | </section>
31 | 
32 | 
33 | <script>
34 |   const container = document.getElementById('words');
35 |   const words = document.querySelectorAll('#words span');
36 |   let currentIndex = 0;
37 |   console.log(container);
38 |   console.log(words);
39 |   console.log(words.length);
40 |   setInterval(() => {
41 |     words[currentIndex].className = "absolute transition-all duration-700 transform opacity-0 -translate-y-8";
42 |     currentIndex = (currentIndex + 1) % words.length;
43 |     words[currentIndex].className = "absolute transition-all duration-700 transform opacity-100 translate-y-0";
44 |   }, 3000)
45 | </script>


--------------------------------------------------------------------------------
/src/components/Navbar.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const pathname = Astro.url.pathname;
 3 | const links = [
 4 |     {"label": "Features", "url": "/"},
 5 |     // {"label": "Changelog", "url": "/changelog"},
 6 |     {"label": "Pricing", "url": "/pricing"},
 7 |     {"label": "Docs", "url": "/docs"},
 8 | ];
 9 | links.forEach(link => link.active = (link.url == "/") ? pathname == link.url : pathname.startsWith(link.url));
10 | ---
11 | 
12 | <header class="w-full">
13 |     <nav class="bg-white border-gray-200 py-2.5">
14 |         <div class="flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto">
15 |             <a href="/" class="flex items-center">
16 |                 <img src="/logo.png" class="h-6 mr-3 sm:h-9" alt="GraphMe Logo" />
17 |                 <span class="self-center text-xl font-['Hubot Sans'] font-semibold whitespace-nowrap">GraphMe</span>
18 |             </a>
19 |             <div class="flex items-center space-x-2 lg:order-2">
20 |                 <a href="https://console.graphme.app/slack/install"><img src="/images/btn-add-to-slack.png" class="h-10" alt="Add to Slack"/></a>
21 |                 <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="mobile-menu-2" aria-expanded="false">
22 |                     <span class="sr-only">Open main menu</span>
23 |                     <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
24 |                     <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
25 |                 </button>
26 |             </div>
27 |             <div class="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
28 |                 <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
29 |                     {links.map(link => (
30 |                         <li>
31 |                             {link.active && (
32 |                                 <a href={link.url}
33 |                                    class="block py-2 pl-3 pr-4 text-white bg-primary-800 rounded lg:bg-transparent lg:text-primary-800 lg:p-0"
34 |                                    aria-current="page"
35 |                                 >{link.label}</a>
36 |                             )}
37 |                             {!link.active && (
38 |                                 <a href={link.url}
39 |                                    class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-800 lg:p-0"
40 |                                 >{link.label</a>
41 |                             )}
42 |                         </li>
43 |                     ))}
44 |                 </ul>
45 |             </div>
46 |         </div>
47 |     </nav>
48 | </header>


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | 


--------------------------------------------------------------------------------
/src/layouts/DocsLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from './Layout.astro'
 3 | import DocsSidebar from '../components/DocsSidebar.astro'
 4 | import DocsToc from '../components/DocsToc.astro'
 5 | 
 6 | const { frontmatter, headings } = Astro.props;
 7 | ---
 8 | <Layout title={frontmatter.title}>
 9 |     <div class="border-gray-200 shadow-inner border-t">
10 |         <div class="max-w-screen-xl mx-auto flex">
11 |             <DocsSidebar/>
12 |             <article class="prose max-w-none p-6">
13 |                 <slot />
14 |             </article>
15 |             <DocsToc headings={headings}/>
16 |         </div>
17 |     </div>
18 | </Layout>


--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import "../styles/global.css"
 3 | import Navbar from "../components/Navbar.astro"
 4 | import Footer from "../components/Footer.astro"
 5 | 
 6 | export interface Props {
 7 | 	title: string;
 8 | }
 9 | 
10 | const { title } = Astro.props;
11 | ---
12 | 
13 | <!DOCTYPE html>
14 | <html lang="en">
15 | 	<head>
16 | 		<meta charset="UTF-8" />
17 | 		<meta name="viewport" content="width=device-width" />
18 | 		<meta name="generator" content={Astro.generator} />
19 | 		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
20 | 		<title>{title} | GraphMe</title>
21 | 	</head>
22 | 	<body class="w-screen h-screen">
23 | 		<Navbar/>
24 | 		<main>
25 | 			<slot />
26 | 		</main>
27 | 		<Footer/>
28 | 		<script src="https://unpkg.com/flowbite@1.4.1/dist/flowbite.js"></script>
29 | 		<script src="https://cdn.usefathom.com/script.js" data-site="OOXDOFZZ" defer></script>
30 | 	</body>
31 | </html>
32 | <style is:global>
33 | 	:root {
34 | 		--accent: 124, 58, 237;
35 | 		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
36 | 	}
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/layouts/PageLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from './Layout.astro'
 3 | 
 4 | const { frontmatter } = Astro.props;
 5 | ---
 6 | <Layout title={frontmatter.title}>
 7 |     <div class="border-gray-200 shadow-inner border-t">
 8 |         <div class="max-w-screen-lg mx-auto flex">
 9 |             <article class="prose max-w-none p-6">
10 |                 <slot />
11 |             </article>
12 |         </div>
13 |     </div>
14 | </Layout>


--------------------------------------------------------------------------------
/src/pages/404.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/Layout.astro';
 3 | ---
 4 | <Layout title="GraphMe - Not Found">
 5 |     <section class="bg-white dark:bg-gray-900">
 6 |         <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
 7 |             <div class="mx-auto max-w-screen-sm text-center">
 8 |                 <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500">404</h1>
 9 |                 <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Something's missing.</p>
10 |                 <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Sorry, we can't find that page. You'll find lots to explore on the home page. </p>
11 |                 <a href="/" class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4">Back to home</a>
12 |             </div>   
13 |         </div>
14 |     </section>
15 | </Layout>


--------------------------------------------------------------------------------
/src/pages/_faq/01-free-plan.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Do you have a free plan?
3 | ---
4 | We do have a free plan, which is the default plan that you obtain when install the application for Slack.
5 | No credit card required is required for the free plan, but it is limited to a single user.
6 | Due to its limitations, this plan is intended for people evaluating the product.
7 | If you want to unleash the full potential of GraphMe and collaborate with your organization, please switch to a paid plan.


--------------------------------------------------------------------------------
/src/pages/_faq/02-trial.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Do you offer a free trial?
3 | ---
4 | Yes, all of our plans come with a 14-days trial period.
5 | You need to provide your credit card to start the trial, but you will not be charged before the end of the trial period.
6 | If you cancel your subscription before the end of the trial period, you will not be charged at all.


--------------------------------------------------------------------------------
/src/pages/_faq/03-manage-subscription.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Can I change or stop my subscription at any time?
3 | ---
4 | Yes, you are free to switch to a new plan, or cancel your existing subscription at any time.
5 | We will charge you at the pro-rata of the number of days in the current period


--------------------------------------------------------------------------------
/src/pages/_faq/04-more-than-max-users.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: What if I need more than 100 users?
3 | ---
4 | We also have an Unlimited plan with a custom pricing, for organizations that need to onboard more than 100 users on GraphMe.
5 | Please [reach out to us](mailto:hello@graphme.app), so that we can work together on a tailored solution for you.


--------------------------------------------------------------------------------
/src/pages/docs/billing.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: /src/layouts/DocsLayout.astro
 3 | title: Billing and plan
 4 | position: 22
 5 | ---
 6 | 
 7 | # Manage billing and plan
 8 | 
 9 | This page explains how to manage your billing information and subscription.
10 | 
11 | ## Subscribe to a paid plan
12 | 
13 | By default, all new accounts come with a free plan.
14 | To collaborate with your team, you will need to subscribe to a paid plan.
15 | You can obtain the URL to the subscription page by using the following command from Slack:
16 | 
17 | ```
18 | /graph billing
19 | ```
20 | 
21 | Which would give the following response:
22 | 
23 | ![Configure billing](/images/graph-billing-subscribe.png)
24 | 
25 | After clicking on the link, you will end up on a page that looks like the following:
26 | 
27 | ![Select a plan](/images/console-subscribe.png)
28 | 
29 | After selecting the plan you are interested in, you will be redirected to a page hosted by [Stripe](https://stripe.com), our payment provider, where you will need to fill your payment information.
30 | Once validated, your plan will be provisioned in a few minutes.
31 | You will not be charged until the end of your free trial, and can cancel at any time during this trial period.
32 | 
33 | ## Manage your subscription
34 | 
35 | Once subscribed to a paid plan, you can switch to another plan, cancel your plan, or update your billing information at any time.
36 | You can obtain the URL to the customer portal by using the following command from Slack:
37 | 
38 | ```
39 | /graph billing
40 | ```
41 | 
42 | Which would give the following response:
43 | 
44 | ![Configure billing](/images/graph-billing-portal.png)
45 | 
46 | After clicking on the link, you will end up on a page hosted by [Stripe](https://stripe.com), our payment provider, that allows you to manage your subscription.
47 | 
48 | ## Limits
49 | 
50 | Every plan comes with limits around three dimensions:
51 | 
52 | * **Connections:** A limit in the number of connections that can be configured.
53 | Once the threshold is reached, it will not be possible to configure any new connections without first removing another one.
54 | * **Saved graphs:** A limit in the number of saved graphs that can be created.
55 | Once the threshold is reached, it will not be possible anymore to create any new saved graphs without first removing another one.
56 | * **Users:** A limit in the number of users that can interact with GraphMe.
57 | This does not apply to the console, but applies to all Slack commands (except `help`).
58 | Once the threshold is reached for a billing cycle, it will not be possible for any new user to interact with GraphMe.
59 | 
60 | ## Need help? 
61 | 
62 | Should you encounter any issue with billing, please [reach out to us](mailto:hello@graphme.app).


--------------------------------------------------------------------------------
/src/pages/docs/connect.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: /src/layouts/DocsLayout.astro
 3 | title: Connect to Grafana
 4 | position: 10
 5 | ---
 6 | 
 7 | # Connect GraphMe to Grafana
 8 | 
 9 | This page explains how to configure GraphMe to interact with your instance of Grafana.
10 | 
11 | ## Open the console
12 | 
13 | After installing the application for Slack, you are redirected to the console where you can configure the connection to Grafana.
14 | You can also obtain the URL to this console by using the following command from Slack:
15 | 
16 | ```
17 | /graph connect
18 | ```
19 | 
20 | Which would give the following response:
21 | 
22 | ![Configure connection](/images/graph-connect.png)
23 | 
24 | ## Configure the connection
25 | 
26 | :::note
27 | Please note that links to the console are only valid for 15 minutes.
28 | :::
29 | 
30 | The console to configure the connection to Grafana looks like the following:
31 | 
32 | ![Configure connection](/images/console-connect.png)
33 | 
34 | There are three fields to fill in order to configure the connection to Grafana:
35 | 
36 | | Field   | Required | Description |
37 | |---------|----------|-------------|
38 | | Host    | Yes      | Base URL of the Grafana host to connect to.
39 | | API key | No       | An [API key](https://grafana.com/docs/grafana/latest/administration/api-keys/) or [service account token](https://grafana.com/docs/grafana/latest/administration/service-accounts/). Only dashboards accessible by this key will be available via GraphMe. While this parameter can be omitted when connecting to a public instance, it is in practice always specified when connecting to your own private instance of Grafana |
40 | | Org ID  | No       | An [organization identifier](https://grafana.com/docs/grafana/latest/administration/organization-management/). Only dashboards accessible to this organization will be available via GraphMe. This is only needed if your instance of Grafana uses multiple organizations. By default, the organization identifier of the first organization is assumed. |
41 | 
42 | For security reasons, the API key is never displayed in the form, even if one is actually used.
43 | Consequently, when editing a connection that requires an API key, you must provide the API key every time.
44 | 
45 | ## Demo instance
46 | 
47 | By default, every new team is configured with a demo instance of Grafana: https://play.grafana.org
48 | This allows new users to get started quickly.
49 | This demo instance is not maintained by GraphMe, and might be subject to some limitations (such as rate limiting).
50 | 
51 | ## Grafana Renderer API
52 | 
53 | GraphMe relies heavily the [image renderer plugin](https://grafana.com/docs/grafana/latest/setup-grafana/image-rendering/) to actually render graphs.
54 | This plugin must be installed in your Grafana instance in order for GraphMe to deliver graphs successfully.
55 | 
56 | ## Network connectivity
57 | 
58 | Your instance of Grafana should be publicly addressable in order for GraphMe to communicate with it.
59 | This is often the case when you use an instance of Grafana managed as a service, such as [Grafana Cloud](https://grafana.com/products/cloud/).
60 | 
61 | :::warn
62 | Please [reach out to us](mailto:hello@graphme.app) if your instance is hosted in your private network and you wish to use GraphMe.
63 | :::


--------------------------------------------------------------------------------
/src/pages/docs/get-started.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: /src/layouts/DocsLayout.astro
 3 | title: Get started
 4 | position: 1
 5 | ---
 6 | 
 7 | # Get started
 8 | 
 9 | After [installing the application for Slack](https://console.graphme.app/slack/install) in your workspace, you are ready to issue your first slash command:
10 | 
11 | ```
12 | /graph me grafana-play-home:4
13 | ```
14 | 
15 | After a few seconds, this should give you the following response:
16 | 
17 | ![Grafana Play: Server requests](/images/graph-me-1.png)
18 | 
19 | ## Connect to Grafana
20 | 
21 | The above graph comes from a demo instance of Grafana, which might not build what you are looking for.
22 | You can use the following slash command to connect GraphMe to Grafana:
23 | 
24 | ```
25 | /graph connect
26 | ```
27 | 
28 | You will find [more information about connecting to Grafana](/docs/connect) in the docs.
29 | 
30 | ## Onboard your team
31 | 
32 | After installing the application for Slack, you are subscribed to the free plan, which only comes with a single provisioned user.
33 | While this is great to get started quickly at no cost, you will likely want to collaborate with your team.
34 | In order to do that, you will need to subscribe to [one of our paid plans](/pricing) (*they all come with a free trial*).
35 | Our pricing model is very simple: every plan is associated to a number of provisioned users.
36 | 
37 | You can use the following slash command to subscribe to a plan:
38 | 
39 | ```
40 | /graph billing
41 | ```
42 | 
43 | You will find [more information about managing your billing and plan](/docs/billing) in the docs.


--------------------------------------------------------------------------------
/src/pages/docs/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: /src/layouts/DocsLayout.astro
 3 | title: Introduction
 4 | position: 0
 5 | ---
 6 | 
 7 | # What is GraphMe?
 8 |  
 9 | GraphMe is an application connecting Grafana to Slack.
10 | It allows its users to easily share graphs from Grafana dashboards in Slack channels:
11 | 
12 | ![Example graph](/images/screenshot.png)
13 | 
14 | If you are an engineer working with metrics and dashboards, you are certainly faced with the pain of sharing them within your internal communications system.
15 | It very likely involves finding the right dashboard and panel(s) to share, taking a screenshot of them, and uploading this screenshot into your internal communications system.
16 | Besides being time consuming, this manual process also means that context might be lost while doing so.
17 | What was the time frame being considered? Which filters were applied?
18 | 
19 | GraphMe solves this pain by proposing an integration of Grafana with Slack.
20 | It comes as the form of a slash command, that is used to query dashboards without leaving Slack.
21 | Dashboards are then shared in Slack with all their context, and a link to open it in Grafana to continue the analysis there, if needed.
22 | 
23 | GraphMe also offers the option to create aliases of common dashboard queries.
24 | For example, one could create an alias `weekly-report` that targets the panels used specifically to build that weekly report.
25 | This is also a tremendous tool to share knowledge across a team, and creates a source of truth of how key metrics and reports and assembled.
26 | 
27 | ## Inspiration and credits
28 | 
29 | We proudly recognize that GraphMe was inspired by talks given by GitHub folks about their internal chatops system, nicknamed [Hubot](https://hubot.github.com/).
30 | Hubot comes with integrations with many internal systems used at GitHub, not limited to engineering but also used by sales and marketing.
31 | One of those commands is `graph me`, an integration to their internal graphing system (Graphite at the beginning, and later Datadog), which gave the name to this application.
32 | 
33 | This graphing command has been [implemented](https://github.com/stephenyeargin/hubot-grafana) [several](https://github.com/github/hubot-scripts/blob/master/src/scripts/graphite.coffee) [times](https://github.com/rick/hubot-graphme) under the form of open source plugins to Hubot, most of them being now inactive.
34 | We took as a basis the familiar syntax proposed by [hubot-grafana](https://github.com/stephenyeargin/hubot-grafana), and implemented it as a service ready to be used, with no installation.


--------------------------------------------------------------------------------
/src/pages/docs/share.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: /src/layouts/DocsLayout.astro
  3 | title: Share dashboards
  4 | position: 11
  5 | ---
  6 | 
  7 | # Share Grafana dashboards in Slack
  8 | 
  9 | This page explains the different ways to share Grafana dashboards from Slack.
 10 | 
 11 | ## Share dashboards and panels
 12 | 
 13 | Dashboards and panels can be shared with the following command:
 14 | 
 15 | ```
 16 | /graph me <dashboard>:<panel> [<variables>[ <start>[ <end>]]]
 17 | ```
 18 | 
 19 | For example:
 20 | 
 21 | ```
 22 | /graph me grafana-play-home:4
 23 | ```
 24 | 
 25 | Which would give the following response:
 26 | 
 27 | ![Share a dashboard](/images/graph-me.png)
 28 | 
 29 | The following table lists the syntaxes available to query dashboards and panels:
 30 | 
 31 | | Syntax | Description | Example |
 32 | |--------|-------------|---------|
 33 | | `<dashboard-slug>` | Returns all panels of the dashboard identified by its slug (max: 6 panels). | `grafana-play-home` |
 34 | | `<dashboard-uid>` | Returns all panels of the dashboard identified by its UID (max: 6 panels). | `000000012` |
 35 | | `<dashboard-slug-or-uid>:<panel-visual-id>` | Retrieve a single panel of a dashboard by its visual position in the dashboard. Panel 1 is the top-left panel, then from left to right, and top to bottom. | `grafana-play-home:4` |
 36 | | `<dashboard-slug-or-uid>:$<id>` | Retrieve a single panel of a dashboard by its unique identifier. | `grafana-play-home:$2` |
 37 | | `<dashboard-slug-or-uid>:<keyword>` | Retrieve all panels of a dashboard matching a keyword (max: 6 panels). A single keyword can be provided, and it must be present in the panel's title for the latter to be considered. | `grafana-play-home:$2` |
 38 | 
 39 | After the query may optionally come some options.
 40 | Options can be parameters, and a specification of the time range.
 41 | 
 42 | Parameters are specified as a list of key/value pairs (e.g., `key=value`), and are mapped to [variables](https://grafana.com/docs/grafana/latest/dashboards/variables/).
 43 | There are also a few special parameters that have their own special meaning:
 44 | 
 45 | | Parameter | Default | Description |
 46 | |-----------|---------|-------------|
 47 | | width     | 1000    | Width of the graph to render in pixels |
 48 | | height    | 500     | Height of the graph to render in pixels |
 49 | | tz        | UTC     | Timezone to use to interpret the time range, and to render the graph |
 50 | 
 51 | Along with those parameters can also be provided a time range.
 52 | While parameters are key/value pairs, time range is provided as a plain value.
 53 | If a single plain value is provided, it will be the start time.
 54 | By default, start time is 6 hours ago, and end time is the time at which the query is issued.
 55 | The following formats are supported to specify time:
 56 | 
 57 | | Format | Description | Example |
 58 | |--------|-------------|---------|
 59 | | timestamp | Unix timestamp, in seconds | 1678795803 |
 60 | | "now" | Time at which the query is issued | now |
 61 | | -Nyears | A time that is N years in the past from now | -1years |
 62 | | -Nweeks | A time that is N weeks in the past from now | -2weeks |
 63 | | -Ndays | A time that is N days in the past from now | -12hours |
 64 | | -Nhours | A time that is N hours in the past from now | -5days |
 65 | | -Nminutes | A time that is N minutes in the past from now | -15minutes |
 66 | | -Nseconds | A time that is N seconds in the past from now | -30seconds |
 67 | | Y-m-d | Year/month/day | 2023-03-14 |
 68 | | Y-m-dTH:M | Year/month/day and hour/minute | 2023-03-14T13:10 |
 69 | | Y-m-dTH:M:s | Year/month/day and hour/minute/second | 2023-03-14T13:10:03 |
 70 | 
 71 | Relative time period (e.g., "-12hours") can also be prefixed by "now" (e.g., "now-12hours") to match Grafana's syntax.
 72 | Time period quantifiers (e.g., "hours", "days") can also be specified in singular (e.g., "hour", "day"), or abbreviated as their first char (e.g., "h", "d").
 73 | 
 74 | Here is an example of a complex query involving parameters and time range:
 75 | 
 76 | ```
 77 | /graph me influxdb-server-monitoring:3 host=server1 summarize=1h -1d -12h
 78 | ```
 79 | 
 80 | ## Create and reuse saved graphs
 81 | 
 82 | Graphs that are often queried can be saved under an alias for an easier access.
 83 | We call them **saved graphs**.
 84 | The latest graph that has been shared in the channel by the current user can be saved with the following command:
 85 | 
 86 | ```
 87 | /graph save as <alias>
 88 | ```
 89 | 
 90 | For example:
 91 | 
 92 | ```
 93 | /graph save as cpu
 94 | ```
 95 | 
 96 | Which would give the following response:
 97 | 
 98 | ![Save graph](/images/graph-save.png)
 99 | 
100 | It can then be invoked with the following command:
101 | 
102 | ```
103 | /graph me cpu
104 | ```
105 | 
106 | All the usual options of the `/graph me` command can still be used.
107 | If an option was part of the saved graph, it will be overridden.
108 | For example:
109 | 
110 | ```
111 | /graph me cpu -7d -2d host=app1
112 | ```
113 | 
114 | By default, a saved graph cannot be overridden, unless you use the `save!` command:
115 | 
116 | ```
117 | /graph save! as cpu
118 | ```
119 | 
120 | If a saved graph is not useful anymore, it can be deleted with the following command:
121 | 
122 | ```
123 | /graph forget <alias>
124 | ```
125 | 
126 | For example:
127 | 
128 | ```
129 | /graph forget cpu
130 | ```
131 | 
132 | Which would give the following response:
133 | 
134 | ![Forget graph](/images/graph-forget.png)
135 | 
136 | ## Search for dashboards and graphs
137 | 
138 | Dashboards and panels can be searched with the following command:
139 | 
140 | ```
141 | /graph search <query>
142 | ```
143 | 
144 | For example:
145 | 
146 | ```
147 | /graph search server
148 | ```
149 | 
150 | Which would give the following response:
151 | 
152 | ![Search dashboards](/images/graph-search.png)
153 | 
154 | This command returns all dashboards (max: 50 dashboards) matching the given keyword.
155 | It also returns all saved graphs (max: 50 graphs) matching the given keyword.
156 | Finally, if less than 50 graphs were returned, it also returns graphs that are associated with one of the dashboards that matched the query.


--------------------------------------------------------------------------------
/src/pages/docs/slack.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: /src/layouts/DocsLayout.astro
 3 | title: Manage the application
 4 | position: 21
 5 | ---
 6 | 
 7 | # Manage the application for Slack
 8 | 
 9 | This page explains how to install, uninstall or change settings related to our applicatin for Slack.
10 | In order to follow those instructions, you will need the permission to add an application to your workspace.
11 | 
12 | ## Install the application
13 | 
14 | Our application for Slack can be installed from our "Add to Slack" button:
15 | 
16 | [![Install app](/images/btn-add-to-slack-small.png)](https://console.graphme.app/slack/install)
17 | 
18 | Clicking on the button will redirect you to a screen that will ask you to accept some permissions required to make the application to work.
19 | If you need to better understand how we use those permissions, please refer to [the dedicated section](#permissions).
20 | After confirming, you will be redirected back to the console, and the application should be available in your workspace!
21 | 
22 | [Slack's documentation](https://slack.com/help/articles/202035138-Add-apps-to-your-Slack-workspace) contains more information about adding apps to a workspace.
23 | 
24 | ## Re-install the application
25 | 
26 | Re-installing the application is harmless, but is usually not needed.
27 | The only cases where it should be attempted is when instructed to do so by the application itself of by the support.
28 | 
29 | Our application for Slack can be re-installed by using the same "Add to Slack" button than above.
30 | Clicking on the button will trigger the same flow as for a regular installation.
31 | 
32 | ## Uninstall the application
33 | 
34 | To uninstall the application, first access the application's home in Slack (e.g., by searching for "GraphMe" in the search bar).
35 | Then go to the "About" tab, and click on the "Configuration" button.
36 | You will end up on a page allowing you to configure the installation of the application for Slack.
37 | 
38 | Lower in the page, there is an option to remove the application from your workspace:
39 | 
40 | ![Remove app](/images/remove-app.png)
41 | 
42 | ## Change the bot's name
43 | 
44 | By default, the bot is named @graphme, but this can be changed.
45 | To rename the bot, first access the application's home in Slack (e.g., by searching for "GraphMe" in the search bar).
46 | Then go to the "About" tab, and click on the "Configuration" button.
47 | You will end up on a page allowing you to configure the installation of the application for Slack.
48 | 
49 | Lower in the page, there is an option to rename the bot user associated with the application:
50 | 
51 | ![Bot user](/images/bot-user.png)
52 | 
53 | ## Required permissions
54 | 
55 | GraphMe's application for Slack asks for the minimal set of permissions required to make it behave correctly:
56 | 
57 | * **View information about your identity:**
58 |   This is the minimal permission needed when installing an application.
59 |   This does *not* give us access to your email address.
60 | * **Add shortcuts and/or slash commands that people can use:**
61 |   The primary way of interacting with GraphMe is via slash commands.
62 |   This permission is needed in order to install the `/graph` command inside your workspace.
63 |   This also allows GraphMe from being notified whenever somebody uses a slash command, and to react to it.
64 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/Layout.astro';
 3 | import Hero from '../components/Hero.astro';
 4 | import Features from '../components/Features.astro';
 5 | ---
 6 | 
 7 | <Layout title="Dashboards from Grafana at your fingertips in Slack">
 8 | 	<Hero />
 9 |     <Features />
10 |     <!--<section class="bg-white">
11 |         <div class="max-w-screen-xl px-4 py-8 mx-auto lg:py-16 lg:px-6">
12 |             <div class="max-w-screen-sm mx-auto text-center">
13 |                 <h2 class="mb-8 text-2xl font-extrabold leading-tight tracking-tight text-gray-900">Get started with GraphMe</h2>
14 |                 <p class="mb-8"><a href="https://console.graphme.app/slack/install" style="align-items:center;color:#000;background-color:#fff;border:1px solid #ddd;border-radius:4px;display:inline-flex;font-family:Lato, sans-serif;font-size:14px;font-weight:600;height:44px;justify-content:center;text-decoration:none;width:204px"><svg xmlns="http://www.w3.org/2000/svg" style="height:16px;width:16px;margin-right:12px" viewBox="0 0 122.8 122.8"><path d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z" fill="#e01e5a"></path><path d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z" fill="#36c5f0"></path><path d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z" fill="#2eb67d"></path><path d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z" fill="#ecb22e"></path></svg>Add to Slack</a></p>
15 |             </div>
16 |         </div>
17 |     </section>-->
18 |     
19 | </Layout>
20 | 


--------------------------------------------------------------------------------
/src/pages/pricing.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/Layout.astro';
 3 | import Faq from '../components/Faq.astro';
 4 | 
 5 | const plans = [
 6 |     {
 7 |         "name": "Team",
 8 |         "price": 25,
 9 |         "features": [
10 |             "25 users",
11 |             "Unlimited usage",
12 |         ],
13 |     },
14 |     {
15 |         "name": "Company",
16 |         "price": 50,
17 |         "features": [
18 |             "50 users",
19 |             "Unlimited usage",
20 |         ],
21 |     },
22 |     {
23 |         "name": "Enterprise",
24 |         "price": 100,
25 |         "features": [
26 |             "100 users",
27 |             "Unlimited usage",
28 |         ],
29 |     }
30 | ];
31 | 
32 | ---
33 | 
34 | <Layout title="GraphMe">
35 |     <section class="bg-white">
36 |         <div class="max-w-screen-xl mx-auto py-8 lg:py-16 px-4 lg:px-6">
37 |             <div class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12">
38 |                 <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900">
39 |                     Designed for teams of all sizes
40 |                 </h2>
41 |                 <p class="mb-5 font-light text-gray-500 sm:text-xl">
42 |                     A clear and simple pricing, based on the number of allocated seats.
43 |                 </p>
44 |             </div>
45 |             <div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">
46 |                 {plans.map(plan => (
47 |                     <div class="flex flex-col max-w-lg p-6 w-full mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow xl:p-8">
48 |                         <h3 class="mb-4 text-2xl font-semibold">{plan.name} Plan</h3>
49 |                         <div class="flex items-baseline justify-center my-8">
50 |                             <span class="mr-2 text-5xl font-extrabold">${plan.price}</span>
51 |                             <span class="text-gray-500">/month</span>
52 |                         </div>
53 |                         <ul role="list" class="mb-8 space-y-4 text-left">
54 |                             {plan.features.map(feature => (
55 |                                 <li class="flex items-center space-x-3">
56 |                                     <svg class="flex-shrink-0 w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
57 |                                     <span>{feature}</span>
58 |                                 </li>
59 |                             ))}
60 |                         </ul>
61 |                         <a href="https://console.graphme.app/slack/install"
62 |                            class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
63 |                         >
64 |                             Get started
65 |                         </a>
66 |                     </div>
67 |                 ))}
68 |             </div>
69 |         </div>
70 |       </section>
71 | 
72 |     <section class="bg-white">
73 |         <div class="max-w-screen-xl px-4 pb-8 mx-auto lg:pb-24 lg:px-6 ">
74 |             <Faq />
75 |         </div>
76 |     </section>
77 |     
78 | </Layout>


--------------------------------------------------------------------------------
/src/pages/privacy.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: /src/layouts/PageLayout.astro
  3 | title: Privacy policy
  4 | ---
  5 | 
  6 | # Privacy policy
  7 | 
  8 | :::note
  9 | Last updated: March 2023
 10 | :::
 11 | 
 12 | This privacy policy explains which data we collect about you and how we use it.
 13 | It also explains your rights about this data and how to exercise them.
 14 | By using our service, you accept this privacy policy.
 15 | If you are in disagreement with it, please do not use our service and contact us to get your data deleted.
 16 | 
 17 | ## Preamble
 18 | 
 19 | When designing GraphMe, we took privacy very seriously from the beginning.
 20 | No company wants to risk compromising information by sharing it with a third party service that is spying on it.
 21 | That is why we collect only the very minimal amount of information needed to keep the product running, and nothing more.
 22 | You are not the product, GraphMe is!
 23 | 
 24 | ## Which data we collect
 25 | 
 26 | **Account information:**
 27 | When you install the application, we get access to your identity and the identity of the workspace the application has been installed in.
 28 | When you subscribe to a plan, we get access to billing information (name, email address, billing address).
 29 | Account information is stored until your account is closed.
 30 | Billing information may be stored undefinitely when necessary for regulatory or compliance purposes.
 31 | 
 32 | **Content submitted through our service:**
 33 | When using our service, you voluntarily store content into it, such as connection information, queries and graphs.
 34 | It can be via our Web console or via the application for Slack.
 35 | Interactions from users may also result in some content being generated, such as graphs.
 36 | We keep track of every command that was sent to our service.
 37 | It includes metadata such as the user ID, channel ID and command issued.
 38 | Content submitted through our service is stored until you voluntarily choose to delete it (when applicable), or until your account is closed.
 39 | 
 40 | **Information from Slack:**
 41 | Our service listens to some events from Slack.
 42 | This includes reactions to commands, interactivity that result from it, and lifecycle of the application for Slack.
 43 | When you install the application for Slack, you are redirected to Slack where you have to give your consent for us to access this data.
 44 | The token associated with your installation of GraphMe is stored until you uninstall the application, or until your account is closed.
 45 | Other information obtained from Slack is processed in-memory and not persisted.
 46 | 
 47 | **Information from Grafana:**
 48 | When a request is sent to the instance of Grafana you configured, we access information such as configured dashboards and their panels.
 49 | While we have access to data stored in Grafana, we do not process any personal information that might be stored there.
 50 | Information obtained from Grafana is processed in-memory and not persisted.
 51 | 
 52 | **Website statistics:**
 53 | Our websites contain a privacy-preserving tracking code.
 54 | We collect data about which pages are visited, referrals, entry and exit pages, time spent, device type, browser type and country.
 55 | It does not rely on any cookies to collect data, meaning individual users are not tracked.
 56 | Website statistics are anonymous and may be stored undefinitely.
 57 | 
 58 | **Logs and metrics:**
 59 | We collect technical data about every interaction with our service.
 60 | This may include your operating system, device type, browser type, IP address, time of access, loading time, HTTP status code and crash reports.
 61 | Logs and metrics may be stored up to one year.
 62 | 
 63 | ## How we use collected data
 64 | 
 65 | **To provide the service:**
 66 | First and foremost, we use aforementioned collected data to provide you with a service.
 67 | 
 68 | **To communicate with you about the service:**
 69 | We may use collected data to send you emails or Slack messages about your service usage.
 70 | For example, we may send you notifications when you reached a quota, or if your payment was declined.
 71 | 
 72 | **For research and development:**
 73 | We may use collected data for analytics purposes.
 74 | This allows us to better understand how you use our service, and to improve it.
 75 | 
 76 | **To protect our legitimate business interests and legal rights:**
 77 | Where required by law or where we believe it is necessary to protect our legal rights, interests and the interests of others, we use information about you in connection with legal claims, compliance, regulatory, and audit functions, and disclosures in connection with the acquisition, merger or sale of a business.
 78 | 
 79 | ## How we share collected information
 80 | 
 81 | We share collected information with a restricted set of third party services, also known as sub-processors.
 82 | 
 83 | **Fathom:**
 84 | Fathom is our privacy-preserving website analytics provider.
 85 | They have access to website statistics.
 86 | Please refer to [Fathom's Privacy Policy](https://usefathom.com/privacy) to learn more about how they process data.
 87 | 
 88 | **Cloudflare:**
 89 | Cloudflare is our CDN (Content Delivery Network) provider.
 90 | Every request to our app goes through Cloudflare first.
 91 | They have access to access logs.
 92 | 
 93 | Cloudflare is also our blob storage provider.
 94 | They have access to rendered graphs.
 95 | Please refer to [Cloudflare's Privacy Policy](https://www.cloudflare.com/en-gb/privacypolicy/) to learn more about how they process data.
 96 | 
 97 | **Slack:**
 98 | Slack is the platform with which you interact with GraphMe.
 99 | They have access to your interactions with our service.
100 | Please refer to [Slack's Privacy Policy](https://slack.com/trust/privacy/privacy-policy) to learn more about how they process data.
101 | 
102 | **Stripe:**
103 | Stripe is our payment provider.
104 | They have access to payment information.
105 | Please refer to [Stripe's Privacy Policy](https://stripe.com/fr/privacy) to learn more about how they process data.
106 | 
107 | **Sentry:**
108 | Sentry is our error tracking system.
109 | They have access to errors that may happen when you use our service.
110 | Please refer to [Stripe's Privacy Policy](https://sentry.io/privacy/) to learn more about how they process data.
111 | 
112 | **Logtail:**
113 | Logtail is our logging system.
114 | They have access to various logs such as access logs and system logs.
115 | Please refer to [Logtail's Privacy Policy](https://betterstack.com/privacy) to learn more about how they process data.
116 | 
117 | **Grafana Cloud:**
118 | Grafana Cloud is our observability system.
119 | They have access to access metrics and usage statistics.
120 | Please refer to [Grafana's Privacy Policy](https://grafana.com/legal/privacy-policy/) to learn more about how they process data.
121 | 
122 | ## Your rights
123 | 
124 | We follow the GDPR framework, which gives you the following rights.
125 | 
126 | ### The right to be informed
127 | 
128 | You have the right to be informed about how we collect and use your personal data.
129 | This is the purpose of this privacy policy.
130 | 
131 | ### The right of access
132 | 
133 | You have the right to receive a copy of personal data we collected about you.
134 | 
135 | ### The right to rectification
136 | 
137 | You have the right to correct your personal data if it is incorrect.
138 | 
139 | ### The right to erasure
140 | 
141 | You have the right to get your personal data deleted.
142 | This is not an absolute right, there are exceptions that may prevent us from completing such as request.
143 | 
144 | ### The right to restrict processing
145 | 
146 | Alternatively to removing your personal data, you have the right to restrict how we use it.
147 | We will still store your personal data, but stop processing it.
148 | This is not an absolute right, there are exceptions that may prevent us from completing such as request.
149 | 
150 | ### The right to data portability
151 | 
152 | You have the right to export your personal data in a machine readable format, and reuse it for your own purpose in a different service.
153 | 
154 | ### The right to object
155 | 
156 | You have the right to object the processing of your personal data.
157 | In particular, you have the right to object your personal data being used for marketing purposes.
158 | 
159 | ## Request data deletion
160 | 
161 | Regardless of whether you are subject to the GDPR, you can always request your data to be deleted by reaching out to us at hello@graphme.app
162 | 
163 | ## Changes to our privacy policy
164 | 
165 | We may change this privacy policy from time to time.
166 | In case of a significant change, we will notify you by email or Slack.
167 | We recommend anyway that you periodically review this privacy policy.
168 | 
169 | ## Contact us
170 | 
171 | If you have questions or concerns, or wish to exercise your data rights, including data deletion, please contact us at hello@graphme.app


--------------------------------------------------------------------------------
/src/pages/support.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: /src/layouts/PageLayout.astro
 3 | title: Support
 4 | ---
 5 | 
 6 | # Support
 7 | 
 8 | We offer support for all customers, both on paid and non-paid plans via email.
 9 | 
10 | Please contact us at hello@graphme.app for any support request.


--------------------------------------------------------------------------------
/src/pages/terms.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: /src/layouts/PageLayout.astro
 3 | title: Terms of service
 4 | ---
 5 | 
 6 | # Terms of service
 7 | 
 8 | :::note
 9 | Last updated: March 2023
10 | :::
11 | 
12 | ## Use of the service
13 | 
14 | To use the service, you need to create an account using your Slack identity.
15 | By using our service, you accept those terms.
16 | 
17 | The Free plan is offered free of charge, no credit card required.
18 | You can also upgrade to one of our paid plans at any time.
19 | Until you cancel your subscription, the latter will renewed automatically for the next billing period, and your credit card charged.
20 | If you are unable to access our application, you may cancel your subscription by contacting us.
21 | In case we cannot collect your payment, your subscription will be cancelled.
22 | 
23 | Access to the service is permitted on a temporary basis.
24 | We reserve the right to modify or discontinue offering or updating the service at any time without notice.
25 | 
26 | ## Account termination
27 | 
28 | Your account may be terminated at any time if:
29 | * you breach the agreement formed by those terms of services.
30 | * we consider it necessary to protect the integrity of our service.
31 | 
32 | In such a situation, we will notify you by email or Slack.
33 | 
34 | ## Liability
35 | 
36 | To the maximum extent permitted by law, the service is provided on an "as is" and "as available" basis.
37 | We make no warranties, may it be expressed or implied, therefore negates all other warranties. 
38 | We are not responsible for any delays, delivery failures, service unavailability, or any loss or damage resulting from your usage of our service.
39 | You understand that you are using the service at your own discretion and risk.
40 | 
41 | ## Limitations
42 | 
43 | We will not be hold accountable for any damages that will arise with the use or inability to use our service, even if an authorized representative has been notified, orally or written, of the possibility of such damage.
44 | 
45 | ## Privacy
46 | 
47 | We process your personal information in accordance with [our privacy policy](/privacy).
48 | 
49 | ## Changes to our terms of service
50 | 
51 | We may change those terms of service from time to time.
52 | In case of a significant change, we will notify you by email or Slack.
53 | We recommend anyway that you periodically review those terms of service.
54 | 
55 | ## Governing law
56 | 
57 | Any claim related to our service shall be governed by the French law.
58 | 
59 | ## Contact us
60 | 
61 | If you have questions or concerns, please contact us at hello@graphme.app


--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   @font-face {
 7 |     font-family: 'Mona Sans';
 8 |     src:
 9 |       url('/fonts/Mona-Sans.woff2') format('woff2 supports variations'),
10 |       url('/fonts/Mona-Sans.woff2') format('woff2-variations');
11 |     font-weight: 200 900;
12 |     font-stretch: 75% 125%;
13 |   }
14 | 
15 |   @font-face {
16 |     font-family: 'Hubot Sans';
17 |     src:
18 |       url('/fonts/Hubot-Sans.woff2') format('woff2 supports variations'),
19 |       url('/fonts/Hubot-Sans.woff2') format('woff2-variations');
20 |     font-weight: 200 900;
21 |     font-stretch: 75% 125%;
22 |   }
23 | }
24 | 
25 | /* https://github.com/Microflash/remark-callout-directives */
26 | .callout {
27 |   @apply px-4 mb-2 flex items-center border-t-4;
28 | }
29 | 
30 | .callout-title {
31 |   @apply hidden;
32 | }
33 | 
34 | .callout-content {
35 |   @apply ml-2;
36 | }
37 | 
38 | .callout-assert {
39 |   @apply text-blue-700 bg-blue-100;
40 | }
41 | 
42 | .callout-warn {
43 |   @apply text-yellow-700 bg-yellow-100 border-yellow-500;
44 | }
45 | 
46 | .callout-deter {
47 |   @apply text-red-700 bg-red-100 border-red-500;
48 | }
49 | 
50 | .callout-commend {
51 |   @apply text-green-700 bg-green-100 border-green-500;
52 | }
53 | 
54 | .callout-assert {
55 |   @apply text-blue-700 bg-blue-100 border-blue-500;
56 | }
57 | 
58 | .callout-note {
59 |   @apply text-gray-700 bg-gray-100 border-gray-500 ;
60 | }


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 | 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'],
 6 | 	theme: {
 7 | 		fontFamily: {
 8 | 			'sans': ['Mona Sans', ...defaultTheme.fontFamily.sans],
 9 | 		},
10 | 		extend: {
11 | 			colors: {
12 | 				aubergine: "rgb(63,14,64)",
13 | 				// Generated from https://uicolors.app/create
14 | 				primary: {
15 | 					'50': '#ebf1ff',
16 | 					'100': '#dbe5ff',
17 | 					'200': '#beceff',
18 | 					'300': '#96aeff',
19 | 					'400': '#6d81ff',
20 | 					'500': '#4b56ff',
21 | 					'600': '#2f2bff',
22 | 					'700': '#271fe3',
23 | 					'800': '#201db6',
24 | 					'900': '#191970',
25 | 				},				
26 | 			},
27 | 		},
28 | 	},
29 | 	plugins: [
30 | 		require('@tailwindcss/typography'),
31 | 	],
32 | }
33 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict",
3 |   "compilerOptions": {
4 |     "jsx": "react-jsx",
5 |     "jsxImportSource": "react"
6 |   }
7 | }


--------------------------------------------------------------------------------