Skip to content

Commit

Permalink
Introduce the developer hub (#496)
Browse files Browse the repository at this point in the history
  • Loading branch information
lukqw committed Mar 30, 2023
1 parent cc1fd85 commit 31cc483
Show file tree
Hide file tree
Showing 84 changed files with 1,793 additions and 20 deletions.
8 changes: 8 additions & 0 deletions assets/scss/_styles_project.scss
Expand Up @@ -167,6 +167,14 @@ body > header {
background-image: url("/images/understanding.svg");
}

& .card-tutorials .card-body {
background-image: url("/images/understanding.svg");
}

& .card-applications .card-body {
background-image: url("/images/aws.svg");
}

& .card-title i {
font-size: 85%;
}
Expand Down
14 changes: 14 additions & 0 deletions content/en/applications/_index.md
@@ -0,0 +1,14 @@
---
title: Applications
linkTitle: Applications
description: >
LocalStack Applications provide sample templates to help LocalStack users adopt real-world scenarios to rapidly and conveniently create, configure, and deploy applications locally. These sample applications help you establish your foundations in LocalStack and offer you a wide range of use cases and scenarios, all supported by LocalStack, to help you develop and test cloud applications efficiently.
main_menu: false
weight: 20
type: applications
cascade:
type: docs
hide_feedback: true
hide_readingtime: true
dev_hub: true
---
Empty file added content/en/applications/temp.md
Empty file.
52 changes: 52 additions & 0 deletions content/en/developer-hub/_index.html
@@ -0,0 +1,52 @@
---
title: Developer Hub
linkTitle: Overview
main_menu: false
weight: 1
menu:
main:
name: "Developer Hub"
weight: 10
cascade:
type: docs
hide_feedback: true
hide_readingtime: true
dev_hub: true
---

<div class="doc-overview-grid container" xmlns="http://www.w3.org/1999/html">

<div class="row mb-3 justify-content-center">
<div class="col-auto mb-2">
<img src="/images/localstack.svg" alt="LocalStack logo" width="75px">
</div>
<div class="col-auto">
<p class="lead text-center">
<b>LocalStack Developer Hub</b><br>
<br/>
Get started with developing and testing cloud & serverless applications locally with LocalStack. Explore our sample applications and step-by-step tutorials to unlock LocalStack's frictionless, integrated cloud developer experience.
</p>
</div>
</div>

<div class="row mb-4">
<div class="col-sm-12 col-md-6">
<a class="card card-tutorials h-100" href="{{< ref "tutorials" >}}">
<div class="card-body">
<h5 class="card-title">Tutorials</h5>
<p class="card-text">Learn LocalStack concepts while building simple projects. Find each tutorial walking you through fundamentals of cloud & serverless development with local AWS services to get you started with LocalStack.
</p>
</div>
</a>
</div>
<div class="col-sm-12 col-md-6">
<a class="card card-applications h-100" href="{{< ref "applications" >}}">
<div class="card-body">
<h5 class="card-title">Applications</h5>
<p class="card-text">Learn to simplify cloud development while setting up local cloud infrastructure with LocalStack! Find application samples walking you through various services, integrations, and more while achieving real-world use cases!</p>
</div>
</a>
</div>
</div>

</div>
36 changes: 18 additions & 18 deletions content/en/overview/_index.html
Expand Up @@ -13,7 +13,7 @@
hide_readingtime: true
---

<div class="doc-overview-grid container">
<div class="doc-overview-grid container section-index">

<div class="row mb-3 justify-content-center">
<div class="col-auto mb-2">
Expand All @@ -27,49 +27,49 @@
</div>

<div class="row mb-4">
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="card card-getting-started" href="{{< ref "getting-started" >}}">
<div class="entry col-sm-12 col-md-6 col-lg-4">
<a class="card card-getting-started h-100" href="{{< ref "getting-started" >}}">
<div class="card-body">
<h5 class="card-title">Get Started</h5>
<p class="card-text">Install and run LocalStack on your machine, and discover the benefits of local cloud development.</p>
</div>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="card card-integrations" href="{{< ref "integrations" >}}">
<div class="entry col-sm-12 col-md-6 col-lg-4">
<a class="card card-integrations h-100" href="{{< ref "integrations" >}}">
<div class="card-body">
<h5 class="card-title">Integrations</h5>
<p class="card-text">Use your favorite cloud development framework with LocalStack: CDK, Terraform, Serverless, and more!</p>
</div>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="card card-localstack-in-ci" href="{{< ref "user-guide/ci">}}">
<div class="entry col-sm-12 col-md-6 col-lg-4">
<a class="card card-localstack-in-ci h-100" href="{{< ref "user-guide/ci">}}">
<div class="card-body">
<h5 class="card-title">LocalStack in CI</h5>
<p class="card-text">Use LocalStack in your Continuous Integration pipelines.</p>
</div>
</a>
</div>

<div class="col-sm-12 col-md-6 col-lg-4">
<a class="card card-local-aws-services" href="{{< ref "aws" >}}">
<div class="entry col-sm-12 col-md-6 col-lg-4">
<a class="card card-local-aws-services h-100" href="{{< ref "aws" >}}">
<div class="card-body">
<h5 class="card-title">Local AWS Services</h5>
<p class="card-text">Browse through the AWS Services that LocalStack emulates.</p>
</div>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="card card-localstack-tools" href="{{< ref "user-guide/tools" >}}">
<div class="entry col-sm-12 col-md-6 col-lg-4">
<a class="card card-localstack-tools h-100" href="{{< ref "user-guide/tools" >}}">
<div class="card-body">
<h5 class="card-title">LocalStack Tools</h5>
<p class="card-text">Learn how to use <em>LocalStack Cloud Developer Tools</em> to boost your efficiency.</p>
</div>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="card card-understanding-localstack" href="{{< ref "references" >}}">
<div class="entry col-sm-12 col-md-6 col-lg-4">
<a class="card card-understanding-localstack h-100" href="{{< ref "references" >}}">
<div class="card-body">
<h5 class="card-title">Understanding LocalStack</h5>
<p class="card-text">Learn how LocalStack works and how you can tweak it for your use case.</p>
Expand All @@ -80,10 +80,10 @@ <h5 class="card-title">Understanding LocalStack</h5>

</div>

<div class="doc-overview-grid container">
<div class="doc-overview-grid container section-index">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-7">
<div class="card">
<div class="entry col-sm-12 col-md-12 col-lg-7">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title"><i class="fa fa-book"></i> Featured guides and articles</h5>
<p class="card-text">
Expand All @@ -101,8 +101,8 @@ <h5 class="card-title"><i class="fa fa-book"></i> Featured guides and articles</
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-5">
<div class="card">
<div class="entry col-sm-12 col-md-12 col-lg-5">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title"><i class="fa fa-life-ring"></i> Help</h5>
<p class="card-text">
Expand Down
7 changes: 5 additions & 2 deletions content/en/tutorials/_index.md
@@ -1,14 +1,17 @@
---
title: "Tutorials"
linkTitle: "Tutorials"
weight: 5
weight: 10
description: >
The goal of these tutorials is to help you create a mental model for how LocalStack works.
These tutorials enhance your comprehension of LocalStack's functionality by providing detailed information on how it works for specific use cases using diverse resources. These guides help you set up and build your local cloud development & testing environment with the help of LocalStack, using local AWS services, integrations, and tools, helping create a mental model for how LocalStack works. For community contributed tutorials, check out the [LocalStack Community Tutorials](https://hashnode.localstack.cloud/).
<br></br>
cascade:
type: docs
slug: tutorials
hide_feedback: true
hide_readingtime: true
dev_hub: true
type: tutorials
---

<!-- this div is used as a reference point of where to apply custom style to the list of subcontent -->
Expand Down
70 changes: 70 additions & 0 deletions data/developerhub/applications.json
@@ -0,0 +1,70 @@
{
"applications": [
{
"title": "Serverless Container-based APIs with Amazon ECS & API Gateway",
"description": "Deploy a Full-Stack Serverless Web application, and deploy it with Terraform & CloudFormation on LocalStack",
"url": "https://github.com/localstack/serverless-api-ecs-apigateway-sample",
"teaser": "https://raw.githubusercontent.com/localstack/serverless-api-ecs-apigateway-sample/main/images/serverless-container-api.png",
"services": ["ddb", "agw", "iam", "cgn", "ecs"],
"deployment": ["terraform", "awscli","cloudformation"],
"platform": ["javascript"],
"tags": ["serverless-containers", "security", "identity", "compliance"],
"pro": true
},
{
"title": "Full-Stack application with AWS Lambda, DynamoDB & S3 for shipment validation",
"description": "Configure a CRUD web application for shipment validation & listing, and deploy it with Terraform on LocalStack",
"url": "https://github.com/localstack/shipment-list-demo",
"teaser": "https://raw.githubusercontent.com/localstack/shipment-list-demo/master/app_diagram.png",
"services": ["s3", "ddb", "lmb", "iam"],
"deployment": ["terraform"],
"platform": ["java", "react"],
"tags": ["spring-boot", "lambda-trigger"],
"pro": false
},
{
"title": "Step-up Authentication using Amazon Cognito",
"description": "Setup a Step-up Authentication workflow for a higher level of security, deployed using Cloud Development Kit on LocalStack",
"url": "https://github.com/localstack/step-up-auth-sample",
"teaser": "https://raw.githubusercontent.com/localstack/step-up-auth-sample/main/images/step-up-architecture.png",
"services": ["agw", "lmb", "ddb", "cgn"],
"deployment": ["cdk", "awscli"],
"platform": ["typescript","javascript"],
"tags": ["step-up-auth", "rule-based-authentication", "localsurf"],
"pro": true
},
{
"title": "Serverless microservices with Amazon API Gateway, DynamoDB, SQS, and Lambda",
"description": "Serverless microservices for managing friend state in gaming services asynchronously deployed using Cloud Development Kit on LocalStack",
"url": "https://github.com/localstack/microservices-apigateway-lambda-dynamodb-sqs-sample",
"teaser": "https://raw.githubusercontent.com/localstack/microservices-apigateway-lambda-dynamodb-sqs-sample/main/images/microservices-apigateway-lambda-dynamodb-sqs-sample-architecture.png",
"services": ["lmb", "agw", "ddb", "sqs"],
"deployment": ["cdk"],
"platform": ["typescript"],
"tags": ["serverless", "microservices"],
"pro": true
},
{
"title": "Event-driven architecture with Amazon SNS FIFO, DynamoDB, Lambda, and S3",
"description": "Event-driven architecture demonstrating a recruiting agency application deployed using Serverless Application Model on LocalStack",
"url": "https://github.com/localstack/event-driven-architecture-with-amazon-sns-fifo",
"teaser": "https://raw.githubusercontent.com/localstack/event-driven-architecture-with-amazon-sns-fifo/master/images/architecture.png",
"services": ["sqs", "lmb", "ddb", "sns", "s3"],
"deployment": ["samlocal", "sam"],
"platform": ["python"],
"tags": ["serverless", "event-driven-architecture"],
"pro": true
},
{
"title": "Note-Taking application using AWS SDK for JavaScript",
"description": "The Note-Taking app is a serverless web app using API Gateway, Lambda, DynamoDB services. It has a React-based frontend and can be deployed on LocalStack.",
"url": "https://github.com/localstack/aws-sdk-js-notes-app",
"teaser": "https://raw.githubusercontent.com/localstack/aws-sdk-js-notes-app/main/aws-sdk-js-notes.png",
"services": ["agw", "lmb", "ddb"],
"deployment": ["awslocal", "cdklocal"],
"platform": ["typescript", "javascript"],
"tags": ["serverless"],
"pro": true
}
]
}
115 changes: 115 additions & 0 deletions layouts/applications/list.html
@@ -0,0 +1,115 @@
<!doctype html>
<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" class="no-js">
<head>
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
<header>
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-outer">
<div class="td-main">
<div class="row flex-xl-nowrap">
<aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
{{ partial "sidebar.html" . }}
</aside>
<aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none">
{{ partial "page-meta-links.html" . }}
{{ partial "toc.html" . }}
{{ partial "taxonomy_terms_clouds.html" . }}
</aside>
<main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
{{ partial "version-banner.html" . }}
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
<div class="td-content">
<h1>{{ .Title }}</h1>
{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
<header class="article-meta">
{{ partial "taxonomy_terms_article_wrapper.html" . }}
{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) }}
{{ partial "reading-time.html" . }}
{{ end }}
</header>
{{ .Content }}

<div class="section-index">
{{ $parent := .Page }}
{{ $pages := (where .Site.Pages "Section" .Section).ByWeight }}
{{ $pages = (where $pages "Type" "!=" "search") }}
{{ $pages = (where $pages ".Params.hide_summary" "!=" true) }}
{{ $pages = (where $pages ".Parent" "!=" nil) }}
{{ $pages = (where $pages "Parent.File.UniqueID" "==" $parent.File.UniqueID) }}
{{ if or $parent.Params.no_list (eq (len $pages) 0) }}
{{/* If no_list is true or we don't have subpages we don't show a list of subpages */}}
{{ else }}
{{/* Otherwise we show a nice formatted list of subpages with page descriptions */}}
<hr class="panel-line">

<div class="row">
<div class="col-sm-12">
<div class="row">
{{ range $.Site.Data.developerhub.applications.applications }}
<div class="entry col-xs-12 col-sm-6 col-md-4 ">
<div class="card h-100">
<div>
<img src="{{.teaser}}" >
</div>
<div class="card-body">
<h5 class="card-title d-flex align-items-center">
<a class="stretched-link mr-2" href="{{ .url }}">
{{ with .title }}{{ . }}{{end}}
</a>
</h5>
<div>
{{ range .services }}
<img src="/images/services/{{ . }}.svg" style="border-radius: 4px; max-width: 30px;margin-right: 5px">
{{ end }}
{{ with .pro }}
<img src="/images/pro-badge.png" style="border-radius: 4px; max-width: 30px;margin-right: 5px">
{{ end }}
</div>
<div>
{{ range .tags }}
<span class="badge badge-primary" style="font-weight: normal;">{{ . }}</span>
{{ end }}
</div>
<br>

<p class="card-text" style="font-weight: normal;">{{.description}}</p>
</div>
</div>
</div>
{{ end }}

</div>
</div>
</div>

{{ end }}
</div>

{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
{{ partial "feedback.html" .Site.Params.ui.feedback }}
<br />
{{ end }}
{{ if (.Site.DisqusShortname) }}
<br />
{{ partial "disqus-comment.html" . }}
{{ end }}
{{ partial "page-meta-lastmod.html" . }}
</div>
</main>
</div>
</div>
{{ partial "footer.html" . }}
</div>
{{ partial "scripts.html" . }}
</body>
<style>
.social-share > .reading-time {
display: flex;
align-items: center;
margin: 0;
}
</style>
</html>

0 comments on commit 31cc483

Please sign in to comment.