Highlight top features better on the site
This commit is contained in:
Vikram Rangnekar
parent
aa9a4e3dc4
commit
72f8650ac0
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="bg-white ">
|
||||
<div class="container mx-auto" style="background-color: #f3f9fd;">
|
||||
<div class="mt-16">
|
||||
<main aria-labelledby="main-title" >
|
||||
<Navbar
|
||||
@toggle-sidebar="toggleSidebar"
|
||||
/>
|
||||
|
||||
<div class="flex flex-col xl:flex-row border-b pb-8">
|
||||
<div class="xl:w-2/4 p-4 md:p-16 xl:pr-4">
|
||||
<div class="text-center xl:text-left">
|
||||
<div>
|
||||
<div class="p-4 pt-12 border-white border-b-4">
|
||||
<div class="text-center">
|
||||
<h1 v-if="data.heroText !== null" class="text-5xl">{{ data.heroText || $title || 'Hello' }}</h1>
|
||||
|
||||
<p class="text-2xl text-gray-600 leading-tight mt-4 xl:mt-0">
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap"
|
||||
class="flex flex-wrap mx-2 md:mx-20"
|
||||
v-if="data.features && data.features.length"
|
||||
>
|
||||
<div
|
||||
class="w-2/4"
|
||||
class="w-2/4 md:w-1/3"
|
||||
v-for="(feature, index) in data.features"
|
||||
:key="index"
|
||||
>
|
||||
|
|
@ -37,17 +37,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="xl:w-2/4 hidden xl:block">
|
||||
<img
|
||||
class="mt-8 border rounded shadow-xl"
|
||||
v-if="data.heroImage"
|
||||
:src="$withBase(data.heroImage)"
|
||||
:alt="data.heroAlt || 'hero'"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="block xl:hidden">
|
||||
<div class="border-white border-b-4">
|
||||
<img
|
||||
v-if="data.heroImage"
|
||||
:src="$withBase(data.heroImageMobile)"
|
||||
|
|
@ -56,46 +47,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col xl:flex-row border-b mb-8">
|
||||
<div class="xl:w-2/4 pt-8 pl-4 md:pl-16 xl:border-r">
|
||||
<h1 class="font-semibold text-2xl mb-8">Try the demo</h1>
|
||||
|
||||
<pre class="text-xs md:text-lg text-black">
|
||||
<span class="text-green-700"># download super graph source</span>
|
||||
git clone https://github.com/dosco/super-graph.git
|
||||
|
||||
<span class="text-green-700"># setup the demo rails app & database and run it</span>
|
||||
./demo start
|
||||
|
||||
<span class="text-green-700"># signin to the demo app (user1@demo.com / 123456)</span>
|
||||
open http://localhost:3000
|
||||
|
||||
<span class="text-green-700"># try the super graph web ui</span>
|
||||
open http://localhost:8080
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="xl:w-2/4 pt-8 pl-4 md:pl-16">
|
||||
<h1 class="font-semibold text-2xl mb-8">Try a query</h1>
|
||||
|
||||
<pre class="text-xs md:text-lg text-black">
|
||||
<span class="text-green-700"># query to fetch users and their products</span>
|
||||
query {
|
||||
users {
|
||||
id
|
||||
email
|
||||
picture : avatar
|
||||
products(limit: 2, where: { price: { gt: 10 } }) {
|
||||
id
|
||||
name
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
<div class="theme-default-content markdown">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="mx-auto text-center py-8"
|
||||
v-if="data.footer"
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 372 KiB After Width: | Height: | Size: 146 KiB |
|
|
@ -1,5 +1,17 @@
|
|||
@tailwind base;
|
||||
|
||||
@css {
|
||||
.markdown h1 {
|
||||
@apply font-semibold text-2xl border-0 py-4
|
||||
}
|
||||
.markdown h2, .markdown h3, .markdown h4 {
|
||||
@apply font-semibold text-xl border-0 py-4
|
||||
}
|
||||
.markdown p {
|
||||
@apply py-2 text-lg
|
||||
}
|
||||
}
|
||||
|
||||
@tailwind components;
|
||||
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
|
|
@ -17,15 +17,30 @@ features:
|
|||
details: Can read Rails cookies and supports rails database conventions.
|
||||
- title: Serverless
|
||||
details: Designed for App Engine, Kubernetes, CloudRun, Horeku, AWS Fargate, etc
|
||||
- title: Fast and Secure
|
||||
details: Go is a language created at Google to build secure and fast web services.
|
||||
- title: Go Lang
|
||||
details: Go is a language created at Google to build fast and secure web services.
|
||||
- title: Free and Open Source
|
||||
details: Not a VC funded startup. Not even a startup just good old open source code
|
||||
footer: MIT Licensed | Copyright © 2018-present Vikram Rangnekar
|
||||
---
|
||||
|
||||
## Try the demo
|
||||
|
||||
## Try out GraphQL
|
||||
```bash
|
||||
# download super graph source
|
||||
git clone https://github.com/dosco/super-graph.git
|
||||
|
||||
# setup the demo rails app & database and run it
|
||||
./demo start
|
||||
|
||||
# signin to the demo app (user1@demo.com / 123456)
|
||||
open http://localhost:3000
|
||||
|
||||
# try the super graph web ui
|
||||
open http://localhost:8080
|
||||
```
|
||||
|
||||
## Try a query
|
||||
|
||||
```graphql
|
||||
query {
|
||||
|
|
@ -42,9 +57,9 @@ query {
|
|||
}
|
||||
```
|
||||
|
||||
## Why I built Super Graph?
|
||||
## Why Super Graph?
|
||||
|
||||
Honestly, cause it was more fun than my real work. After working on several product though my career I found myself hating building CRUD APIs (Create, Update, Delete, List, Show). It was always the same thing figure out what the UI needs then build an endpoint for it, if related data is needed than join with another table. I didn't want to write that code anymore I wanted the computer to just do it.
|
||||
After working on several product though my career I found building CRUD APIs (Create, Update, Delete, List, Show) to be a big part of the job. It was always the same thing figure out what the UI needs then build an endpoint for it, if related data is needed than join with another table. I didn't want to write that code anymore I wanted the computer to just do it.
|
||||
|
||||
I always liked GraphQL it sounded friendly, but it still required me to write all the same database query code. Sure the API was nicer but it took a lot of work sometime even more than a simple REST API would have. I wanted a GraphQL server that just worked the second you deployed it without having to write a line of code.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
// tailwind.config.js
|
||||
module.exports = {
|
||||
theme: {},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
/*
|
||||
module.exports = {
|
||||
prefix: '',
|
||||
important: false,
|
||||
|
|
@ -488,4 +496,5 @@ module.exports = {
|
|||
},
|
||||
corePlugins: {},
|
||||
plugins: [],
|
||||
}
|
||||
}
|
||||
*/
|
||||
Loading…
Reference in New Issue