When I created my light module, it was only intended to provide templates for a blog:
templates/
├── components/
└── pages/
├── blogArticle.yaml
├── blogCategory.yaml
├── blogIndex.yaml
└── blogSearch.yaml
However, now I want to add additional templates (e.g. one-off marketing pages). In order to keep my light module organized I would like to move my blog templates into a "blog" subdirectory:
templates/
├── components/
└── pages/
└── blog/
├── article.yaml
├── category.yaml
├── index.yaml
└── search.yaml
If I simply move the templates into a new "blog" subdirectory, I will get an "Unknown Template" page error and will break my blog. This is because pages reference templates by their path:
mgnl:template -> example-light-module:pages/blogIndex
How do I migrate the templates to a new subdirectory without breaking the existing blog?
The following steps should provide you with a good process:
Step 1: Duplicate and Deprecate the Templates
Duplicate the current templates and move them into a new "blog" subdirectory.
Deprecate the current templates by:
Prepending the word "DEPRECATED" to the template definition titles
Setting visible to false in the template definitions
For example:
title: DEPRECATED - Blog Article
description: Template for a single blog article.
renderType: site
visible: false
Step 2: Reassign and Publish the Pages
Deploy the duplicated templates and the deprecation changes.
Assign the duplicated templates to the blog pages and publish the changes.
Once the pages have been successfully switched to the new templates, delete the deprecated templates.
Related
There are SSR-related problems with several pages in Next.js project that results in errors on npm run build and prevent the project from being built:
pages/
foo/
bar/
[id].jsx
index.jsx
index.jsx
...
For example, bar:
export function getStaticProps() {
return someApiCallThatCurrentlyFails()
...
}
export default function Bar() {...}
As a quick fix, it may be convenient to just not build bar/*.* pages and make routes unavailable.
Can pages be ignored on Next.js build without physically changing or removing page component files in the project?
You can configure the pageExtensions in the next.config.js.
// next.config.js
module.exports = {
pageExtensions: ["page.js"],
}
After configuring this, the only pages with *.page.js will be considered in the below given directory structure.
pages/
├── user
│ └── setting
│ ├── index.js
├── _app.page.js
├── _document.page.js
├── list.page.js
└── theme.ts
Custom file ignores patterns that are not supported yet. You can visit the PR created here, and the solution given here. This is the most satisfactory solution so far.
#Mathilda Here from Nextjs docs: it's necessary for all pages including _app, _document, etc.
https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions
Changing these values affects all Next.js pages, including the following:
- middleware.js
- pages/_document.js
- pages/_app.js
- pages/api/
For example, if you reconfigure .ts page extensions to .page.ts, you would need to rename pages like _app.page.ts.
There are many questions with great answers about downloading a file from a Jupyter Notebook. Here's one I added to earlier. That works, but I am unable to click and download that file for a server started with Voila.
Originally I realized I could not download the basic case when clicked through Voila.
from IPython.display import display, FileLink
local_file = FileLink('./demo.xlsx', result_html_prefix="Click here to download: ")
display(local_file)
That is from my notebook. I am able to click on the link and download the file. When I start my notebook with Voila it looks more like this..
Clicking the link give a 404 ☝️ for a voila server started with
voila mynotebook.ipynb
Since the file clearly isn't being served... I found this link here and tried:
voila mynotebook.ipynb --VoilaConfiguration.file_whitelist="['demo.xlsx']"
which unfortunately didn't work.
I saw static content can be served in voila.. I'll keep playing down this road. Has anyone done this before?
I was able to make it work by hosting my file to download as static content as I was trying before. All of this is for a Mac, but it'll be similar for other platforms.
I had to define a custom template in order to get files at static_root so they could be served. Relevant documentation is here for setting up a custom template.
It isn't difficult.. you essentially create a directory where it's expected, copy over some of the default files, then add/change what you will. terminal record might look something like this:
cd ~/Library/Jupyter/voila/templates/
mkdir foobar
export DEFAULT_TEMPLATE_PATH=~/anaconda3/envs/voilatest/share/jupyter/voila/templates/default
export TEMPLATE_PATH=~/Library/Jupyter/voila/templates/foobar
cp -r $DEFAULT_TEMPLATE_PATH/nbconvert_templates $TEMPLATE_PATH
cp -r $DEFAULT_TEMPLATE_PATH/templates $TEMPLATE_PATH
to which the tree will look like this in my new custom template:
{~/Library/Jupyter/voila/templates/foobar}$ tree .
.
├── nbconvert_templates
│ ├── base.tpl
│ ├── lab.tpl
│ └── voila.tpl
├── static
│ └── demo.xlsx
└── templates
├── 404.html
├── browser-open.html
├── error.html
├── page.html
└── tree.html
3 directories, 9 files
notice the static directory with demo.xlsx. I added that in. That is the file I wanted to download via the link.
Starting voila like this...
voila mynotebook.ipynb --template=foobar
Now.. in mynotebook.ipynb
Use an HTML Anchor tag to do the download. At least FileLink fails for me with the following error.
Path (/voila/static/demo.xlsx) doesn't exist. It may still be in the process of being generated, or you may have the incorrect path.
which isn't much of a surprise since the actual path the file is stored at isn't that. It just happens to be the static content uri.
%%html
Download Excel Sheet
Using an anchor will make it hardcoded and I didn't have any issues. I'll also be able to style the anchor more anyways. One catch.. This doesn't work in a regular notebook anymore since it's a URI to a served resource under voila.
Im trying to version control a website generated with R-Markdown's render_site function by pushing it directly from the output directory, the default _site folder. Problem is, every time i call the render_site function it clears most of the content of the .git folder (save for the objects folder within) and breaks the link between the local and remote directory. Is there any way to stop this from happening? Curiously, the clean_site function clears the exact same folders and files from the .git folder so im guessing the problem is related to some post build cleanup.
The webpage directory looks something like this:
_site/
├── /.git
├── /index_files
├── /about_files
├── intex.html
├── about.html
└── styles.css
The .git folder before rendering the site looks like:
.git/
├── /hooks
├── /info
├── /logs
├── /objects
├── /refs
├── COMMIT_EDITMSG
├── config
├── description
├── FETCH_HEAD
├── HEAD
└── index
And after building only the objects folder is left:
.git/
└── /objects
I should also note that rendering each .Rmd file into htmls individually does not cause the same problem.
The default clean function for the site generator doesn't exclude anything. You can replace it fairly easily, using a scheme something like this:
Choose a name for your new generator, and put it in the YAML for the index.Rmd file, e.g.
site: my_site
Write my_site to modify the default generator (or the original custom one,
if you already had one):
my_site <- function(...) {
site <- rmarkdown:::default_site(...) # or bookdown::bookdown_site(...), etc.
# Modify the clean function
oldclean <- site$clean
site$clean <- function(...) {
files <- oldclean(...)
# leave out any filename containing .git
grep("[.]git", files, value = TRUE, invert = TRUE)
}
site
}
I haven't tested this and might have the pattern wrong in the new clean function, but it should be close to working.
You might also want to suggest to the rmarkdown authors (on their Github site) that it would be nice to have a way to mark certain files to exclude from cleaning.
I am using Sprockets with Sinatra, as suggested in Sinatra's page docs, but I can't make it work.
When I go to localhost:4567, the page loads correctly but with no styles. If I go to localhost:4567/assets/app.css, I get a not found error. I wonder what I am missing or what is wrong in the way I am using Sprockets?
This is my folder structure:
├── assets
│ ├── css
│ │ ├── app.css
│ │ ├── base.css
│ │ └── normalize.css
├── bin
│ └── app
├── lib
│ ├── app_assets.rb
│ └── main.rb
├── spec
│ ├── spec_helper.rb
│ └── main_spec.rb
├── views
│ └── index.erb
├── Gemfile
├── Gemfile.lock
├── Rakefile
├── .rspec
└── .ruby-version
The contents of app.css are:
//= require normalize
//= require base
The contents of app_assets.rb are:
module AppAssets
def self.environment root_path
environment = Sprockets::Environment.new root_path
environment.append_path './assets/css/'
environment
# get assets
get '/assets/*' do
env['PATH_INFO'].sub!('/assets', '')
settings.environment.call(env)
end
end
end
The contents of lib/main.rb are:
require 'sinatra'
require 'sprockets'
require 'app_assets'
class Main < Sinatra::Base
set :views, "#{settings.root}/../views"
get '/' do
erb :index
end
end
The file views/index.erb contains the line:
<link rel="stylesheet" href="assets/app.css">
And the contents of bin/app are:
#!/usr/bin/env ruby
$LOAD_PATH.unshift File.join(File.dirname(__FILE__), '..', 'lib')
require 'sinatra'
require 'sprockets'
require 'app_assets'
require 'main'
Main.run!
Which I run typing:
$ bin/app
Any help would be appreciated, I'm sure I made something wrong but I can't see what. Can anybody spot it?
The app_assets.rb file is the problem here. When you require this file inside another file, the methods you define inside this module are not automatically included. You need to explicitly include AppAssets wherever you need the self.environment method to exist.
The second issue here is that self.environment is not equivalent to settings.environment. If I understand correctly, what you're trying to do is define the asset routing whenever the module gets included. To achieve this one way is to use the included hook for modules. This hook gets run every time you include a module inside a context. If you use that, the code in app_assets.rb turns to:
module AppAssets
def self.included(klass)
environment = Sprockets::Environment.new klass.settings.root
# note the change to path. Since the file where this gets included
# is inside a sub-folder, we need to traverse to one level above.
environment.append_path '../assets/css/'
klass.set :environment, environment
klass.get '/assets/*' do
env['PATH_INFO'].sub!('/assets', '')
klass.settings.environment.call(env)
end
end
end
The klass argument to this hook is the class into which this module is included. In our case this is the Sinatra class you've described in main.rb. That file looks like:
class Main < Sinatra::Base
include AppAssets
# Same as what you have
end
There's a Sinatra Recipes article about using Sprockets with Sinatra: http://recipes.sinatrarb.com/p/asset_management/sprockets?#article
I made an app using the ionic framework and would like to make it run on meteor.
The App is build on top of the sidemenu template you can create tying ionic start myApp sidemenu.
Here is the Git of the port or just
> git clone https://github.com/Xample/sidemenu-meteor
> cd sidemenu-meteor/
> meteor
How to do so ?
Create both projects:
ionic start ionicProject sidemenu
meteor create meteorProject
Reorganise the files:
All the important files within a ionicframework comes into a www folder start to reorganise them to fit with the meteor good practices.
In the meteor root folder, create a client, server, css, and public folder
Copy the ionicProject/www/css files into the meteorProject/css
Copy all the js files, the main index.html and the templates files into the meteorProject/client folder
All the other files which only needs to be served (images, audio, documents) must be put into the meteorProject/public folder
The ionicProject/www/lib will be replaced by a meteor package. Do not include it.
The meteorProject/server folder will remain empty
Now we need to ensure meteor will load the app.js file before the other one.
Create the meteorProject/client/lib folder
Move the app.js file into that one
You should have the following structure:
├── client
│ ├── controllers.js
│ ├── index.html
│ ├── lib
│ │ └── app.js
│ └── templates
│ ├── browse.html
│ ├── login.html
│ ├── menu.html
│ ├── playlist.html
│ ├── playlists.html
│ └── search.html
├── css
│ └── style.css
├── public
│ └── img
│ └── ionic.png
└── server
Import the meteor packages:
meteor add urigo:ionic
That one will include other dependent packages below:
added mquandalle:bower at version 0.1.11
added urigo:ionic at version 0.0.6
added urigo:angular at version 0.4.8
added urigo:angular-ui-router at version 0.6.1
added tinytest at version 1.0.3
bower package allows to use the bower package manager. Well basically it is a tool to allow easily include other packages using a description file (which might be used by angular but not packaged for meteor yet) you will likely be using it for installing ngCordova. No need for this sidemenu port btw
ionic correspond to all the files we did not copied from the ionicProject/www/lib folder. Those are now included by default into your meteor project.
angular is basically the same as for ionic. Angular is now included into your meteor project as well + the 'angular-meteor' which will be useful for bootstrapping the app.
angular-ui-router same story but for the router. This will be mandatory to handle the url and forward them to the right page. It's a little bit like the Iron router but angular way and compatible
tinytest is added per default, no real need for the port
Edit and port the files
index.html
- On meteor the header and the body are parsed and generated back by the framework. In short, meteor packs everything and generate the script and style files for you. Conversely if you wanted to just include a css or a js file through a or tag within the header / body, they will be dismissed by meteor. This is the reason why we are using packages instead of adding our script by ourselves. This to say, that most of the content of the index.html is now useless and needs to be removed. Even the is not allowed by meteor because it will generate it for you as well…. Moreover, no attributes are allowed in the body. This might be problematic for bootstrapping our project with angularJS. The html files looks like this now:
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>sidemenu-meteor</title>
</head>
<body>
<ion-nav-view></ion-nav-view>
</body>
The templates files:
All the .html files not being into the server, public or private folder are loaded and packed into one big html by meteor. As meteor will search for and pack all the .html it will load but not include all the one within a <template> tag. All the files into the meteorProject/client/templates must be edited and encapsulated within a <template> tag bearing the name attribute such that we can easily find it back later on. For example the template browse.html will be packed such as:
<template name="browse.html">
... browse html file content ...
</template>
Repeat this step for all the templates.
app.js
Open the file and add the manual bootstrap for angularJS, in this manner you manually add the ng-app tag on top of the document.
Meteor.startup(function ()
{
angular.bootstrap(document, ['starter']);
});
Note: You need to do it once everything is loaded, for this reason we are doing it within the Meteor.startup function caller.
Add the 'angular-meteor' package to your application, this will change the Angular delimiters to [[ and ]] instead of the regular conflicting with meteor's handlebars {{ and }}
angular.module('starter', ['angular-meteor','ionic', 'starter.controllers'])
Replace the router's templateUrl path url references to something we can use with the loaded by meteor templates. Remember, we are not storing the templates into the meteorProject/public folder, therefore we cannot load them through templateUrl:'someUrl' you might do it but I do not recommend
templateUrl: "templates/menu.html", becomes template:UiRouter.template('menu.html'),
Repeat this step for all the states in the state provider.
controller.js
just replace the template dependency of the modal. From:
$ionicModal.fromTemplateUrl('templates/login.html', {
to
$ionicModal.fromTemplateUrl('login.html', {
This is again to ensure the template is found correctly. Note that for some reason we have been able to load the templateUrl using the template name. It's still a mystery to me, probably a meteor package port have added this sugar…
playlists.html (but possibly other files)
Edit all the files and replace all the {{ occurrences to [[ and }} to ]]
Basically in this example you will only have to edit playlists.html
Last step
At this stage you should be able to run the ionic sidemenu project under meteor. There is only one thing missing. As you can remember, we changed the delimiters {{}} -> [[]]. Unfortunately, some of the ionic directives are using the regular {{}} delimiters and expect them to be functional. Therefore while adding a <ion-item href="myPath"> this is compiled to something like <a href={{$href()}}> so… now if you click on a menu, the href will be wrong and you will not be redirected to the right page… To fix this, a workaround is to embed the <ion-item> within your own <a href="myRef"> tag. I'm still looking for a better solution…. Still to do so, just refactor all your ion-item such that:
<ion-item nav-clear menu-close href="#/app/search">
becomes encapsulated in
<a href="/#/app/search">
<ion-item nav-clear menu-close >
Search
</ion-item>
</a>
Dependencies
Last thing, meteor will try to minify your javascript during the deployment, doing so you might break the angular code if it is not using the array notation. Just refactor all your methods putting your methods into an array. Read the guide for more information. An alternative is to avoid meteor to minify the code deploying using --debug meteor deploy --debug your-project.meteor.com
To get this tutorial:
> git clone https://github.com/Xample/sidemenu-meteor
> cd sidemenu-meteor/
> meteor