load yaml

apiaddicts · Sep 29, 2023 · 1fca6e5 · 1fca6e5
1 parent 1422e11
commit 1fca6e5
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 110 deletions.
diff --git a/src/Apipedia.csproj b/src/Apipedia.csproj
@@ -12,6 +12,7 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.11" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.11" PrivateAssets="all" />
     <PackageReference Include="MudBlazor" Version="6.10.0" />
+    <PackageReference Include="YamlDotNet" Version="13.4.0" />
   </ItemGroup>
 
 </Project>
diff --git a/src/Models/Definition.cs b/src/Models/Definition.cs
@@ -1,44 +1,45 @@
-using System.Text.Json.Serialization;
+using YamlDotNet.Serialization;
 
 namespace Apipedia.Models
 {
     public class Definition
     {
-        [JsonPropertyName("key")]
+        [YamlMember(Alias = "key")]
         public required string Key { get; set; }
-        [JsonPropertyName("title")]
+        [YamlMember(Alias = "title")]
         public required string Title { get; set; }
-        [JsonPropertyName("htmlDef")]
+        [YamlMember(Alias = "htmlDef")]
         public string? HtmlDef { get; set; }
-        [JsonPropertyName("refs")]
+        [YamlMember(Alias = "refs")]
         public List<Reference>? Refs { get; set; }
-        [JsonPropertyName("tags")]
+        [YamlMember(Alias = "tags")]
         public List<Tag>? Tags { get; set; }
-        [JsonPropertyName("imgs")]
+        [YamlMember(Alias = "imgs")]
         public List<Img>? Imgs { get; set; }
     }
 
     public class Reference
     {
-        [JsonPropertyName("title")]
+        [YamlMember(Alias = "title")]
         public string? Title { get; set; }
-        [JsonPropertyName("url")]
+        [YamlMember(Alias = "url")]
         public string? Url { get; set; }
     }
 
     public class Tag
     {
-        [JsonPropertyName("name")]
+        [YamlMember(Alias = "name")]
         public string? Name { get; set; }
-        [JsonPropertyName("category")]
+        [YamlMember(Alias = "category")]
         public string? Category { get; set; }
     }
 
     public class Img
     {
-        [JsonPropertyName("title")]
+        [YamlMember(Alias = "title")]
         public string? Title { get; set; }
-        [JsonPropertyName("url")]
+        [YamlMember(Alias = "url")]
         public string? Url { get; set; }
     }
+
 }
diff --git a/src/Pages/Index.razor b/src/Pages/Index.razor
@@ -1,21 +1,24 @@
 @page "/"
 
 <div class="animate__animated animate__fadeIn">
-    <MudContainer Style="margin-top: 20px">
+    <MudContainer>
 
         <div style="display: flex; align-items: center; justify-content: center;">
             <MudIcon Color="Color.Primary" Icon="fa-solid fa-hand-peace fa-shake" Style="margin: 10px;" Size="Size.Large" />
             <MudText Typo="Typo.h2" Align="Align.Center" Color="Color.Primary">Bienvenid@@ a Apipedia</MudText>
         </div>
 
-        <MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Secondary">Recopilación de terminos, definiciones y conceptos del mundo Api en Español</MudText>
+        <MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Secondary">Guía colaborativa que Recopila en español terminos, definiciones y conceptos del fascinante mundo de las APIs.</MudText>
 
 
-        <MudText Style="margin-top: 130px;" Typo="Typo.h5" Align="Align.Center" Color="Color.Tertiary">Sponsors</MudText>
+        <div style="display: flex; align-items: center; justify-content: center;">
+            <MudChip Size="Size.Large" Style="margin-top: 30%;" Icon="fa-solid fa-person-digging fa-beat" Color="Color.Warning">En Construcción</MudChip>
+        </div>
+
         <div style="display: flex; justify-content: center; align-items: center;">
 
-            <MudImage Src="imgs/apiaddicts_logo.png" Width="200" Fluid="true" Style="filter: drop-shadow(0.5px 0.5px 0.5px white);" />
-            <MudImage Src="imgs/cloudappi_logo.png" Width="100" Fluid="true" Style="filter: drop-shadow(0.5px 0.5px 0.5px white);" />
+            <MudImage Src="imgs/apiaddicts_logo.png" Width="300" Fluid="true" Style="filter: drop-shadow(0.5px 0.5px 0.5px white);" />
+            <MudImage Src="imgs/cloudappi_logo.png" Width="200" Fluid="true" Style="filter: drop-shadow(0.5px 0.5px 0.5px white);" />
         </div>
     </MudContainer>
 </div>
diff --git a/src/Pages/Word.razor b/src/Pages/Word.razor
@@ -1,23 +1,24 @@
 @page "/{word}"
 @inject HttpClient Http
+@inject DefinitionService DefinitionService
+@inject NavigationManager NavigationManager
 @using Models
 @using Services;
-@inject DefinitionService DefinitionService
 @using ZXing;
 
 <div class="animate__animated animate__fadeIn">
-    <MudItem xs="12" Style="margin: 20px 80px;">
+    <MudItem xs="12" Style="margin: 0% 5%;">
 
     @if (definition != null)
     {
-         <div style="text-align: center; margin: 20px;">
+         <div style="text-align: center; margin: 1%;">
             <MudText Color="Color.Primary" Typo="Typo.h2" Align="Align.Center">@definition.Title</MudText>
-            <MudBarcode @ref="_barcode" @bind-Value="word" Width="100" Height="100" BarcodeFormat="BarcodeFormat.QR_CODE" Color="black" />
+                <MudBarcode @ref="_barcode" @bind-Value="qrString" Width="100" Height="100" BarcodeFormat="BarcodeFormat.QR_CODE" Color="black" />
         </div>
 
         @if (definition.Tags != null)
         {
-            <div style="text-align: justify; margin: 20px">
+                <div style="text-align: justify; margin: 1%">
                 @foreach (var tag in definition.Tags)
                 {
                     <MudChip Color="Color.Primary">@tag.Name</MudChip>
@@ -28,14 +29,14 @@
 
         if (definition.HtmlDef != null)
         {
-            <MudText Typo="Typo.h6" Align="Align.Center" Style="text-align: justify; margin: 20px">
+            <MudText Typo="Typo.h6" Align="Align.Center" Style="text-align: justify; margin: 1%">
                 @((MarkupString)definition.HtmlDef)
             </MudText>
         }
 
         if (definition.Refs != null)
         {
-             <div style="text-align: justify; margin: 20px">
+                <div style="text-align: justify; margin: 1%">
                 @foreach (var r in definition.Refs)
                 {
                     <MudChip Color="Color.Primary" Href="@r.Url" Style="text-align: justify;">@r.Title</MudChip>
@@ -45,19 +46,23 @@
 
         if (definition.Imgs != null)
         {
-            <div style="display: flex; justify-content: center; margin: 20px ">
+            <div style="display: flex; justify-content: center; margin: 1%">
                 <MudGallery ImageSource="imageSource()" ItemPerLine="5" MaxWidth="MaxWidth.Large"></MudGallery>
-            </div>
+                </div>
+            }
+        }
+        else
+        {
+            <MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Secondary">Término no encontrado</MudText>
         }
-
-    }
 
 </MudItem>
 </div>
 @code {
 
     [Parameter]
-    public string word { get; set; }
+    public string? word { get; set; }
+    public string? qrString { get; set; }
     private MudBarcode? _barcode;
     private Definition? definition;
 
@@ -67,6 +72,7 @@
         var definitions = DefinitionService.Definitions;
         if (definitions!=null)
             definition = definitions.FirstOrDefault(d => d.Key == word);
+        qrString = $"{NavigationManager.Uri}";
     }
 
     private List<string> imageSource()

diff --git a/src/Services/DefinitionService.cs b/src/Services/DefinitionService.cs
@@ -1,5 +1,6 @@
 using Apipedia.Models;
-using System.Text.Json;
+using YamlDotNet.RepresentationModel;
+using YamlDotNet.Serialization;
 
 namespace Apipedia.Services
 {
@@ -17,8 +18,12 @@ public async Task LoadDefinitionsAsync()
         {
             if (Definitions == null)
             {
-                var stream = await Http.GetStreamAsync("data/apidictionary.json");
-                Definitions = await JsonSerializer.DeserializeAsync<List<Definition>>(stream);
+                var yaml = new YamlStream();
+                var response = await Http.GetAsync("data/apidictionary.yaml");
+                var yamlString = await response.Content.ReadAsStringAsync();
+                yaml.Load(new StringReader(yamlString));
+                var deserializer = new DeserializerBuilder().Build();
+                Definitions = deserializer.Deserialize<List<Definition>>(yamlString);
             }
         }
     }

diff --git a/src/Shared/MainLayout.razor b/src/Shared/MainLayout.razor
@@ -30,7 +30,7 @@
             </MudItem>
         </MudGrid>
     </MudContainer>
-    <MudMainContent>
+    <MudMainContent Style="padding: 2%;">
         @Body
     </MudMainContent>
     <MudAppBar Fixed="true" Bottom="true" Style="@("background: transparent; box-shadow: none;")">

diff --git a/src/wwwroot/data/apidictionary.json b/src/wwwroot/data/apidictionary.json
diff --git a/src/wwwroot/data/apidictionary.yaml b/src/wwwroot/data/apidictionary.yaml
@@ -0,0 +1,50 @@
+# apipedia
+---
+- key: api
+  title: API
+  htmlDef: "<p>Una API, o Interfaz de Programación de Aplicaciones, es un conjunto
+    de reglas y protocolos que permite que diferentes programas de software interactúen
+    entre sí. Estas interacciones pueden incluir la creación, lectura, actualización
+    y eliminación de operaciones. En resumen, una API actúa como un intermediario
+    que permite que dos aplicaciones se comuniquen y compartan datos entre sí.</p>"
+  refs:
+  - title: Wikipedia - API
+    url: https://en.wikipedia.org/wiki/API
+  tags:
+  - name: API
+    category: Terminology
+  imgs:
+  - title: "¿Qué es un API?"
+    url: https://d1.awsstatic.com/whatisimg/New-API-GW-Diagram.c9fc9835d2a9aa00ef90d0ddc4c6402a2536de0d%20(1).67a41a2ef9823282fe672434ddd56dd22c13d5a5.png
+- key: rest
+  title: REST
+  htmlDef: "<div>REST (Representational State Transfer) es un estilo arquitectónico
+    para desarrollar servicios web. Una API REST se compone de métodos HTTP, URIs,
+    tipos de medios y estado HTTP.<div>"
+  refs:
+  - title: Wikipedia - REST
+    url: https://en.wikipedia.org/wiki/Representational_state_transfer
+  tags:
+  - name: API
+    category: Terminology
+- key: soap
+  title: SOAP
+  htmlDef: "<div>SOAP (Simple Object Access Protocol) es un protocolo de intercambio
+    de mensajes basado en XML a través de redes, utilizado principalmente para invocar
+    acciones en servidores web.<div>"
+  refs:
+  - title: Wikipedia - SOAP
+    url: https://en.wikipedia.org/wiki/SOAP
+  tags:
+  - name: API
+    category: Terminology
+- key: graphql
+  title: GraphQL
+  htmlDef: "<div>GraphQL es un lenguaje de consulta y manipulación de datos para APIs,
+    y un tiempo de ejecución para ejecutar esas consultas con tus datos existentes.<div>"
+  refs:
+  - title: Wikipedia - GraphQL
+    url: "<https://en.wikipedia.org/wiki/GraphQL>"
+  tags:
+  - name: API
+    category: Terminology