Skip to content

Commit 1eeda32

Browse files
HarshCasperHarshCasper
authored
implement the networking layout (#48)
1 parent b21c906 commit 1eeda32

File tree

3 files changed

+205
-7
lines changed

3 files changed

+205
-7
lines changed

‎src/components/CardGridLayout.astro

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
export interface GridCard {
3+
title: string;
4+
href: string;
5+
imageSrc: string;
6+
imageWidth?: number;
7+
}
8+
9+
interface Props {
10+
cards: GridCard[];
11+
}
12+
13+
const { cards } = Astro.props;
14+
---
15+
16+
<div class="row mt-4">
17+
{cards.map((card) => (
18+
<div class="col-lg-12 col-xl-6 d-flex justify-content-center">
19+
<a
20+
href={card.href}
21+
class="justify-content-between d-flex flex-column text-center"
22+
style="text-decoration: none; color: inherit;"
23+
>
24+
<strong>{card.title}</strong>
25+
<img
26+
src={card.imageSrc}
27+
alt={card.title}
28+
width={card.imageWidth || 400}
29+
style="margin: 1rem 0;"
30+
/>
31+
</a>
32+
</div>
33+
))}
34+
</div>
35+
36+
<style>
37+
.row {
38+
display: flex;
39+
flex-wrap: wrap;
40+
margin-left: -0.75rem;
41+
margin-right: -0.75rem;
42+
}
43+
44+
.mt-4 {
45+
margin-top: 1rem;
46+
}
47+
48+
.col-lg-12 {
49+
flex: 0 0 100%;
50+
max-width: 100%;
51+
padding-left: 0.75rem;
52+
padding-right: 0.75rem;
53+
}
54+
55+
.col-xl-6 {
56+
flex: 0 0 50%;
57+
max-width: 50%;
58+
}
59+
60+
@media (max-width: 1200px) {
61+
.col-xl-6 {
62+
flex: 0 0 100%;
63+
max-width: 100%;
64+
}
65+
}
66+
67+
@media (max-width: 992px) {
68+
.col-lg-12 {
69+
flex: 0 0 100%;
70+
max-width: 100%;
71+
}
72+
}
73+
74+
.d-flex {
75+
display: flex;
76+
}
77+
78+
.justify-content-center {
79+
justify-content: center;
80+
}
81+
82+
.justify-content-between {
83+
justify-content: space-between;
84+
}
85+
86+
.flex-column {
87+
flex-direction: column;
88+
}
89+
90+
.text-center {
91+
text-align: center;
92+
}
93+
94+
a {
95+
color: inherit;
96+
text-decoration: none;
97+
}
98+
99+
a:hover {
100+
text-decoration: underline;
101+
}
102+
103+
strong {
104+
margin-bottom: 1rem;
105+
display: block;
106+
}
107+
</style>

‎src/content/docs/aws/capabilities/networking/index.md

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/content/docs/aws/capabilities/networking/index.mdx

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: Overview
3+
description: This section describes the networking capabilities of LocalStack, and how to configure them to suit your needs.
4+
template: doc
5+
sidebar:
6+
order: 1
7+
---
8+
9+
import CardGridLayout from '../../../../../components/CardGridLayout.astro';
10+
11+
## Troubleshooting
12+
13+
If you have difficulties connecting your application code to LocalStack, please choose the scenario below that best describes your networking layout.
14+
15+
:::tip
16+
LocalStack only binds to IPv4 addresses (e.g. `127.0.0.1`). Check you are not trying to access LocalStack over IPv6.
17+
:::
18+
19+
## [Using the endpoint URL](/aws/capabilities/networking/accessing-endpoint-url)
20+
21+
For example, setting the `endpoint_url` parameter with an [AWS SDK](/aws/integrations/aws-sdks/).
22+
23+
<CardGridLayout cards={[
24+
{
25+
title: "From the same computer",
26+
href: "/aws/capabilities/networking/accessing-endpoint-url#from-the-same-computer",
27+
imageSrc: "/images/aws/1.svg",
28+
imageWidth: 400
29+
},
30+
{
31+
title: "From a container LocalStack created",
32+
href: "/aws/capabilities/networking/accessing-endpoint-url#from-a-container-localstack-created",
33+
imageSrc: "/images/aws/4.svg",
34+
imageWidth: 400
35+
},
36+
{
37+
title: "From your container",
38+
href: "/aws/capabilities/networking/accessing-endpoint-url#from-your-container",
39+
imageSrc: "/images/aws/7.svg",
40+
imageWidth: 400
41+
},
42+
{
43+
title: "From a separate host",
44+
href: "/aws/capabilities/networking/accessing-endpoint-url#from-a-separate-host",
45+
imageSrc: "/images/aws/10.svg",
46+
imageWidth: 400
47+
}
48+
]} />
49+
50+
## [Using transparent endpoint injection](/aws/capabilities/networking/transparent-endpoint-injection)
51+
52+
For example, you have a Lambda function that needs to access LocalStack resources.
53+
54+
<CardGridLayout cards={[
55+
{
56+
title: "From your host",
57+
href: "/aws/capabilities/networking/transparent-endpoint-injection#from-your-host",
58+
imageSrc: "/images/aws/2.svg",
59+
imageWidth: 400
60+
},
61+
{
62+
title: "From a lambda function",
63+
href: "/aws/capabilities/networking/transparent-endpoint-injection#from-a-lambda-function",
64+
imageSrc: "/images/aws/5.svg",
65+
imageWidth: 400
66+
}
67+
]} />
68+
69+
## [Accessing a resource created by LocalStack](/aws/capabilities/networking/accessing-resources-created)
70+
71+
For example, you have created an OpenSearch cluster and are trying to access that resource by its URL.
72+
73+
<CardGridLayout cards={[
74+
{
75+
title: "From your host",
76+
href: "/aws/capabilities/networking/accessing-resources-created#from-your-host",
77+
imageSrc: "/images/aws/3.svg",
78+
imageWidth: 300
79+
},
80+
{
81+
title: "From a container LocalStack created",
82+
href: "/aws/capabilities/networking/accessing-resources-created#from-a-container-localstack-created",
83+
imageSrc: "/images/aws/6.svg",
84+
imageWidth: 300
85+
},
86+
{
87+
title: "From your container",
88+
href: "/aws/capabilities/networking/accessing-resources-created#from-your-container",
89+
imageSrc: "/images/aws/9.svg",
90+
imageWidth: 300
91+
},
92+
{
93+
title: "From a separate host",
94+
href: "/aws/capabilities/networking/accessing-resources-created#from-a-separate-host",
95+
imageSrc: "/images/aws/12.svg",
96+
imageWidth: 300
97+
}
98+
]} />

0 commit comments

Comments
 (0)