make change for article

yaperson · Nov 27, 2023 · 4dd7275 · 4dd7275
1 parent c8c10b5
commit 4dd7275
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 54 deletions.
diff --git a/public/article_frame_astro.png b/public/article_frame_astro.png
diff --git a/public/fastify.png b/public/fastify.png
diff --git a/public/meme_puppeteer.png b/public/meme_puppeteer.png
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -22,36 +22,20 @@ const username = ["yaperson"];
 
     <div class="social__container">
         <Social platform="github" username="yaperson" />
-        <Social platform="instagram" username="ya_per_son" />
-        <Social platform="soundcloud" username="user-388226531" />
+        <Social platform="linkedin" username="in/yanis-legrand" />
         <a class="social" href="/rss.xml" target="_blank" title="Flux RSS"><i class="fi fi-rr-wifi"></i></a>
     </div>
 </footer>
 
 <style>
     footer {
         display: flex;
+        flex-direction: column;
+        align-items: center;
         gap: 1rem;
         margin-top: 2rem;
         bottom: 0;
         background-color: ;
         width: 100%;
     }
-
-    .social {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: fit-content;
-        padding: 0.5rem 1rem;
-        color: white;
-        background-color: #4c1d95;
-        text-decoration: none;
-        transition: 0.2s;
-    }
-    .social:hover {
-        background-color: #4c1d9570;
-        padding: 0.5rem 2rem;
-        transition: 0.2s;
-    }
 </style>
diff --git a/src/components/Social.astro b/src/components/Social.astro
@@ -4,24 +4,4 @@ const { platform, username } = Astro.props;
 
 <a class="social" href={`https://www.${platform}.com/${username}`} target="_blank" title={platform}>
     <i class={`fi fi-brands-${platform}`}></i>
-</a>
-
-<style lang="scss">
-    .social {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: fit-content;
-        padding: 0.5rem 1rem;
-        color: white;
-        background-color: #4c1d95;
-        text-decoration: none;
-        transition: 0.2s;
-
-        &:hover {
-            background-color: #4c1d9570;
-            padding: 0.5rem 2rem;
-            transition: 0.2s;
-        }
-    }
-</style>
+</a>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -16,7 +16,6 @@ const {pageTitle} = Astro.props;
 	<body>
 		<Header />
 
-
         <div class="container">
             <slot />
         </div>

diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
@@ -4,11 +4,9 @@ const { frontmatter } = Astro.props;
 ---
 <BaseLayout pageTitle={frontmatter.title}>
     <p>{frontmatter.description}</p>
-    <img
-    class="post__image"
-    src={frontmatter.image.url}
-    alt={frontmatter.image.alt}
-    />
+    <img class="post__image"
+         src={frontmatter.image.url}
+         alt={frontmatter.image.alt} />
         <span>written by {frontmatter.author} - Published on: {frontmatter.pubDate.slice(0, 10)}</span>
         <div class="tags">
             {

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -8,6 +8,6 @@ const pageTitle = "Blog";
 <BasedLayout pageTitle={pageTitle}>
 	<h2>Blog</h2>
 	<div class="blogList">
-		{allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}, tags={post.frontmatter.tags}></BlogPost>)}
+		{allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} tags={post.frontmatter.tags}></BlogPost>)}
 	</div>
 </BasedLayout>
diff --git a/src/pages/posts/techno-to-watch-out-2.mdx b/src/pages/posts/techno-to-watch-out-2.mdx
@@ -1,6 +1,6 @@
 ---
 layout: ../../layouts/MarkdownPostLayout.astro
-title: List of techno to watch out!
+title: List of techno to watch out vol 2!
 author: Yanis Legrand
 description: "A list of recent web things to watch, I have a particular interest in there!"
 image: 

diff --git a/src/pages/posts/techno-to-watch-out.mdx b/src/pages/posts/techno-to-watch-out.mdx
@@ -4,11 +4,10 @@ title: List of techno to watch out!
 author: Yanis Legrand
 description: "A list of recent web things to watch, I have a particular interest in there!"
 image: 
-  url: "https://docs.astro.build/default-og-image.png"
+  url: "/article_frame_astro.png"
   alt: "The word “astro” against an illustration of planets and stars."
 pubDate: 2023-11-21
 tags: ["List", "News", "Framework", "Web"]
-draft: true
 ---
 
 # A list of interesting things
@@ -26,16 +25,22 @@ Summary :
 
 ## Astro
 
+<img width='100%' src='https://docs.astro.build/default-og-image.png' alt='The word “astro” against an illustration of planets and stars.' />
+
 This website is make with Astro! 
 
 It's a JavaScript framework for make static websites (SSG, Static Site Generator) with very interesting blog features, 
 a realy good documentation with a perfect tutorial for make your first Astro website!
 
-Astro work with island principe \[explenation here, it's comming =D\] 
+Astro work with island principe :
+
+<img width='100%' src='https://res.cloudinary.com/ddxwdqwkr/image/upload/f_auto/v1633284886/patterns.dev/theislandsarch--avuxy9rrkk8.png' alt='schema of island architecture' />
+
+For more informations, <a href='https://www.patterns.dev/vanilla/islands-architecture/'>click here</a>
 
 I use it for all my static website, photos galery, portfolio, blog!
 
-You can use the framework you whant in complement (personally, I like use Svelte in complement) MDX, integrate your CMS, 
+You can use the framework you whant in complement (personally, I like use Svelte or vuejs) MDX, integrate your CMS, 
 or many features develop by comunity, and beetween the day I discovered Astro and now, lot of people started to use it, 
 because it's just a banger!
 I can write more to explain why Astro i so cool, but I let you test by your self ;)
@@ -50,6 +55,9 @@ I don't remember, but I think is with the chrome extention "Wappalizer", I remem
 
 ## Puppeteer
 
+<img width='100%' src='/meme_puppeteer.png' alt='meme puppeteer' />
+
+
 Take data for technological monitoring, measurements on the labor market or carry out tests with user simulation, 
 these actions can be carried out with a web scraper. I've done this in the past with .NET and HtmlAgilityPack, 
 this library permit to scrape static website and extract data from them.
@@ -73,6 +81,8 @@ So I searched how can I do in suplement and find a repo in GitHub with lot of th
 
 ## Fastify
 
+<img width='100%' src='/fastify.png' alt='Fastify' />
+
 Everyone know Express, to made API with Javascript. Fastify have the pretention to replace it!
 
 ## survey.devographics.com

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -77,10 +77,23 @@ html.dark {
 
 .social__container {
   display: flex;
-  flex-direction: column;
-  position: fixed;
   left: 0;
   top: 50%;
+
+  .social {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    transition: 0.2s;
+  }
+  .social:hover {
+      background-color: #cecece40;
+      padding: 0.5rem 2rem;
+      transition: 0.2s;
+      border-radius: 0.5em;
+  }
 }
 
 .post__image {
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,6 @@ const {pageTitle} = Astro.props; @@
     	<body>
     		<Header />
             <div class="container">
                 <slot />
             </div>
@@ Expand Down @@