Added Markdown + Start of article

jphetphoumy · May 6, 2024 · 9dfa651 · 9dfa651
1 parent bfc669d
commit 9dfa651
Show file tree

Hide file tree

Showing 17 changed files with 2,171 additions and 73 deletions.
diff --git a/app.vue b/app.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Head>
-        <title>Hackandpwned</title>
+        <title>.: Hackandpwned :.</title>
         <Meta http-equiv="cache-control" content="no-cache" />
         <Meta http-equiv="expires" content="0" />
         <Meta http-equiv="pragma" content="no-cache" />

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -5,8 +5,6 @@ body, html {
     background-color: #000;
     color: #fff;
     font-family: 'Courier New', monospace;
-    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-                      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
     background-size: 100% 2px, 3px 100%;
 }
 
@@ -18,7 +16,7 @@ a {
 
 a:hover {
     color: #fff;
-    text-decoration: underline;
+    border-bottom: 1px solid #fff;
 }
 
 /* Header and Navigation Styling */
@@ -40,21 +38,25 @@ nav ul li {
 
 /* Main Content Area */
 main {
-    padding: 20px;
-    border: 1px solid #fff;
     margin: 20px auto;
     max-width: 800px;
-    min-height: 300px;
 }
 
 /* Article and Text Styling */
 article {
     margin: 20px 0;
     padding: 10px;
-    border-top: 1px solid #fff;
     border-bottom: 1px solid #fff;
 }
 
+article h3::before {
+    content: '> ';
+}
+
+article h2::before {
+    content: '// '; 
+}
+
 h1 {
     font-size: 1.5em;
 }
@@ -66,11 +68,10 @@ h2 {
 /* Footer Styling */
 footer {
     text-align: center;
+    box-sizing: border-box;
     padding: 10px 20px;
     background-color: #000;
     color: #fff;
-    position: fixed;
-    bottom: 0;
     width: 100%;
 }
 
@@ -90,4 +91,3 @@ input[type="text"] {
     border-bottom: 2px solid #fff;
     animation: blink 1s step-end infinite;
 }
-
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -1,17 +1,84 @@
 <script setup lang="ts">
 const props = defineProps<{
-    title: string
-    links: string[]
+    title: string;
+    links: Array<{
+        href: string;
+        name: string;
+        dropdown?: Array<{
+            href: string;
+            name: string;
+        }>;
+    }>;
 }>();
+
+const route = useRoute();
+
+const isActive = (href: string) => {
+    return route.path === href;
+};
 </script>
 <template>
     <header>
-        <h1>{{title}}</h1>
+        <h1>{{ title }}</h1>
         <h2>DevOps & Hacking Insights</h2>
         <nav>
             <ul>
-                <li v-for="link in links"><a :href="link.href">{{link.name}}</a></li>
+                <li v-for="link in links" :key="link.href">
+                    <a :class="{ 'current-link': isActive(link.href) }" :href="link.href">{{ link.name }}</a>
+                    <ul v-if="link.dropdown" class="dropdown">
+                        <li v-for="dropdownLink in link.dropdown" :key="dropdownLink.href">
+                            <a :href="dropdownLink.href">{{ dropdownLink.name }}</a>
+                        </li>
+                    </ul>
+                </li>
             </ul>
         </nav>
     </header>
 </template>
+
+<style scoped>
+.current-link {
+    border-bottom: 1px solid #fff;
+}
+
+nav ul {
+    list-style-type: none; /* Removes bullet points from lists */
+    padding: 0; /* Removes padding around the list */
+}
+
+li {
+    position: relative; /* Makes this a reference for absolute positioning of children */
+}
+
+.dropdown {
+    display: none; /* Initially hides the dropdown */
+    position: absolute;
+    background-color: #f9f9f9; /* Light grey background */
+    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Adds shadow for better visibility */
+    z-index: 1;
+    left: 0; /* Aligns the dropdown with the left edge of the parent link */
+    top: 100%; /* Positions the dropdown right below the parent link */
+    min-width: 100%; /* Ensures the dropdown is at least as wide as the parent */
+}
+
+.dropdown li {
+    float: none; /* Prevents floating to align properly */
+}
+
+.dropdown li a {
+    color: black; /* Text color for links */
+    padding: 12px 16px; /* Spacing inside the link for easier clicking */
+    text-decoration: none; /* Removes underline from links */
+    display: block; /* Makes the link fill the container for better clickability */
+    text-align: left; /* Aligns text to the left */
+}
+
+.dropdown li a:hover {
+    text-decoration: underline; /* Underlines the link when hovered */
+    border: none;
+}
+
+li:hover > .dropdown {
+    display: block; /* Shows the dropdown when parent li is hovered */
+}
+</style>
diff --git a/components/Article.vue b/components/Article.vue
@@ -0,0 +1,7 @@
+<template>
+    <section class="articles">
+        <article>
+            <ContentDoc />
+        </article>
+    </section>
+</template>
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="container">
+    <div class="copy-container">
+      <span class="language-text"> {{ language }}</span>
+      <span class="copied-text" v-if="copied">Copied!</span>
+      <div class="copy-button" v-if="!copied">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" height="15px">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
+          </svg>
+          <button @click="copy(code)" class="copy-button">Copy</button>
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+const props = withDefaults(
+  defineProps<{
+    code?: string
+    language?: string | null
+    filename?: string | null
+    highlights?: Array<number>
+  }>(),
+  { code: '', language: null, filename: null, highlights: [] }
+)
+const { copy, copied, text } = useClipboard()
+</script>
+
+<style scoped>
+.container {
+  background: #1e1e1e;
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  overflow: hidden;
+  border-radius: 0.5rem;
+}
+
+.filename-text {
+  position: absolute;
+  top: .5em;
+  left: 1em;
+  color: white;
+  font-size: 14px;
+}
+
+.copy-container {
+    padding: .3em .3em .3em 10px; /* top right bottom left */
+    background: #343434;
+    display: flex;
+    justify-content: space-between;
+}
+
+.copy-button {
+    display: flex;
+}
+.copy-container button {
+    cursor: pointer;
+    background: none;
+    color: inherit;
+    border: none;
+}
+
+:deep(pre) {
+    padding-left: 1em;
+}
+</style>
+
diff --git a/content/about.md b/content/about.md
@@ -0,0 +1 @@
+# About
diff --git a/content/articles/LLM/index.md b/content/articles/LLM/index.md
@@ -0,0 +1,9 @@
+---
+title: "LLM"
+---
+
+# Latest articles
+
+## LLM
+
+[Setting up a simple RAG application with Ollama, Langchain and Gradio](/articles/setting-up-a-simple-rag-application-with-ollama-langchain-and-gradio)
diff --git a/...cles/fr/setting-up-a-simple-rag-application-with-ollama-langchain-and-gradio.md b/...cles/fr/setting-up-a-simple-rag-application-with-ollama-langchain-and-gradio.md
@@ -0,0 +1,29 @@
+# Mettre en place une application RAG avec Ollama, Langchain et Gradio
+___
+
+[Lire l'article en anglais](/articles/setting-up-a-simple-rag-application-with-ollama-langchain-and-gradio)
+
+## Installation des outils: Ollama, Langchain and Gradio
+
+### Ollama
+
+Ollama est la solution la plus simple pour faire tourner un LLM en locale. C'est aussi simple que de lancer `docker pull`. Pour commencer avec Ollama, On peut le télécharger
+ sur le [site officiel](https://ollama.com/download)
+
+Pour utiliser le LLM en locale avec Ollama, il suffit de simplement lancer la command `ollama pull <nom du modèle>`. Si on veut utiliser le nouveau modèle **LLAMA 3**, on peut lancer la commande suivante :  
+
+```bash
+ollama pull llama3
+```
+
+Quand le téléchargement du modèle sera complété, on peut utiliser le modèle avec la commande suivante: 
+
+```bash
+ollama run llama3
+```
+
+### Langchain
+
+### Gradio
+
+## Creating a simple python application using Gradio and langchain
diff --git a/content/articles/index.md b/content/articles/index.md
@@ -0,0 +1,9 @@
+---
+title: "Latest articles"
+---
+
+# Latest articles
+
+## LLM
+
+[Setting up a simple RAG application with Ollama, Langchain and Gradio](/articles/setting-up-a-simple-rag-application-with-ollama-langchain-and-gradio)
diff --git a/...rticles/setting-up-a-simple-rag-application-with-ollama-langchain-and-gradio.md b/...rticles/setting-up-a-simple-rag-application-with-ollama-langchain-and-gradio.md
@@ -0,0 +1,44 @@
+# Setting up a simple rag application with ollama langchain and gradio
+___
+
+[Read this article in french](/articles/fr/setting-up-a-simple-rag-application-with-ollama-langchain-and-gradio)
+
+## What is Retrieval-Augmented Generation (RAG) ?
+
+Retrieval-Augmented Generation, or RAG, is this super cool tech that supercharges large language models (LLMs) like the ones we use in AI chatbots and search engines. Basically, it makes AI responses smarter by pulling in fresh, relevant info from external sources right when you need it.
+
+### Why RAG Rocks for LLMS !
+
+Here's why you might want to consider using RAG if you're messing around with AI models:
+
+1. **Keeps Things Fresh:** RAG enables LLMs to pull in the latest data beyond their training datasets, diminishing the likelihood of delivering outdated or inaccurate responses.
+2. **Keeps it Real:** Instead of making up answers (yeah, AI does that sometimes), RAG helps keep the AI’s responses grounded in actual, factual data. 
+3. **Easy to Implement:** You don't need to be a coding wizard to get RAG rolling, and it doesn't cost an arm and a leg to update your AI model. 
+
+In short, RAG is like giving your AI a mini-upgrade with each query, ensuring it's always on its A-game when answering questions or helping out users. It's a game-changer for making AI interactions a lot more reliable and useful.
+
+## Installation of the tools: Ollama, Langchain and Gradio
+
+### Ollama
+
+Ollama is the easiest solution to run LLM locally. It's as simple as running `docker pull`. To get started with Ollama, you can download it on the [official website](https://ollama.com/download)
+
+To use a local LLM with ollama, simply use `ollama pull <model-name>`. If we want to use the new **LLAMA 3** model, we can run the following command :
+
+```bash
+ollama pull llama3
+```
+
+When the model download is complete, you can use the model with the following command: 
+
+```bash
+ollama run llama3
+```
+
+### Langchain
+
+### Gradio
+
+## Creating a simple python application using Gradio and langchain
+
+*[RAG]: Retrieval-Augmented Generation
diff --git a/content/contact.md b/content/contact.md
@@ -0,0 +1,8 @@
+# Whoami 
+
+Follow me on 
+
+- [Linkedin](https://www.linkedin.com/in/jeremy-phetphoumy/)
+- [Github](https://github.com/jphetphoumy)
+
+Happy hacking !
diff --git a/content/index.md b/content/index.md
@@ -0,0 +1,18 @@
+---
+title: 'Welcome on Hackandpwned'
+description: 'Home'
+---
+
+# Welcome
+
+Welcome to Hackandpwned ! Here I will write about what I love. **Devops and Hacking**.
+
+If you like the following topic : 
+
+- **Hacking**
+- **Devops**
+- **LLM**
+
+See the Latest blogpost I did here : [articles](/articles)
+
+Happy hacking ;)
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import AppFooter from '~/components/AppFooter.vue'
 import AppHeader from '~/components/AppHeader.vue'
+import Article from '~/components/Article.vue'
 const links = [
     { name: 'Home', href: '/' },
-    { name: 'Articles', href: '/' },
-    { name: 'About', href: '/' },
-    { name: 'Contact', href: '/' },
+    { name: 'Articles', href: '/articles' },
+    { name: 'About', href: '/about' },
+    { name: 'Contact', href: '/contact' },
 ];
 </script>
 <template>
     <AppHeader title="Hackandpwned" :links="links" />
     <main>
-        <slot></slot>
+        <Article />
     </main>
     <AppFooter />
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ['~/assets/css/main.css']
+  css: ['~/assets/css/main.css'],
+  modules: ["@nuxt/content"]
 })