vlang/website

The V Programming Language Website

https://vlang.io

note: You can't run this site locally, because of proprietary backend, but you can preview the html file preview.html for styling css.

How To Contribute

There are various way you can contribute to this project. Refactoring writings, updating css, Adding Language support etc. We will cover them one by one.

Styling the website

There is app.css file which is the main stylesheet. Use preview.html to view the rendered html file. This will help you style the website.

Adding Language

Use the english.tr as a reference to add your translation to this project.

website's Issues

https://vlang.io/ website would be better with a favicon :)

I can make one, if You can point me to official logo in vector format :).

Horizontal scrollbar on 1280px

Broken Ved link on index.html

Repo must have been moved. The link resolves to a 404 gh page. I was too lazy to make a pr for that.

Change: https://github.com/medvednikov/ved → https://github.com/vlang/ved

Support languages

The website does not support languages more? I was interested to contribute adding portuguese-BR translation.

Warning: Potential Security Risk Ahead https://vpm.best/

Firefox does not trust the certification website https://vpm.best/

Git is out of date with vlang.io

E.g. https://vlang.io/docs#option has You can also propagate errors info, Git repo does not have this.

Links to playground run go to not new Playground

At the moment, they lead to not new Playground, which personally does not work for me, and most importantly, when I click Run near the script, I want it to open in the editor, and not the standard Hello World code.

V has a new Playground (https://play.vlang.io), and once vlang/playground#10 is merged, it will be possible to link to the code.

After that, links to the Playground should be replaced with the correct ones.

Add KDE & GTK Editor options in editor area

It would be useful to put links to KDE Kate (https://github.com/Larpon/kate-syntax-highlight-v) and GTK editor (https://github.com/scurty-labs/VGTKSourceView) support on the homepage.

• Kate icons: https://invent.kde.org/utilities/kate/-/tree/master/kate/icons
• GTK (probably use one with the letters "G" "T" "K" in the cube would be good since it's easier to identify): https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/GTK.svg/1200px-GTK.svg.png

Modify a number of examples in vlang.io/docs to run correctly in Playground

• 2 examples at https://vlang.io/docs#match

  undefined: `number`
    8| }

unexpected token: `enum`
    1| fn main() {

• 1 example at https://vlang.io/docs#structs

unexpected token: `}`
   11| println(p.x) // Struct fields are accessed using a dot

• 1 example at https://vlang.io/docs#methods

unexpected token: `struct`
    1| fn main() {

• 1 example at https://vlang.io/docs#recvs

unexpected token: `struct`
    1| fn main() {

• 2 examples at https://vlang.io/docs#consts

unexpected token: `}`
    8| println(world)

unexpected token: `}`
   21| println(blue)

• 1 example in https://vlang.io/docs#interfaces

unexpected token: `struct`
    1| fn main() {

• 1 example in https://vlang.io/docs#enums

unexpected token: `}`
    9| println(color) // "1"  TODO: print "green"? 

• 1 example in https://vlang.io/docs#json

undefined: `json`, use `import json`
   14| 

nim

Hi!
I am just going over the comparison table. It compiles some of the most useful data.

Just some comments:

• Perhaps GC, REPL, and package managers could be included?
• Crystal is perhaps in a similar space as nim and V - I'd love to see it included in the comparison. Crystal is designed around coroutines and offers very easy C bindings.
• nim supports cross-compilation
• nim uses async-await to achieve concurrency
• In C/C++ or any language with easy C interoperability you can use openmp for high-performance concurrency/shared memory multiprocessing. C++20 brings co_await, co_yield and other keywords for coroutines.

Homepage link error, check it.

forum ---> https://vlang.io/#//forum.vlang.io/forum
blog ---> https://vlang.io/#//blog.vlang.io

please check it. thx.

Language menu overlaps with doc headings

With Opera 60.0 on Windows 8:

Plugin icons get "lost"

Because there are so many icons across one line... social media, then editor plugins... a lot of people seem to think the whole line is for social media sites, and ask on discord if there's a plugin for editor X.

I would suggest an alternative layout, or perhaps a divider other than just a little extra whitespace, between the 2 sets of icons. It wouldn't hurt to have an <h5> header labeling each section. Something like this:

<div class='social'>
    <span style="display:inline-block">
    <h5>Social Media</h5>
    <a target=_blank href='https://twitter.com/v_language'><svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></a>
    <a target=_blank href='https://discord.gg/vlang'><svg class="svg-inline--fa fa-discord fa-w-14" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"></path></svg></a>
    <a target=_blank href='https://github.com/vlang/v/discussions'><svg class="svg-inline--fa fa-comments fa-w-18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comments" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z"></path></svg></a>
    <a href='https://www.youtube.com/channel/UCLZIElNyubHOvbfudT7KS1A'><svg class="svg-inline--fa fa-youtube fa-w-18" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg></a>
    <a href='https://t.me/vlang_en'><svg class="svg-inline--fa fa-telegram fa-w-16 telegram" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="telegram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" data-fa-i2svg=""><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"></path></svg></a>

    <a target=_blank href='https://twitch.tv/v_language'>
      <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitch" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-twitch fa-w-16 fa-2x"><path fill="currentColor" d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z" class=""></path></svg>
    </a>
    </span>

    <span style="display:inline-block">
    <h5>Editor Plugins</h5>
    <a target=_blank href='https://marketplace.visualstudio.com/items?itemName=vlang-vscode.extension'><img width=27 src='/img/vscode.png'></a>
    <a target=_blank href='https://github.com/ollykel/v-vim'><img width=27 src='/img/vim.png'></a>
    <a target=_blank href='https://github.com/damon-kwok/v-mode'><img width=27 src='/img/emacs.png'></a>
    <a target=_blank href='https://github.com/oversoul/vlang-sublime'><img width=27 src='/img/sublime.png'></a>
    </span>
</div>

This could become even more of an issue if more icons are added (2 more are suggested in a separate issue).

best method to document builtins?

Seems you have many helpful builtins!

I thought of manually adding them to the website docs like I did for the symbols. But we're programmers; we spend 20 hours automating a 4 hour manual documentation PR! ;)

A few ideas

• Manual documentation is fastest at first, but expensive upkeep later.
• Automation
  • I'm partial to jsDoc comments above the code, but it can be verbose as you repeat what the code does in comments
  • automated API cheatsheets; similar to OpenAPI (Swagger)
  • "Documentation Backend" Instead of exporting JavaScript, C code,... you export documentation, or raw API docs (like a JSON tree or jsDocs file) that can be constructed by a tool to build the webpage.
  • using 'tests as documentation', alone or with a combination of the above.

Thanks!

Bad detection of lanugage preferences

The language selector seems to have disappeared from the site, and now the language isn't detected correctly (it seems to be using geographical location for setting the language).

In my language preferences (in Firefox), I have set English (UK), English, and English (US) as my preferences, but as I am opening the page from Spain, it is detecting Spanish as my language. This is incorrect. Also, it is always a good idea to leave the language selector.

Implement RSS for the Blog

online Compiler Explorer

https://godbolt.org/

Seems neat, wondering if a V version could be done?

The playground of the v language official website does not work properly

The playground of the v language official website does not work properly.

play ground: Json decoding/encoding has error

When run Json decoding/encoding
Error message shown:

You just found a bug. V can't compile this program, but it should. Please create a GitHub issue.

modules.vlang.io v duplicate

Rust comparison example is unnecessarily complicated

keeping the same dependencies and logic, the rust code boils down to

use serde::Deserialize;

const STORIES_URL: &str = "https://hacker-news.firebaseio.com/v0/topstories.json";
const ITEM_URL_BASE: &str = "https://hacker-news.firebaseio.com/v0/item";

#[derive(Deserialize)]
struct Story {
    title: String,
}

fn main() {
    let story_ids: Vec<u64> = reqwest::blocking::get(STORIES_URL).unwrap().json().unwrap();
    let mut handles = Vec::new();
    for id in &story_ids[..8] {
        let oid = id.clone();
        handles.push(std::thread::spawn(move || {
            let story_url = format!("{}/{}.json", ITEM_URL_BASE, oid);
            let story: Story = reqwest::blocking::get(&story_url).unwrap().json().unwrap();
            println!("{}", story.title);
        }));
    }
    for handle in handles {
        handle.join().unwrap();
    }
}

with Cargo.toml:

[package]
name = "hnfetch"
version = "0.1.0"
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
serde = { version = "1.0", features = ["derive"] }
reqwest = { version = "0.11", features = ["json", "blocking"] }
tokio = { version = "1", features = ["full"] }

if you want, you can can go full-on with iterators and maps:

use serde::Deserialize;

const STORIES_URL: &str = "https://hacker-news.firebaseio.com/v0/topstories.json";
const ITEM_URL_BASE: &str = "https://hacker-news.firebaseio.com/v0/item";

#[derive(Deserialize)]
struct Story {
    title: String,
}

fn main() {
    let story_ids: Vec<u64> = reqwest::blocking::get(STORIES_URL).unwrap().json().unwrap();
    story_ids[..8]
        .into_iter()
        .copied()
        .map(|id| {
            std::thread::spawn(move || {
                let story_url = format!("{}/{}.json", ITEM_URL_BASE, id);
                let story: Story = reqwest::blocking::get(&story_url).unwrap().json().unwrap();
                println!("{}", story.title);
            })
        })
        .collect::<Vec<_>>()
        .into_iter()
        .for_each(|handle| handle.join().unwrap())
}

but neither case is as scary as the current code. I can offer a PR if needed

Website is behind Git

Would be nice to update site for these:

https://vlang.io/docs#codegen is missing #4.
https://vlang.io/compare is missing #6.

Patreon link should be more specific?

Right now points to https://www.patreon.com/ .
Should point to https://www.patreon.com/vlang ?

We implemented another V-like language with V.

The V language is awesome! In order to port it to the Mono virtual machine. We implemented another V-like language with V. However, due to limited time, we have to rely on Rust and C#.

vlang/v#638
vlang/v#709

We will guarantee that it will be open source after the beta and will donate to the V language after we have more income.

Explain memory safety more

The main thing that confused me when reading through docs is the memory safety.

It mentions some cool things:

• There's no garbage collection or reference counting
• V cleans everything up during compilation
• If your V program compiles, it's guaranteed that it's going to be leak free

I'm not an expert about this, so I got a bit confused. Rust had to make some substantial language changes compared to most languages to achieve this (and then still has Rc wrapper). And not a lot of other languages have managed.

So how exactly does it work in V? The docs don't mention much in the way of language changes to support this. What's the difference with Go that V can do this and Go can't?

I was going to experiment to figure it out, but ran into problems (can't mutate list arguments, another program failed to compile). So I'll post it here - I bet I'm not the only one interested in info.

Bug: "Advanced consts" example doesn't compile

This error is shown instead of the expected output:

.str() methods must be declared as public
    7| }

Codegen example is not updated

https://vlang.io/docs#codegen is missing #4.

irc logo overlaps the downloads dropdown

It shouldn't look like this:

"Fibonacci + memoization" example doesn't compile

I was exploring the website and in the playground I got a compiler error just by running Fibonacci + memoization. I was able to naively fix it (I've never programmed in V) just by adding "mut: " before the "nums []int" field of Fib.

Hope that helps!

'Built-in ORM' codeblock example cannot be displayed

Website info is erroneous

The website claims the following chart:

Go    | 525 MB    | 1m 33s
Rust  | 30 GB     | 45m
GCC   | 8 GB      | 50m
Clang | 90 GB [0] | 25m
Swift | 70 GB [1] | 90m
V     | < 1 MB    | 0.15s - 0.6s

When this charts only hold true in debugging mode and taking into account the dependencies, as the quote for swift states, and for clang its just madness since that number refers to LLVM being compiled in debug mode.

This numbers are only relevant for developers, as this builds are not offered to outsiders of the project. If we want to put V in fair terms then, one has to add up gcc or clang to the size, as these are needed for build (using the same criteria as swift) as a bare minimum.

For example, a realistic number for a rustc install is 550 MB on disk, for go the 100 MB line is barely broken and clang just does not take that much space, in my system it takes 560 MB. Size of an install is evaluated depending on executables used by the user, not source builds with all the options that can make the size bigger enabled + dependencies.

Typing error on main page: that --> than

The text says in §: Translating C/C++ to V

If you plan to develop that code base, you now have everything in one language, which is much safer and easier to develop in that C.

This should be:

If you plan to develop that code base, you now have everything in one language, which is much safer and easier to develop in than C.

V Script Section Redirection Error

V Script redirects to the wrong website (it's a bit hard to tell where it is; do a search for "V Script" on the website).
It should redirect to: https://github.com/vlang/v/blob/master/doc/docs.md#cross-platform-shell-scripts-in-v

Responsiveness on /compare needs improvement

The way the layout is setup with CSS makes the compare page look pretty terrible on mobile because the max-width isn't being respected because of the parent element styling.

Related: is there a plan to make the website not use a proprietary backend so it's easier to contribute improvements?

New V-fan here, excited to jump in 😄

`docs.html` & vlang.io are out of sync

Hello, it seems that docs.html & vlang.io are out of sync.
For example, the "Built-in ORM" example - some errors were fixed in #75, but the website currently does not incorporate them.

fast.vlang.io isn't working?

https://fast.vlang.io/
I think it is not working correctly...
It shows me the data which have too old timestamps.

V 0.3.2 is missing in Latest news

At the moment news about V 0.3.2 is missing in Latest news:

Could an announcement about V 0.3.2 be added just like the ones for V 0.3.1 and V 0.3?

Http module need to be added to module page

Just reposting the issue over to the website repo.

Original Link: vlang/v#1134

Add meta tags.

When you embed the website, there aren't any meta tags at all. Add some things like a picture, description, theme colour and others to make it actually look somewhat appealing to click on.

Distinctive page titles

Currently all pages just have "V Programming Language" as title. This makes it harder for bookmarks and browser tab navigation. It would be good to have "Documentation", "Modules" etc at the start of the page title.

Optimize image assets

As per vone's suggestion:

[9:01 AM] vone: @Alex M I like to PR images on websites, Optimage has saved >1MB, will benefit for those with low Internet bandwidth
[9:01 AM] vone: But I don’t know where to PR?
[9:16 AM] vone: Linux.png has 51KB can be reduce too

Better mobile support (responsive)

Currently the content is not wrapping on my mobile Edge browser, especially for the main menu.
There is also a horizontal scroll bar

https://vlang.io/ Site typographical error

Should this be normal?

Links to V forum and V blog are dead

blog.vlang.io/forum and blog.vlang.io are both dead at the current time and are referenced on the homepage

Team list/grid page

something like this: https://vuejs.org/v2/guide/team.html

use CSS instead of SCSS

Could I switch the SCSS to modern CSS with custom properties & @import.

The easier media queries with SCSS could be worked around with env() or a bit of V code ;)

Reasons: wanting to use Cloudflare Workers or raw.githack.com to serve the 'edge' version from master, easier to view files locally, don't have install overweight CSS transpliers, etc.

Only drawback might be a few selectors might not work on IE11, but any programmer worth his salt would avoid IE for their daily driver, correct? 👯‍♂

Add details in README about how to run the site locally

I was going to try and fix a CSS issue I saw on the Vlang site but I am unsure how to run the site locally since there are no instructions in the README.

website 404 error

http://vpm.vlang.io/ show nginx 404 error，please check it ！

Missing translation keys for most of the content

All the headings are translated in many languages already, but this is not the case for the paragraphs beneath them that offer more information.

Translating these may increase the accessibility for some people as the details for a topic would be available in their native language too.

Automatic syntax highlighting of code

I don't think it's sustainable to use manual markup for strings, comments, keywords, <, and it makes editing the HTML difficult to read.

Can we use JavaScript to automatically highlight code examples? Or server side V? Alternatively we could use markdown instead of HTML for the docs.