roxiness/routify.dev

The documentation website for Routify, a file-based Router for Svelte

Routify v2 site

This is the repo for the Routify docs site.

Usage

Development npm run dev Dev + codesplitting npm run dev:split Build npm run build

Production

Please make sure that url rewrite redirects to dist/__app.html on our server.

Building and running in production mode

To create an optimised version of the app:

npm run build

Deploy

npm run deploy:now

routify.dev's Issues

If you click the navigation, it doesn't defocus

Problem in parent framework, see roxiness/routify#87

Prettifier

Set up prettifier on a project level so we can be in sync about formatting.

Problem with explanation code

If I try to paste this into a simple HTML template, I get a Svelte compile error.

  "dev": "run-p watch:routify watch:rollup",
  "watch:rollup": "rollup -c -w",
  "watch:routify": "routify",
  ...
}

Even if I decode the entities.

Test mobile menu

Check if the menu functions on mobile.

Page alignments across pages

Feedback from @rixo .

the only thing that bugs me a little is that when you change page between "Getting started" and another page with lateral navigation, the alignment of the content column is just so slightly different that it appears to jump somehow
not sure what could be done... a transition maybe?

Explain layout resetting somewhere

Proposal for first text

You can reset your layout to reset the layout inheritance by adding a filed called _reset.svelte to your folder. This will allow you to “start over” and build up your layout without taking into account nested _layout.svelte files.

Implement Github logo in header

URL parameters page

If I try to render the code from existing parameters page, I get errors.

Do you need to add some hacky workarounds to make Svelte not compile the code?

https://routify.now.sh/docs/parameters

Make a svelte component out of the side navigation

Currently, sidebar is hardcoded 2x in https://routify-2020-khaki.now.sh/guide/scheme-structure and https://routify-2020-khaki.now.sh/configuration/basics . It should become a UI component with some better code abstraction.

Site launch plan

I believe we should just replace https://routify.dev/ (current site) with the routify-site-2020.

Then we just keep working on better docs in the new layout (using Notion)

Otherwise, we have 2 content trees to compare.

What do you think @jakobrosenberg ?

OpenGraph & page titles

Port Opengraph logic from our company site.

• Implement default Open Graph image
• Check if every page has a decent <title>

Implement Note component

See design:

https://www.figma.com/file/5qyHDeDfIz79x8V22dtGQm/Routify?node-id=99%3A10

To look up: current <Note /> component.

Apple touch icon

Implement Apple touch icon.

Code splitting

1. Does Routify support code splitting? (I believe so...)
2. How should we document it?

Just posing the questions to start my own thinking.

Implement the “Configuration” page

Figma link: https://www.figma.com/file/5qyHDeDfIz79x8V22dtGQm/Routify?node-id=10%3A2330

Feedback on decorators page

What is the use case for a decorator?

The usage is there, but an example use case would be good.

Then we could add that to this page.

Single command SCSS: problem when editing partials

When you are editing a partial and save it, the SCSS does not get saved.

The new idea that we can work on the site with just 1 command is good, but the workflow doesn't work yet. It only works if you directly edit style.scss, but you work in partials most of the time.

404 page layout is wrong

e.g. https://routify-2020-khaki.now.sh/guide/props

The footer should be at the bottom, not at the top

Can we get rid of user@localhost?

Takes up unnecessary space.

Favicon

Implement favicon.

Differences between __bundled and __dynamic.html

Is the difference between __bundled and __dynamic.html explained anywhere?

Implement Android theme color

Buttons - Secondary button

Todo - design wise - add a more neutral button to the designs

https://www.figma.com/file/5qyHDeDfIz79x8V22dtGQm/Routify?node-id=1%3A487

& also implement it in the code.

Implement the “Installation” page

Figma link: https://www.figma.com/file/5qyHDeDfIz79x8V22dtGQm/Routify?node-id=10%3A2299

• Implement better look of tabs
• Check spacing and general styling of pre/code tags

Implement pagination component

Design:

Improve selected state in navigation

Config table is not responsive

The mobile nav somehow lists _fallback

Tweak footer license repeat

Footer of website says "Routify is MIT Licensed.".

Depends on discussion here roxiness/routify#91 .

Check correct references on fonts (Overpass - Inter)

Do they load correctly if you don't have them installed?

Browser titles are not accurate

When navigating through the website, the browser <title>s are not always accurate.

Implement fancy ordered list component

Routify marketing plan

Sharing

• Post link to new Routify site on Svelte js reddit
• Post about Routify on hacker news
• Post about Routify on personal blog Johan

Docs

• Improve guide

Blog posts

See detailed discussion in #85

Content marketing

• Video about how to use Routify (post on youtube)

Nav items need to be repeated in the mobile tree

If you open the mobile nav right now, it only shows the first level navigation.

Some of the items will have child pages.

I would like for this navigation to be tweaked so it shows the child pages for parts like “Guide”. Perhaps with an accordion-style component.

Now, when you go to the guide on mobile, and the page has a sub tree, the first thing you see is that list. That's not very neat.

Consider README

With the recent changes in Routify, how much of this README is still relevant?

Especially line 8 on code splitting - is this still relevant?

https://github.com/sveltech/routify-site-2020/blob/master/README.md

Implement the design of the home page

Figma link: https://www.figma.com/file/5qyHDeDfIz79x8V22dtGQm/Routify?node-id=10%3A1417

• Repeating background pattern
• Links in sentence Want to help? Use Routify, file issues, pick up issues. Let’s make the best router for Svelte 3!
• Improve look of large button

Integrate brickss

I tried to integrate the current page from https://routify.now.sh/docs/install into this repo .

Some dependency errors. See https://github.com/Wolfr/routify-site-2020/tree/integratebrickss .

[!] Error: 'css' is not exported by node_modules/emotion/dist/emotion.umd.min.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/@sveltech/bricks/src/components/Modal.svelte (2:10)
1: <script>
2:   import {css} from "emotion/dist/emotion.umd.min.js";
             ^
3:   import { fade } from "svelte/transition";
4:   import { onDestroy } from "svelte";
Error: 'css' is not exported by node_modules/emotion/dist/emotion.umd.min.js
    at error (/Users/johanronsse/Sites/routify-site-2020/node_modules/rollup/dist/rollup.js:5365:30)
    at Module.error (/Users/johanronsse/Sites/routify-site-2020/node_modules/rollup/dist/rollup.js:9708:9)
    at handleMissingExport (/Users/johanronsse/Sites/routify-site-2020/node_modules/rollup/dist/rollup.js:9625:21)
    at Module.traceVariable (/Users/johanronsse/Sites/ro

Examples page

https://routify-2020-khaki.now.sh/examples

Examples page needs some content.

• Auth
• Login

Will these be separate pages?

Deployments page

The deployments page is empty.

I wrote some content, I will make a PR.

We can add instructions to deploy to Now and Netlify?

Deploy command in README it out of date

Deploy command says

npm run build && cd public && now deploy --name routify-site-2020 --prod -A ../now.json

This does not work.

Implement syntax highlighter

Use Prism?

Reference REPL
https://svelte.dev/repl/63752b91a368455184e28a10ad397e7c?version=3.18.0

The pages with a sidebar layout are not responsive yet

Implement improved syntax highlight colors

See https://www.figma.com/file/5qyHDeDfIz79x8V22dtGQm/Routify?node-id=99%3A100

Document static assets and how they are passed through

Is it explained anywhere that you images or other static assets in /static and that on every file save they are passed through to the dist folder?

Image on frontpage has [blog] => blog

Should it be blog instead of [blog]?

I do like that it shows that capability of having params in the folder, but the current example isn't showing it.

pages
  _layout.svelte
  about.svelte            /about
  [blog]
    index.svelte          /recipes
    [post]                /recipes/cupcakes

Code fonts: bring it local

ref jakobrosenberg@b161400

Add uppercase first to name

Not sure where the prettyName is actually called to edit this, so assigning this to you @jakobrosenberg .

Check out the responsiveness of the “contributors“ part

This is causing a horizontal scrollbar on mobile now.

Implement content of Helpers page

https://routify-2020-khaki.now.sh/helpers

What should be on this page?

Bash syntax highlighting

The terminal command help at the bottom of https://routify-2020-khaki.now.sh/configuration/basics needs some bash highlighting.