marko-js / website Goto Github PK

The markojs.com website

License: MIT License

CSS 10.09% JavaScript 36.12% Marko 53.79%

website's Introduction

Running markojs.com Locally

git clone https://github.com/marko-js/website.git
cd website
git submodule update --init --recursive
npm install
npm run dev

Serving a static build

npm run build
npx http-server ./build

Publishing

npm run publish

Contributing

Pull Requests greatly appreciated!

website's People

Contributors

Stargazers

Watchers

website's Issues

Better embed/unfurl previews

[6:30 PM] mpeg: It seems like notion wikis are not showing the correct info for https://markojs.com/ since the page lacks open graph tags it seems to default to grabbing that google home text because it has a class that contains "description", the image is also not the logo because some OG previews don't support svg as the image, so it seems like it's finding the first png in the page and showing that instead

[6:30 PM] mpeg: https://markojs.com/
[6:31 PM] mpeg: hmm discord not showing the preview at all, I guess also because of the lack of OG tags?

—https://discord.com/channels/725013179465203793/778025234682740776/965741055792283688

Docs troubleshooting streaming link leads to a 404

Typescript docs is missing single file component state definition

Hey, just noticed that there is no docs relating to state definition for single file components like below

class {
  declare state: { x: number, y: number };
  onCreate() {
    this.state = { x: 0, y: 0 }
  }
}

<div>${state.x + state.y}</div>

Mobile menu doesn't close when subsection link is clicked

Steps to reproduce

Go to the website in mobile view
Click the hamburger menu to open up the mobile menu
Click on Installing
Open up the mobile menu again, and then click on Trying out Marko.
Notice how the mobile menu doesn't close

This seems to apply to clicking any links that don't cause a full-page refresh.

Let me know if this is a valid issue. I can work on it if it is.

Errors on startup

After running npm i and npm dev on clean repo, I'm seeing these errors:

Color picker/Search results Toggle is not working

Can't seem to toggle between the Color picker and Search results on the homepage.

Clicking on "Search Results" yields this error in the console, in Chrome.

Uncaught Error: Not allowed
    at h.beginAsync (index-83c75fc1.js:63)
    at c.exports (index-83c75fc1.js:110)
    at index-83c75fc1.js:111
    at b.f (index-83c75fc1.js:71)
    at h._ (index-83c75fc1.js:111)
    at index-83c75fc1.js:112
    at b.f (index-83c75fc1.js:71)
    at g._.l.r.type (index-83c75fc1.js:112)
    at index-83c75fc1.js:55
    at index-83c75fc1.js:47

Please add a statement of browser support

Marko looks cool!

Please add a browser compatibility list or statement somewhere in the docs, ideally in the introduction. https://markojs.com/ doesn't (currently?) work on IE11, so I went looking to see if Marko does, and some time later I think the answer is "yes" but A) It took some time to get there, and B) I'm not sure that's true. :-D src/components/ready.js in Marko's source has a comment about doing a DOM ready check on Internet Explorer, and Marko issue #796 seemed to be IE-specific and got fixed the same day it was reported (impressive!) (and the person reporting the issue said most of their users are on IE11). So that suggests that there's at least some support for IE11, but is it limited? Are the particular things to avoid?

Why

When evaluating a framework of this sort, one of the first questions I and others ask is "What browsers / browser versions are supported?"

Is this something you're interested in working on?

If someone wants to give me the raw info, I'm happy to do some wordsmithing and a PR.

CPU load on https://markojs.com

When I go to https://markojs.com in Safari (14.1.2), the CPU load on my MacBook Air goes up above 100%. If I use the Brave browser, the CPU load is closer to 25%. Still too much.

does not build

Here is the relevant part of my npm log from npm i

...
56 info lifecycle [email protected]~postpack: [email protected]
57 silly lifecycle [email protected]~postpack: no script for postpack, continuing
58 silly pacote git manifest for undefined@github:atom/language-shellscript fetched in 1384ms
59 silly fetchPackageMetaData error for github:deoxxa/dissolve#eeb806f2bad501548138c8e38d0adcf95d4d1bdb Command failed: /usr/local/bin/git clone --depth=1 -q -b 17/head git:/
/github.com/deoxxa/dissolve.git /Users/tcurdt/.npm/_cacache/tmp/git-clone-d8999689
59 silly fetchPackageMetaData warning: templates not found in /var/folders/pf/7vhqx5bn41qddypw08w9jc4w0000gn/T/pacote-git-template-tmp/git-clone-6a6ebdc2
59 silly fetchPackageMetaData warning: Could not find remote branch 17/head to clone.
59 silly fetchPackageMetaData fatal: Remote branch 17/head not found in upstream origin
60 verbose stack Error: Command failed: /usr/local/bin/git clone --depth=1 -q -b 17/head git://github.com/deoxxa/dissolve.git /Users/tcurdt/.npm/_cacache/tmp/git-clone-d8999689
60 verbose stack warning: templates not found in /var/folders/pf/7vhqx5bn41qddypw08w9jc4w0000gn/T/pacote-git-template-tmp/git-clone-6a6ebdc2
60 verbose stack warning: Could not find remote branch 17/head to clone.
60 verbose stack fatal: Remote branch 17/head not found in upstream origin

Docs can become unscrollable

I can do the following on a ~~Chrome laptop~~ laptop with Chrome:

Horizontally shrink the window (or zoom in) so the side menu becomes a header icon.
Open the 'side' menu from the header.
Grow the window so the 'side' menu returns to the side.
observe bug

I can fix this by shrinking the window again (or zooming out) and closing the menu.

Try online: whitespace lacks text for textarea

Moved from marko-js/marko#1390 because this seems to be a site-specific bug, not with marko the library proper.

Marko Version: 4.18.5

Opening Firefox’s Debugger devtools tab has multiple instances of marko$4.18.5, which seems like a safe bet.

Details

The sample template is:

<pre>
  By default, pre tags have
  their whitespace preserved
</pre>
<textarea>
  Same for
  text areas!
</textarea>

Expected Behavior

I would assume this template to transform into basically its source code.

Actual Behavior

<pre>
  By default, pre tags have
  their whitespace preserved
</pre>
<textarea></textarea>

Your Environment

Firefox 70.0a1
MacOS

Steps to Reproduce

Visit https://markojs.com/try-online/?file=%2Fmarko-language-guide%2Fcomponents%2Fwhitespace&gist=

Regular<->Concise syntax switching is broken

In the online documentation, the regular to/from concise syntax switching is broken on: Edge, Chrome, and Firefox.

Errors in Edge and Chrome when pressing the switch button are:

Uncaught TypeError: Cannot read property 'pause' of undefined
    at u.changeSyntax (docs-1115a40e.js:116)
    at p (docs-1115a40e.js:14)
    at HTMLBodyElement.e.<computed>.o.addEventListener.e.<computed> (docs-1115a40e.js:14)

Firefox first loads the page with:

TypeError: n.closest is not a function          docs-1115a40e.js:70:829
    initScrollSpy Marko

And when pressing the switch button:

TypeError: o is undefined            docs-1115a40e.js:116:399
    Marko 3
        changeSyntax
        p
        t

Trouble getting website to run

I downloaded the repo and encountered some issues trying to get it to run. I managed to get it running so the below might help someone else.

I updated all the dependencies, but it was struggling with the following block of code

highlighter.requireGrammarsSync({
  modulePath: require.resolve("language-html/package.json")
});

The terminal said

Error: Cannot find module 'language-html/package.json'

When I tried to manually install the above using npm install language-html/package.json I got a bit console output with errors.

...
13 warnings and 17 errors generated.
make: *** [Release/obj.target/tree_sitter_embedded_template_binding/src/binding.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/limitlessloop/.nvm/versions/node/v12.4.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)

I found an article about debugging issues with make failed with exit code: 2.

https://codeforgeek.com/make-failed-with-exit-code-2/

I followed each step up until step 3, with no luck. Then I tried updating NVM follow the advice on the NVM github repo.

Suddenly it works. I'm not really sure what step in particular fixed the issue but there may be something in here that's useful for others.

Grammar missing required scopeName Error

I am getting the below error, please let me know if I am missing some thing.

markojs-website/node_modules/routes-table/index.js:112
throw e;
^
Error: Unable to compile template at path "markojs-website/routes/index/components/home-components/index.marko". Error: Grammar missing required scopeName property: markojs-website/node_modules/language-javascript/grammars/tree-sitter-javascript.cson
at transformNode (markojs-website/node_modules/marko/src/compiler/Compiler.js:31:27)
at transformTreeHelper (markojs-website/node_modules/marko/src/compiler/Compiler.js:36:5)
at markojs-website/node_modules/marko/src/compiler/Compiler.js:47:9
at ArrayContainer.forEach (markojs-website/node_modules/marko/src/compiler/ast/ArrayContainer.js:18:26)
at HtmlElement.forEachChild (markojs-website/node_modules/marko/src/compiler/ast/Node.js:142:23)
at transformTreeHelper (markojs-website/node_modules/marko/src/compiler/Compiler.js:46:10)
at markojs-website/node_modules/marko/src/compiler/Compiler.js:47:9
at ArrayContainer.forEach (markojs-website/node_modules/marko/src/compiler/ast/ArrayContainer.js:18:26)
at HtmlElement.forEachChild (markojs-website/node_modules/marko/src/compiler/ast/Node.js:142:23)
at transformTreeHelper (markojs-website/node_modules/marko/src/compiler/Compiler.js:46:10)
at markojs-website/node_modules/marko/src/compiler/Compiler.js:47:9
at ArrayContainer.forEach (markojs-website/node_modules/marko/src/compiler/ast/ArrayContainer.js:18:26)
at TemplateRoot.forEachChild (markojs-website/node_modules/marko/src/compiler/ast/Node.js:142:23)
at transformTreeHelper (markojs-website/node_modules/marko/src/compiler/Compiler.js:46:10)
at transformTree (markojs-website/node_modules/marko/src/compiler/Compiler.js:66:9)
at Compiler.compile (markojs-website/node_modules/marko/src/compiler/Compiler.js:161:30)
at _compile (markojs-website/node_modules/marko/src/compiler/index.js:99:33)
at Object.compile (markojs-website/node_modules/marko/src/compiler/index.js:113:12)
at doLoad (markojs-website/node_modules/marko/src/loader/index-default.js:156:45)
at load (markojs-website/node_modules/marko/src/loader/index-default.js:35:16)
at Object. (markojs-website/routes/index/index.marko.js:16:32)
at Module._compile (module.js:570:32)
at Object.markoRequireExtension [as .marko] (markojs-website/node_modules/marko/src/node-require/index.js:124:16)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at tryRequire (markojs-website/node_modules/try-require/index.js:18:16)
at Object.onRoute (markojs-website/node_modules/marko-starter/src/util/loadFilesystemRoutes.js:27:20)
at buildRoute (markojs-website/node_modules/routes-table/index.js:160:37)
at fs.stat.e (markojs-website/node_modules/routes-table/index.js:106:19)
at FSReqWrap.oncomplete (fs.js:123:15)

On mobile view, the contributors flow off the page

Notice how the contributor avatars are flowing off the side of the page.

I'm going to open a PR to add a flex-wrap: wrap to it. It would look like the below:

Let me know if we want the styling to be otherwise.

Layout broken in IE

The website doesn't render properly in IE 11 or older and the problem seems to be related to flexbox.

The body css needs to have height: 100% instead of min-height: 100%.

There are lot of other issues, but I can't help, since I'm no web expert. :)

Cycle through homepage taglines

Add Algolia Docsearch

https://community.algolia.com/docsearch/

Search bar not available when window is small

The side menu is available at the top, but the search bar isn't there.

Errors in try online examples

Chromium / Mac OSX

aysnc / await.marko

conditionals / body-only-if.marko

embedded-js / import.marko

Front page image (marko logo) uses wrong capitalization?

'Marko' is used everywhere else.

My global design (.less) is not being loaded.

A11Y: Yellow on white (and vice versa) fails colour contrast

Yellow on White

White on Yellow

"$" is not rendered properly in some parts of the docs

There are several places where $ in the docs renders the HTML entity instead i.e. $. An exhaustive list of where this occurs:

Guides
Reference
Bundler Integrations
- Lasso
Articles
- Marko vs. React
- 10 Awesome Marko features

If you view source for any of these instances, you'll notice that the raw values are &#36; when they should just be $. Possibly something that needs to be adjusted in the markodown-loader?

Docs’ Overview pages have poor affordance

There’s a probably poorly-considered global CSS rule that nukes underlines from all hyperlinks unless explicitly put back in, which results in these overview pages looking not very helpful.

As seen on https://markojs.com/docs/bundler-integrations-overview/

static-text HTML tags not getting rendered correctly

The output.html section here, is not rendered properly.

Expected:

<div>
    This is just one
    &lt;span if(foo)&gt;
        Hello ${THIS IS NOT VALID}!
    &lt;/span&gt;
    big text block
</div>

Actual:

<div>
    This is just one
    <span if(foo)&gt;
        Hello ${THIS IS NOT VALID}!
    </span&gt;
    big text block
</div>

Upgrade to Lasso v3 and latest marko-starter-lasso

Headings bizarrely HTML-encoded in Google results

https://www.google.com/search?q=whitespace+site:markojs.com

The top result for the Marko docs includes jump links to:

if>, <else-if>, <else> · ‎for> · ‎while> · ‎macro>

So not only are the angle brackets being unnecessarily escaped, they’re also being trimmed?

Not sure why it’s happening, though. As seen via View Source:

<h2 id=if-else-if-else><a name=if-else-if-else class=anchor href=#if-else-if-else><span class=header-link></span></a><code>&lt;if&gt;</code>, <code>&lt;else-if&gt;</code>, <code>&lt;else&gt;</code></h2>

Indented for readability:

<h2 id=if-else-if-else>
  <a name=if-else-if-else class=anchor href=#if-else-if-else>
    <span class=header-link></span>
  </a>
  <code>&lt;if&gt;</code>, <code>&lt;else-if&gt;</code>, <code>&lt;else&gt;</code>
</h2>

There’s also the Table of Contents HTML, but that’s well-formed too:

<li><a href="#if-else-if-else">&lt;if&gt;, &lt;else-if&gt;, &lt;else&gt;</a></li>

I guess while I’m at it, the result titles are also unhelpful, but it’s obvious why: the Marko docs don’t update titles between pages; they all have <title>Marko</title>. (Which is annoying when you have multiple docs open.)

Search bar horizontal overflow on Firefox

On Firefox v53.0a2 the collapsed search bar will overflow horizontally past its container and also cause a horizontal scroll bar to appear. Here is a .gif that illustrates this behavior

Doc sidebar should expand for sub-sections like "Other"

When on the "Other" section under "Server Integrations," the sub-sections should be expanded in the doc-sidebar:

In this case, "Hucwot" should be shown under the "Other" section in the doc-sidebar.

Use verified SSL Certificate

We should use a verified SSL certificate for the website, so it doesn't show a privacy error when visiting https://markojs.com.

Consider using CloudFlare. Free and works great. Here's a tutorial. It's very easy to setup.

Can't find routes

My actions:

git clone [email protected]:marko-js/markojs-website.git
cd markojs-website
npm install
npm start

Output on the last action:

> [email protected] start /Users/tmanyanov/projects/markojs-website
> marko-starter server

[browser-refresh] Watching: /Users/tmanyanov/projects/markojs-website
[browser-refresh] Watching: /Users/tmanyanov/projects/markojs-website/node_modules/marko/docs
[browser-refresh] Ignore rule: static
[browser-refresh] Ignore rule: node_modules
[browser-refresh] Ignore rule: *.marko.js
[browser-refresh] Ignore rule: .cache
[browser-refresh] Ignore rule: .nyc_output
[browser-refresh] Ignore rule: npm-debug.log
[browser-refresh] Ignore rule: .DS_Store
[browser-refresh] Ignore rule: /dist
[browser-refresh] Ignore rule: components-generated/*
[browser-refresh] Ignore rule: !components-generated/.gitkeep
[browser-refresh] App started (pid: 15388)
[marko-starter plugins] Installed plugin: lasso
[marko-starter plugins] Installed plugin: generic-http-server
[marko-starter init] Error starting server. Error: A route must contain a `route.js` file that exports a template or handler, or the route must contain an `index.marko` file.
At: /Users/tmanyanov/projects/markojs-website
    at Object.onRoute (/Users/tmanyanov/projects/markojs-website/node_modules/marko-starter/src/util/loadFilesystemRoutes.js:32:17)
    at buildRoute (/Users/tmanyanov/projects/markojs-website/node_modules/routes-table/index.js:122:25)
    at addRoutes (/Users/tmanyanov/projects/markojs-website/node_modules/routes-table/index.js:73:42)
    at build (/Users/tmanyanov/projects/markojs-website/node_modules/routes-table/index.js:46:9)
    at Promise (/Users/tmanyanov/projects/markojs-website/node_modules/routes-table/index.js:25:9)
    at Object.exports.build (/Users/tmanyanov/projects/markojs-website/node_modules/routes-table/index.js:24:19)
    at module.exports (/Users/tmanyanov/projects/markojs-website/node_modules/marko-starter/src/util/loadFilesystemRoutes.js:12:22)
    at _triggerProjectHook.then (/Users/tmanyanov/projects/markojs-website/node_modules/marko-starter/src/util/createProject.js:86:14)
    at process._tickCallback (internal/process/next_tick.js:109:7)
App stopped unexpectedly
[browser-refresh] Waited 3000ms without receiving "online" from child process. Page refresh triggered over WebSockets connection.
[browser-refresh] Triggering refresh of client pages...
[browser-refresh] Refresh triggered

Phantom contributor image/name on some pages

As seen on: https://markojs.com/docs/core-tags/

If I had to guess, this probably needs an <if> somewhere to guard against falsey data from the GitHub Contributors API.

`undefined` should be mentioned re conditional attributes

In the documentation for conditional attributes, it says:

If an attribute value expression evaluates to null or false then the attribute is not included in the output.

The attribute is also omitted when the value is undefined. That should be listed. Happy to do a PR unless there's a reason not to document this behavior.

I verified this experimentally (first question I had when I read that bit of the doc) and by looking at the code. It's implemented by marko/src/runtime/html/helper-attr.js at what is currently lines 22 & 23:

    } else if (value == null || value === false) {
        return "";

and similarly in /src/runtime/vdom/VElement.js currently on line 406 (currently), which also has this helpful comment a bit before it calling out the intent:

    // Loop over all of the attributes in the attribute map and compare
    // them to the value in the old map. However, if the value is
    // null/undefined/false then we want to remove the attribute

Remove or compress large React logo

There's a 338kb image of the React logo that is served to users. It surely doesn't need to be that big? Looks like its having some serious perf impact on load speed! 🐌