Vue Components
Relevant source files
The following files were used as context for generating this wiki page:
The project utilizes Vue 3, as indicated by the presence of @vitejs/plugin-vue in its development dependencies. However, the Vue components within this repository, specifically projetItem.vue and situationItem.vue, are not used to build a traditional Single Page Application (SPA). Instead, they function as scripts for post-render DOM manipulation on pages likely generated by the Hexo static site generator, which is also a core dependency.
These components' primary role is to dynamically rewrite hyperlink (<a>) href attributes after the component is mounted. This unconventional approach suggests they are intended to inject dynamic routing behavior into otherwise static HTML pages. The logic is contained entirely within the onMounted lifecycle hook, which queries the global document object to find and modify elements.
Sources: package.json:34, src/projetItem.vue:8-19, src/situationItem.vue:8-20, src/t.txt
Component Overview
The repository contains two main Vue components that share a similar structure and purpose but differ in their URL rewriting logic.
| Component | File Path | Purpose |
|---|---|---|
projetItem | src/projetItem.vue | Scans the DOM for <a> tags with an ID and rewrites their href to a /projet/ sub-path. |
situationItem | src/situationItem.vue | Scans the DOM for <a> tags with an ID and rewrites their href to a /situation/ sub-path, encoding the text content. |
Sources: src/projetItem.vue, src/situationItem.vue
Core Functionality: Dynamic Link Rewriting
Both components execute their main logic within the onMounted lifecycle hook. Upon mounting, they traverse the entire DOM, identify specific anchor tags, and modify their href attributes to create dynamic-looking URLs.
This diagram illustrates the workflow executed by each component upon mounting.
projetItem.vue Rewriting Logic
This component targets links that should point to a "projet" (project) page. It constructs the new URL by appending projet/ and the link's text content to the current window's location.
// src/projetItem.vue:13-15
item.href=window.location.href+"projet/"+item.textContent.split("/")[item.textContent.split("/").length-1]
item.href=item.href.replace("situationsituation",'situation').replace("projetprojet",'projet')
Sources: src/projetItem.vue:13-15
situationItem.vue Rewriting Logic
This component is similar but targets links for "situation" pages. It URI-encodes the link's text content to ensure the resulting URL is safe.
// src/situationItem.vue:14-16
const safeText = encodeURIComponent(item.textContent.split("/")[item.textContent.split("/").length-1]);
item.href = window.location.href + "situation/" + safeText;
item.href=item.href.replace("situationsituation",'situation').replace("projetprojet",'projet')
Sources: src/situationItem.vue:14-16
Component Structure and Styling
The components share an identical template and styling, indicating they are designed to be used interchangeably for list items that require a timeline-like visual representation.
Template
The template for both components is a simple anchor tag wrapping a slot. This allows parent components to inject content, which is then displayed as a link.
<!-- src/projetItem.vue:29-31 -->
<template>
<a href="/" id="redirect"> <slot name="heading" id ="name"></slot></a>
</template>
Sources: src/projetItem.vue:29-31, src/situationItem.vue:28-30
Styling
The scoped CSS is extensive and creates a vertical timeline effect for a list of items, primarily on desktop viewports (min-width: 1024px). It uses ::before and ::after pseudo-elements to draw connecting lines between items.
| Class / Selector | Description |
|---|---|
.item | The main container for each list item. |
i | A circular icon element positioned to the left of the item on desktop. |
.item:before | A vertical line extending upwards from the item's icon. |
.item:after | A vertical line extending downwards from the item's icon. |
.item:first-of-type:before | Hides the top line for the first item in the list. |
.item:last-of-type:after | Hides the bottom line for the last item in the list. |
Sources: src/projetItem.vue:35-90, src/situationItem.vue:34-89
Project Context and Dependencies
The package.json file reveals a hybrid project structure combining a static site generator with Vue.
- Static Site Generation: The project uses
hexo, a Node.js-based static site generator. Thebuildscripthexo deployconfirms that Hexo is the primary tool for generating the production site. The build log insrc/t.txtshows Hexo generating various HTML files likeprojet-youtube.htmlandsituation-tp.html. - Vue Integration:
vite,@vitejs/plugin-vue, andvitestare listed as development dependencies, indicating that Vue 3 is used for development and testing. The Vue components likely act on the static HTML files generated by Hexo. - Missing Dependency: Both
projetItem.vueandsituationItem.vueimport a module from'../temp'. This file is not available in the repository, suggesting it might be a temporary or locally-generated file for logging or utility functions.
This setup implies that the Vue components are not part of a SPA but are instead loaded into static pages to provide client-side dynamic functionality, a pattern also seen in public/test.html where vanilla JavaScript is used to modify links post-load.
Sources: package.json:4-7, 34, src/t.txt, src/projetItem.vue:4, src/situationItem.vue:4, public/test.html:77-85