Building a Blog using Vitepress and VueJS with Markdown

In this tutorial, you'll learn about Vitepress by building a blog using Vitepress and Vue.js with Markdown. Vitepress is a static site generator powered by Vite and Vue.js

Vitepress is a static site generator powered by Vite and Vue.js that is quickly gaining popularity in the frontend world. It has excellent features that simplify building static sites and offers minimal functionalities without compromising performance. With Vitepress, you can design your pages and content using Markdown and different themes to build web pages faster.

This article aims to familiarize you with Vitepress by building a blog using Vitepress and Vue.js with Markdown.

  • What are Vite and Vitepress?
  • Building a blog with Vitepress and Vue.js
    • Creating a static site with Vitepress
    • Vitepress configurations
    • Adding posts to the blog with Vitepress and Vue.js
    • Designing blog post cards on the homepage
    • Styling the blog homepage with Vitepress and Vue.js
    • Accessing front matter in Vitepress
    • Finalizing the blog with Vitepress and Vue.js

What are Vite and Vitepress?

Vitepress, as the name suggests, is powered by Vite. Vite replaces tools like Rollup and Webpack and aims to address the pain points of Webpack and other frontend build tools. The primary benefits of using Vite are:

  • Faster server start
  • Instant hot module reloading(HMR)
  • Less time configuring

You can find more details about Vite here.

Webpack takes longer to start a development server, which can be unbearable for developers. When the documentation site gets larger, it becomes very annoying to work with Webpack. This was the primary motivation for developing Vitepress. If you have worked with Vuepress before, Vitepress is very similar, and both frameworks focus on building documentation pages with ease. One difference is that Vuepress uses Webpack and Vitepress uses Vite.

Instead of refactoring the codebase of Vuepress, Evan You, the founder of Vue and Vitepress, created the new static site generator with support for Vite and Vue 3. Their layouts are also designed for documentation sites. However, you can create layouts too.

Because it is in its alpha phase, Vitepress still lacks more features than Vuepress, but it is also effortless to work with because the team behind Vitepress wanted to keep it minimal.

It’s worth mentioning that Vitepress does not support the current Vuepress ecosystem because the team at Vitepress wants to keep the theming API minimal so that customizations can be done in the theme. To learn more about how Vitepress differs from Vuepress, refer to their official documentation.

Building a blog with Vitepress and Vue.js

Even though Vitepress can be used to build well-designed documentation sites quickly, you can extend the features of Vitepress to develop your blog. In this article, we will focus on creating a blog and learning the theming and customizations in Vitepress.

After going through the article, you can develop your documentation site or blog using Vitepress and Vue 3. But before diving into the article, please ensure you have a basic understanding of Vue 3.

Creating a static site with Vitepress

Getting started with Vitepress is extremely easy. You can start building your website with Vitepress by installing two primary developer packages. On your working directory, install vue and vitepress as developer dependencies.

To install the packages, run the following commands:

 npm i -D vue vitepress

The -D flag will install the packages as developer dependencies. Now, create a folder inside the working directory and name it whatever you want. Typically, the folder is named docs, so I’ll also use the docs name for the folder.

After creating docs, you’ll need to add some scripts to your package.json file. Copy the following scripts and paste them into your package.json file:

"scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },

Now, the setup for a barebone Vitepress app is ready. Create a Markdown file with the title index.md and add some dummy content inside the docs. Start the development server by running the command npm run docs:dev inside the terminal.

The default development port for Vitepress is localhost:5173. The index.md file will serve as the index.html file or the entry point for your Vitepress static site. If you visit the URL, you’ll be able to view your Vitepress page. Vitepress ships with a default theme. You can use different options the theme provides for customizing your website.

However, because the index.md file is empty, you won’t be able to see anything. You can add some text to index.md to see the changes on your Vitepress page. To customize the features, create a folder called .vitepress (be careful with the dot at the start) inside the docs. This folder is used to configure the Vitepress options.

Three types of configurations can be done on Vitepress: app config, theme config, and front matter config. The app config includes features like site title, Markdown parser customization, and more. At the same time, the theme config determines the application’s look. For example, if you want to add a navigation bar to your website, you’ll need to update the theme config.

The front matter config can override the global configuration for a specific page, app configs, and theme configs.

Vitepress configurations

Create a file called config.js inside this file. Vitepress will read this file to customize your application. This file can also be created with extensions like .ts, .mjs, .mts etc.

Let’s look at a dummy config.js file to understand how the theme can be customized:

export default {
  title: 'My Blog',
  description: 'Just playing around.',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Blog', link: '/articles/' },
      { text: 'External', link: 'https://google.com' },
    ],
  },
};

The object in the above code consists of three options: title, description, and themeConfig. The title and description keys are used for describing your website’s title and meta description. All these are app configurations.

Adding a head key can also add specific links for Google fonts or CSS files to the head. You can find all the app config options here.

The theme configurations can be added to an object with a themeConfig key, as shown above. The nav array defines the elements in the navigation bar, and you can also add dropdowns for navigation items. Here’s an example of how to use this:

export default {
  themeConfig: {
    nav: [
      { text: 'Guide', link: '/guide' },
      {
        text: 'Dropdown Menu',
        items: [
          { text: 'Item A', link: '/item-1' },
          { text: 'Item B', link: '/item-2' },
          { text: 'Item C', link: '/item-3' }
        ]
      }
    ]
  }
}

You can also add sidebars, footers, social links, and more with themeConfig.

Adding posts to the blog with Vitepress and Vue

Now, let’s add some posts to our blog. Create a folder called articles inside the docs folder and add any post in Markdown format. For example, let’s add a Markdown post called article1.md.

Now, open the index.md file we created earlier, and add the article1.md link. The index.md Markdown file will look like this:

[Article 1](/articles/article1) 

Adding this will render the post as below on your homepage:

Demo of the Vitepress Homepage

If you click the link, it will render your Markdown file as an HTML page. One great thing about Vitepress is that you can add Vue 3 components directly to your Markdown files to configure your homepage easily.

Designing blog post cards on the homepage

Let’s add a blog post card on the homepage. Create a components folder inside the docs. Now, create a file called ArticleCard.vue. A Vue component can contain a template, script, and style. First, let’s take a look at the template:

<template>
  <a :href="href">
    <div class="card">
      <div class="flex">
        <div class="media">
          <img :src="image" :alt="title" />
        </div>
        <div class="details">
          <h2 class="title">{{ title }}</h2>
          <p class="excerpt">{{ truncateText(excerpt, 50) }}</p>
          <div class="author">
            <div>
              <h3 class="name">{{ author }}</h3>
              <p class="date">{{ date }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
</template>

The code is fairly simple, as we only use a few props to pass data into the component. Let’s look at the script to explore the props:

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    excerpt: {
      type: String,
      required: true,
    },
    image: {
      type: String,
      required: true,
    },
    author: {
      type: String,
      required: true,
    },
    date: {
      type: String,
      required: true,
    },
    href: {
      type: String,
      required: true,
    },
  },
  methods: {
    truncateText(text, length) {
      if (text.length > length) {
        return text.substring(0, length) + "...";
      }
      return text;
    },
  },
};
</script>

Styling the blog homepage with Vitepress and Vue

The props for the card are title, excerpt, image, author, date, and href. The names of the props are self-explanatory. Along with that, we have a function that truncates the excerpt size. It takes some text and the length of the characters as arguments and returns a truncated text with trailing dots. I won’t explain the basic styling because I assume you know the basics of CSS.

The styles for this component are seen below:

<style scoped>
.card {
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  margin-bottom: 1.5rem;
  overflow: hidden;
  width: 100%;
}

.card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
  transition: ease-in-out 0.2s all;
}

.flex {
  display: flex;
}

.media {
  width: 45%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.details {
  margin-left: 1.2rem;
}

.title {
  border-top: none;
  margin: 0 0;
}

.name {
  margin: 0 0;
  font-size: 0.7rem;
  color: #999;
}
</style>

I’ve also made a hero component. Here’s the code for the Hero.vue:

<template>
  <div class="hero">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">Hey, I'm {{ name || "John Doe" }}.</h1>
        <h2 class="subtitle">
          {{ subtitle }}
        </h2>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
    },
    subtitle: {
      type: String,
      required: true,
    },
  },
};
</script>

<style>
h2.subtitle {
  font-size: 1.2rem;
  border-top: none;
}
</style>

Now that we have created the components, let’s add them to the index.md file:

<script setup>
  import Hero from './components/Hero.vue'
  import ArticleCard from './components/ArticleCard.vue'
</script>

<Hero name="Nemo" subtitle="Welcome to my blog. This one is built with Vitepress and Vue.js. Vitepress is super cool." />

<ArticleCard title="Article 1" excerpt="Lorem i" image="https://images.unsplash.com/photo-1664663751485-c58e9276ccce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1167&q=80" author="John Doe" href="/articles/article1" date="2022-08-01" />

This is just like any standard Vue component. However, if you want to add Markdowns in this file, you can directly add them after the ending script tag.

Your homepage will now look like this:

Blog with Vue.js and Vitepress Component

Right now, we have the default colors set by Vitepress. You can customize the colors of the component through the style tag in the component. For the Markdown-specific files, you can also override the default styles. You can refer to the documentation for more details.

Right now, there’s one problem with the blog. It will be a terrible idea to manually add all the articles to the index .md file every time you add a new article. So, how do we fix this?

Accessing front matter in Vitepress

Vuepress has inbuilt support for front matter fetching. You can access the front matter details by accessing the $site variable. But this is not the case with Vitepress. To keep Vitepress minimal, it does not support it. We have to figure out a way to do this ourselves.

One way to achieve this is to write a simple script that will fetch the front matter details and write it to a JSON file.

Let’s take a look at a simple script for doing this:

// Credits to Divyansh Singh
// Twitter: @_brc_dd

import fs from 'node:fs/promises';
import matter from 'gray-matter';
import removeMd from 'remove-markdown';

const articles = await fs.readdir('./docs/articles');

const data = await Promise.all(
  articles.map(async (article) => {
    const file = matter.read(`./docs/articles/${article}`, {
      excerpt: true,
      excerpt_separator: '

',
});
const { data, excerpt, path } = file;
const contents = removeMd(excerpt)
.trim()
.split(/\r\n|\n|\r/);
return {
...data,
title: contents[0].replace(/\s{2,}/g, '').trim(),
path: path.replace('./docs/', '').replace(/\.md$/, '.html'),
excerpt: contents
.slice(1)
.join('')
.replace(/\s{2,}/g, '')
.trim(),
};
})
);
await fs.writeFile('./data.json', JSON.stringify(data), 'utf-8');

First, we need to install gray-matter and remove-markdown. The gray-matter package reads the front matter from Markdown files, while the remove-markdown package is used to remove any Markdown from a text. To install the packages, run the npm i remove-markdown gray-matter command.

Finalizing the blog with Vitepress and Vue.js

Now let’s discuss the script. The first step is to read the directory where the articles are stored. In this case, the articles are inside the docs/articles folder. We are storing the values inside the folder in a variable called articles.

Now, inside a Promise, we’ll map through each item available inside the articles folder. The Markdown is read using the matter.read function available in the gray-matter package. This function returns all the necessary information like the path, excerpt, etc. It also contains a data object that stores the front matter details.

The excerpt is read by reading the quote(>) after the heading. For the <!-- more --> divider, it would consider the quote as the excerpt. The divider is defined in the above code as excerpt_separator:

---
Author: Nemo
Updated: 2022-06-01
image: https://images.unsplash.com/photo-1664575198263-269a022d6e14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
---
# Si pace ad caput
> lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Now, the required data is restructured from the file. The excerpt is cleaned using the removeMd package. A regex operation is used to clean the CRLF and LF line breaks. Finally, the data is returned.

In the data, the path is replaced from ./docs/articles/article.md to /articles/article.html for rendering it as an HTML. Save the script as getArticles.mjs. If you want, you can keep it without any extensions as well.

The mjs extension is used so that we can use ECMAScript modules. The data generated from the script is written into a  data.json file in JSON format. To run this script every time a new build is started, change your package scripts to this:

"scripts": {
    "docs:dev": "node getArticles.mjs && vitepress dev docs",
    "docs:build": "node getArticles.mjs && vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },

Adding the node getArticles.mjs command at the start ensures that the script runs before the Vitepress server starts.

Now, on the homepage, let’s iterate over the articles and render them in the ArticleCard. A simple v-for loop can be used for rendering the articles. Let’s take a look at the final index.md page:

<script setup>
  import Hero from './components/Hero.vue'
  import ArticleCard from './components/ArticleCard.vue'

  import data from '../data.json' 
</script>

<Hero name="Nemo" subtitle="Welcome to my blog. This one is built with Vitepress and Vue.js. Vitepress is super cool." />

<div v-for="(article, index) in data" :key="index">
  <ArticleCard :title="article.title" :excerpt="article.excerpt" :image="article.image" :author="article.Author" :href="article.path" :date="article.Updated" />
</div>

When you start your Vitepress app, your homepage will look similar to the screenshot below:

Blog Page with Vitepress and Vue.js

Your blog is now ready!

You can visit this Stackblitz repo to check a working version of this, or you can also check out the GitHub repository for the complete code.

Conclusion

The purpose of the article was to help you get started with Vitepress. It showed you how to extend Vitepress to build your blog and customize the pages as you want. Vitepress provides a minimal approach to building static sites for documentation sites or blogs.

Vitepress is still in its alpha stage, so things can break. It is a good idea not to use Vitepress for your production apps just now. But if you want to explore more about the library, you can check out the documentation.

Original article source at 

#webdev #vue #markdown #vitepress 

What is GEEK

Buddha Community

Building a Blog using Vitepress and VueJS with Markdown
Chloe  Butler

Chloe Butler

1667425440

Pdf2gerb: Perl Script Converts PDF Files to Gerber format

pdf2gerb

Perl script converts PDF files to Gerber format

Pdf2Gerb generates Gerber 274X photoplotting and Excellon drill files from PDFs of a PCB. Up to three PDFs are used: the top copper layer, the bottom copper layer (for 2-sided PCBs), and an optional silk screen layer. The PDFs can be created directly from any PDF drawing software, or a PDF print driver can be used to capture the Print output if the drawing software does not directly support output to PDF.

The general workflow is as follows:

  1. Design the PCB using your favorite CAD or drawing software.
  2. Print the top and bottom copper and top silk screen layers to a PDF file.
  3. Run Pdf2Gerb on the PDFs to create Gerber and Excellon files.
  4. Use a Gerber viewer to double-check the output against the original PCB design.
  5. Make adjustments as needed.
  6. Submit the files to a PCB manufacturer.

Please note that Pdf2Gerb does NOT perform DRC (Design Rule Checks), as these will vary according to individual PCB manufacturer conventions and capabilities. Also note that Pdf2Gerb is not perfect, so the output files must always be checked before submitting them. As of version 1.6, Pdf2Gerb supports most PCB elements, such as round and square pads, round holes, traces, SMD pads, ground planes, no-fill areas, and panelization. However, because it interprets the graphical output of a Print function, there are limitations in what it can recognize (or there may be bugs).

See docs/Pdf2Gerb.pdf for install/setup, config, usage, and other info.


pdf2gerb_cfg.pm

#Pdf2Gerb config settings:
#Put this file in same folder/directory as pdf2gerb.pl itself (global settings),
#or copy to another folder/directory with PDFs if you want PCB-specific settings.
#There is only one user of this file, so we don't need a custom package or namespace.
#NOTE: all constants defined in here will be added to main namespace.
#package pdf2gerb_cfg;

use strict; #trap undef vars (easier debug)
use warnings; #other useful info (easier debug)


##############################################################################################
#configurable settings:
#change values here instead of in main pfg2gerb.pl file

use constant WANT_COLORS => ($^O !~ m/Win/); #ANSI colors no worky on Windows? this must be set < first DebugPrint() call

#just a little warning; set realistic expectations:
#DebugPrint("${\(CYAN)}Pdf2Gerb.pl ${\(VERSION)}, $^O O/S\n${\(YELLOW)}${\(BOLD)}${\(ITALIC)}This is EXPERIMENTAL software.  \nGerber files MAY CONTAIN ERRORS.  Please CHECK them before fabrication!${\(RESET)}", 0); #if WANT_DEBUG

use constant METRIC => FALSE; #set to TRUE for metric units (only affect final numbers in output files, not internal arithmetic)
use constant APERTURE_LIMIT => 0; #34; #max #apertures to use; generate warnings if too many apertures are used (0 to not check)
use constant DRILL_FMT => '2.4'; #'2.3'; #'2.4' is the default for PCB fab; change to '2.3' for CNC

use constant WANT_DEBUG => 0; #10; #level of debug wanted; higher == more, lower == less, 0 == none
use constant GERBER_DEBUG => 0; #level of debug to include in Gerber file; DON'T USE FOR FABRICATION
use constant WANT_STREAMS => FALSE; #TRUE; #save decompressed streams to files (for debug)
use constant WANT_ALLINPUT => FALSE; #TRUE; #save entire input stream (for debug ONLY)

#DebugPrint(sprintf("${\(CYAN)}DEBUG: stdout %d, gerber %d, want streams? %d, all input? %d, O/S: $^O, Perl: $]${\(RESET)}\n", WANT_DEBUG, GERBER_DEBUG, WANT_STREAMS, WANT_ALLINPUT), 1);
#DebugPrint(sprintf("max int = %d, min int = %d\n", MAXINT, MININT), 1); 

#define standard trace and pad sizes to reduce scaling or PDF rendering errors:
#This avoids weird aperture settings and replaces them with more standardized values.
#(I'm not sure how photoplotters handle strange sizes).
#Fewer choices here gives more accurate mapping in the final Gerber files.
#units are in inches
use constant TOOL_SIZES => #add more as desired
(
#round or square pads (> 0) and drills (< 0):
    .010, -.001,  #tiny pads for SMD; dummy drill size (too small for practical use, but needed so StandardTool will use this entry)
    .031, -.014,  #used for vias
    .041, -.020,  #smallest non-filled plated hole
    .051, -.025,
    .056, -.029,  #useful for IC pins
    .070, -.033,
    .075, -.040,  #heavier leads
#    .090, -.043,  #NOTE: 600 dpi is not high enough resolution to reliably distinguish between .043" and .046", so choose 1 of the 2 here
    .100, -.046,
    .115, -.052,
    .130, -.061,
    .140, -.067,
    .150, -.079,
    .175, -.088,
    .190, -.093,
    .200, -.100,
    .220, -.110,
    .160, -.125,  #useful for mounting holes
#some additional pad sizes without holes (repeat a previous hole size if you just want the pad size):
    .090, -.040,  #want a .090 pad option, but use dummy hole size
    .065, -.040, #.065 x .065 rect pad
    .035, -.040, #.035 x .065 rect pad
#traces:
    .001,  #too thin for real traces; use only for board outlines
    .006,  #minimum real trace width; mainly used for text
    .008,  #mainly used for mid-sized text, not traces
    .010,  #minimum recommended trace width for low-current signals
    .012,
    .015,  #moderate low-voltage current
    .020,  #heavier trace for power, ground (even if a lighter one is adequate)
    .025,
    .030,  #heavy-current traces; be careful with these ones!
    .040,
    .050,
    .060,
    .080,
    .100,
    .120,
);
#Areas larger than the values below will be filled with parallel lines:
#This cuts down on the number of aperture sizes used.
#Set to 0 to always use an aperture or drill, regardless of size.
use constant { MAX_APERTURE => max((TOOL_SIZES)) + .004, MAX_DRILL => -min((TOOL_SIZES)) + .004 }; #max aperture and drill sizes (plus a little tolerance)
#DebugPrint(sprintf("using %d standard tool sizes: %s, max aper %.3f, max drill %.3f\n", scalar((TOOL_SIZES)), join(", ", (TOOL_SIZES)), MAX_APERTURE, MAX_DRILL), 1);

#NOTE: Compare the PDF to the original CAD file to check the accuracy of the PDF rendering and parsing!
#for example, the CAD software I used generated the following circles for holes:
#CAD hole size:   parsed PDF diameter:      error:
#  .014                .016                +.002
#  .020                .02267              +.00267
#  .025                .026                +.001
#  .029                .03167              +.00267
#  .033                .036                +.003
#  .040                .04267              +.00267
#This was usually ~ .002" - .003" too big compared to the hole as displayed in the CAD software.
#To compensate for PDF rendering errors (either during CAD Print function or PDF parsing logic), adjust the values below as needed.
#units are pixels; for example, a value of 2.4 at 600 dpi = .0004 inch, 2 at 600 dpi = .0033"
use constant
{
    HOLE_ADJUST => -0.004 * 600, #-2.6, #holes seemed to be slightly oversized (by .002" - .004"), so shrink them a little
    RNDPAD_ADJUST => -0.003 * 600, #-2, #-2.4, #round pads seemed to be slightly oversized, so shrink them a little
    SQRPAD_ADJUST => +0.001 * 600, #+.5, #square pads are sometimes too small by .00067, so bump them up a little
    RECTPAD_ADJUST => 0, #(pixels) rectangular pads seem to be okay? (not tested much)
    TRACE_ADJUST => 0, #(pixels) traces seemed to be okay?
    REDUCE_TOLERANCE => .001, #(inches) allow this much variation when reducing circles and rects
};

#Also, my CAD's Print function or the PDF print driver I used was a little off for circles, so define some additional adjustment values here:
#Values are added to X/Y coordinates; units are pixels; for example, a value of 1 at 600 dpi would be ~= .002 inch
use constant
{
    CIRCLE_ADJUST_MINX => 0,
    CIRCLE_ADJUST_MINY => -0.001 * 600, #-1, #circles were a little too high, so nudge them a little lower
    CIRCLE_ADJUST_MAXX => +0.001 * 600, #+1, #circles were a little too far to the left, so nudge them a little to the right
    CIRCLE_ADJUST_MAXY => 0,
    SUBST_CIRCLE_CLIPRECT => FALSE, #generate circle and substitute for clip rects (to compensate for the way some CAD software draws circles)
    WANT_CLIPRECT => TRUE, #FALSE, #AI doesn't need clip rect at all? should be on normally?
    RECT_COMPLETION => FALSE, #TRUE, #fill in 4th side of rect when 3 sides found
};

#allow .012 clearance around pads for solder mask:
#This value effectively adjusts pad sizes in the TOOL_SIZES list above (only for solder mask layers).
use constant SOLDER_MARGIN => +.012; #units are inches

#line join/cap styles:
use constant
{
    CAP_NONE => 0, #butt (none); line is exact length
    CAP_ROUND => 1, #round cap/join; line overhangs by a semi-circle at either end
    CAP_SQUARE => 2, #square cap/join; line overhangs by a half square on either end
    CAP_OVERRIDE => FALSE, #cap style overrides drawing logic
};
    
#number of elements in each shape type:
use constant
{
    RECT_SHAPELEN => 6, #x0, y0, x1, y1, count, "rect" (start, end corners)
    LINE_SHAPELEN => 6, #x0, y0, x1, y1, count, "line" (line seg)
    CURVE_SHAPELEN => 10, #xstart, ystart, x0, y0, x1, y1, xend, yend, count, "curve" (bezier 2 points)
    CIRCLE_SHAPELEN => 5, #x, y, 5, count, "circle" (center + radius)
};
#const my %SHAPELEN =
#Readonly my %SHAPELEN =>
our %SHAPELEN =
(
    rect => RECT_SHAPELEN,
    line => LINE_SHAPELEN,
    curve => CURVE_SHAPELEN,
    circle => CIRCLE_SHAPELEN,
);

#panelization:
#This will repeat the entire body the number of times indicated along the X or Y axes (files grow accordingly).
#Display elements that overhang PCB boundary can be squashed or left as-is (typically text or other silk screen markings).
#Set "overhangs" TRUE to allow overhangs, FALSE to truncate them.
#xpad and ypad allow margins to be added around outer edge of panelized PCB.
use constant PANELIZE => {'x' => 1, 'y' => 1, 'xpad' => 0, 'ypad' => 0, 'overhangs' => TRUE}; #number of times to repeat in X and Y directions

# Set this to 1 if you need TurboCAD support.
#$turboCAD = FALSE; #is this still needed as an option?

#CIRCAD pad generation uses an appropriate aperture, then moves it (stroke) "a little" - we use this to find pads and distinguish them from PCB holes. 
use constant PAD_STROKE => 0.3; #0.0005 * 600; #units are pixels
#convert very short traces to pads or holes:
use constant TRACE_MINLEN => .001; #units are inches
#use constant ALWAYS_XY => TRUE; #FALSE; #force XY even if X or Y doesn't change; NOTE: needs to be TRUE for all pads to show in FlatCAM and ViewPlot
use constant REMOVE_POLARITY => FALSE; #TRUE; #set to remove subtractive (negative) polarity; NOTE: must be FALSE for ground planes

#PDF uses "points", each point = 1/72 inch
#combined with a PDF scale factor of .12, this gives 600 dpi resolution (1/72 * .12 = 600 dpi)
use constant INCHES_PER_POINT => 1/72; #0.0138888889; #multiply point-size by this to get inches

# The precision used when computing a bezier curve. Higher numbers are more precise but slower (and generate larger files).
#$bezierPrecision = 100;
use constant BEZIER_PRECISION => 36; #100; #use const; reduced for faster rendering (mainly used for silk screen and thermal pads)

# Ground planes and silk screen or larger copper rectangles or circles are filled line-by-line using this resolution.
use constant FILL_WIDTH => .01; #fill at most 0.01 inch at a time

# The max number of characters to read into memory
use constant MAX_BYTES => 10 * M; #bumped up to 10 MB, use const

use constant DUP_DRILL1 => TRUE; #FALSE; #kludge: ViewPlot doesn't load drill files that are too small so duplicate first tool

my $runtime = time(); #Time::HiRes::gettimeofday(); #measure my execution time

print STDERR "Loaded config settings from '${\(__FILE__)}'.\n";
1; #last value must be truthful to indicate successful load


#############################################################################################
#junk/experiment:

#use Package::Constants;
#use Exporter qw(import); #https://perldoc.perl.org/Exporter.html

#my $caller = "pdf2gerb::";

#sub cfg
#{
#    my $proto = shift;
#    my $class = ref($proto) || $proto;
#    my $settings =
#    {
#        $WANT_DEBUG => 990, #10; #level of debug wanted; higher == more, lower == less, 0 == none
#    };
#    bless($settings, $class);
#    return $settings;
#}

#use constant HELLO => "hi there2"; #"main::HELLO" => "hi there";
#use constant GOODBYE => 14; #"main::GOODBYE" => 12;

#print STDERR "read cfg file\n";

#our @EXPORT_OK = Package::Constants->list(__PACKAGE__); #https://www.perlmonks.org/?node_id=1072691; NOTE: "_OK" skips short/common names

#print STDERR scalar(@EXPORT_OK) . " consts exported:\n";
#foreach(@EXPORT_OK) { print STDERR "$_\n"; }
#my $val = main::thing("xyz");
#print STDERR "caller gave me $val\n";
#foreach my $arg (@ARGV) { print STDERR "arg $arg\n"; }

Download Details:

Author: swannman
Source Code: https://github.com/swannman/pdf2gerb

License: GPL-3.0 license

#perl 

Building a Blog using Vitepress and VueJS with Markdown

In this tutorial, you'll learn about Vitepress by building a blog using Vitepress and Vue.js with Markdown. Vitepress is a static site generator powered by Vite and Vue.js

Vitepress is a static site generator powered by Vite and Vue.js that is quickly gaining popularity in the frontend world. It has excellent features that simplify building static sites and offers minimal functionalities without compromising performance. With Vitepress, you can design your pages and content using Markdown and different themes to build web pages faster.

This article aims to familiarize you with Vitepress by building a blog using Vitepress and Vue.js with Markdown.

  • What are Vite and Vitepress?
  • Building a blog with Vitepress and Vue.js
    • Creating a static site with Vitepress
    • Vitepress configurations
    • Adding posts to the blog with Vitepress and Vue.js
    • Designing blog post cards on the homepage
    • Styling the blog homepage with Vitepress and Vue.js
    • Accessing front matter in Vitepress
    • Finalizing the blog with Vitepress and Vue.js

What are Vite and Vitepress?

Vitepress, as the name suggests, is powered by Vite. Vite replaces tools like Rollup and Webpack and aims to address the pain points of Webpack and other frontend build tools. The primary benefits of using Vite are:

  • Faster server start
  • Instant hot module reloading(HMR)
  • Less time configuring

You can find more details about Vite here.

Webpack takes longer to start a development server, which can be unbearable for developers. When the documentation site gets larger, it becomes very annoying to work with Webpack. This was the primary motivation for developing Vitepress. If you have worked with Vuepress before, Vitepress is very similar, and both frameworks focus on building documentation pages with ease. One difference is that Vuepress uses Webpack and Vitepress uses Vite.

Instead of refactoring the codebase of Vuepress, Evan You, the founder of Vue and Vitepress, created the new static site generator with support for Vite and Vue 3. Their layouts are also designed for documentation sites. However, you can create layouts too.

Because it is in its alpha phase, Vitepress still lacks more features than Vuepress, but it is also effortless to work with because the team behind Vitepress wanted to keep it minimal.

It’s worth mentioning that Vitepress does not support the current Vuepress ecosystem because the team at Vitepress wants to keep the theming API minimal so that customizations can be done in the theme. To learn more about how Vitepress differs from Vuepress, refer to their official documentation.

Building a blog with Vitepress and Vue.js

Even though Vitepress can be used to build well-designed documentation sites quickly, you can extend the features of Vitepress to develop your blog. In this article, we will focus on creating a blog and learning the theming and customizations in Vitepress.

After going through the article, you can develop your documentation site or blog using Vitepress and Vue 3. But before diving into the article, please ensure you have a basic understanding of Vue 3.

Creating a static site with Vitepress

Getting started with Vitepress is extremely easy. You can start building your website with Vitepress by installing two primary developer packages. On your working directory, install vue and vitepress as developer dependencies.

To install the packages, run the following commands:

 npm i -D vue vitepress

The -D flag will install the packages as developer dependencies. Now, create a folder inside the working directory and name it whatever you want. Typically, the folder is named docs, so I’ll also use the docs name for the folder.

After creating docs, you’ll need to add some scripts to your package.json file. Copy the following scripts and paste them into your package.json file:

"scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },

Now, the setup for a barebone Vitepress app is ready. Create a Markdown file with the title index.md and add some dummy content inside the docs. Start the development server by running the command npm run docs:dev inside the terminal.

The default development port for Vitepress is localhost:5173. The index.md file will serve as the index.html file or the entry point for your Vitepress static site. If you visit the URL, you’ll be able to view your Vitepress page. Vitepress ships with a default theme. You can use different options the theme provides for customizing your website.

However, because the index.md file is empty, you won’t be able to see anything. You can add some text to index.md to see the changes on your Vitepress page. To customize the features, create a folder called .vitepress (be careful with the dot at the start) inside the docs. This folder is used to configure the Vitepress options.

Three types of configurations can be done on Vitepress: app config, theme config, and front matter config. The app config includes features like site title, Markdown parser customization, and more. At the same time, the theme config determines the application’s look. For example, if you want to add a navigation bar to your website, you’ll need to update the theme config.

The front matter config can override the global configuration for a specific page, app configs, and theme configs.

Vitepress configurations

Create a file called config.js inside this file. Vitepress will read this file to customize your application. This file can also be created with extensions like .ts, .mjs, .mts etc.

Let’s look at a dummy config.js file to understand how the theme can be customized:

export default {
  title: 'My Blog',
  description: 'Just playing around.',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Blog', link: '/articles/' },
      { text: 'External', link: 'https://google.com' },
    ],
  },
};

The object in the above code consists of three options: title, description, and themeConfig. The title and description keys are used for describing your website’s title and meta description. All these are app configurations.

Adding a head key can also add specific links for Google fonts or CSS files to the head. You can find all the app config options here.

The theme configurations can be added to an object with a themeConfig key, as shown above. The nav array defines the elements in the navigation bar, and you can also add dropdowns for navigation items. Here’s an example of how to use this:

export default {
  themeConfig: {
    nav: [
      { text: 'Guide', link: '/guide' },
      {
        text: 'Dropdown Menu',
        items: [
          { text: 'Item A', link: '/item-1' },
          { text: 'Item B', link: '/item-2' },
          { text: 'Item C', link: '/item-3' }
        ]
      }
    ]
  }
}

You can also add sidebars, footers, social links, and more with themeConfig.

Adding posts to the blog with Vitepress and Vue

Now, let’s add some posts to our blog. Create a folder called articles inside the docs folder and add any post in Markdown format. For example, let’s add a Markdown post called article1.md.

Now, open the index.md file we created earlier, and add the article1.md link. The index.md Markdown file will look like this:

[Article 1](/articles/article1) 

Adding this will render the post as below on your homepage:

Demo of the Vitepress Homepage

If you click the link, it will render your Markdown file as an HTML page. One great thing about Vitepress is that you can add Vue 3 components directly to your Markdown files to configure your homepage easily.

Designing blog post cards on the homepage

Let’s add a blog post card on the homepage. Create a components folder inside the docs. Now, create a file called ArticleCard.vue. A Vue component can contain a template, script, and style. First, let’s take a look at the template:

<template>
  <a :href="href">
    <div class="card">
      <div class="flex">
        <div class="media">
          <img :src="image" :alt="title" />
        </div>
        <div class="details">
          <h2 class="title">{{ title }}</h2>
          <p class="excerpt">{{ truncateText(excerpt, 50) }}</p>
          <div class="author">
            <div>
              <h3 class="name">{{ author }}</h3>
              <p class="date">{{ date }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
</template>

The code is fairly simple, as we only use a few props to pass data into the component. Let’s look at the script to explore the props:

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    excerpt: {
      type: String,
      required: true,
    },
    image: {
      type: String,
      required: true,
    },
    author: {
      type: String,
      required: true,
    },
    date: {
      type: String,
      required: true,
    },
    href: {
      type: String,
      required: true,
    },
  },
  methods: {
    truncateText(text, length) {
      if (text.length > length) {
        return text.substring(0, length) + "...";
      }
      return text;
    },
  },
};
</script>

Styling the blog homepage with Vitepress and Vue

The props for the card are title, excerpt, image, author, date, and href. The names of the props are self-explanatory. Along with that, we have a function that truncates the excerpt size. It takes some text and the length of the characters as arguments and returns a truncated text with trailing dots. I won’t explain the basic styling because I assume you know the basics of CSS.

The styles for this component are seen below:

<style scoped>
.card {
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  margin-bottom: 1.5rem;
  overflow: hidden;
  width: 100%;
}

.card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
  transition: ease-in-out 0.2s all;
}

.flex {
  display: flex;
}

.media {
  width: 45%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.details {
  margin-left: 1.2rem;
}

.title {
  border-top: none;
  margin: 0 0;
}

.name {
  margin: 0 0;
  font-size: 0.7rem;
  color: #999;
}
</style>

I’ve also made a hero component. Here’s the code for the Hero.vue:

<template>
  <div class="hero">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">Hey, I'm {{ name || "John Doe" }}.</h1>
        <h2 class="subtitle">
          {{ subtitle }}
        </h2>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
    },
    subtitle: {
      type: String,
      required: true,
    },
  },
};
</script>

<style>
h2.subtitle {
  font-size: 1.2rem;
  border-top: none;
}
</style>

Now that we have created the components, let’s add them to the index.md file:

<script setup>
  import Hero from './components/Hero.vue'
  import ArticleCard from './components/ArticleCard.vue'
</script>

<Hero name="Nemo" subtitle="Welcome to my blog. This one is built with Vitepress and Vue.js. Vitepress is super cool." />

<ArticleCard title="Article 1" excerpt="Lorem i" image="https://images.unsplash.com/photo-1664663751485-c58e9276ccce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1167&q=80" author="John Doe" href="/articles/article1" date="2022-08-01" />

This is just like any standard Vue component. However, if you want to add Markdowns in this file, you can directly add them after the ending script tag.

Your homepage will now look like this:

Blog with Vue.js and Vitepress Component

Right now, we have the default colors set by Vitepress. You can customize the colors of the component through the style tag in the component. For the Markdown-specific files, you can also override the default styles. You can refer to the documentation for more details.

Right now, there’s one problem with the blog. It will be a terrible idea to manually add all the articles to the index .md file every time you add a new article. So, how do we fix this?

Accessing front matter in Vitepress

Vuepress has inbuilt support for front matter fetching. You can access the front matter details by accessing the $site variable. But this is not the case with Vitepress. To keep Vitepress minimal, it does not support it. We have to figure out a way to do this ourselves.

One way to achieve this is to write a simple script that will fetch the front matter details and write it to a JSON file.

Let’s take a look at a simple script for doing this:

// Credits to Divyansh Singh
// Twitter: @_brc_dd

import fs from 'node:fs/promises';
import matter from 'gray-matter';
import removeMd from 'remove-markdown';

const articles = await fs.readdir('./docs/articles');

const data = await Promise.all(
  articles.map(async (article) => {
    const file = matter.read(`./docs/articles/${article}`, {
      excerpt: true,
      excerpt_separator: '

',
});
const { data, excerpt, path } = file;
const contents = removeMd(excerpt)
.trim()
.split(/\r\n|\n|\r/);
return {
...data,
title: contents[0].replace(/\s{2,}/g, '').trim(),
path: path.replace('./docs/', '').replace(/\.md$/, '.html'),
excerpt: contents
.slice(1)
.join('')
.replace(/\s{2,}/g, '')
.trim(),
};
})
);
await fs.writeFile('./data.json', JSON.stringify(data), 'utf-8');

First, we need to install gray-matter and remove-markdown. The gray-matter package reads the front matter from Markdown files, while the remove-markdown package is used to remove any Markdown from a text. To install the packages, run the npm i remove-markdown gray-matter command.

Finalizing the blog with Vitepress and Vue.js

Now let’s discuss the script. The first step is to read the directory where the articles are stored. In this case, the articles are inside the docs/articles folder. We are storing the values inside the folder in a variable called articles.

Now, inside a Promise, we’ll map through each item available inside the articles folder. The Markdown is read using the matter.read function available in the gray-matter package. This function returns all the necessary information like the path, excerpt, etc. It also contains a data object that stores the front matter details.

The excerpt is read by reading the quote(>) after the heading. For the <!-- more --> divider, it would consider the quote as the excerpt. The divider is defined in the above code as excerpt_separator:

---
Author: Nemo
Updated: 2022-06-01
image: https://images.unsplash.com/photo-1664575198263-269a022d6e14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
---
# Si pace ad caput
> lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Now, the required data is restructured from the file. The excerpt is cleaned using the removeMd package. A regex operation is used to clean the CRLF and LF line breaks. Finally, the data is returned.

In the data, the path is replaced from ./docs/articles/article.md to /articles/article.html for rendering it as an HTML. Save the script as getArticles.mjs. If you want, you can keep it without any extensions as well.

The mjs extension is used so that we can use ECMAScript modules. The data generated from the script is written into a  data.json file in JSON format. To run this script every time a new build is started, change your package scripts to this:

"scripts": {
    "docs:dev": "node getArticles.mjs && vitepress dev docs",
    "docs:build": "node getArticles.mjs && vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },

Adding the node getArticles.mjs command at the start ensures that the script runs before the Vitepress server starts.

Now, on the homepage, let’s iterate over the articles and render them in the ArticleCard. A simple v-for loop can be used for rendering the articles. Let’s take a look at the final index.md page:

<script setup>
  import Hero from './components/Hero.vue'
  import ArticleCard from './components/ArticleCard.vue'

  import data from '../data.json' 
</script>

<Hero name="Nemo" subtitle="Welcome to my blog. This one is built with Vitepress and Vue.js. Vitepress is super cool." />

<div v-for="(article, index) in data" :key="index">
  <ArticleCard :title="article.title" :excerpt="article.excerpt" :image="article.image" :author="article.Author" :href="article.path" :date="article.Updated" />
</div>

When you start your Vitepress app, your homepage will look similar to the screenshot below:

Blog Page with Vitepress and Vue.js

Your blog is now ready!

You can visit this Stackblitz repo to check a working version of this, or you can also check out the GitHub repository for the complete code.

Conclusion

The purpose of the article was to help you get started with Vitepress. It showed you how to extend Vitepress to build your blog and customize the pages as you want. Vitepress provides a minimal approach to building static sites for documentation sites or blogs.

Vitepress is still in its alpha stage, so things can break. It is a good idea not to use Vitepress for your production apps just now. But if you want to explore more about the library, you can check out the documentation.

Original article source at 

#webdev #vue #markdown #vitepress 

Why Use WordPress? What Can You Do With WordPress?

Can you use WordPress for anything other than blogging? To your surprise, yes. WordPress is more than just a blogging tool, and it has helped thousands of websites and web applications to thrive. The use of WordPress powers around 40% of online projects, and today in our blog, we would visit some amazing uses of WordPress other than blogging.
What Is The Use Of WordPress?

WordPress is the most popular website platform in the world. It is the first choice of businesses that want to set a feature-rich and dynamic Content Management System. So, if you ask what WordPress is used for, the answer is – everything. It is a super-flexible, feature-rich and secure platform that offers everything to build unique websites and applications. Let’s start knowing them:

1. Multiple Websites Under A Single Installation
WordPress Multisite allows you to develop multiple sites from a single WordPress installation. You can download WordPress and start building websites you want to launch under a single server. Literally speaking, you can handle hundreds of sites from one single dashboard, which now needs applause.
It is a highly efficient platform that allows you to easily run several websites under the same login credentials. One of the best things about WordPress is the themes it has to offer. You can simply download them and plugin for various sites and save space on sites without losing their speed.

2. WordPress Social Network
WordPress can be used for high-end projects such as Social Media Network. If you don’t have the money and patience to hire a coder and invest months in building a feature-rich social media site, go for WordPress. It is one of the most amazing uses of WordPress. Its stunning CMS is unbeatable. And you can build sites as good as Facebook or Reddit etc. It can just make the process a lot easier.
To set up a social media network, you would have to download a WordPress Plugin called BuddyPress. It would allow you to connect a community page with ease and would provide all the necessary features of a community or social media. It has direct messaging, activity stream, user groups, extended profiles, and so much more. You just have to download and configure it.
If BuddyPress doesn’t meet all your needs, don’t give up on your dreams. You can try out WP Symposium or PeepSo. There are also several themes you can use to build a social network.

3. Create A Forum For Your Brand’s Community
Communities are very important for your business. They help you stay in constant connection with your users and consumers. And allow you to turn them into a loyal customer base. Meanwhile, there are many good technologies that can be used for building a community page – the good old WordPress is still the best.
It is the best community development technology. If you want to build your online community, you need to consider all the amazing features you get with WordPress. Plugins such as BB Press is an open-source, template-driven PHP/ MySQL forum software. It is very simple and doesn’t hamper the experience of the website.
Other tools such as wpFoRo and Asgaros Forum are equally good for creating a community blog. They are lightweight tools that are easy to manage and integrate with your WordPress site easily. However, there is only one tiny problem; you need to have some technical knowledge to build a WordPress Community blog page.

4. Shortcodes
Since we gave you a problem in the previous section, we would also give you a perfect solution for it. You might not know to code, but you have shortcodes. Shortcodes help you execute functions without having to code. It is an easy way to build an amazing website, add new features, customize plugins easily. They are short lines of code, and rather than memorizing multiple lines; you can have zero technical knowledge and start building a feature-rich website or application.
There are also plugins like Shortcoder, Shortcodes Ultimate, and the Basics available on WordPress that can be used, and you would not even have to remember the shortcodes.

5. Build Online Stores
If you still think about why to use WordPress, use it to build an online store. You can start selling your goods online and start selling. It is an affordable technology that helps you build a feature-rich eCommerce store with WordPress.
WooCommerce is an extension of WordPress and is one of the most used eCommerce solutions. WooCommerce holds a 28% share of the global market and is one of the best ways to set up an online store. It allows you to build user-friendly and professional online stores and has thousands of free and paid extensions. Moreover as an open-source platform, and you don’t have to pay for the license.
Apart from WooCommerce, there are Easy Digital Downloads, iThemes Exchange, Shopify eCommerce plugin, and so much more available.

6. Security Features
WordPress takes security very seriously. It offers tons of external solutions that help you in safeguarding your WordPress site. While there is no way to ensure 100% security, it provides regular updates with security patches and provides several plugins to help with backups, two-factor authorization, and more.
By choosing hosting providers like WP Engine, you can improve the security of the website. It helps in threat detection, manage patching and updates, and internal security audits for the customers, and so much more.

Read More

#use of wordpress #use wordpress for business website #use wordpress for website #what is use of wordpress #why use wordpress #why use wordpress to build a website

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Tyrique  Littel

Tyrique Littel

1603587600

How To Create a Developer Blog on DevDojo

Nowadays, creating a blog is easy. But, with all the different options available, you might go crazy by just doing the research.

Should you choose WordPress and tweak the theme to get it the way you like, or a static site generator with no admin interface and complicated build processes?

All you want is a simple blog where you can write about the shit you love.

So why can’t it be simpler? Well, now it is with the DevDojo Dev Blog!

Setting up a Domain

Your Dev Blog will have a default subdomain username.devdojo.com, and you may choose to add a custom domain as well.

If you wish to use a custom domain, add a CNAME record to your Cloudflare DNS, with your subdomain in the CONTENT section. Wait a few minutes and you’ll have your custom domain resolving in minutes.

Want a video on how to do this, You got it!

Themes

At the moment of writing this, there are 2 themes you can choose from (many more to come). Each theme will have a light/dark mode and is built for speed!

Themes are built using the awesome TailwindCSS library. If you pair that with PurgeCSS, minimal javascript, and Cloudflare caching. That’s just a recipe for a fast website.

#developer-blog #dev-blog #web-development #portfolio #blog #blogging #developer-tools #writing