From 2ff3fbbbbe86143512e775e55a567397e7f9d43c Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Fri, 29 Nov 2024 19:22:47 -0300 Subject: [PATCH 1/5] feat: service page finished and get caseStudies in markdown --- next/pages/api/caseStudies/index.js | 77 +++++++++++++++++++++++++++++ next/pages/faq.js | 2 +- next/pages/services.js | 33 ++++++++----- 3 files changed, 98 insertions(+), 14 deletions(-) create mode 100644 next/pages/api/caseStudies/index.js diff --git a/next/pages/api/caseStudies/index.js b/next/pages/api/caseStudies/index.js new file mode 100644 index 00000000..856e456f --- /dev/null +++ b/next/pages/api/caseStudies/index.js @@ -0,0 +1,77 @@ +import path from "path"; +import fs from "fs/promises"; +import matter from "gray-matter"; +import { serialize } from "next-mdx-remote/serialize"; +import remarkGfm from "remark-gfm"; +import rehypeSlug from "rehype-slug"; +import { fromMarkdown } from "mdast-util-from-markdown"; +import { visit } from "unist-util-visit"; + +const root = process.cwd(); + +export async function getAllCaseStudies(locale = 'pt') { + const caseStudiesDirRoot = path.join(root, `content/caseStudies/${locale}`); + const caseStudiesDir = await fs.readdir(caseStudiesDirRoot, "utf-8"); + + const caseStudies = await Promise.all( + caseStudiesDir.map(async (file) => { + const fullpath = path.join(caseStudiesDirRoot, file); + const content = await fs.readFile(fullpath, "utf-8"); + + const { data: metadata, content: caseStudiesContent } = matter(content); + + return { + ...metadata, + content: caseStudiesContent, + }; + }), + ); + + return caseStudies; +} + +export async function getCaseStudiesById(id, locale = 'pt') { + const caseStudiesDirRoot = path.join(root, `content/caseStudies/${locale}`); + + const filepath = path.join(caseStudiesDirRoot, `${id}.md`); + return await fs.readFile(filepath, "utf-8"); +} + +const remarkPluginCaption = () => (tree) => + visit( + tree, + (node) => + ["Image", "Video", "Embed", "Blockquote"].includes(node.name) && + node.attributes.find(({ name }) => name === "caption"), + (node) => { + const caption = node.attributes.filter(({ name }) => name === "caption"); + const tree = fromMarkdown(caption[0].value); + const children = tree.children.map((node) => ({ + ...node, + type: "figcaption", + })); + + if (node.name === "Embed") { + node.children[0].children = children; + } else if (node.name === "Blockquote") { + node.children = [...children, ...node.children]; + } else { + node.children = children; + } + + node.attributes = node.attributes.filter( + ({ name }) => name !== "caption", + ); + }, + ); + +export async function serializeCaseStudies(content) { + const mdxSource = await serialize(content, { + parseFrontmatter: true, + mdxOptions: { + remarkPlugins: [remarkGfm, remarkPluginCaption], + rehypePlugins: [rehypeSlug], + }, + }); + return mdxSource; +} diff --git a/next/pages/faq.js b/next/pages/faq.js index 3d28134a..a80e1ecb 100644 --- a/next/pages/faq.js +++ b/next/pages/faq.js @@ -30,7 +30,7 @@ import SearchIcon from "../public/img/icons/searchIcon"; import styles from "../styles/faq.module.css"; export async function getStaticProps({ locale }) { - const faqs = await getAllFAQs() + const faqs = await getAllFAQs(locale) return { props: { diff --git a/next/pages/services.js b/next/pages/services.js index 31fcefab..52d9a39b 100644 --- a/next/pages/services.js +++ b/next/pages/services.js @@ -10,24 +10,31 @@ import ImageNext from "next/image"; import Head from "next/head"; import { useTranslation } from 'next-i18next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; -import { CaseStudiesPaged } from "../content/caseStudies"; +import { isMobileMod, useCheckMobile } from "../hooks/useCheckMobile.hook"; +import { withPages } from "../hooks/pages.hook"; +import { MainPageTemplate } from "../components/templates/main"; + +import { + getAllCaseStudies +} from "./api/caseStudies" + import Display from "../components/atoms/Display"; import BodyText from "../components/atoms/BodyText"; import Link from "../components/atoms/Link"; import RoundedButton from "../components/atoms/RoundedButton"; import SectionText from "../components/atoms/SectionText"; import SectionTitle from "../components/atoms/SectionTitle"; -import { MainPageTemplate } from "../components/templates/main"; -import { withPages } from "../hooks/pages.hook"; -import { isMobileMod, useCheckMobile } from "../hooks/useCheckMobile.hook"; -import BDLogoLabImage from "../public/img/logos/bd_logo_lab" +import BDLogoLabImage from "../public/img/logos/bd_logo_lab" import CheckIcon from "../public/img/icons/checkIcon"; export async function getStaticProps({ locale }) { + const caseStudiesContent = await getAllCaseStudies(locale) + return { props: { + caseStudiesContent, ...(await serverSideTranslations(locale, ['common', 'services', 'menu'])), ...(await withPages()), }, @@ -207,13 +214,13 @@ function WorkflowBox({ order, title, subtitle, children}) { ) } -function CaseStudies ({}) { +function CaseStudies ({ data }) { const { t } = useTranslation('services'); const [CaseStudiesPages, setCaseStudiesPages] = useState([]) useEffect(() => { - setCaseStudiesPages(CaseStudiesPaged()) - },[]) + setCaseStudiesPages(data) + },[data]) return ( - {elm?.img.length > 0 ? + {elm?.img ? - {elm?.logo.img.length > 0 ? + {elm?.logo?.img ? - {elm.resume.slice(0,useCheckMobile() ? 160 :178)+"..."} + {elm?.resume && elm?.resume.slice(0,useCheckMobile() ? 160 :178)+"..."} - + Date: Fri, 29 Nov 2024 20:05:04 -0300 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20wip=20funda=C3=A7=C3=A3o-lemann=20m?= =?UTF-8?q?arkdown?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../content/caseStudies/pt/fundacao-lemann.md | 69 +++++++ next/content/caseStudies/pt/jota.md | 19 ++ next/pages/case-studies/[id].js | 178 +++++++++--------- next/styles/caseStudies.module.css | 1 - 4 files changed, 178 insertions(+), 89 deletions(-) create mode 100644 next/content/caseStudies/pt/fundacao-lemann.md create mode 100644 next/content/caseStudies/pt/jota.md diff --git a/next/content/caseStudies/pt/fundacao-lemann.md b/next/content/caseStudies/pt/fundacao-lemann.md new file mode 100644 index 00000000..5d3c52e4 --- /dev/null +++ b/next/content/caseStudies/pt/fundacao-lemann.md @@ -0,0 +1,69 @@ +--- +id: "fundacao-lemann" +displayTitle: "Fundação Lemann" +thumbnail: "https://storage.googleapis.com/basedosdados-website/estudos_de_caso/thumbnails/thumbnail_estudo_de_caso_flemann.png" +title: "Fundação Lemann aprimora tomada de decisão e monitoramento de metas com tecnologia de análises e engenharia de dados desenvolvida pela BD" +img: "https://storage.googleapis.com/basedosdados-website/estudos_de_caso/imagens/estudo_de_caso_flemann.png" +imgDescription: "Foto: Samuel Macedo para Fundação Lemann" +description: "Com mais de 61 redes de ensino apoiadas e mais de 28 mil escolas envolvidas, implementar um fluxo de análise de dados e indicadores foi fundamental para a Fundação Lemann compreender melhor o cenário da educação no Brasil, avaliar os programas apoiados e estabelecer metas estratégicas para potencializar o avanço da educação e o impulsionamento de lideranças no país." +logo: { + img: "https://storage.googleapis.com/basedosdados-website/estudos_de_caso/logos/flemann.png", + width: 245, + height: 85 +} +about: "Organização que trabalha para garantir educação de qualidade para todas as crianças brasileiras e apoia líderes focados no desenvolvimento social do Brasil." +resume: "Com mais de 61 redes de ensino apoiadas e mais de 28 mil escolas envolvidas, implementar um fluxo de análise de dados e indicadores foi fundamental para a Fundação Lemann compreender melhor o cenário da educação no Brasil, avaliar os programas apoiados e estabelecer metas estratégicas para potencializar o avanço da educação e o impulsionamento de lideranças no país. A BD trouxe soluções práticas para tornar isso possível, com a reestruturação da arquitetura dos dados utilizados pela Fundação, tratamento e disponibilização de novas bases de dados em um repositório online, análise das informações coletadas e construção de painéis interativos atualizados automaticamente." +sector: "Educação" +--- + +Com mais de 61 redes de ensino apoiadas e mais de 28 mil escolas envolvidas, implementar um fluxo de análise de dados e indicadores foi fundamental para a Fundação Lemann compreender melhor o cenário da educação no Brasil, avaliar os programas apoiados e estabelecer metas estratégicas para potencializar o avanço da educação e o impulsionamento de lideranças no país. A BD trouxe soluções práticas para tornar isso possível, com a reestruturação da arquitetura dos dados utilizados pela Fundação, tratamento e disponibilização de novas bases de dados em um repositório online, análise das informações coletadas e construção de painéis interativos atualizados automaticamente. + +### Resultados da parceria + +- Análise do cenário atual da educação brasileira através de dados e indicadores; +- Mapeamento de escolas com melhor desempenho e equidade racial para replicar boas práticas; +- Acompanhamento e avaliação programas apoiados pela Fundação Lemann; +- Criação de metas estratégicas e viáveis de atuação; +- Geração de mais autonomia para a equipe da Fundação Lemann na análise de dados. + +A [Fundação Lemann](https://fundacaolemann.org.br/) acredita que um Brasil feito por todos e para todos é um Brasil que investe no seu maior potencial: gente. Isso só acontece com educação de qualidade e com o apoio a pessoas que querem resolver os grandes desafios sociais do país. Sendo assim, a Fundação busca colaborar com pessoas e instituições em iniciativas de grande impacto que garantam a aprendizagem de todos os alunos e a formação de líderes que resolvam os problemas sociais do país, levando o Brasil a um salto de desenvolvimento com equidade. + +Dados e evidências sempre orientaram a atuação da Fundação Lemann. O monitoramento de indicadores educacionais é essencial para o sucesso de programas como Formar e Educar pra Valer, que têm gerado impactos positivos em um universo de 2,8 milhões de estudantes. As contribuições da Fundação à construção da Base Nacional Comum Curricular, ao reunir expertise internacional com o conhecimento de especialistas e gestores brasileiros, são outro exemplo que viabilizam a construção de um documento tecnicamente robusto. + +Mas novos desafios exigem novas estratégias. Ao desenhar uma visão de longo prazo para os seus próximos 10 anos de atuação, a Fundação Lemann entendeu que, num mundo transformado cada vez mais rapidamente pelo big data e pelas ferramentas de machine learning e inteligência artificial, precisaria elevar a um outro patamar a sua capacidade de compreensão, tratamento e análise de dados para tomada de decisão. Ao mesmo tempo, mais que produzir estudos e pesquisas, se fazia necessário potencializar a conexão entre teoria e prática, contribuindo para a construção efetiva de políticas de estímulo ao capital humano baseadas em evidências. + +Com o objetivo de estruturar e implementar essa estratégia, foi criada em 2022 na Fundação a área de Conhecimento, Dados e Pesquisa. Sua primeira iniciativa foi convidar a BD para apoiar a operacionalização desta estratégia, contribuindo com a construção de um fluxo de estruturação e análise de dados e indicadores. A BD trouxe soluções práticas para tornar isso possível, com a reestruturação da arquitetura dos dados utilizados pela Fundação, tratamento e disponibilização de novas bases de dados em um repositório online, análise das informações coletadas e construção de painéis interativos que serão atualizados automaticamente. + +
+A Fundação sempre se orientou por dados e evidências, buscando em seus programas identificar e acompanhar os principais indicadores. Mas faltava um elemento de integração entre os dados das diversas iniciativas, permitindo maior inteligência organizacional e capacidade de análise. Foi esse passo que começamos a dar com a parceria com a BD. +
+ +### Mapeamento das escolas com melhores práticas de gestão + +Além de compreender o cenário atual da educação no Brasil, o uso de dados e indicadores disponibilizados pela BD auxiliou a Fundação a acompanhar e avaliar o impacto e resultados dos programas apoiados de maneira prática. Nossa equipe de engenharia de dados e de analistas idealizou e construiu painéis com informações abrangentes sobre as frentes de impacto da Fundação. + +Pelos painéis, ficou muito mais simples acompanhar indicadores atualizados e projeções da educação brasileira, o impacto dos programas apoiados, metas estabelecidas, localização de escolas impactadas, o perfil racial e de gênero da ocupação de cargos de liderança no governo federal, além de inúmeros outros projetos. Segundo o Diretor de Conhecimento, Dados e Pesquisa da Fundação Lemann, Daniel De Bonis, “o próprio processo de construção dos painéis foi uma forma de acionar e fortalecer a inteligência coletiva da Fundação, ao provocar as equipes multifuncionais a refletir sobre seus KPIs e as melhores formas de visualizar, interpretar e explorar as informações disponíveis, utilizando sempre a metodologia ágil para uma interação produtiva com a equipe da BD”. + +Isso é possível porque os painéis apresentam visualizações que envolvem dados públicos minuciosamente tratados e padronizados pela BD, como o Censo da Educação Básica (Inep), Avaliação Nacional de Alfabetização (ANA), Sistema Nacional de Avaliação da Educação Básica (Saeb), Portal da Transparência (CGU), PNAD (IBGE), ESTADIC e MUNIC (IBGE), e mais. + +Um exemplo mais recente da construção de painéis que auxiliam o acompanhamento desses importantes indicadores foi com os dados do Sistema de Avaliação da Educação Básica (Saeb). Daniel explica como a parceria possibilitou a análise desses dados de maneira ágil e prática: “Com apoio da BD pudemos, em tempo recorde, construir uma plataforma de análise dos dados do Saeb 2021. No mesmo dia da divulgação dos dados da avaliação educacional, os painéis estavam operacionais, permitindo aos times dos programas analisar o desempenho das redes de ensino com diferentes filtros e recortes.” + +--- + +Os dados dos principais indicadores educacionais tratados pela BD são abertos a todos: +- [Sistema de Avaliação da Educação Básica (Saeb)](https://basedosdados.org/dataset/e083c9a2-1cee-4342-bedc-535cbad6f3cd?table=0308fbe0-270c-4135-9115-ea1100f400f6) +- [Avaliação Nacional de Alfabetização (ANA)](https://basedosdados.org/dataset/140554cd-8062-4c9c-80fa-363cee3603e3?table=99597e72-0796-4de3-8542-f4fd8f3ccfa4) +- [Pesquisa Nacional por Amostra de Domicílios (PNAD)](https://basedosdados.org/dataset/0cde957f-1b58-425a-b6cd-ba1208515537?table=83062c5c-6b1f-4d54-8cf2-9f541e835bf0) +- [Censo da Educação Básica](https://basedosdados.org/dataset/dae21af4-4b6a-42f4-b94a-4c2061ea9de5?table=62f7bef8-36f3-4c9b-bc79-882a2ebbed8f) + +--- + +Para além dos dados públicos, foram organizados e tratados dados e indicadores relacionados aos próprios programas apoiados pela Fundação, integrando informações de diferentes naturezas e origens de forma articulada e compreensível para as equipes. Essa abordagem sistêmica tem sido chave para o fortalecimento de uma cultura orientada para dados e evidências, criando um vocabulário comum para tratar de indicadores, metas e pautando os processos de aprendizagem organizacional. Daniel explica também que “os painéis e análises têm sido ferramentas bastante importantes no processo decisório, ajudando as equipes a visualizar e compreender informações de forma mais ágil e com menos ruído.” + +### Mais autonomia na análise de dados e evidências + +A construção de uma cultura orientada para dados e evidências também demanda o desenvolvimento de competências analíticas em todo o time – uma necessidade ainda maior num contexto de implementação de uma estrutura matricial e de metodologia ágil, adotadas pela Fundação a partir de 2022. A BD assumiu papel fundamental neste processo, apoiando a equipe da Fundação Lemann com formações interativas sobre ferramentas de dados como [Metabase](https://www.metabase.com/) e [BigQuery](https://cloud.google.com/bigquery), bem como atividades formativas para orientar a exploração de conjuntos de dados específicos, como os do [Programa Internacional de Avaliação de Estudantes (Pisa)](https://basedosdados.org/dataset/programme-for-international-student-assessment?external_link=Baixar). + +A parceria entre a BD e a Fundação Lemann uniu equipes dedicadas a construir conhecimento, gerar insights e compreender cenários para desenvolver projetos que impulsionam ativamente o avanço da educação no Brasil e a formação de lideranças preparadas e com representatividade. Acreditamos que a tomada de decisão baseada em dados e evidências é uma ferramenta fundamental para implementar mudanças efetivas na sociedade e sabemos também que essa cultura começa conosco. + +Saiba mais sobre a Fundação Lemann [aqui](https://fundacaolemann.org.br/). diff --git a/next/content/caseStudies/pt/jota.md b/next/content/caseStudies/pt/jota.md new file mode 100644 index 00000000..8aed3430 --- /dev/null +++ b/next/content/caseStudies/pt/jota.md @@ -0,0 +1,19 @@ +--- +id: "jota" +displayTitle: "JOTA" +thumbnail: "https://storage.googleapis.com/basedosdados-website/estudos_de_caso/thumbnails/thumbnail_estudo_de_caso_jota.png" +title: "Plataforma traz mais transparência para a prestação de contas de candidaturas e partidos nas Eleições 2022" +img: "https://storage.googleapis.com/basedosdados-website/estudos_de_caso/imagens/estudo_de_caso_jota.png" +imgDescription: "Foto: Tribunal Superior Eleitoral (TSE)" +description: "Criada pela BD em parceria com o JOTA, empresa de jornalismo e tecnologia, a plataforma Siga o Dinheiro auxiliou população e imprensa no monitoramento do financiamento de campanhas eleitorais nas eleições de 2022. O projeto se tornou uma importante ferramenta para a transparência pública e o combate à corrupção no processo eleitoral." +logo: { + img: "https://storage.googleapis.com/basedosdados-website/estudos_de_caso/logos/jota.svg", + width: 222, + height: 85 +} +about: "Empresa de jornalismo e tecnologia para tomadores de decisão que tem como missão tornar as instituições brasileiras mais transparentes e previsíveis." +resume: "Criada pela BD em parceria com o JOTA, empresa de jornalismo e tecnologia, a plataforma Siga o Dinheiro auxiliou população e imprensa no monitoramento do financiamento de campanhas eleitorais nas eleições de 2022. O projeto se tornou uma importante ferramenta para a transparência pública e o combate à corrupção no processo eleitoral." +sector: "Política" +--- + +Você pode acessar as fontes originais dos dados clicando no botão de redirecionamento para o link externo à plataforma. diff --git a/next/pages/case-studies/[id].js b/next/pages/case-studies/[id].js index 2eac74d5..2e2cb188 100644 --- a/next/pages/case-studies/[id].js +++ b/next/pages/case-studies/[id].js @@ -6,15 +6,24 @@ import { Skeleton, } from "@chakra-ui/react"; import Image from 'next/image'; +import { MDXRemote } from "next-mdx-remote"; import { useState, useEffect } from "react"; import Head from "next/head"; import { useRouter } from "next/router"; import { useTranslation } from 'next-i18next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; - import { MainPageTemplate } from "../../components/templates/main"; -import { useCheckMobile } from "../../hooks/useCheckMobile.hook"; -import { CaseStudiesContent } from "../../content/caseStudies"; + +import { + getAllCaseStudies, + getCaseStudiesById, + serializeCaseStudies +} from "../api/caseStudies" + +import { + mdxComponents +} from "../../components/organisms/Blog/Slug" + import Link from "../../components/atoms/Link"; import SectionText from "../../components/atoms/SectionText"; import Display from "../../components/atoms/Display"; @@ -23,72 +32,62 @@ import RoundedButton from "../../components/atoms/RoundedButton"; import styles from "../../styles/caseStudies.module.css"; export async function getStaticProps({ params, locale }) { - const caseStudy = CaseStudiesContent.find((res) => res.id === params.id); + const { id } = params; + + const content = await getCaseStudiesById(id, locale); + const serialize = await serializeCaseStudies(content); + return { props: { + serialize, ...(await serverSideTranslations(locale, ['common', 'menu', 'caseStudies'])), - ...caseStudy, }, revalidate: 30 } } -export async function getStaticPaths(context) { +export async function getStaticPaths() { + const allCaseStudies = await getAllCaseStudies(); + return { - paths: CaseStudiesContent.map((elm) => { - return {params: { id : elm.id }} + paths: allCaseStudies.map(({ id }) => { + return {params: { id }} }), fallback: false } } -export default function CaseStudies ({ - title, - displayTitle, - thumbnail, - img, - imgDescription, - description, - logo, - about, - sector, - body -}) { +export default function CaseStudies ({ serialize }) { const { t } = useTranslation('caseStudies'); const router = useRouter(); - const [isMobileMod, setIsMobileMod] = useState(false) - const isMobile = useCheckMobile(); - - useEffect(() => { - setIsMobileMod(isMobile) - }, [isMobile]) + const { frontmatter } = serialize; return ( - {t('pageTitle', { title: displayTitle })} + {t('pageTitle', { title: frontmatter.displayTitle || "" })} @@ -98,49 +97,46 @@ export default function CaseStudies ({ maxWidth="1264px" margin="50px auto auto" > - {!isMobileMod && ( - - {t('backLink')} - - )} + + {t('backLink')} + + + {frontmatter?.title || ""} - {isMobileMod && - {title} - } - - {!isMobileMod && - {title} - } + {frontmatter?.title || ""} - {img.length > 0 ? + {frontmatter.img ? {displayTitle} @@ -149,29 +145,29 @@ export default function CaseStudies ({ } - {imgDescription && + {frontmatter.imgDescription && - {imgDescription} + {frontmatter.imgDescription} } - + - {logo?.img.length > 0 ? + {frontmatter?.logo?.img ? {displayTitle} : } - Sobre + Sobre - {about} + {frontmatter?.about || ""} - Setor + Setor - {sector} + {frontmatter?.sector || ""} @@ -215,11 +211,17 @@ export default function CaseStudies ({ - - -
- - + + + diff --git a/next/styles/caseStudies.module.css b/next/styles/caseStudies.module.css index e2c0d024..26d1951b 100644 --- a/next/styles/caseStudies.module.css +++ b/next/styles/caseStudies.module.css @@ -1,5 +1,4 @@ .body a { - color: #42B0FF; font-weight: 500; letter-spacing: 0.1px; cursor: pointer; From d1e13a75a6950ed78418bba4263772cd4868f146 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Sat, 30 Nov 2024 18:47:17 -0300 Subject: [PATCH 3/5] wip --- next/components/atoms/RoundedButton.js | 1 + .../componentsUserPage/PlansAndPayment.js | 6 +++--- next/content/FAQ/en/test.md | 8 ++++++++ next/content/FAQ/es/test.md | 8 ++++++++ next/content/caseStudies/en/test.md | 19 +++++++++++++++++++ next/content/caseStudies/es/test.md | 19 +++++++++++++++++++ 6 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 next/content/FAQ/en/test.md create mode 100644 next/content/FAQ/es/test.md create mode 100644 next/content/caseStudies/en/test.md create mode 100644 next/content/caseStudies/es/test.md diff --git a/next/components/atoms/RoundedButton.js b/next/components/atoms/RoundedButton.js index fd8b1d72..e7003cda 100644 --- a/next/components/atoms/RoundedButton.js +++ b/next/components/atoms/RoundedButton.js @@ -17,6 +17,7 @@ export default function RoundedButton({ borderRadius="30px" boxShadow="0px 0.5px 0px 0px rgba(64, 60, 67, 0.16)" letterSpacing="0.5px" + color="#FFF" _hover={{ transform: "translateY(-3px)", ..._hover, diff --git a/next/components/organisms/componentsUserPage/PlansAndPayment.js b/next/components/organisms/componentsUserPage/PlansAndPayment.js index 8812c9e0..be3d6628 100644 --- a/next/components/organisms/componentsUserPage/PlansAndPayment.js +++ b/next/components/organisms/componentsUserPage/PlansAndPayment.js @@ -455,7 +455,7 @@ export default function PlansAndPayment ({ userData }) { maxWidth:"1008px", margin: "24px" }} - isCentered={{base: false, lg: true}} + isCentered={false} > Date: Tue, 3 Dec 2024 17:10:30 -0300 Subject: [PATCH 4/5] feat: finish file jota.md and ajust styles in caseStudies --- next/components/organisms/Blog/Slug.js | 51 +++++------ next/content/caseStudies/pt/jota.md | 32 ++++++- next/pages/api/blog/categories.js | 4 +- next/pages/blog/[slug].js | 17 ++-- next/pages/case-studies/[id].js | 110 ++++++++++++++++++------ next/pages/dataset/[dataset].js | 21 ++--- next/public/locales/en/caseStudies.json | 2 +- next/public/locales/es/caseStudies.json | 2 +- next/public/locales/pt/caseStudies.json | 2 +- 9 files changed, 162 insertions(+), 79 deletions(-) diff --git a/next/components/organisms/Blog/Slug.js b/next/components/organisms/Blog/Slug.js index 40793c35..35097aa8 100644 --- a/next/components/organisms/Blog/Slug.js +++ b/next/components/organisms/Blog/Slug.js @@ -243,11 +243,11 @@ function FigCaption(props) { return props.children ? ( {props.children} @@ -486,9 +486,9 @@ export const mdxComponents = { ul: (props) => , li: (props) => ( ), @@ -538,35 +538,38 @@ export const mdxComponents = { return ( “ {figcaption ? ( ) : null} diff --git a/next/content/caseStudies/pt/jota.md b/next/content/caseStudies/pt/jota.md index 8aed3430..7a8a3e70 100644 --- a/next/content/caseStudies/pt/jota.md +++ b/next/content/caseStudies/pt/jota.md @@ -16,4 +16,34 @@ resume: "Criada pela BD em parceria com o JOTA, empresa de jornalismo e tecnolog sector: "Política" --- -Você pode acessar as fontes originais dos dados clicando no botão de redirecionamento para o link externo à plataforma. +Criada pela BD em parceria com o JOTA, empresa de jornalismo e tecnologia, a plataforma [Siga o Dinheiro](https://sigaodinheiro.org/) auxiliou população e imprensa no monitoramento das despesas e receitas de campanhas eleitorais nas eleições de 2022. O projeto se tornou uma importante ferramenta para a transparência pública e o combate à corrupção no processo eleitoral. + +## Resultados da parceria + +- Fornecimento de dados atualizados para coberturas jornalísticas das eleições e acompanhamento da sociedade; +- Produção de análises qualificadas sobre a prestação de contas nas eleições; +- Dados de despesas e receitas das eleições para apuração de mais de 20 reportagens publicadas em 5 veículos de comunicação diferentes. + +Construído com tecnologia de ponta para extrair e organizar automaticamente as informações do Tribunal Superior Eleitoral (TSE), o painel traz dados atualizados sobre o financiamento das eleições. A plataforma permite a seleção de diversos recortes a partir de filtros geográficos, raciais, de gênero e muito mais. + +## Siga o Dinheiro na apuração jornalística + +O projeto [Siga o Dinheiro](https://sigaodinheiro.org/) foi fundamental para mapear desigualdades e inconsistências no financiamento das eleições de 2022. A ferramenta foi utilizada na apuração de mais de 20 reportagens com temas como as [diferenças raciais e de gênero no financiamento de campanhas](https://www.jota.info/eleicoes/candidatos-brancos-a-camara-tiveram-em-media-o-dobro-de-recursos-dos-pretos-05102022), [o efeito da tecnologia no financiamento eleitoral](https://www.jota.info/opiniao-e-analise/colunas/siga-o-dinheiro/o-efeito-da-tecnologia-sobre-o-financiamento-eleitoral-30082022), [lacunas nas prestações de contas](https://www.jota.info/eleicoes/contas-de-campanha-mostravam-que-candidato-a-deputado-teria-recebido-r-400-milhoes-30082022), [candidatos que receberam mais recursos para suas campanhas](https://www.jota.info/eleicoes/quem-sao-os-candidatos-a-deputado-que-mais-receberam-recursos-de-campanha-10092022), entre outros. Para Kalleo Coura, editor executivo do JOTA em São Paulo, “os dados das prestações de contas das campanhas foram organizados de forma simples e intuitiva nos painéis da plataforma, o que possibilitou identificar inconsistências e tendências interessantes”. + +![Seção "Desigualdades" do painel Siga o Dinheiro](https://storage.googleapis.com/basedosdados-website/estudos_de_caso/paineis/painel_siga_o_dinheiro.png) + +O painel facilitou a apuração de reportagens que deixam explícitas as profundas desigualdades na distribuição de recursos para campanhas. Com filtros que permitem explorar a proporção de receitas e despesas entre os diferentes perfis de candidaturas, o painel possibilitou análises que identificaram a falta de recursos para candidaturas indígenas – [30% das candidaturas não receberam nenhum recurso para suas campanhas](https://www.jota.info/eleicoes/30-das-candidatas-indigenas-a-camara-nao-receberam-recursos-para-campanha-30092022) – e a disparidade entre os recursos destinados a candidatos brancos e pretos, com o [primeiro grupo acumulando o dobro no financiamento](https://www.jota.info/eleicoes/candidatos-brancos-a-camara-tiveram-em-media-o-dobro-de-recursos-dos-pretos-05102022). + +
+Durante a corrida eleitoral, foi substancial ter acesso à visualização do Siga o Dinheiro, que usou dados abertos da Justiça Eleitoral que nem sempre seriam facilmente combinados e cruzados para produzir conteúdo de interesse público. Na cobertura, essas informações ajudaram a embasar reportagens sobre os candidatos que mais receberam investimentos de recursos públicos para campanha, mas, principalmente, para mostrar as desigualdades regionais, partidárias, de gênero e raciais. Com dados apresentados pela plataforma, mostramos que candidatos brancos à Câmara dos Deputados tiveram em média o dobro de recursos dos pretos e que um quinto das mulheres não tinham recebido nem R$ 1 de seus partidos, por exemplo. +
+ +Além de ajudar a identificar tendências do financiamento das campanhas para cargos federais, a possibilidade de criar recortes regionais facilitou o [acompanhamento dos gastos em estados como Roraima](https://folhabv.com.br/noticia/ELEIcOES-2022/ELEIcOES-2022/Saiba-quem-recebeu-os-valores-mais-altos-para-fazer-campanha-em-RR/90559), por exemplo. A ferramenta ajudou também na identificação de irregularidades e erros nas prestações de contas de candidatos e partidos. Foi o caso do Partido Socialista Brasileiro (PSB), que declarou uma [receita de mais de R$ 400 milhões do Fundo Especial de Financiamento de Campanha do sindicalista Zé Francisco](https://www.jota.info/eleicoes/contas-de-campanha-mostravam-que-candidato-a-deputado-teria-recebido-r-400-milhoes-30082022), o que o colocaria na primeira posição entre os candidatos que mais receberam recursos públicos em toda a eleição de 2022. + +## Tecnologia de ponta trabalhando pela transparência e acessibilidade + +O painel foi desenvolvido através da combinação de técnicas de extração automatizada e de um rigoroso processo de tratamento e padronização de dados. Isso permitiu o acesso em tempo real às informações do Tribunal Superior Eleitoral (TSE), apresentadas em um formato intuitivo, onde os usuários podem pesquisar e criar seus próprios recortes com filtros por estado, partido, cargo, gênero, raça e mais. + +A BD também disponibiliza em sua plataforma os dados atualizados de receitas e despesas, possibilitando o download das tabelas tratadas ou o acesso por ferramentas de análise de dados, como SQL, Python e R. + +[Acesse os dados atualizados das eleições brasileiras](https://basedosdados.org/dataset/eef764df-bde8-4905-b115-6fc23b6ba9d6?table=2e204854-e453-4257-9fef-5e10f3ff1f56). diff --git a/next/pages/api/blog/categories.js b/next/pages/api/blog/categories.js index 2bef4876..7041919c 100644 --- a/next/pages/api/blog/categories.js +++ b/next/pages/api/blog/categories.js @@ -1,4 +1,4 @@ export const categories = { - analise: "Análise", - tutorial: "Tutorial" + analise: "Análises", + tutorial: "Tutoriais" } diff --git a/next/pages/blog/[slug].js b/next/pages/blog/[slug].js index 9dac4d09..081a0eed 100644 --- a/next/pages/blog/[slug].js +++ b/next/pages/blog/[slug].js @@ -1,5 +1,6 @@ import { Box, + Divider, Text } from "@chakra-ui/react"; import Head from "next/head"; @@ -13,7 +14,6 @@ import Link from "../../components/atoms/Link"; import { Header, Toc, - Contribute, mdxComponents, } from "../../components/organisms/Blog/Slug"; @@ -143,6 +143,12 @@ export default function Post({ slug, mdxSource, headings }) { display="flex" flexDirection="column" > + ) : null} - - - diff --git a/next/pages/case-studies/[id].js b/next/pages/case-studies/[id].js index 2e2cb188..cc255372 100644 --- a/next/pages/case-studies/[id].js +++ b/next/pages/case-studies/[id].js @@ -4,10 +4,10 @@ import { HStack, Box, Skeleton, + Text } from "@chakra-ui/react"; import Image from 'next/image'; import { MDXRemote } from "next-mdx-remote"; -import { useState, useEffect } from "react"; import Head from "next/head"; import { useRouter } from "next/router"; import { useTranslation } from 'next-i18next'; @@ -24,11 +24,9 @@ import { mdxComponents } from "../../components/organisms/Blog/Slug" +import ChevronIcon from "../../public/img/icons/chevronIcon"; +import Button from "../../components/atoms/Button"; import Link from "../../components/atoms/Link"; -import SectionText from "../../components/atoms/SectionText"; -import Display from "../../components/atoms/Display"; -import BodyText from "../../components/atoms/BodyText"; -import RoundedButton from "../../components/atoms/RoundedButton"; import styles from "../../styles/caseStudies.module.css"; export async function getStaticProps({ params, locale }) { @@ -99,31 +97,54 @@ export default function CaseStudies ({ serialize }) { > + {t('backLink')} - {frontmatter?.title || ""} + fontFamily="Roboto" + fontSize="28px" + lineHeight="36px" + fontWeight="500" + color="#252A32" + >{frontmatter?.title || ""} - {frontmatter?.title || ""} + >{frontmatter?.title || ""} {frontmatter.imgDescription && - {frontmatter.imgDescription} - + } @@ -191,24 +215,60 @@ export default function CaseStudies ({ serialize }) { } - Sobre - + + Sobre + + + {frontmatter?.about || ""} - + - Setor - + + Setor + + + {frontmatter?.sector || ""} - + - + {t('contactText')} - - + + - - - Informações + @@ -305,7 +298,7 @@ export default function DatasetPage ({ dataset, mdxSource, headings, infoId }) { - + {/* */} diff --git a/next/public/locales/en/caseStudies.json b/next/public/locales/en/caseStudies.json index 998be96a..94008a83 100644 --- a/next/public/locales/en/caseStudies.json +++ b/next/public/locales/en/caseStudies.json @@ -1,6 +1,6 @@ { "pageTitle": "{{title}} – Data Basis", - "backLink": "<< Back", + "backLink": "Back", "contactText": "We want to help you.", "contactButton": "Contact us" } \ No newline at end of file diff --git a/next/public/locales/es/caseStudies.json b/next/public/locales/es/caseStudies.json index 608e3edb..ac78cb6b 100644 --- a/next/public/locales/es/caseStudies.json +++ b/next/public/locales/es/caseStudies.json @@ -1,6 +1,6 @@ { "pageTitle": "{{title}} – Base de los Datos", - "backLink": "<< Volver", + "backLink": "Volver", "contactText": "Queremos ayudarle.", "contactButton": "Contactar" } \ No newline at end of file diff --git a/next/public/locales/pt/caseStudies.json b/next/public/locales/pt/caseStudies.json index 85a7fa17..99950b84 100644 --- a/next/public/locales/pt/caseStudies.json +++ b/next/public/locales/pt/caseStudies.json @@ -1,6 +1,6 @@ { "pageTitle": "{{title}} – Base dos Dados", - "backLink": "<< Voltar", + "backLink": "Voltar", "contactText": "Queremos ajudar você.", "contactButton": "Entre em contato" } \ No newline at end of file From 12754e3a46255c88bfbe7451f84edaf1d1d41dfa Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 3 Dec 2024 17:49:17 -0300 Subject: [PATCH 5/5] feat: finish home page blog --- next/components/organisms/Blog/Home.js | 61 ++++++++++++++++++-------- 1 file changed, 42 insertions(+), 19 deletions(-) diff --git a/next/components/organisms/Blog/Home.js b/next/components/organisms/Blog/Home.js index 63a522f8..aec5d0af 100644 --- a/next/components/organisms/Blog/Home.js +++ b/next/components/organisms/Blog/Home.js @@ -10,13 +10,13 @@ import { GridItem, Divider, } from "@chakra-ui/react"; - import { useEffect, useState } from "react"; import { useTranslation } from 'next-i18next'; import { categories } from "../../../pages/api/blog/categories"; import Link from "../../atoms/Link"; import FilterIcon from "../../../public/img/icons/filterIcon"; +import ChevronIcon from "../../../public/img/icons/chevronIcon"; export const dateToLocatePt = (date) => new Date(date).toLocaleString("pt-BR", { @@ -348,23 +348,49 @@ export function BlogGrid({ posts, category }) { borderWidth="2px" margin="80px 0 24px" /> - - - {categories?.[key] || t(key)} - + + {categories?.[key] || t(key)} + - - {value.map((post, index) => { - const itemsInLastRow = (value.length - 1) % 3 || 3; - const isInLastRow = index >= value.length - itemsInLastRow; + + Ver todos + + + + + {value.slice(0, 7).map((post, index) => { if (index === 0) { return ( @@ -408,9 +434,6 @@ export function BlogGrid({ posts, category }) { {posts.map((post, index) => { - const itemsInLastRow = (posts.length - 1) % 3 || 3; - const isInLastRow = index >= posts.length - itemsInLastRow; - if (index === 0) { return (