Skip to content

Commit

Permalink
Made Technology-Specific Guides its own page so that we can link to it (
Browse files Browse the repository at this point in the history
#1216)

* frameworks page

* fix links
  • Loading branch information
maria-statsig authored Jan 25, 2024
1 parent 1414e58 commit 4cbe79f
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 44 deletions.
35 changes: 35 additions & 0 deletions docs/guides/frameworks-introduction.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
title: Technology-Specific Guides
sidebar_label: Technology-Specific Guides
slug: /guides/frameworks
---

import OutlinedCard from "@site/src/components/OutlinedCard";

<div
style={{
display: "flex",
flexWrap: "wrap",
}}
>
<OutlinedCard
title="How to set up feature Flags in Python with Flask"
icon="tune"
link="/guides/python-flask-feature-flags"
></OutlinedCard>
<OutlinedCard
title="Run an A/B Test with Python Flask"
icon="science"
link="/guides/python-flask-abtests"
></OutlinedCard>
<OutlinedCard
title="Feature Flags in NodeJS ExpressJS"
icon="science"
link="/guides/node-express-feature-flags"
></OutlinedCard>
<OutlinedCard
title="Experimenting in NodeJS ExpressJS"
icon="science"
link="/guides/node-express-abtests"
></OutlinedCard>
</div>
18 changes: 10 additions & 8 deletions sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,17 @@ module.exports = {
],
},
{
"Technology-Specific Guides":[
type: "category",
label: "Technology-Specific Guides",
link: {
type: "doc",
id: "guides/frameworks-introduction",
},
items: [
"guides/python-flask-feature-flags",
"guides/python-flask-abtests",
"guides/node-express-feature-flags",
"guides/node-express-abtests"
"guides/node-express-abtests",
],
},
"guides/synchronized-launch",
Expand Down Expand Up @@ -254,11 +260,7 @@ module.exports = {
{
type: "category",
label: "Metric Explorer",
items: [
"mex/drilldown",
"mex/funnels",
"mex/retention",
]
items: ["mex/drilldown", "mex/funnels", "mex/retention"],
},
"mex/dashboards",
{
Expand Down Expand Up @@ -321,7 +323,7 @@ module.exports = {
"statsig-warehouse-native/guides/pulse",
"statsig-warehouse-native/guides/sdks",
"statsig-warehouse-native/guides/aatest",
"statsig-warehouse-native/guides/running_a_poc"
"statsig-warehouse-native/guides/running_a_poc",
],
},
{
Expand Down
83 changes: 47 additions & 36 deletions src/components/OutlinedCard.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from "react";
import Card from "@mui/material/CardActions";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
import React from "react";

const ArrowButton = ({ link }) => (
<IconButton
Expand All @@ -25,53 +25,64 @@ const ArrowButton = ({ link }) => (
</IconButton>
);

export default function({ title, description, icon, link }) {
return <Card
style={{
minWidth: "240px",
margin: "16px",
flex: "0 0 28%",
display: "flex",
flexDirection: "column",
padding: "16px",
boxShadow: "0 6px 16px rgba(0, 0, 0, 0.06)",
border: 0,
}}
>
<div
export default function ({ title, description, icon, link }) {
const arrowButton = (
<CardActions
style={{
fontWeight: "bold",
padding: 0,
display: "flex",
flexDirection: "row",
justifyContent: "flex-start",
alignContent: "space-between",
alignItems: "center",
justifyContent: "flex-end",
}}
>
<Icon style={{ color: "#194b7d" }}>{icon}</Icon>
<div style={{ paddingLeft: "8px" }}>{title}</div>
</div>
<CardContent
<ArrowButton link={link} />
</CardActions>
);

return (
<Card
style={{
padding: 0,
paddingTop: "4px",
minWidth: "240px",
margin: "16px",
flex: "0 0 28%",
display: "flex",
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
padding: "16px",
boxShadow: "0 6px 16px rgba(0, 0, 0, 0.06)",
border: 0,
}}
>
<p>{description}</p>
<CardActions
<div
style={{
padding: 0,
fontWeight: "bold",
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
justifyContent: "flex-start",
alignContent: "space-between",
alignItems: "center",
}}
>
<ArrowButton link={link} />
</CardActions>
</CardContent>
</Card>
};
<Icon style={{ color: "#194b7d" }}>{icon}</Icon>
<div style={{ paddingLeft: "8px" }}>{title}</div>
{!description && (
<div style={{ paddingLeft: "30px" }}>{arrowButton}</div>
)}
</div>
{description && (
<CardContent
style={{
padding: 0,
paddingTop: "4px",
display: "flex",
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
}}
>
<p>{description}</p>
{arrowButton}
</CardContent>
)}
</Card>
);
}

0 comments on commit 4cbe79f

Please sign in to comment.