{"id":23328927,"url":"https://github.com/patrickfc17/portfolio","last_synced_at":"2026-04-04T08:37:11.498Z","repository":{"id":220423236,"uuid":"735496298","full_name":"patrickfc17/Portfolio","owner":"patrickfc17","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-10T03:12:24.000Z","size":7033,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T12:41:02.433Z","etag":null,"topics":["express","go","nodejs","sass","typescript","vite","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patrickfc17.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-25T06:21:18.000Z","updated_at":"2024-02-01T23:16:52.000Z","dependencies_parsed_at":"2025-02-13T12:45:12.655Z","dependency_job_id":null,"html_url":"https://github.com/patrickfc17/Portfolio","commit_stats":null,"previous_names":["patrickfc17/portfolio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickfc17%2FPortfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickfc17%2FPortfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickfc17%2FPortfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickfc17%2FPortfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrickfc17","download_url":"https://codeload.github.com/patrickfc17/Portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247623010,"owners_count":20968574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","go","nodejs","sass","typescript","vite","webcomponents"],"created_at":"2024-12-20T21:29:35.000Z","updated_at":"2025-12-30T19:10:09.266Z","avatar_url":"https://github.com/patrickfc17.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Site pessoal para Portfólio.\n\n-   Patrick Ferreira Carvalho\n\n## Utilizado Nesse Projeto\n\n-   Frontend:\n    -   TypeScript\n    -   WebComponents\n    -   Sass\n    -   Vite\n-   Backend:\n    -   NodeJS / TS\n    -   ExpressJS / TS\n-   Infrastructure\n    -   Go\n\n## Setup Inicial\n\n```bash\ngit clone https://github.com/patrickfc17/Portfolio.git\n```\n\n```bash\ncd Portfolio\n```\n\n## Frontend\n\n```bash\ncd frontend\n```\n\n```bash\nnpm install\n```\n\n```bash\ncp .env.example .env\n```\n\n```bash\nnpm run dev\n```\n\n```bash\n../infra/watcher\n```\n\n## Backend\n\n```bash\ncd backend\n```\n\n```bash\nnpm install\n```\n\n```bash\ncp .env.example .env\n```\n\n```bash\nnpm run dev\n// ou\nnpm run start\n```\n\n## Estrutura (Frontend)\n\nEste portfólio utiliza a \"Component-Based Architecture\", ou seja, a construção da UI se baseia em componentes reutilizáveis.\nAo contrário de muitas aplicações Web modernas que utilizariam frameworks frontend para diferentes estratégias de renderização de páginas (CSR, SSR, ISR...),\neste projeto utiliza uma API muito simples da especificação da Mozilla: Web Components.\n\nA API de Web Components permite criar uma arquitetura bastante similar à de frameworks atuais, encapsulando fragmentos da UI em componentes isolados (HTML, CSS e JS).\n\nPara começar a criar componentes neste projeto, você pode acessar o diretório \"src/Components\" e criar uma pasta com o nome do seu componente desejado.\nApós isso, crie um arquivo index.html e defina nele o template, ou seja, a estrutura base do seu componente, podendo adicionar também estilos (CSS) e script (JS/TS).\n\n```html\n\u003c!-- src/Components/NewComponent/index.html --\u003e\n\u003clink\n    rel=\"stylesheet\"\n    href=\"/src/Components/NewComponent/NewComponent.css\"\n    template=\"new-component\"\n/\u003e\n\n\u003ctemplate id=\"new-component\"\u003e\n    \u003ch1 class=\"title\"\u003eOlá Web Components! :D\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003c!-- \u003cscript type=\"module\" src=\"script.ts\"\u003e\u003c/script\u003e --\u003e\n```\n\nAgora, será necessário criar o script que irá definir o seu novo WebComponent. Por padrão, este projeto utiliza o prefixo \"+define\" para arquivos TypeScript que definem um WebComponent. Para a definição do \"Shadow Root\" de seu componente, você pode utilizar o Hook \"useShadowRoot\", passando como parâmetro o id do seu componente e, opcionalmente, se ele possui um estilo prório ou não (o padrão para este parâmetro de estilo é \"true\". Dessa forma, caso seu componente não possua estilo, este parâmetro deve ser informado como \"false\")\n\n```ts\n// src/Components/NewComponent/+define.ts\n\nimport { LoadComponentProcedure } from \"@/Types/components\";\nimport { useShadowRoot } from \"@/Hooks/shadow-root-template\";\n\nexport const loadComponent: LoadComponentProcedure = () =\u003e {\n    customElements.define(\n        \"new-component-\",\n        useShadowRoot({ id: \"new-component\" })\n    );\n};\n```\n\nLembrando que o Tipo \"LoadComponentProcedure\" define o retorno desta função/procedimento como \"void | FailedToLoadElementError | RequiredAttributeError\". Como pode ver, existem dois tipos de erros a serem tratados nesses procedimentos: um erro caso não seja possível recuperar o elemento \"template\" do arquivo e outro caso este elemento não possua algum parâmetro obrigatório (no caso dos WebComponents utilizados neste projeto, todos devem possuir um \"id\" com o nome de seu componente).\n\nAssim, caso queira utilizar este novo componente customizado em uma página HTML, tudo que é necessário é utilizar o Hook \"useComponent\", definido dentro do diretório \"src/Hooks\" no arquivo \"import-component.ts\". Este Hook aceita dois parâmetros: o caminho para o diretório desse componente e o nome do arquivo Root (Template HTML) deste componente, que por padrão é 'index'.\n\n```ts\n// script.ts\nimport { useComponent } from \"@/Hooks/import-component\";\nimport { loadComponent } from \"@/Components/NewComponent/+define\";\n\nuseComponent(\"src/Components/NewComponent\", loadComponent);\n```\n\nPronto! Agora com seu componente definido e importado no script da página que deseja usar, é só adicionar este script na página e usar o WebComponent:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n        \u003cscript type=\"module\" src=\"./script.ts\" defer\u003e\u003c/script\u003e\n        \u003ctitle\u003ePage\u003c/title\u003e\n        \u003cstyle\u003e\n            body {\n                height: max-content;\n            }\n        \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cnew-component-\u003e\u003c/new-component-\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nEssa é a estrutura mais básica para trabalhar com WebComponents neste projeto. Caso precise de mais informações sobre esta API, consulte:\n\n-   https://developer.mozilla.org/pt-BR/docs/Web/API/Web_components\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickfc17%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickfc17%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickfc17%2Fportfolio/lists"}